初始提交: Gitea 项目代码

2026-05-30 22:47:36 +08:00
commit f288f76350
6116 changed files with 776822 additions and 0 deletions
@@ -0,0 +1,116 @@
+import {debounce} from 'throttle-debounce';
+import {GET} from './fetch.ts';
+import {errorName} from './errors.ts';
+import {html, htmlRaw} from '../utils/html.ts';
+import {urlQueryEscape} from '../utils/url.ts';
+
+export type SearchResult = {
+  title: string;
+  description?: string;
+  image?: string;
+};
+
+function buildResultHTML(result: SearchResult): string {
+  const img = result.image ? html`<div class="image"><img src="${result.image}" alt=""></div>` : '';
+  const desc = result.description ? html`<div class="description">${result.description}</div>` : '';
+  return html`${htmlRaw(img)}<div class="content"><div class="title">${result.title}</div>${htmlRaw(desc)}</div>`;
+}
+
+function buildResultElement(result: SearchResult): HTMLElement {
+  const item = document.createElement('div');
+  item.className = 'result';
+  item.innerHTML = buildResultHTML(result);
+  return item;
+}
+
+// single delegated outside-click handler; each attachSearchBox registers a {container, hide} entry
+const outsideClickBoxes = new Set<{container: HTMLElement; hide: () => void}>();
+document.addEventListener('click', (event) => {
+  for (const box of outsideClickBoxes) {
+    if (!box.container.contains(event.target as Node)) box.hide();
+  }
+});
+
+/** Attach an API-driven autocomplete to `container`. `parse` maps the raw JSON response into the rendered result list. The selected result's title is written to the input on selection. */
+export function attachSearchBox<T = unknown>(container: HTMLElement, url: string, parse: (raw: T, query: string) => SearchResult[], {minCharacters = 2}: {minCharacters?: number} = {}): void {
+  const input = container.querySelector<HTMLInputElement>('input.prompt') ?? container.querySelector<HTMLInputElement>('input');
+  if (!input) return;
+
+  let resultsEl = container.querySelector<HTMLElement>(':scope > .results');
+  if (!resultsEl) {
+    resultsEl = document.createElement('div');
+    resultsEl.className = 'results';
+    container.append(resultsEl);
+  }
+  const itemResults = new Map<HTMLElement, SearchResult>();
+  let fetchController: AbortController | null = null;
+
+  const hide = () => {
+    fetchController?.abort();
+    resultsEl.style.display = 'none';
+    resultsEl.replaceChildren();
+    itemResults.clear();
+  };
+
+  const render = (results: SearchResult[]) => {
+    if (!results.length) return hide();
+    itemResults.clear();
+    resultsEl.replaceChildren(...results.map((result) => {
+      const item = buildResultElement(result);
+      itemResults.set(item, result);
+      return item;
+    }));
+    resultsEl.style.display = 'block';
+  };
+
+  const select = (item: HTMLElement) => {
+    input.value = itemResults.get(item)!.title;
+    input.dispatchEvent(new Event('change', {bubbles: true}));
+    hide();
+  };
+
+  const search = debounce(200, async (query: string) => {
+    fetchController?.abort();
+    if (query.length < minCharacters) return hide();
+    const ctrl = (fetchController = new AbortController());
+    try {
+      const response = await GET(url.replaceAll('{query}', urlQueryEscape(query)), {signal: ctrl.signal});
+      if (!response.ok) return hide();
+      const results = parse(await response.json(), query);
+      // only render if the fetch wasn't aborted (e.g. by hide()) and the input still matches
+      if (!ctrl.signal.aborted && input.value === query) render(results);
+    } catch (err) {
+      if (errorName(err) !== 'AbortError') hide();
+    }
+  });
+  // cancel + hide ensures a debounced fetch scheduled before any of these can't fire afterwards
+  const dismiss = () => { search.cancel(); hide() };
+
+  input.addEventListener('input', () => search(input.value));
+  input.addEventListener('focus', () => { if (itemResults.size) resultsEl.style.display = 'block'; });
+  input.addEventListener('blur', () => { search.cancel(); setTimeout(hide, 150) }); // hide deferred so a result mousedown can land first
+  input.addEventListener('keydown', (event) => {
+    const resultEls = Array.from(resultsEl.querySelectorAll<HTMLElement>('.result'));
+    if (!resultEls.length) return;
+    const index = resultEls.findIndex((item) => item.classList.contains('active'));
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      resultEls[index]?.classList.remove('active');
+      const next = event.key === 'ArrowDown' ? (index + 1) % resultEls.length : index <= 0 ? resultEls.length - 1 : index - 1;
+      resultEls[next].classList.add('active');
+    } else if (event.key === 'Enter' && index >= 0) {
+      event.preventDefault();
+      select(resultEls[index]);
+    } else if (event.key === 'Escape') {
+      dismiss();
+    }
+  });
+  // mousedown fires before input blur so the selection registers before blur-hide kicks in
+  resultsEl.addEventListener('mousedown', (event) => {
+    const target = (event.target as HTMLElement).closest<HTMLElement>('.result');
+    if (!target) return;
+    event.preventDefault();
+    select(target);
+  });
+  outsideClickBoxes.add({container, hide: dismiss});
+}