Widget:Guides/PlatformSwitcher: Difference between revisions

@@ Line 1: / Line 1: @@
 <form>
-   <fieldset>
+   <fieldset id="platform-switcher">
      <legend>Select your operating system:</legend>
@@ Line 20: / Line 20: @@
    </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>