app/enhance/search.ts

Functions

Imports

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

Source

1/**
2 * Deliberately not the palette's combobox: these results are page content, and `role="option"`
3 * would flatten each to its accessible name. ArrowDown from the input moves real focus into the
4 * list; arrow keys anywhere else still scroll the page.
5 */
6
7const MIN_QUERY = 3;
8const DEBOUNCE_MS = 200;
9
10interface JsonHit {
11  url: string;
12  type: string;
13  title: string;
14  documentTitle: string | null;
15  anchor: string | null;
16  snippet: string;
17}
18
19interface JsonResponse {
20  total?: number;
21  results?: JsonHit[];
22}
23
24let sequence = 0;
25let debounce: ReturnType<typeof setTimeout> | undefined;
26
27function currentUrl(form: HTMLFormElement, query: string): string {
28  const params = new URLSearchParams(new FormData(form) as unknown as string[][]);
29  params.set("q", query);
30  return `/search?${params.toString()}`;
31}
32
33function renderHit(hit: JsonHit): HTMLLIElement {
34  const item = document.createElement("li");
35  item.className = "search-result";
36
37  const head = document.createElement("div");
38  head.className = "search-result-head";
39  const kind = document.createElement("span");
40  kind.className = "search-type";
41  kind.dataset.type = hit.type;
42  kind.textContent = hit.type;
43  const heading = document.createElement("h2");
44  heading.className = "search-result-title";
45  const link = document.createElement("a");
46  // Reduced to a path so the link matches the server's exactly and a same-origin check is the whole guard.
47  const parsed = new URL(hit.url, location.origin);
48  link.href = parsed.pathname + parsed.hash;
49  link.textContent = hit.title;
50  heading.appendChild(link);
51  head.appendChild(kind);
52  head.appendChild(heading);
53  item.appendChild(head);
54
55  if (hit.anchor && hit.documentTitle) {
56    const context = document.createElement("p");
57    context.className = "search-result-context";
58    context.textContent = `in ${hit.documentTitle}`;
59    item.appendChild(context);
60  }
61
62  const snippet = document.createElement("p");
63  snippet.className = "search-snippet";
64  // The one field written as HTML: the server escaped the text before substituting its <mark> markers.
65  snippet.innerHTML = hit.snippet;
66  item.appendChild(snippet);
67
68  return item;
69}
70
71function links(list: HTMLOListElement): HTMLAnchorElement[] {
72  return [...list.querySelectorAll<HTMLAnchorElement>(".search-result-title a")];
73}
74
75export function enhanceSearch(): void {
76  const form = document.querySelector<HTMLFormElement>(".search-form");
77  const input = document.querySelector<HTMLInputElement>("#q");
78  const list = document.querySelector<HTMLOListElement>(".search-results");
79  const count = document.querySelector<HTMLParagraphElement>(".search-count");
80  if (!form || !input) return;
81
82  let results: HTMLOListElement | null = list;
83
84  function ensureList(): HTMLOListElement | null {
85    if (results?.isConnected) return results;
86    const body = document.querySelector(".search-body");
87    if (!body) return null;
88    const created = document.createElement("ol");
89    created.className = "search-results";
90    /* insertBefore, never .prepend(): the global Element here is HTMLRewriter's. */
91    body.insertBefore(created, body.firstChild);
92    results = created;
93    return created;
94  }
95
96  /* Not aria-busy: this runs on every pause in typing, and a live region that says "busy"
97     on each one talks over the count, which already announces the result. */
98  const setBusy = (on: boolean) => {
99    if (!form) return;
100    if (on) form.setAttribute("data-pending", "");
101    else form.removeAttribute("data-pending");
102  };
103
104  async function run(query: string) {
105    const mine = ++sequence;
106    const url = currentUrl(form!, query);
107    setBusy(true);
108    let data: JsonResponse;
109    try {
110      const response = await fetch(url, { headers: { Accept: "application/json" } });
111      if (!response.ok) throw new Error(`HTTP ${response.status}`);
112      data = (await response.json()) as JsonResponse;
113    } catch {
114      // Said, not silent: the old results must not stand under a new query as if they answered it.
115      if (mine !== sequence) return;
116      setBusy(false);
117      if (results?.isConnected) results.textContent = "";
118      if (count) count.textContent = "Live results are unavailable. Press Enter to search.";
119      return;
120    }
121    if (mine !== sequence) return;
122    setBusy(false);
123
124    const target = ensureList();
125    if (!target) return;
126    target.textContent = "";
127    for (const hit of data.results ?? []) target.appendChild(renderHit(hit));
128    // The server's "Nothing matched" answered the query the page opened with, not this one.
129    if (target.childElementCount > 0) document.querySelector(".search-zero")?.remove();
130
131    if (count) {
132      const total = data.total ?? 0;
133      count.textContent = total === 0 ? "No results" : `${total} result${total === 1 ? "" : "s"}`;
134    }
135
136    // Replaced, not pushed, so a reader who typed eight characters need not press Back eight times.
137    history.replaceState(null, "", url);
138    followQuery(query);
139  }
140
141  /**
142   * The server drew the sort, filter and pager links and the Ask question for the query it was sent.
143   * After retyping they must act on the query on screen, not the old one.
144   */
145  function followQuery(query: string) {
146    for (const link of document.querySelectorAll<HTMLAnchorElement>(
147      ".search-sort a, .search-facets a, .search-active-filters a, .search-pagination a",
148    )) {
149      const next = new URL(link.href, location.origin);
150      next.searchParams.set("q", query);
151      link.href = next.pathname + next.search;
152    }
153    const mount = document.querySelector<HTMLElement>("[data-ask-mount]");
154    if (mount) mount.dataset.askQuestion = query;
155  }
156
157  input.addEventListener("input", () => {
158    const query = input.value.trim();
159    clearTimeout(debounce);
160    // Below the floor the server's list is not cleared: blanking it under a reader mid-word is worse.
161    if (query.length < MIN_QUERY) return;
162    debounce = setTimeout(() => void run(query), DEBOUNCE_MS);
163  });
164
165  input.addEventListener("keydown", (event) => {
166    if (event.key !== "ArrowDown") return;
167    const first = results?.isConnected ? links(results)[0] : undefined;
168    if (!first) return;
169    event.preventDefault();
170    first.focus();
171  });
172
173  document.addEventListener("keydown", (event) => {
174    /*
175     * The input's own ArrowDown has already moved focus to the first result by the time this bubbles
176     * here, and handling it again would skip that result.
177     */
178    if (event.target === input) return;
179    const target = results;
180    const active = document.activeElement;
181    if (!target?.isConnected) return;
182    if (!(active instanceof HTMLAnchorElement) || !target.contains(active)) return;
183
184    const all = links(target);
185    const index = all.indexOf(active);
186    if (index === -1) return;
187
188    if (event.key === "ArrowDown") {
189      event.preventDefault();
190      all[Math.min(index + 1, all.length - 1)]?.focus();
191    } else if (event.key === "ArrowUp") {
192      event.preventDefault();
193      if (index === 0) input!.focus();
194      else all[index - 1]?.focus();
195    }
196  });
197
198  input.addEventListener("keydown", (event) => {
199    if (event.key !== "Escape" || input.value === "") return;
200    event.preventDefault();
201    input.value = "";
202  });
203}
204
205enhanceSearch();