app/enhance/header.ts

Functions

Imports

It imports app/lib/transition-abort.mjs. No module of this repo imports it.

Source

1import { enhance } from "capsomer/behaviour/site-header";
2import { applyTheme } from "capsomer/behaviour/theme-switch";
3
4import { isAbandonedTransition } from "~/lib/transition-abort.mjs";
5
6// The header module is on every public page, so the one rejection the browser raises when it abandons a view
7// transition under a reload or a second navigation is let go here (app/lib/transition-abort.mjs). Any other
8// rejection still reaches the console and the page error report.
9window.addEventListener("unhandledrejection", (event: PromiseRejectionEvent) => {
10  if (isAbandonedTransition(event.reason)) event.preventDefault();
11});
12
13/*
14 * Capsomer's site header behaviour (capsomer/behaviour/site-header) on the markup site-header.tsx writes by
15 * hand: each section's panel (hover opens at once, a click or a key holds it, Escape and a press outside close
16 * it, arrow keys move through it, focus goes back to its button), each icon control's tip, and the phone's
17 * Menu button and sheet. With no script none of this runs and nothing is lost: the panels open by
18 * popovertarget and the sheet by invoker commands.
19 */
20const header = document.querySelector<HTMLElement>("[data-site-header]");
21if (header) {
22  /*
23   * Capsomer drops a control's aria-describedby when it wires the control's tip, because its tip only repeats
24   * the name. The search link's description is not its tip but the shortcut hint (theme.ts), so it is kept.
25   */
26  const described = Array.from(
27    header.querySelectorAll<HTMLElement>("[aria-describedby]"),
28    (element) => [element, element.getAttribute("aria-describedby") ?? ""] as const,
29  );
30  enhance();
31  for (const [element, ids] of described) element.setAttribute("aria-describedby", ids);
32
33  /*
34   * Capsomer sends focus to a panel's button whenever the panel closes with nothing focused, which is also how
35   * a panel opened by hover closes when the pointer leaves. That left a focus ring on a button the mouse never
36   * pressed. Focus that was nowhere before the close goes back to nowhere; focus inside the panel still returns
37   * to its button. Capsomer's own toggle listener runs first, so this one undoes only that case.
38   */
39  for (const panel of header.querySelectorAll<HTMLElement>("[data-nav-panel]")) {
40    let unfocused = false;
41    panel.addEventListener("beforetoggle", (event) => {
42      if ((event as ToggleEvent).newState === "closed") unfocused = !document.activeElement || document.activeElement === document.body;
43    });
44    panel.addEventListener("toggle", (event) => {
45      if ((event as ToggleEvent).newState !== "closed" || !unfocused) return;
46      const button = header.querySelector<HTMLElement>(`[aria-controls="${panel.id}"]`);
47      if (button && document.activeElement === button) button.blur();
48    });
49  }
50
51  // The sheet is the behaviour's now; the invoker commands were its no-script path.
52  for (const element of header.querySelectorAll("[commandfor]")) {
53    element.removeAttribute("command");
54    element.removeAttribute("commandfor");
55  }
56}
57
58/*
59 * The public theme is a cookie the server reads (app/lib/theme.ts, enhance/theme.ts). Capsomer's theme switch
60 * remembers the same choice in this browser for the admin plane, whose shell reads it before first paint, so
61 * a choice made on the public site is the admin's too.
62 */
63document.addEventListener("submit", (event) => {
64  const form = event.target;
65  const submitter = (event as SubmitEvent).submitter;
66  if (!(form instanceof HTMLFormElement) || !form.matches("[data-theme-toggle]")) return;
67  if (!(submitter instanceof HTMLButtonElement)) return;
68  if (submitter.value === "light" || submitter.value === "dark") applyTheme(submitter.value);
69});