aboutsummaryrefslogtreecommitdiff
path: root/client-web/source/helper.ts
diff options
context:
space:
mode:
Diffstat (limited to 'client-web/source/helper.ts')
-rw-r--r--client-web/source/helper.ts79
1 files changed, 22 insertions, 57 deletions
diff --git a/client-web/source/helper.ts b/client-web/source/helper.ts
index b4fd72f..ecfdf95 100644
--- a/client-web/source/helper.ts
+++ b/client-web/source/helper.ts
@@ -7,14 +7,15 @@
import { PREFS } from "./preferences/mod.ts";
-const elem = <K extends keyof HTMLElementTagNameMap>(s: K): HTMLElementTagNameMap[K] => document.createElement(s)
-
-interface Opts<El> {
+interface Opts<E> {
class?: string[] | string,
- id?: string, src?: string,
+ id?: string,
+ src?: string,
for?: string,
- onclick?: (e: El) => void,
- onchange?: (e: El) => void,
+ type?: string,
+ href?: string,
+ onclick?: (e: E) => void,
+ onchange?: (e: E) => void,
role?: "dialog"
aria_label?: string
aria_live?: "polite" | "assertive"
@@ -22,70 +23,34 @@ interface Opts<El> {
aria_popup?: "menu"
}
-function apply_opts<El extends HTMLElement>(e: El, o: Opts<El> | undefined) {
- if (!o) return
+function apply_opts<E extends HTMLElement>(e: E, o: Opts<E>) {
if (o.id) e.id = o.id
if (o.onclick) e.onclick = () => o.onclick!(e)
if (o.onchange) e.onchange = () => o.onchange!(e)
- if (o.aria_label) e.ariaLabel = o.aria_label
- if (o.aria_live) e.ariaLive = o.aria_live
if (o.for) (e as unknown as HTMLLabelElement).htmlFor = o.for
- if (o.aria_modal) e.ariaModal = "true"
- if (o.aria_popup) e.ariaHasPopup = o.aria_popup
+ if (o.type && e instanceof HTMLInputElement) e.type = o.type
+ if (o.href && e instanceof HTMLAnchorElement) e.href = o.href;
if (typeof o?.class == "string") e.classList.add(o.class)
if (typeof o?.class == "object") e.classList.add(...o.class)
+ if (o.aria_modal) e.ariaModal = "true"
+ if (o.aria_popup) e.ariaHasPopup = o.aria_popup
+ if (o.aria_label) e.ariaLabel = o.aria_label
+ if (o.aria_live) e.ariaLive = o.aria_live
}
-const element = <K extends keyof HTMLElementTagNameMap>(s: K) => (opts?: Opts<HTMLElementTagNameMap[K]>) => {
- const e = elem(s)
- apply_opts(e, opts)
- return e
-}
-const elem_with_content = <K extends keyof HTMLElementTagNameMap>(s: K) => (c: string, opts?: Opts<HTMLElementTagNameMap[K]>, ...cs: (HTMLElement | string)[]) => {
- const e = element(s)(opts)
- e.textContent = c
- for (const c of cs) {
- e.append(c)
- }
- return e
-}
-const elem_with_children = <K extends keyof HTMLElementTagNameMap>(s: K) => (opts?: Opts<HTMLElementTagNameMap[K]>, ...cs: (HTMLElement | string)[]) => {
- const e = element(s)(opts)
- for (const c of cs) {
- e.append(c)
+export function e<K extends keyof HTMLElementTagNameMap>(name: K, opts: Opts<HTMLElementTagNameMap[K]>, ...children: (HTMLElement | string)[]): HTMLElementTagNameMap[K] {
+ const el = document.createElement(name)
+ apply_opts(el, opts)
+ for (const c of children) {
+ if (typeof c == "string") el.textContent += c;
+ else el.append(c)
}
- return e
+ return el
}
-export const ep = elem_with_content("p")
-export const eh1 = elem_with_content("h1")
-export const eh2 = elem_with_content("h2")
-export const eh3 = elem_with_content("h3")
-export const eh4 = elem_with_content("h4")
-export const eh5 = elem_with_content("h5")
-export const eh6 = elem_with_content("h6")
-export const epre = elem_with_content("pre")
-export const ediv = elem_with_children("div")
-export const efooter = elem_with_children("footer")
-export const esection = elem_with_children("section")
-export const enav = elem_with_children("nav")
-export const etr = elem_with_children("tr")
-export const etd = elem_with_children("td")
-export const eth = elem_with_children("th")
-export const espan = elem_with_content("span")
-export const elabel = elem_with_content("label")
-export const ebutton = elem_with_content("button")
-export const ebr = () => document.createElement("br")
-export const einput = (type: string, opts: Opts<HTMLInputElement>) => {
- const i = element("input")(opts)
- i.type = type
- return i
-}
-
-
export function image_view(url: string, opts?: Opts<HTMLElement>): HTMLElement {
const img = document.createElement("img")
- apply_opts(img, opts)
+ apply_opts(img, opts ?? {})
img.src = url
img.alt = `Image (click to open)`
img.addEventListener("click", () => {