refactor dom interaction with helper function

1 files changed, 51 insertions, 0 deletions

diff --git a/frontend/search.ts b/frontend/search.ts
new file mode 100644
index 0000000..0c808db
--- /dev/null
+++ b/frontend/search.ts
@@ -0,0 +1,51 @@
+import { e } from "./helper.ts";
+import { bangs, process_query } from "./query.ts";
+
+export function section_info_search() {
+    return e("section", { class: "info" },
+        e("h2", {}, "Setup"),
+        e("p", {}, "To install this as the default search engine, select \"Add Fastbangs\" in the context-menu of the URL-bar.")
+    )
+}
+
+export function section_search(engine: string) {
+    link_engine(engine)
+
+    const heading = document.createElement("h1")
+    heading.textContent = engine
+    bangs.then(bangs => heading.textContent = bangs[engine]?.name ?? engine)
+
+    const input = document.createElement("input")
+    input.type = "input"
+    input.addEventListener("keydown", ev => {
+        if (ev.code == "Enter") process_query(engine, input.value ?? "")
+    })
+
+    const submit = document.createElement("button")
+    submit.textContent = "Search"
+    submit.addEventListener("click", () => {
+        process_query(engine, input.value ?? "")
+    })
+
+    return e("section", { class: "search" },
+        heading,
+        e("div", { class: "bar" },
+            input,
+            submit
+        )
+    )
+}
+
+function link_engine(engine: string) {
+    if (document.getElementById("search-link")) {
+        // <link /> is already present, we need reload because browser wont notice otherwise
+        window.location.reload()
+    }
+    const link = document.createElement("link")
+    link.rel = "search"
+    link.id = "search-link"
+    link.type = "application/opensearchdescription+xml"
+    link.href = `/search.xml?default=${encodeURIComponent(engine)}`
+    link.title = `Fastbangs (default engine: ${engine})`
+    document.head.append(link)
+}
\ No newline at end of file