app/enhance/platforms.ts

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1// Platform tabs on a software how-to (docs/KNOWLEDGE-BASE.md, S4). The server renders every platform's command under
2// its name, with links to each, which is the whole page with script off and what a machine reads. This turns each set
3// into tabs: one platform shows, the links become tabs (arrow keys move between them), and the reader's platform is
4// remembered on the device and used for every set on every how-to. With nothing remembered it starts from the system the
5// browser reports, else the first tab.
6
7const KEY = "dustinedwards.platform";
8
9const guess = () => {
10  const ua = navigator.userAgent;
11  return /Windows/.test(ua) ? "windows" : /Mac OS X|Macintosh/.test(ua) ? "macos" : /Linux|X11/.test(ua) ? "linux" : null;
12};
13
14let chosen: string | null = null;
15try {
16  chosen = localStorage.getItem(KEY);
17} catch {
18  // Storage refused: the choice lasts the page.
19}
20chosen ??= guess();
21
22const sets = [...document.querySelectorAll<HTMLElement>("[data-platforms]")];
23
24function paint() {
25  for (const set of sets) {
26    const tabs = [...set.querySelectorAll<HTMLAnchorElement>(".procedure-platform-tabs a[data-platform]")];
27    const panels = [...set.querySelectorAll<HTMLElement>(".procedure-platform[data-platform]")];
28    const shown = panels.some((p) => p.dataset.platform === chosen) ? chosen : (panels[0]?.dataset.platform ?? null);
29    for (const tab of tabs) {
30      const on = tab.dataset.platform === shown;
31      tab.setAttribute("aria-selected", String(on));
32      tab.tabIndex = on ? 0 : -1;
33    }
34    for (const panel of panels) panel.hidden = panel.dataset.platform !== shown;
35  }
36}
37
38function choose(platform: string, focus: HTMLAnchorElement | null) {
39  chosen = platform;
40  try {
41    localStorage.setItem(KEY, platform);
42  } catch {
43    // Not remembered; this page still follows the choice.
44  }
45  paint();
46  focus?.focus();
47}
48
49for (const set of sets) {
50  const list = set.querySelector<HTMLElement>(".procedure-platform-tabs");
51  if (!list) continue;
52  list.setAttribute("role", "tablist");
53  list.setAttribute("aria-label", "Platform");
54  const tabs = [...list.querySelectorAll<HTMLAnchorElement>("a[data-platform]")];
55  for (const tab of tabs) {
56    const panel = set.querySelector<HTMLElement>(`.procedure-platform[data-platform="${tab.dataset.platform}"]`);
57    if (!panel) continue;
58    tab.setAttribute("role", "tab");
59    tab.id ||= `${panel.id}-tab`;
60    tab.setAttribute("aria-controls", panel.id);
61    panel.setAttribute("role", "tabpanel");
62    panel.setAttribute("aria-labelledby", tab.id);
63    tab.addEventListener("click", (event) => {
64      event.preventDefault();
65      choose(tab.dataset.platform ?? "", tab);
66    });
67    tab.addEventListener("keydown", (event) => {
68      const at = tabs.indexOf(tab);
69      const by = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
70      if (!by) return;
71      event.preventDefault();
72      const next = tabs[(at + by + tabs.length) % tabs.length];
73      if (next) choose(next.dataset.platform ?? "", next);
74    });
75  }
76  set.dataset.enhanced = "";
77}
78
79paint();