From f35043b395adf9ffa06b71000dfba6f560d44cb7 Mon Sep 17 00:00:00 2001 From: metamuffin Date: Wed, 26 Jul 2023 16:27:16 +0200 Subject: add a bunch of ui for the search page and style --- frontend/ui.ts | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 frontend/ui.ts (limited to 'frontend/ui.ts') diff --git a/frontend/ui.ts b/frontend/ui.ts new file mode 100644 index 0000000..4096204 --- /dev/null +++ b/frontend/ui.ts @@ -0,0 +1,92 @@ +import { bangs, process_query } from "./query.ts"; + +export function add_page_content(engine?: string) { + document.getElementById("content")?.remove() + if (engine) { + document.body.append(create_search_bar(engine), create_search_info()) + } else { + document.body.append(create_start_page()) + } +} + +function create_search_bar(engine: string) { + const section = document.createElement("section") + section.classList.add("search") + + if (document.getElementById("search-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 = `Projectname (default engine: ${engine})` + document.head.append(link) + + const heading = document.createElement("h1") + heading.textContent = engine + bangs.then(bangs => heading.textContent = bangs[engine].name) + + 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 ?? "") + }) + + const search = document.createElement("div") + search.classList.add("bar") + search.append(input, submit) + + section.append(heading, search) + return section +} + +function create_search_info() { + const section = document.createElement("section") + section.classList.add("info") + + const heading = document.createElement("h1") + heading.textContent = "Heading" + + const info = document.createElement("p") + info.textContent = `To install this as the default search engine, select "Add " in the context-menu of the URL-bar.` + + section.append(heading, info) + return section +} + + +function create_start_page() { + const section = document.createElement("section") + section.id = "content" + + const heading = document.createElement("h1") + heading.textContent = "Projectname" + + const info = document.createElement("p") + info.textContent = "This is where one would write what this application does..." + + section.append(heading, info) + return section +} + + + +let status_el: HTMLElement +export function status(level: "error" | "info" | "success", text: string) { + if (!status_el) { + status_el = document.createElement("p") + document.body.append(status_el) + } + status_el.textContent = text + status_el.classList.value = "" + status_el.classList.add("status", `level-${level}`) +} -- cgit v1.2.3-70-g09d2