| |
| |
| |
|
|
| import { clamp, fmt, h, shortcut } from "./util.js"; |
| import { icon } from "./icons.js"; |
| import { ensureFonts, fontCatalog } from "./fonts.js"; |
|
|
| |
|
|
| export function iconButton(name, title, onClick, { cls = "", label = null, size = 16 } = {}) { |
| const b = h("button", { class: `icon-btn ${cls}`, title, "aria-label": title, type: "button" }); |
| b.innerHTML = icon(name, size) + (label ? `<span class="lbl">${label}</span>` : ""); |
| b.addEventListener("click", (e) => { e.stopPropagation(); onClick?.(e); }); |
| return b; |
| } |
|
|
| export function commandButton(cmd, opts = {}) { |
| const b = iconButton(cmd.icon || "square", `${cmd.label}${cmd.key ? ` (${shortcut(cmd.key)})` : ""}`, |
| () => cmd.run(), opts); |
| b.dataset.command = cmd.id; |
| b.refresh = () => { b.disabled = cmd.enabled ? !cmd.enabled() : false; }; |
| return b; |
| } |
|
|
| export function toggle(name, title, getter, onChange, opts = {}) { |
| const b = iconButton(name, title, () => onChange(!getter()), opts); |
| b.set = () => { b.classList.toggle("on", !!getter()); }; |
| return b; |
| } |
|
|
| export function segmented(options, getter, onChange, { cls = "" } = {}) { |
| const wrap = h("div", { class: `segmented ${cls}`, role: "radiogroup" }); |
| const buttons = options.map(([value, iconName, title]) => { |
| const b = iconButton(iconName, title, () => onChange(value)); |
| b.dataset.value = value; |
| b.setAttribute("role", "radio"); |
| wrap.append(b); |
| return b; |
| }); |
| wrap.set = () => { |
| const v = getter(); |
| for (const b of buttons) { |
| b.classList.toggle("on", b.dataset.value === v); |
| b.setAttribute("aria-checked", b.dataset.value === v ? "true" : "false"); |
| } |
| }; |
| return wrap; |
| } |
|
|
| |
|
|
| |
| |
| export function numberField({ label, title, unit = "", digits = 0, step = 1, min = -1e6, max = 1e6, |
| get, set, cls = "", iconName = null, width = null, name = null, format = null, parse = null }) { |
| |
| |
| const input = h("input", { class: "num-input", type: "text", inputmode: "decimal", |
| spellcheck: "false", "aria-label": title || label }); |
| const lab = h("span", { class: "num-label", title: title || label }); |
| if (iconName) lab.innerHTML = icon(iconName, 12); |
| else lab.textContent = label; |
| const wrap = h("label", { class: `num-field ${cls}`, dataset: { field: name || title || label || "" } }, lab, input, unit ? h("span", { class: "num-unit" }, unit) : null); |
| if (width) wrap.style.width = width; |
| let editing = false; |
| let dirty = false; |
|
|
| const commit = () => { |
| if (!dirty) return; |
| dirty = false; |
| let v; |
| if (parse) { |
| v = parse(input.value.trim()); |
| } else { |
| const raw = input.value.trim().replace(/[^\d.+\-*/() ]/g, ""); |
| if (!raw) { refresh(true); return; } |
| try { v = Function(`"use strict";return (${raw})`)(); } catch { v = parseFloat(raw); } |
| } |
| if (!Number.isFinite(v)) { refresh(true); return; } |
| v = clamp(v, min, max); |
| const cur = get(); |
| if (cur === null || Math.abs(v - cur) > 1e-9) set(v); |
| refresh(true); |
| }; |
| const refresh = (force = false) => { |
| if (editing && !force) return; |
| const v = get(); |
| dirty = false; |
| input.value = v === null || v === undefined ? "" : format ? format(v) : fmt(v, digits); |
| input.placeholder = v === null ? "Mixed" : ""; |
| wrap.classList.toggle("disabled", v === undefined); |
| input.disabled = v === undefined; |
| }; |
| input.addEventListener("focus", () => { editing = true; input.select(); }); |
| input.addEventListener("input", () => { dirty = true; }); |
| input.addEventListener("blur", () => { editing = false; commit(); }); |
| input.addEventListener("keydown", (e) => { |
| e.stopPropagation(); |
| if (e.key === "Enter") { commit(); input.select(); } |
| else if (e.key === "Escape") { editing = false; refresh(true); input.blur(); } |
| else if (e.key === "ArrowUp" || e.key === "ArrowDown") { |
| e.preventDefault(); |
| const cur = parse ? (get() ?? 0) : parseFloat(input.value) || 0; |
| const d = (e.key === "ArrowUp" ? 1 : -1) * step * (e.shiftKey ? 10 : 1); |
| input.value = format ? format(clamp(cur + d, min, max)) : fmt(clamp(cur + d, min, max), digits); |
| dirty = true; |
| commit(); |
| } |
| }); |
| lab.addEventListener("pointerdown", (e) => { |
| const v0 = get(); |
| if (v0 === null || v0 === undefined) return; |
| e.preventDefault(); |
| lab.setPointerCapture(e.pointerId); |
| const x0 = e.clientX; |
| let last = v0; |
| const move = (ev) => { |
| last = clamp(v0 + Math.round((ev.clientX - x0) / 2) * step * (ev.shiftKey ? 10 : 1), min, max); |
| input.value = format ? format(last) : fmt(last, digits); |
| }; |
| const up = () => { |
| lab.removeEventListener("pointermove", move); |
| lab.removeEventListener("pointerup", up); |
| if (last !== v0) set(last); |
| }; |
| lab.addEventListener("pointermove", move); |
| lab.addEventListener("pointerup", up); |
| }); |
| wrap.set = refresh; |
| wrap.input = input; |
| return wrap; |
| } |
|
|
| export function slider({ get, set, min = 0, max = 100, step = 1, label = "", unit = "", name = null }) { |
| const range = h("input", { type: "range", min, max, step, class: "range" }); |
| const out = h("input", { type: "text", class: "num-input range-num", "aria-label": label }); |
| const wrap = h("div", { class: "slider-field", dataset: { field: name || label } }, label ? h("span", { class: "slider-label" }, label) : null, range, out, |
| unit ? h("span", { class: "num-unit" }, unit) : null); |
| range.addEventListener("input", () => { out.value = range.value; }); |
| range.addEventListener("change", () => set(parseFloat(range.value))); |
| out.addEventListener("keydown", (e) => { |
| e.stopPropagation(); |
| if (e.key === "Enter") { sdirty = false; set(clamp(parseFloat(out.value) || 0, min, max)); } |
| }); |
| let sdirty = false; |
| out.addEventListener("input", () => { sdirty = true; }); |
| out.addEventListener("blur", () => { |
| const v = parseFloat(out.value); |
| if (sdirty && Number.isFinite(v) && v !== get()) set(clamp(v, min, max)); |
| sdirty = false; |
| }); |
| wrap.set = () => { |
| const v = get(); |
| if (document.activeElement !== out) out.value = v === null || v === undefined ? "" : fmt(v, step < 1 ? 2 : 0); |
| range.value = v ?? min; |
| range.disabled = out.disabled = v === undefined; |
| }; |
| return wrap; |
| } |
|
|
| |
|
|
| let openPop = null; |
|
|
| export function popoverOpen() { return !!openPop?.isConnected; } |
|
|
| export function closePopover() { |
| if (openPop) { openPop.remove(); openPop = null; } |
| } |
|
|
| export function popover(anchor, content, { align = "start", cls = "", offset = 6, beside = null } = {}) { |
| closePopover(); |
| const pop = h("div", { class: `popover ${cls}`, role: "dialog" }, content); |
| document.body.append(pop); |
| const r = anchor.getBoundingClientRect(); |
| const pr = pop.getBoundingClientRect(); |
| let left = align === "end" ? r.right - pr.width : r.left; |
| let top = r.bottom + offset; |
| if (top + pr.height > innerHeight - 8) top = Math.max(8, r.top - pr.height - offset); |
| if (beside) { |
| const side = anchor.closest(beside)?.getBoundingClientRect() || r; |
| left = side.left - pr.width - 8; |
| top = clamp(r.top - 36, 8, innerHeight - pr.height - 8); |
| } |
| left = clamp(left, 8, innerWidth - pr.width - 8); |
| Object.assign(pop.style, { left: `${left}px`, top: `${top}px` }); |
| openPop = pop; |
| const off = (e) => { |
| if (!pop.isConnected) { document.removeEventListener("pointerdown", off, true); return; } |
| if (!pop.contains(e.target) && !anchor.contains(e.target)) { |
| closePopover(); |
| document.removeEventListener("pointerdown", off, true); |
| } |
| }; |
| setTimeout(() => document.addEventListener("pointerdown", off, true), 0); |
| pop.addEventListener("keydown", (e) => { if (e.key === "Escape") { e.stopPropagation(); closePopover(); anchor.focus?.(); } }); |
| |
| pop.addEventListener("pointerdown", (e) => { |
| const grip = e.target.closest(".float-drag"); |
| if (!grip || e.button !== 0 || e.target.closest("button, input, select")) return; |
| e.preventDefault(); |
| const x0 = e.clientX, y0 = e.clientY, b = pop.getBoundingClientRect(); |
| const move = (ev) => Object.assign(pop.style, { |
| left: `${clamp(b.left + ev.clientX - x0, 0, innerWidth - 60)}px`, top: `${clamp(b.top + ev.clientY - y0, 0, innerHeight - 40)}px` }); |
| const up = () => { removeEventListener("pointermove", move); removeEventListener("pointerup", up); }; |
| addEventListener("pointermove", move); |
| addEventListener("pointerup", up); |
| }); |
| return pop; |
| } |
|
|
| |
| export function floatPanel(title, body, { cls = "", actions = [] } = {}) { |
| return h("div", { class: `float-panel ${cls}` }, |
| h("div", { class: "float-head float-drag" }, h("span", { class: "float-title" }, title), h("span", { class: "grow" }), ...actions, |
| iconButton("x", "Close", () => closePopover(), { cls: "float-x", size: 14 })), |
| body); |
| } |
|
|
| |
|
|
| export function hexToRgb(hex) { |
| const m = /^#?([0-9a-f]{6})/i.exec(hex || ""); |
| if (!m) return [0, 0, 0]; |
| const n = parseInt(m[1], 16); |
| return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; |
| } |
| export function rgbToHex(r, g, b) { |
| return "#" + [r, g, b].map((v) => Math.round(clamp(v, 0, 255)).toString(16).padStart(2, "0")).join(""); |
| } |
| export function rgbToHsv(r, g, b) { |
| r /= 255; g /= 255; b /= 255; |
| const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min; |
| let hue = 0; |
| if (d) { |
| if (max === r) hue = ((g - b) / d) % 6; |
| else if (max === g) hue = (b - r) / d + 2; |
| else hue = (r - g) / d + 4; |
| hue *= 60; |
| if (hue < 0) hue += 360; |
| } |
| return [hue, max ? d / max : 0, max]; |
| } |
| export function hsvToRgb(hue, s, v) { |
| const c = v * s, x = c * (1 - Math.abs(((hue / 60) % 2) - 1)), m = v - c; |
| const [r, g, b] = hue < 60 ? [c, x, 0] : hue < 120 ? [x, c, 0] : hue < 180 ? [0, c, x] |
| : hue < 240 ? [0, x, c] : hue < 300 ? [x, 0, c] : [c, 0, x]; |
| return [(r + m) * 255, (g + m) * 255, (b + m) * 255]; |
| } |
|
|
| const PALETTE = ["#000000", "#545454", "#737373", "#a6a6a6", "#d9d9d9", "#ffffff", |
| "#ff3131", "#ff5757", "#ff66c4", "#cb6ce6", "#8c52ff", "#5e17eb", |
| "#0097b2", "#0cc0df", "#5ce1e6", "#38b6ff", "#5170ff", "#004aad", |
| "#00bf63", "#7ed957", "#c1ff72", "#ffde59", "#ffbd59", "#ff914d"]; |
|
|
| export function colorPicker(initial, onPick, docColors = []) { |
| let [hue, sat, val] = rgbToHsv(...hexToRgb(initial)); |
| const sv = h("div", { class: "cp-sv" }, h("div", { class: "cp-sv-knob" })); |
| const hueBar = h("div", { class: "cp-hue" }, h("div", { class: "cp-hue-knob" })); |
| const hex = h("input", { class: "cp-hex num-input", value: (initial || "#000000").slice(0, 7), spellcheck: "false", "aria-label": "Hex colour" }); |
| const swatch = (c) => h("button", { class: "cp-swatch", style: { background: c }, title: c, type: "button", |
| onclick: () => { [hue, sat, val] = rgbToHsv(...hexToRgb(c)); paint(); onPick(c); } }); |
| const root = h("div", { class: "color-picker" }, sv, hueBar, |
| h("div", { class: "cp-row" }, h("span", { class: "cp-hash" }, "Hex"), hex), |
| docColors.length ? h("div", { class: "cp-section" }, "Document colours") : null, |
| docColors.length ? h("div", { class: "cp-swatches" }, docColors.slice(0, 12).map(swatch)) : null, |
| h("div", { class: "cp-section" }, "Default colours"), |
| h("div", { class: "cp-swatches" }, PALETTE.map(swatch))); |
| const current = () => rgbToHex(...hsvToRgb(hue, sat, val)); |
| const paint = () => { |
| sv.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hue}, 100%, 50%))`; |
| sv.firstChild.style.left = `${sat * 100}%`; |
| sv.firstChild.style.top = `${(1 - val) * 100}%`; |
| sv.firstChild.style.background = current(); |
| hueBar.firstChild.style.left = `${(hue / 360) * 100}%`; |
| if (document.activeElement !== hex) hex.value = current(); |
| }; |
| const drag = (el, fn) => el.addEventListener("pointerdown", (e) => { |
| el.setPointerCapture(e.pointerId); |
| const at = (ev) => { |
| const r = el.getBoundingClientRect(); |
| fn(clamp((ev.clientX - r.left) / r.width, 0, 1), clamp((ev.clientY - r.top) / r.height, 0, 1)); |
| paint(); |
| }; |
| at(e); |
| const move = (ev) => at(ev); |
| const up = () => { el.removeEventListener("pointermove", move); el.removeEventListener("pointerup", up); onPick(current()); }; |
| el.addEventListener("pointermove", move); |
| el.addEventListener("pointerup", up); |
| }); |
| drag(sv, (x, y) => { sat = x; val = 1 - y; }); |
| drag(hueBar, (x) => { hue = x * 359.9; }); |
| hex.addEventListener("keydown", (e) => { |
| if (e.key !== "Escape") e.stopPropagation(); |
| if (e.key === "Enter") { |
| const v = hex.value.trim().replace(/^#?/, "#"); |
| if (/^#[0-9a-f]{6}$/i.test(v)) { [hue, sat, val] = rgbToHsv(...hexToRgb(v)); paint(); onPick(v.toLowerCase()); } |
| } |
| }); |
| paint(); |
| return root; |
| } |
|
|
| export function colorField({ get, set, label = "", docColors = () => [], cls = "", showHex = true, name = null, open = null }) { |
| const chip = h("button", { class: "color-chip", type: "button", "aria-label": `${label || "Colour"} swatch` }); |
| const input = h("input", { class: "num-input hex-input", spellcheck: "false", "aria-label": label || "Colour hex" }); |
| const wrap = h("div", { class: `color-field ${cls}`, dataset: { field: name || label } }, label ? h("span", { class: "field-label" }, label) : null, chip, showHex ? input : null); |
| chip.addEventListener("click", (e) => { |
| e.stopPropagation(); |
| if (open) open(chip, get, set, docColors()); |
| else popover(chip, colorPicker(get() || "#000000", (c) => set(c), docColors()), { cls: "pop-color" }); |
| }); |
| |
| let cancelled = false; |
| const commit = () => { |
| const v = input.value.trim().replace(/^#?/, "#"); |
| if (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(v) && v.toLowerCase() !== (get() || "").toLowerCase()) set(v.toLowerCase()); |
| }; |
| input.addEventListener("keydown", (e) => { |
| e.stopPropagation(); |
| if (e.key === "Enter") { commit(); input.select(); } |
| else if (e.key === "Escape") { cancelled = true; input.blur(); } |
| }); |
| input.addEventListener("focus", () => { cancelled = false; input.select(); }); |
| input.addEventListener("blur", () => { if (!cancelled) commit(); cancelled = false; wrap.set(); }); |
| wrap.set = () => { |
| const v = get(); |
| chip.style.background = v ? v : "repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0/8px 8px"; |
| chip.classList.toggle("none", !v); |
| if (document.activeElement !== input) input.value = v ? v.replace("#", "").toUpperCase().slice(0, 6) : "None"; |
| wrap.classList.toggle("disabled", v === undefined); |
| }; |
| wrap.chip = chip; |
| return wrap; |
| } |
|
|
| |
|
|
| export function fontPicker({ get, set, docFonts = () => [], cls = "", open = null, preview = true }) { |
| const btn = h("button", { class: `font-btn ${cls}`, type: "button", "aria-label": "Font family" }); |
| const name = h("span", { class: "font-name" }); |
| btn.append(name); |
| btn.insertAdjacentHTML("beforeend", icon("chevron-down", 14)); |
| btn.addEventListener("click", async (e) => { |
| e.stopPropagation(); |
| if (open) { open(btn, get, set, docFonts()); return; } |
| const families = (await fontCatalog()).map((f) => f.family); |
| const search = h("input", { class: "font-search", placeholder: "Search fonts", spellcheck: "false", "aria-label": "Search fonts" }); |
| const list = h("div", { class: "font-list", role: "listbox" }); |
| const docs = [...new Set(docFonts())]; |
| ensureFonts(docs); |
| const row = (fam, preview) => { |
| const r = h("button", { class: `font-row ${fam === get() ? "on" : ""}`, type: "button", role: "option", dataset: { family: fam }, |
| onclick: () => { set(fam); ensureFonts([fam]); closePopover(); } }, fam); |
| if (preview) r.style.fontFamily = `'${fam}'`; |
| return r; |
| }; |
| const paint = () => { |
| const q = search.value.trim().toLowerCase(); |
| list.textContent = ""; |
| const docMatch = docs.filter((f) => f.toLowerCase().includes(q)); |
| if (docMatch.length) { |
| list.append(h("div", { class: "font-group" }, "Fonts in this design")); |
| docMatch.forEach((f) => list.append(row(f, true))); |
| } |
| list.append(h("div", { class: "font-group" }, "All fonts")); |
| families.filter((f) => f.toLowerCase().includes(q)).forEach((f) => list.append(row(f, false))); |
| }; |
| search.addEventListener("input", paint); |
| search.addEventListener("keydown", (ev) => { |
| if (ev.key !== "Escape") ev.stopPropagation(); |
| if (ev.key === "Enter") { |
| const first = list.querySelector(".font-row"); |
| first?.click(); |
| } |
| }); |
| paint(); |
| popover(btn, h("div", { class: "font-pop" }, search, list), { cls: "pop-font" }); |
| search.focus(); |
| list.querySelector(".font-row.on")?.scrollIntoView({ block: "center" }); |
| }); |
| btn.set = () => { |
| const v = get(); |
| name.textContent = v === null ? "Mixed" : v || "—"; |
| if (v && preview) { name.style.fontFamily = `'${v}'`; ensureFonts([v]); } |
| btn.disabled = v === undefined; |
| }; |
| return btn; |
| } |
|
|
| |
|
|
| |
| |
| export function usefulItems(items) { |
| const kept = items.filter((it) => it === "-" || it.header || !(it.enabled === false || it.cmd?.hidden?.())); |
| const out = []; |
| for (let i = 0; i < kept.length; i++) { |
| const it = kept[i]; |
| if (it === "-" && (!out.length || out[out.length - 1] === "-")) continue; |
| if (it.header) { |
| const next = kept.slice(i + 1).find((x) => x === "-" || x.header || x); |
| if (!next || next === "-" || next.header) continue; |
| } |
| out.push(it); |
| } |
| while (out.length && (out[out.length - 1] === "-" || out[out.length - 1].header)) out.pop(); |
| return out; |
| } |
|
|
| function menuList(items, cls, host, depth = 0) { |
| const list = h("div", { class: `menu ${cls}`, role: "menu" }); |
| |
| const closeSub = () => { |
| host().querySelectorAll(".menu-sub").forEach((x) => { if (+x.dataset.depth > depth) x.remove(); }); |
| list.querySelectorAll(".has-sub.open").forEach((x) => x.classList.remove("open")); |
| }; |
| for (const it of usefulItems(items)) { |
| if (it === "-") { list.append(h("div", { class: "menu-sep" })); continue; } |
| if (it.header) { list.append(h("div", { class: "menu-header" }, it.header)); continue; } |
| if (it.items) { |
| const kids = usefulItems(it.items); |
| if (!kids.length) continue; |
| const b = h("button", { class: "menu-item has-sub", role: "menuitem", type: "button", "aria-haspopup": "menu", dataset: { submenu: it.label } }); |
| b.innerHTML = `<span class="mi-icon"></span><span class="mi-label">${it.label}</span><span class="mi-key">${icon("chevron-right", 12)}</span>`; |
| const open = () => { |
| if (b.classList.contains("open")) return; |
| closeSub(); |
| b.classList.add("open"); |
| const sub = h("div", { class: "popover pop-menu menu-sub", dataset: { depth: String(depth + 1) } }, menuList(kids, "", host, depth + 1)); |
| host().append(sub); |
| const r = b.getBoundingClientRect(), sr = sub.getBoundingClientRect(); |
| const left = r.right + sr.width + 4 > innerWidth ? r.left - sr.width - 4 : r.right + 4; |
| Object.assign(sub.style, { left: `${left}px`, top: `${clamp(r.top - 6, 8, innerHeight - sr.height - 8)}px` }); |
| }; |
| b.addEventListener("mouseenter", open); |
| b.addEventListener("click", (e) => { e.stopPropagation(); open(); }); |
| list.append(b); |
| continue; |
| } |
| const cmd = it.cmd; |
| const enabled = cmd ? (cmd.enabled ? cmd.enabled() : true) : it.enabled !== false; |
| const b = h("button", { class: "menu-item", role: "menuitem", type: "button", disabled: !enabled, |
| dataset: cmd ? { command: cmd.id } : {} }); |
| b.innerHTML = `<span class="mi-icon">${cmd?.icon || it.icon ? icon(cmd?.icon || it.icon, 14) : ""}</span>` + |
| `<span class="mi-label">${it.label || cmd.label}</span>` + |
| `<span class="mi-key">${shortcut(it.key || cmd?.key || "")}</span>`; |
| b.addEventListener("click", (e) => { |
| e.stopPropagation(); |
| closePopover(); |
| (it.run || cmd.run)(); |
| }); |
| b.addEventListener("mouseenter", closeSub); |
| list.append(b); |
| } |
| return list; |
| } |
|
|
| export function menu(anchor, items, { align = "start", cls = "" } = {}) { |
| let pop = null; |
| const list = menuList(items, cls, () => pop); |
| pop = popover(anchor, list, { align, cls: "pop-menu", offset: 2 }); |
| return pop; |
| } |
|
|
| export function contextMenuAt(x, y, items) { |
| const ghost = h("div", { style: { position: "fixed", left: `${x}px`, top: `${y}px`, width: "1px", height: "1px" } }); |
| document.body.append(ghost); |
| const pop = menu(ghost, items, { cls: "context" }); |
| setTimeout(() => ghost.remove(), 0); |
| return pop; |
| } |
|
|
| |
|
|
| export function modal(title, body, { actions = [], cls = "", onClose = null } = {}) { |
| const close = () => { back.remove(); onClose?.(); }; |
| const head = h("div", { class: "modal-head" }, h("div", { class: "modal-title" }, title), |
| iconButton("x", "Close", close, { cls: "modal-x" })); |
| const foot = actions.length ? h("div", { class: "modal-foot" }, actions.map((a) => |
| h("button", { class: `btn ${a.primary ? "btn-primary" : ""}`, type: "button", |
| onclick: async () => { const keep = await a.run?.(); if (keep !== true) close(); } }, a.label))) : null; |
| const box = h("div", { class: `modal ${cls}`, role: "dialog", "aria-modal": "true" }, head, |
| h("div", { class: "modal-body" }, body), foot); |
| const back = h("div", { class: "modal-back", onclick: (e) => { if (e.target === back) close(); } }, box); |
| back.addEventListener("keydown", (e) => { if (e.key === "Escape") { e.stopPropagation(); close(); } }); |
| document.body.append(back); |
| return { close, box }; |
| } |
|
|
| let toastTimer = null; |
| export function toast(msg, kind = "") { |
| let t = document.querySelector(".toast"); |
| if (!t) { t = h("div", { class: "toast", role: "status" }); document.body.append(t); } |
| t.textContent = msg; |
| t.className = `toast show ${kind}`; |
| clearTimeout(toastTimer); |
| toastTimer = setTimeout(() => t.classList.remove("show"), 2600); |
| } |
|
|
