mirror of
https://github.com/go-gitea/gitea.git
synced 2026-10-24 05:39:46 +02:00
Convert search box to imperative attach API
- attachSearchBox(el, url, parse) replaces the await-style chooseFromApi - The component handles input update + change-event dispatch on selection, so callers don't loop or write back the value themselves - Each caller is now a single statement; response shape is conveyed via the parse callback's parameter annotation (T inferred) Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
This commit is contained in:
4 files changed
+112
-132
No files matched your search
@@ -14,101 +14,97 @@ function buildResultHTML(result: SearchResult): string {
|
||||
return html`${htmlRaw(img)}<div class="content"><div class="title">${result.title}</div>${htmlRaw(desc)}</div>`;
|
||||
}
|
||||
|
||||
// Awaits one user selection from an autocomplete attached to `container`. Resolves with
|
||||
// the chosen item; the caller writes it to whatever input/state it owns. Wrap in a loop
|
||||
// to keep the search box live across selections.
|
||||
export function chooseFromApi<T = unknown>(container: HTMLElement, url: string, parse: (raw: T, query: string) => SearchResult[], {minCharacters = 2}: {minCharacters?: number} = {}): Promise<SearchResult> {
|
||||
return new Promise((resolve) => {
|
||||
const input = container.querySelector<HTMLInputElement>('input.prompt') ?? container.querySelector<HTMLInputElement>('input')!;
|
||||
/** 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);
|
||||
let resultsEl = container.querySelector<HTMLElement>(':scope > .results');
|
||||
if (!resultsEl) {
|
||||
resultsEl = document.createElement('div');
|
||||
resultsEl.className = 'results';
|
||||
container.append(resultsEl);
|
||||
}
|
||||
|
||||
let fetchController: AbortController | null = null;
|
||||
const itemResults = new Map<HTMLElement, SearchResult>();
|
||||
const items = () => resultsEl.querySelectorAll<HTMLElement>('.result');
|
||||
|
||||
const hide = () => {
|
||||
resultsEl.style.display = 'none';
|
||||
resultsEl.replaceChildren();
|
||||
itemResults.clear();
|
||||
};
|
||||
|
||||
const render = (results: SearchResult[]) => {
|
||||
if (!results.length) return hide();
|
||||
resultsEl.replaceChildren();
|
||||
itemResults.clear();
|
||||
for (const result of results) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'result';
|
||||
item.innerHTML = buildResultHTML(result);
|
||||
itemResults.set(item, result);
|
||||
resultsEl.append(item);
|
||||
}
|
||||
resultsEl.style.display = 'block';
|
||||
};
|
||||
|
||||
let fetchController: AbortController | null = null;
|
||||
const lifecycleController = new AbortController();
|
||||
const itemResults = new Map<HTMLElement, SearchResult>();
|
||||
const items = () => resultsEl.querySelectorAll<HTMLElement>('.result');
|
||||
const select = (item: HTMLElement) => {
|
||||
const picked = itemResults.get(item)!;
|
||||
input.value = picked.title;
|
||||
input.dispatchEvent(new Event('change', {bubbles: true}));
|
||||
hide();
|
||||
};
|
||||
|
||||
const hide = () => {
|
||||
resultsEl.style.display = 'none';
|
||||
resultsEl.replaceChildren();
|
||||
itemResults.clear();
|
||||
};
|
||||
const performSearch = async (query: string) => {
|
||||
fetchController?.abort();
|
||||
if (query.length < minCharacters) return hide();
|
||||
fetchController = new AbortController();
|
||||
try {
|
||||
const response = await GET(url.replaceAll('{query}', encodeURIComponent(query)), {signal: fetchController.signal});
|
||||
if (!response.ok) return hide();
|
||||
const results = parse(await response.json(), query);
|
||||
if (input.value !== query) return; // stale response racing a newer keystroke
|
||||
render(results);
|
||||
} catch (err) {
|
||||
if ((err as Error).name !== 'AbortError') hide();
|
||||
}
|
||||
};
|
||||
|
||||
const render = (results: SearchResult[]) => {
|
||||
if (!results.length) return hide();
|
||||
resultsEl.replaceChildren();
|
||||
itemResults.clear();
|
||||
for (const result of results) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'result';
|
||||
item.innerHTML = buildResultHTML(result);
|
||||
itemResults.set(item, result);
|
||||
resultsEl.append(item);
|
||||
}
|
||||
resultsEl.style.display = 'block';
|
||||
};
|
||||
const debounced = debounce(200, (query: string) => { performSearch(query) });
|
||||
|
||||
const finish = (item: HTMLElement) => {
|
||||
const picked = itemResults.get(item)!;
|
||||
hide();
|
||||
lifecycleController.abort();
|
||||
resolve(picked);
|
||||
};
|
||||
|
||||
const performSearch = async (query: string) => {
|
||||
fetchController?.abort();
|
||||
if (query.length < minCharacters) return hide();
|
||||
fetchController = new AbortController();
|
||||
try {
|
||||
const response = await GET(url.replaceAll('{query}', encodeURIComponent(query)), {signal: fetchController.signal});
|
||||
if (!response.ok) return hide();
|
||||
const results = parse(await response.json(), query);
|
||||
if (input.value !== query) return; // stale response racing a newer keystroke
|
||||
render(results);
|
||||
} catch (err) {
|
||||
if ((err as Error).name !== 'AbortError') hide();
|
||||
}
|
||||
};
|
||||
|
||||
const debounced = debounce(200, (query: string) => { performSearch(query) });
|
||||
|
||||
input.addEventListener('input', () => debounced(input.value), {signal: lifecycleController.signal});
|
||||
input.addEventListener('focus', () => { if (items().length) resultsEl.style.display = 'block'; }, {signal: lifecycleController.signal});
|
||||
input.addEventListener('keydown', (event) => {
|
||||
const all = items();
|
||||
if (!all.length) return;
|
||||
const activeIndex = Array.from(all).findIndex((it) => it.classList.contains('active'));
|
||||
const move = (next: number) => {
|
||||
event.preventDefault();
|
||||
all[activeIndex]?.classList.remove('active');
|
||||
all[next].classList.add('active');
|
||||
};
|
||||
if (event.key === 'ArrowDown') {
|
||||
move((activeIndex + 1) % all.length);
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
move(activeIndex <= 0 ? all.length - 1 : activeIndex - 1);
|
||||
} else if (event.key === 'Enter' && activeIndex >= 0) {
|
||||
event.preventDefault();
|
||||
finish(all[activeIndex]);
|
||||
} else if (event.key === 'Escape') {
|
||||
hide();
|
||||
}
|
||||
}, {signal: lifecycleController.signal});
|
||||
// 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;
|
||||
input.addEventListener('input', () => debounced(input.value));
|
||||
input.addEventListener('focus', () => { if (items().length) resultsEl.style.display = 'block'; });
|
||||
input.addEventListener('keydown', (event) => {
|
||||
const all = items();
|
||||
if (!all.length) return;
|
||||
const activeIndex = Array.from(all).findIndex((item) => item.classList.contains('active'));
|
||||
const move = (next: number) => {
|
||||
event.preventDefault();
|
||||
finish(target);
|
||||
}, {signal: lifecycleController.signal});
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!container.contains(event.target as Node)) hide();
|
||||
}, {signal: lifecycleController.signal});
|
||||
input.addEventListener('blur', () => setTimeout(hide, 150), {signal: lifecycleController.signal}); // deferred so a result mousedown can land first
|
||||
all[activeIndex]?.classList.remove('active');
|
||||
all[next].classList.add('active');
|
||||
};
|
||||
if (event.key === 'ArrowDown') {
|
||||
move((activeIndex + 1) % all.length);
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
move(activeIndex <= 0 ? all.length - 1 : activeIndex - 1);
|
||||
} else if (event.key === 'Enter' && activeIndex >= 0) {
|
||||
event.preventDefault();
|
||||
select(all[activeIndex]);
|
||||
} else if (event.key === 'Escape') {
|
||||
hide();
|
||||
}
|
||||
});
|
||||
// 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);
|
||||
});
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!container.contains(event.target as Node)) hide();
|
||||
});
|
||||
input.addEventListener('blur', () => setTimeout(hide, 150)); // deferred so a result mousedown can land first
|
||||
}
|
||||
Reference in new issue
Block a user