refactor dom interaction with helper function

1 files changed, 56 insertions, 0 deletions

diff --git a/frontend/start.ts b/frontend/start.ts
new file mode 100644
index 0000000..1bb1cbb
--- /dev/null
+++ b/frontend/start.ts
@@ -0,0 +1,56 @@
+import { e } from "./helper.ts";
+import { bangs } from "./query.ts";
+import { status } from "./ui.ts"
+
+export function section_info_start() {
+    return e("section", { class: "info" },
+        e("h1", {}, "Fastbangs"),
+        e("p", {}, `
+            This application provides a way to (mostly) locally handle search bangs.
+            First select a default engine to use, then register this page as a search in your browser
+        `)
+    )
+}
+
+export function section_engine_select() {
+    const section = document.createElement("section")
+    section.classList.add("engine-select")
+
+    const select = async (e: string) => {
+        const engine = e.toLowerCase();
+        if (!(await bangs)[engine]) return status("error", `Engine ${JSON.stringify(e)} does not exist.`)
+        window.location.hash = `#${e}`
+    }
+
+    const heading = document.createElement("h2")
+    heading.textContent = "Select a search engine"
+
+    const listing = document.createElement("ul")
+    bangs.then(bangs => {
+        for (const key in bangs) if (bangs[key]!.pinned) {
+            listing.prepend(e("li", { class: "pinned", onclick: () => select(key) }, bangs[key]!.name ?? key))
+        }
+    })
+
+    const input = document.createElement("input")
+    input.type = "input"
+    input.addEventListener("keydown", ev => {
+        if (ev.code == "Enter") select(input.value)
+    })
+
+    const submit = document.createElement("button")
+    submit.textContent = "Select"
+    submit.addEventListener("click", () => select(input.value))
+
+    listing.append(e("li", {},
+        e("label", {}, "Select other engine by bang:"),
+        input,
+        submit
+    ))
+
+    section.append(heading, listing)
+    return e("section", { class: "engine-select" },
+        e("h2", {}, "Select a search engine"),
+        listing
+    )
+}