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

Platform switching tab control is now functional

parent 62c2fee6
...@@ -122,15 +122,15 @@ ...@@ -122,15 +122,15 @@
<h2>Get started in seconds</h2> <h2>Get started in seconds</h2>
<ul id='platform-tabs'> <ul id='platform-tabs'>
<li class='active'>Linux</li> <li data-platform='linux' tabindex='0' role='button' aria-pressed='false'>Linux</li>
<li>macOS</li> <li data-platform='macos' tabindex='0' role='button' aria-pressed='false'>macOS</li>
<li>Windows</li> <li data-platform='windows' tabindex='0' role='button' aria-pressed='false'>Windows</li>
</ul> </ul>
<ol id='install'> <ol id='install'>
<li> <li>
<h3>Install Site.js.</h3> <h3>Install Site.js.</h3>
<p>Launch a terminal on Linux/macOS (only use Windows Terminal on Windows) and follow along.</p> <p>Launch <span class='linux macos'>a terminal window</span> <span class='no-js'>(on Windows, </span><span class='windows'>a PowerShell session running under <a href="https://github.com/Microsoft/Terminal">Windows Terminal</a></span><span class='no-js'>)</span> and follow along.</p>
<aside>The following command pipes the installation script into your shell. The installation script downloads the correct Site.js binary for your platform and places it on your path. <strong>Make sure you understand what any script does before piping it into your shell.</strong> View the source of the <a class='linux macos' href="https://should-i-pipe.it/https://sitejs.org/install">Linux and macOS</a><span class='no-js'> and </span><a class='windows' href="https://should-i-pipe.it/https://sitejs.org/install.txt">Windows</a> installation script<span class='no-js'>s</span>.</aside> <aside>The following command pipes the installation script into your shell. The installation script downloads the correct Site.js binary for your platform and places it on your path. <strong>Make sure you understand what any script does before piping it into your shell.</strong> View the source of the <a class='linux macos' href="https://should-i-pipe.it/https://sitejs.org/install">Linux and macOS</a><span class='no-js'> and </span><a class='windows' href="https://should-i-pipe.it/https://sitejs.org/install.txt">Windows</a> installation script<span class='no-js'>s</span>.</aside>
......
...@@ -52,16 +52,46 @@ if (userAgent.includes('windows')) { currentPlatform = 'windows'} ...@@ -52,16 +52,46 @@ if (userAgent.includes('windows')) { currentPlatform = 'windows'}
// If we know the platform, remove instructions that are not // If we know the platform, remove instructions that are not
// relevant for the current platform. // relevant for the current platform.
if (currentPlatform !== 'unknown') { if (currentPlatform !== 'unknown') {
$$('.no-js').forEach(node => node.className='hidden')
;['.linux', '.macos', '.windows'].forEach(className => { function displayInstructionsForPlatform(platform) {
$$(className).forEach(node => { console.log('displaying instructions for', platform, $$)
if (!node.classList.contains(currentPlatform)) { ;['.linux', '.macos', '.windows'].forEach(className => {
console.log('hiding') $$(className).forEach(node => {
node.className = 'hidden' if (node.classList.contains(platform)) {
} node.classList.remove('hidden')
} else {
node.classList.add('hidden')
}
})
}) })
}
// Display the tab control that allows people to see instructions for
// platforms other than their own.
const platformTabs = $$('#platform-tabs li')
platformTabs.forEach(platformTab => {
if (platformTab.dataset.platform === currentPlatform) {
platformTab.className = 'active'
}
const operationHandler = 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)
}) })
// Hide all the elements that only make sense to show if JavaScript
// is not being executed.
$$('.no-js').forEach(node => node.className='hidden')
// 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. // TODO: Add option to display the page as if the person was on a different platform.
......
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