From 4c6a395de093dce24c688276a8b04a93093fd118 Mon Sep 17 00:00:00 2001 From: metamuffin Date: Sun, 1 Oct 2023 11:27:59 +0200 Subject: init --- src/element.ts | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/element.ts (limited to 'src/element.ts') diff --git a/src/element.ts b/src/element.ts new file mode 100644 index 0000000..9880748 --- /dev/null +++ b/src/element.ts @@ -0,0 +1,60 @@ +/* + This file is part of jshelper (https://codeberg.org/metamuffin/jshelper) + which is licensed under the GNU Affero General Public License (version 3); see /COPYING. + Copyright (C) 2023 metamuffin +*/ +import { OVar } from "./observable.ts"; + +interface Opts { + class?: string[] | string, + id?: string, + src?: string, + for?: string, + type?: string, + href?: string, + onclick?: (e: E) => void, + onchange?: (e: E) => void, +} + +function apply_opts(e: E, o: Opts): (() => unknown) | void { + if (o.id) e.id = o.id + 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.onclick) e.addEventListener("click", () => o.onclick!(e)) + if (o.onchange) e.addEventListener("change", () => o.onchange!(e)) + if (typeof o?.class == "string") e.classList.add(o.class) + if (typeof o?.class == "object") e.classList.add(...o.class) +} + +type EEl = string | HTMLElement | Opts | OVar> | OVar | OVar | OVar | undefined; + +export function e(name: K, ...children: EEl[]): HTMLElementTagNameMap[K] { + const el = document.createElement(name) + for (const c of children) e_apply(el, c) + return el +} + +function e_apply>(el: HTMLElementTagNameMap[K], c: C): () => unknown { + if (typeof c == "undefined") { + return () => { } + } + if (typeof c == "string") { + el.append(c) + return () => { + el.textContent = "" + } + } + else if (c instanceof HTMLElement) { + el.append(c) + return () => el.removeChild(c) + } + else if (c instanceof OVar) { + let undo_last: () => unknown; + return c.onchangeinit(val => { + if (undo_last) undo_last() + undo_last = e_apply(el, val) + }) + } + else return apply_opts(el, c) ?? (() => { }) +} -- cgit v1.2.3-70-g09d2