Verified Commit ca0c7297 authored by Aral Balkan's avatar Aral Balkan
Browse files

Use actual buttons in the tab bar; remove unused old code

parent a0384b75
......@@ -215,19 +215,26 @@ pre, code[class*="language-"], pre[class*="language-"], pre code span {
}
#platform-tabs li {
font-size: 1.5em;
display: inline-block;
margin-left: 0.25em;
padding-bottom: 0.25em;
padding-right: 1em;
padding-left: 1em;
padding-top: 0.25em;
}
#platform-tabs li.active {
#platform-tabs li button.active {
background-color: lightblue;
}
#platform-tabs li button {
font-family: inherit;
font-size: 1.5em;
border: none;
background-color: transparent;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1rem;
padding-bottom: 1.15rem;
margin: 0;
}
/********************************************************************************
* *
......
......@@ -121,10 +121,10 @@
<section id='get-started'>
<h2>Get started in seconds</h2>
<ul id='platform-tabs'>
<li data-platform='linux' tabindex='0' role='button' aria-pressed='false'>Linux</li>
<li data-platform='macos' tabindex='0' role='button' aria-pressed='false'>macOS</li>
<li data-platform='windows' tabindex='0' role='button' aria-pressed='false'>Windows</li>
<ul id='platform-tabs' class='hidden'>
<li><button data-platform='linux'>Linux</button></li>
<li><button data-platform='macos'>macOS</button></li>
<li><button data-platform='windows'>Windows</button></li>
</ul>
<ol id='install'>
......
......@@ -68,24 +68,25 @@ if (currentPlatform !== 'unknown') {
// Display the tab control that allows people to see instructions for
// platforms other than their own.
const platformTabs = $$('#platform-tabs li')
const platformTabsControl = $('#platform-tabs')
const platformTabs = $$('#platform-tabs li button')
platformTabs.forEach(platformTab => {
if (platformTab.dataset.platform === currentPlatform) {
platformTab.className = 'active'
}
const operationHandler = event => {
platformTab.addEventListener('click', event => {
const requestedPlatform = event.target.dataset.platform
platformTabs.forEach(platformTab => {
platformTab.className = requestedPlatform === platformTab.dataset.platform ? 'active' : ''
})
displayInstructionsForPlatform(requestedPlatform)
}
platformTab.addEventListener('click', operationHandler)
platformTab.addEventListener('keydown', operationHandler)
})
})
platformTabsControl.classList.remove('hidden')
// Hide all the elements that only make sense to show if JavaScript
// is not being executed.
$$('.no-js').forEach(node => node.className='hidden')
......@@ -93,102 +94,3 @@ if (currentPlatform !== 'unknown') {
// Show only the elements that pertain to the current platform.
displayInstructionsForPlatform(currentPlatform)
}
// TODO: Add option to display the page as if the person was on a different platform.
// displayInstallationInstructionsFor(currentPlatform)
// function displayInstallationInstructionsFor(currentPlatform) {
// if (currentPlatform !== 'unknown') {
// visiblePlatform = currentPlatform
// // Show the instructions for the detected platform and hide the ones for the other platforms.
// ;['linux', 'mac', 'windows'].forEach(platform => {
// $(`#install-${platform}`).hidden = !(platform === currentPlatform)
// $(`#link-${platform}`).hidden = (platform === currentPlatform)
// })
// // Cosmetic: don’t show the last separator if there’s no content after it.
// $('#pipe-before-windows').hidden = (currentPlatform === 'windows')
// // Show links to instructions for other platforms.
// $('#links-to-instructions-for-other-platforms').hidden = false
// // Show all the copy to clipboard buttons.
// $$('.copy-to-clipboard').forEach(button => button.hidden = false)
// // Rewrite the view installation script section copy to simplify it and link directly
// // to the relevant script.
// $('#view-installation-script-source').innerHTML = (currentPlatform === 'windows') ? '<a href="https://should-i-pipe.it/https://sitejs.org/install.txt">view the source code</a>' : '<a href="https://should-i-pipe.it/https://sitejs.org/install">view the source code</a>'
// // Also rewrite the terminal-related bit of the copy to specify exactly the environment that
// // we support on Windows 10.
// $('#terminal-copy').innerHTML = (currentPlatform === 'windows') ? 'a PowerShell session running under <a href="https://github.com/Microsoft/Terminal">Windows Terminal</a>' : 'your terminal'
// // Hide/display any Windows-only caveats.
// $$('.windows-only').forEach(node => node.hidden = !(currentPlatform === 'windows'))
// // Set the radio button states to match the installation instructions shown.
// setRadioButtonStates()
// // Display specific version-related information for the download.
// displayVersionInformation()
// // Disable the advanced customisation if for Windows. (At least for now, given that
// // – surprise, surprise – Windows is again problematic in that you cannot pass arguments
// // to downloaded scripts. See https://github.com/PowerShell/PowerShell/issues/8816#issuecomment-460327955)
// $('#advanced-customisation').hidden = (currentPlatform === 'windows')
// }
// }
// function copyInstallationInstructionsToClipboardFor (platform) {
// const installationCommand = $(`#code-${platform}`)
// const selectedCode = document.createRange()
// selectedCode.selectNode(installationCommand)
// window.getSelection().addRange(selectedCode)
// try {
// const success = document.execCommand('copy')
// if (!success) console.log('Failed to copy installation command.')
// } catch(error) {
// console.log('Copy command threw an error', error)
// }
// // Remove the selections - NOTE: Should use
// // removeRange(range) when it is supported
// window.getSelection().removeRange(selectedCode)
// }
// function customiseDownloadMethod (type) {
// const currentInstallationString = $(`#code-${visiblePlatform}`)
// currentInstallationString.innerHTML = currentInstallationString.innerHTML.replace(type === 'wget -qO-' ? 'curl -s' : 'wget -qO-', type)
// updateTitleState(currentInstallationString)
// }
// function customiseVersion (version) {
// const currentInstallationString = $(`#code-${visiblePlatform}`)
// currentInstallationString.innerHTML = currentInstallationString.innerHTML.replace(/(<span class="token keyword">\| bash<\/span>).*?$/, `$1${version}`)
// updateTitleState(currentInstallationString)
// }
// function updateTitleState (currentInstallationString) {
// const currentInstallationSectionTitle = $(`#title-details-${visiblePlatform}`)
// currentInstallationSectionTitle.innerHTML = currentInstallationString.innerHTML === defaultInstallationString[visiblePlatform] ? '' : ' (customised)'
// console.log('current', currentInstallationString.innerHTML)
// console.log('default', defaultInstallationString[visiblePlatform])
// }
// function setRadioButtonStates () {
// const currentInstallationString = $(`#code-${visiblePlatform}`).innerHTML
// Object.keys(radioButtons).forEach(function(radioButtonValue) {
// if (currentInstallationString.includes(radioButtonValue)) {
// radioButtons[radioButtonValue].checked = true
// }
// })
// // Special case: release.
// if (!currentInstallationString.includes('alpha') && !currentInstallationString.includes('beta')) {
// radioButtons['release'].checked = true
// }
// }
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment