Widget:Guides/PlatformSwitcher: Difference between revisions
Created page with "test test test <script>alert(1);</script>" |
No edit summary |
||
| (13 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<form> | |||
<fieldset id="platform-switcher"> | |||
<legend>Select your operating system:</legend> | |||
<script> | <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> | |||