diff options
| -rw-r--r-- | frontend/helper.ts | 4 | ||||
| -rw-r--r-- | frontend/start.ts | 31 |
2 files changed, 19 insertions, 16 deletions
diff --git a/frontend/helper.ts b/frontend/helper.ts index 6e7ca5c..bfd57f0 100644 --- a/frontend/helper.ts +++ b/frontend/helper.ts @@ -4,6 +4,8 @@ interface Opts<E> { class?: string[] | string, id?: string, src?: string, + rel?: string, + title?: string, for?: string, type?: string, href?: string, @@ -18,6 +20,8 @@ function apply_opts<E extends HTMLElement>(e: E, o: Opts<E>) { if (o.for) (e as unknown as HTMLLabelElement).htmlFor = o.for if (o.type && e instanceof HTMLInputElement) e.type = o.type if (o.href && e instanceof HTMLAnchorElement) e.href = o.href + if (o.rel && e instanceof HTMLAnchorElement) e.rel = o.rel + if (o.title && e instanceof HTMLAnchorElement) e.title = o.title if (typeof o?.class == "string") e.classList.add(o.class) if (typeof o?.class == "object") e.classList.add(...o.class) } diff --git a/frontend/start.ts b/frontend/start.ts index 1c02192..89ec78e 100644 --- a/frontend/start.ts +++ b/frontend/start.ts @@ -35,17 +35,17 @@ export function section_engine_select() { const submit = e("button", {}, "Select") submit.addEventListener("click", () => select(input.value)) - const searchResults = e("ul", {class: "dropdown"}) + const searchResults = e("ul", { class: "dropdown" }) - const input = e("input", {type: "search"}) + const input = e("input", { type: "search" }) input.addEventListener("keydown", ev => { if (ev.code == "Enter") select(input.value) }) input.addEventListener("keyup", _ => { - setSearchResults(searchResults, input, submit) + setSearchResults(searchResults, input, () => submit.click()) }) - const manualInput = e("div", {id: "engine-select-manual"}, + const manualInput = e("div", { id: "engine-select-manual" }, e("label", {}, "Search engines:"), input, submit, @@ -60,17 +60,18 @@ export function section_engine_select() { } // TODO fuse is a bit slow; this search function may hinder fast typing -let bangsSearch: Promise<any> = undefined; +interface FuseItem { bang: string, name: string, url: string } +let bangsSearch: Promise<{ search: (name: string) => { item: FuseItem }[] }> | undefined = undefined; -function setSearchResults(ul, input, submit) { +function setSearchResults(ul: HTMLElement, input: HTMLInputElement, submit: () => void) { if (bangsSearch === undefined) { bangsSearch = bangs.then(bangs => { - let searchSpace = [] - for (let k in bangs) { + const searchSpace = [] + for (const k in bangs) { searchSpace.push({ bang: k, - name: bangs[k].name, - url: bangs[k].url + name: bangs[k]!.name, + url: bangs[k]!.url }) } return new Fuse(searchSpace, { @@ -82,9 +83,7 @@ function setSearchResults(ul, input, submit) { bangsSearch.then(fuse => { ul.innerHTML = "" - - let results = bangs[input.value] ? [bangs[input.value]] : [] - results = fuse.search(input.value).slice(0, 5) + const results = fuse.search(input.value).slice(0, 5) if (results.length === 0) ul.style.display = "none" @@ -94,11 +93,11 @@ function setSearchResults(ul, input, submit) { const it = r.item const li = e("li", {}, - e("p", {class: "name"}, it.name), - e("p", {class: "bang"}, it.bang)) + e("p", { class: "name" }, it.name), + e("p", { class: "bang" }, it.bang)) li.addEventListener("click", () => { input.value = it.bang - submit.click() + submit() }) ul.appendChild(li) } |