app/enhance/theme.ts

Functions

Imports

It imports app/lib/enhance-url.mjs, app/lib/theme.ts. No module of this repo imports it.

Source

1// No "apply the stored theme on load" step: the server already wrote the attribute, so a script
2// that re-applied it could only agree, or race.
3
4import { ENHANCE_URL_PREFIX } from "~/lib/enhance-url.mjs";
5import { serializeThemeCookie, isWritableTheme, type WritableTheme } from "~/lib/theme";
6
7function enhanceThemeToggle() {
8  document.addEventListener("submit", (event) => {
9    const form = event.target;
10    if (!(form instanceof HTMLFormElement)) return;
11    if (!form.matches("[data-theme-toggle]")) return;
12
13    const submitter = (event as SubmitEvent).submitter;
14    if (!(submitter instanceof HTMLButtonElement)) return;
15
16    const choice = submitter.value;
17    if (!isWritableTheme(choice)) return;
18
19    event.preventDefault();
20    apply(choice, form);
21  });
22}
23
24enhanceThemeToggle();
25enhanceSearchTrigger();
26
27/**
28 * A custom event rather than `import()`, because vite wraps every `import()` in a preload helper that
29 * would be a large share of this bundle. 'self' allows the inserted script with no nonce.
30 */
31const PALETTE_OPEN = "palette:open";
32
33let requested = false;
34
35/**
36 * The caller has already prevented the anchor's default, so a refusal or a load failure must fall
37 * back to `/search`, never to nothing, and says why in the console first.
38 */
39function toSearch(reason: unknown) {
40  console.error("palette:", reason);
41  location.assign("/search");
42}
43
44function openPalette() {
45  const trigger = document.querySelector<HTMLElement>("[data-palette]");
46  // The URL is hashed by the app build; the `?url` import in `search-trigger.tsx` is its one statement.
47  // Held to the loader's rule, because 'self' trusts whatever the loader inserts from this origin. The
48  // element resolves and normalizes the URL, so `..` is gone before the check reads it, and the
49  // origin is followed by the prefix's own `/`, so a longer host cannot match. Inline rather than a
50  // shared function: every public page loads this bundle, and its budget has no room for one.
51  const raw = trigger?.dataset.palette;
52  const script = document.createElement("script");
53  if (raw) script.src = raw;
54  if (!script.src.startsWith(location.origin + ENHANCE_URL_PREFIX)) {
55    toSearch(raw);
56    return;
57  }
58
59  if (!requested) {
60    requested = true;
61    trigger?.setAttribute("aria-busy", "true");
62
63    /*
64     * Stylesheets are awaited because the bundle calls `showModal` as soon as it runs. A failed
65     * stylesheet resolves: an unstyled dialog is better than none.
66     */
67    const pending = [];
68    for (const href of (trigger?.dataset.paletteCss ?? "").split(",").filter(Boolean)) {
69      const link = document.createElement("link");
70      link.rel = "stylesheet";
71      link.href = href;
72      pending.push(
73        new Promise((resolve) => {
74          link.addEventListener("load", () => resolve(null));
75          link.addEventListener("error", () => resolve(null));
76        }),
77      );
78      document.head.appendChild(link);
79    }
80
81    script.type = "module";
82    pending.push(
83      new Promise((resolve, reject) => {
84        script.addEventListener("load", () => resolve(null));
85        script.addEventListener("error", reject);
86      }),
87    );
88    document.head.appendChild(script);
89
90    void Promise.all(pending).then(
91      () => {
92        trigger?.removeAttribute("aria-busy");
93        document.dispatchEvent(new Event(PALETTE_OPEN));
94      },
95      (reason) => {
96        trigger?.removeAttribute("aria-busy");
97        toSearch(reason);
98      },
99    );
100    return;
101  }
102
103  document.dispatchEvent(new Event(PALETTE_OPEN));
104}
105
106/**
107 * The hint is set only from script, so a reader whose script did not run is never told about a key
108 * that would do nothing. Platform detection is best-effort: the handler accepts meta or ctrl either way.
109 */
110function isMac(): boolean {
111  const nav = navigator as Navigator & { userAgentData?: { platform?: string } };
112  const platform = nav.userAgentData?.platform ?? navigator.platform ?? navigator.userAgent;
113  return /mac/i.test(platform);
114}
115
116function enhanceSearchTrigger() {
117  const mac = isMac();
118  const chord = mac ? "Command-K" : "Control-K";
119
120  // Text before unhide, so the stale server placeholder is never the announced description.
121  for (const hint of document.querySelectorAll<HTMLElement>("[data-search-hint]")) {
122    hint.textContent = `Press ${chord} to search`;
123    hint.hidden = false;
124  }
125
126  for (const trigger of document.querySelectorAll<HTMLElement>("[data-search-trigger]")) {
127    /* The header tip names the keys as key caps (Capsomer's tooltip), only now that they do something. */
128    const tip = trigger.querySelector(".cap-site-header-tip");
129    if (tip && !tip.querySelector(".cap-keys")) {
130      const keys = document.createElement("span");
131      keys.className = "cap-keys";
132      for (const key of [mac ? "\u2318" : "Ctrl", "K"]) keys.appendChild(document.createElement("kbd")).textContent = key;
133      tip.appendChild(keys);
134    }
135    trigger.dataset.shortcutHint = "shown";
136    trigger.addEventListener("click", (event) => {
137      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
138      event.preventDefault();
139      openPalette();
140    });
141  }
142
143  document.addEventListener("keydown", (event) => {
144    const meta = event.metaKey || event.ctrlKey;
145    if (meta && event.key.toLowerCase() === "k") {
146      event.preventDefault();
147      openPalette();
148      return;
149    }
150    // Deliberately no bare-slash shortcut: it collides with find-in-page.
151  });
152}
153
154function apply(choice: WritableTheme, form: HTMLFormElement) {
155  const root = document.documentElement;
156
157  root.setAttribute("data-theme", choice);
158
159  document.cookie = serializeThemeCookie(choice);
160
161  /*
162   * Activating a button hides it via the cascade, and `display: none` drops focus to `<body>`, so move
163   * focus to its twin, only when the hidden one held it. `preventScroll` because Chrome scrolls a
164   * focused sticky-header descendant toward its un-stuck position.
165   */
166  const active = document.activeElement;
167  if (active instanceof HTMLElement && form.contains(active) && active.offsetParent === null) {
168    const shown = [...form.querySelectorAll<HTMLElement>("button[value]")].find(
169      (button) => button.offsetParent !== null,
170    );
171    shown?.focus({ preventScroll: true });
172  }
173}