Widget:Guides/PlatformSwitcher: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<form> | <form> | ||
<fieldset> | <fieldset id="platform-switcher"> | ||
<legend>Select your operating system:</legend> | <legend>Select your operating system:</legend> | ||
| Line 22: | Line 22: | ||
<script type="module" defer> | <script type="module" defer> | ||
const containers = document.querySelectorAll('.platform | const containers = document.querySelectorAll('.platform'); | ||
switch_thing(' | |||
const plat = navigator.platform; | |||
const os = plat.includes("Mac") ? "macos" | |||
: plat.includes("Win") ? "windows" | |||
: plat.includes("Linux") ? "linux" | |||
: plat.includes("Haiku") ? "haiku" | |||
: "windows"; | |||
switch_thing(os); | |||
const os_radio = document.querySelector(`[value=${os}]`); | |||
os_radio.checked = true; | |||
const fieldset = document.getElementById("platform-switcher"); | |||
for (const elem of fieldset.querySelectorAll('input')) { | |||
elem.addEventListener('change', () => switch_thing(elem.value)) | |||
} | |||
function switch_thing(value) { | function switch_thing(value) { | ||
| Line 29: | Line 45: | ||
x.style.display = "none" | x.style.display = "none" | ||
} | } | ||
document. | const platform_elems = document.querySelectorAll('.' + value); | ||
platform_elems.forEach(x => x.style.display = "unset"); | |||
} | } | ||
</script> | </script> | ||
Latest revision as of 15:49, 26 January 2025
<form>
<fieldset id="platform-switcher"> <legend>Select your operating system:</legend>
<label>
<input type="radio" name="platform" value="windows" checked /> Windows
</label>
<label>
<input type="radio" name="platform" value="macos" /> macOS
</label>
<label>
<input type="radio" name="platform" value="linux" /> Linux
</label>
<label>
<input type="radio" name="platform" value="haiku" /> Haiku
</label>
</fieldset>
</form>
<script type="module" defer> const containers = document.querySelectorAll('.platform');
const plat = navigator.platform; const os = plat.includes("Mac") ? "macos"
: plat.includes("Win") ? "windows"
: plat.includes("Linux") ? "linux"
: plat.includes("Haiku") ? "haiku"
: "windows";
switch_thing(os); const os_radio = document.querySelector(`[value=${os}]`); os_radio.checked = true;
const fieldset = document.getElementById("platform-switcher");
for (const elem of fieldset.querySelectorAll('input')) {
elem.addEventListener('change', () => switch_thing(elem.value))
}
function switch_thing(value) {
for (const x of containers) {
x.style.display = "none"
}
const platform_elems = document.querySelectorAll('.' + value);
platform_elems.forEach(x => x.style.display = "unset");
} </script>