components/catalog/catalog.ts

Functions

Imports

It imports components/catalog/catalog-core.ts. Imported by components/catalog/catalog.react.tsx.

Source

1// The catalog's behaviour: it makes a form that already works (a GET to the page's own address) update in place.
2// Typing in the search box, ticking a filter, choosing a sort, removing a chip, following a sort header or a page
3// link fetches the same address a person would have navigated to and swaps the regions of the page that changed.
4// The address is written with `history.replaceState`, so a filter change is not a step in the history, and what
5// is in the address is what a person shares. If the fetch fails for any reason the browser simply navigates there:
6// an error is never swallowed, and the page is never left showing a state its address does not describe.
7//
8// The core (field declarations, the address, the counts) is in catalog-core.ts and is re-exported here, so
9// `capsomer/behaviour/catalog` is the one import for a site that renders its own markup.
10export * from "./catalog-core.ts";
11
12const REGIONS = ["count", "chips", "results", "pages"] as const;
13const SEARCH_DELAY_MS = 250;
14const NARROW = "(max-width: 56rem)";
15
16// The form's state as an address: every named control with a value, in the order the form lists them. The
17// server reads it with parseCatalogParams, so a control that is not in the address is at its default.
18export function formHref(form: HTMLFormElement): string {
19  const params = new URLSearchParams();
20  for (const [name, value] of new FormData(form)) {
21    if (typeof value === "string" && value.trim() !== "") params.append(name, value.trim());
22  }
23  const query = params.toString();
24  return query ? `${form.getAttribute("action") ?? ""}?${query}` : (form.getAttribute("action") ?? "");
25}
26
27function region(root: ParentNode, name: string): HTMLElement | null {
28  return root.querySelector<HTMLElement>(`[data-catalog-region="${name}"]`);
29}
30
31// Updates the filters in place when focus is inside them (the person is mid-choice, and replacing the controls
32// would drop their place), and replaces them otherwise. Counts follow either way.
33function swapFilters(current: HTMLElement, next: HTMLElement): void {
34  if (!current.contains(document.activeElement)) {
35    current.innerHTML = next.innerHTML;
36    return;
37  }
38  for (const input of Array.from(next.querySelectorAll<HTMLInputElement>("input[name]"))) {
39    const mine = Array.from(current.querySelectorAll<HTMLInputElement>(`input[name="${CSS.escape(input.name)}"]`)).find((i) => i.value === input.value);
40    const count = input.closest("label")?.querySelector(".cap-catalog-n")?.textContent;
41    const where = mine?.closest("label")?.querySelector(".cap-catalog-n");
42    if (where && count !== undefined && count !== null) where.textContent = count;
43  }
44}
45
46export function attachCatalog(form: HTMLFormElement): () => void {
47  if (form.dataset.capReady !== undefined) return () => {};
48  form.dataset.capReady = "";
49  form.dataset.enhanced = "";
50
51  let timer: number | undefined;
52  let pending: AbortController | undefined;
53
54  const setTray = (open: boolean) => {
55    if (open) form.dataset.tray = "open";
56    else delete form.dataset.tray;
57  };
58
59  // Fetches an address and swaps the changed regions. `focusCount` moves focus to the count line when the control
60  // the person used is one the swap removes (a chip, a page link), so keyboard and screen reader users land
61  // somewhere that says what changed.
62  const go = async (href: string, focusCount = false): Promise<void> => {
63    pending?.abort();
64    const mine = new AbortController();
65    pending = mine;
66    const results = region(form, "results");
67    results?.setAttribute("aria-busy", "true");
68    try {
69      const res = await fetch(href, { headers: { Accept: "text/html" }, signal: mine.signal, credentials: "same-origin" });
70      if (!res.ok) throw new Error(`catalog: ${href} answered ${res.status}`);
71      const doc = new DOMParser().parseFromString(await res.text(), "text/html");
72      const next = doc.querySelector<HTMLFormElement>(`form[data-catalog="${CSS.escape(form.dataset.catalog ?? "")}"]`);
73      if (!next) throw new Error(`catalog: ${href} has no catalog "${form.dataset.catalog}"`);
74      for (const name of REGIONS) {
75        const mineRegion = region(form, name);
76        const nextRegion = region(next, name);
77        if (mineRegion && nextRegion) mineRegion.innerHTML = nextRegion.innerHTML;
78      }
79      const filters = region(form, "filters");
80      const nextFilters = region(next, "filters");
81      if (filters && nextFilters) swapFilters(filters, nextFilters);
82      const opener = form.querySelector('[data-catalog-tray="open"]');
83      const nextOpener = next.querySelector('[data-catalog-tray="open"]');
84      if (opener && nextOpener) opener.textContent = nextOpener.textContent;
85      // The search and sort controls follow the address when it was changed by a link, not by them.
86      const q = form.querySelector<HTMLInputElement>('input[name="q"]');
87      const nq = next.querySelector<HTMLInputElement>('input[name="q"]');
88      if (q && nq && document.activeElement !== q) q.value = nq.defaultValue;
89      const sort = form.querySelector<HTMLSelectElement>('select[name="sort"]');
90      const nextSort = next.querySelector<HTMLSelectElement>('select[name="sort"]');
91      if (sort && nextSort) {
92        sort.innerHTML = nextSort.innerHTML;
93        sort.value = Array.from(nextSort.options).find((o) => o.defaultSelected)?.value ?? "";
94      }
95      // The address the server says this state has (the form can send defaults a link would not).
96      history.replaceState(history.state, "", next.dataset.catalogHref ?? href);
97      if (focusCount) {
98        const count = region(form, "count");
99        count?.setAttribute("tabindex", "-1");
100        count?.focus({ preventScroll: true });
101        count?.scrollIntoView({ block: "nearest" });
102      }
103    } catch (error) {
104      if ((error as { name?: string }).name === "AbortError") return;
105      // Not swallowed: the browser goes to the address, which is what a link would have done.
106      console.error(error);
107      location.assign(href);
108    } finally {
109      if (pending === mine) {
110        region(form, "results")?.setAttribute("aria-busy", "false");
111        pending = undefined;
112      }
113    }
114  };
115
116  const onInput = (e: Event) => {
117    const t = e.target as HTMLElement | null;
118    if (!t?.matches('input[type="search"], input[type="text"]')) return;
119    window.clearTimeout(timer);
120    timer = window.setTimeout(() => void go(formHref(form)), SEARCH_DELAY_MS);
121  };
122  const onChange = (e: Event) => {
123    const t = e.target as HTMLElement | null;
124    if (!t?.matches('input[type="checkbox"], input[type="radio"], select')) return;
125    void go(formHref(form));
126  };
127  const onSubmit = (e: SubmitEvent) => {
128    e.preventDefault();
129    window.clearTimeout(timer);
130    void go(formHref(form), true);
131  };
132  const onClick = (e: MouseEvent) => {
133    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
134    const target = e.target as Element | null;
135    const tray = target?.closest<HTMLElement>("[data-catalog-tray]");
136    if (tray && form.contains(tray)) {
137      e.preventDefault();
138      const open = tray.dataset.catalogTray === "open";
139      setTray(open);
140      if (open) form.querySelector<HTMLElement>(".cap-catalog-filters input")?.focus();
141      else tray.closest("form")?.querySelector<HTMLElement>('[data-catalog-tray="open"]')?.focus();
142      return;
143    }
144    const link = target?.closest<HTMLAnchorElement>("a[href]");
145    if (!link || !form.contains(link) || !link.matches(".cap-catalog-chip, .cap-catalog-clear, .cap-page, .cap-table-sort, [data-catalog-link]")) return;
146    const url = new URL(link.href, location.href);
147    if (url.origin !== location.origin || url.pathname !== new URL(form.action, location.href).pathname) return;
148    e.preventDefault();
149    void go(`${url.pathname}${url.search}`, true);
150  };
151  const onKey = (e: KeyboardEvent) => {
152    if (e.key === "Escape" && form.dataset.tray === "open") {
153      setTray(false);
154      form.querySelector<HTMLElement>('[data-catalog-tray="open"]')?.focus();
155    }
156  };
157
158  form.addEventListener("input", onInput);
159  form.addEventListener("change", onChange);
160  form.addEventListener("submit", onSubmit);
161  form.addEventListener("click", onClick);
162  form.addEventListener("keydown", onKey);
163  const media = window.matchMedia(NARROW);
164  const onMedia = () => {
165    if (!media.matches) setTray(false);
166  };
167  media.addEventListener("change", onMedia);
168
169  return () => {
170    window.clearTimeout(timer);
171    pending?.abort();
172    form.removeEventListener("input", onInput);
173    form.removeEventListener("change", onChange);
174    form.removeEventListener("submit", onSubmit);
175    form.removeEventListener("click", onClick);
176    form.removeEventListener("keydown", onKey);
177    media.removeEventListener("change", onMedia);
178    delete form.dataset.capReady;
179    delete form.dataset.enhanced;
180    setTray(false);
181  };
182}
183
184// Attaches to every catalog under root that is not attached yet. Returns a function that detaches them all.
185export function enhance(root: ParentNode = document): () => void {
186  const undo = Array.from(root.querySelectorAll<HTMLFormElement>("form[data-cap='catalog']:not([data-cap-ready])")).map(attachCatalog);
187  return () => undo.forEach((f) => f());
188}