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 @@
<h2>Get started in seconds</h2>
<ul id='platform-tabs'>
<li class='active'>Linux</li>
<li>macOS</li>
<li>Windows</li>
<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>
<ol id='install'>
<li>
<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>
......
......@@ -52,16 +52,46 @@ if (userAgent.includes('windows')) { currentPlatform = 'windows'}
// If we know the platform, remove instructions that are not
// relevant for the current platform.
if (currentPlatform !== 'unknown') {
$$('.no-js').forEach(node => node.className='hidden')
;['.linux', '.macos', '.windows'].forEach(className => {
$$(className).forEach(node => {
if (!node.classList.contains(currentPlatform)) {
console.log('hiding')
node.className = 'hidden'
}
function displayInstructionsForPlatform(platform) {
console.log('displaying instructions for', platform, $$)
;['.linux', '.macos', '.windows'].forEach(className => {
$$(className).forEach(node => {
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.
......
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