@takodotid/circuit 0.34.3 → 0.36.0

package/src/studio/public/dom.js

@@ -2,127 +2,137 @@
 /// <reference lib="dom" />
 // Small helpers every part of Studio's page uses: making elements, links that act, and browser storage that may be missing.
 
-const SVG = "http://www.w3.org/2000/svg";
-
 /** @typedef {Node | string | undefined | false} Child */
 
-/**
- * An element with attributes and children. Text is always set as text, never parsed as HTML.
- *
- * @template {keyof HTMLElementTagNameMap} K
- * @param {K} tag
- * @param {Record<string, string>} [attributes]
- * @param {...Child} children
- * @returns {HTMLElementTagNameMap[K]}
- */
-export function h(tag, attributes = {}, ...children) {
-    const element = document.createElement(tag);
-    for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, value);
-    for (const child of children) if (child !== undefined && child !== false) element.append(child);
-    return element;
-}
-
-/**
- * An SVG element with attributes.
- *
- * @template {keyof SVGElementTagNameMap} K
- * @param {K} tag
- * @param {Record<string, string | number>} [attributes]
- * @returns {SVGElementTagNameMap[K]}
- */
-export function s(tag, attributes = {}) {
-    const element = document.createElementNS(SVG, tag);
-    for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, String(value));
-    return element;
-}
+export class Dom {
+    static #SVG = /** @type {const} */ ("http://www.w3.org/2000/svg");
 
-/**
- * A link that runs an action, by mouse or keyboard.
- *
- * @param {string} text
- * @param {() => void} action
- */
-export function link(text, action) {
-    const anchor = h("a", { role: "button", tabindex: "0" }, text);
-    anchor.addEventListener("click", action);
-    anchor.addEventListener("keydown", (event) => event.key === "Enter" && action());
-    return anchor;
-}
+    /**
+     * An element with attributes and children. Text is always set as text, never parsed as HTML.
+     *
+     * @template {keyof HTMLElementTagNameMap} K
+     * @param {K} tag
+     * @param {Record<string, string>} [attributes]
+     * @param {...Child} children
+     * @returns {HTMLElementTagNameMap[K]}
+     */
+    static h(tag, attributes = {}, ...children) {
+        const element = document.createElement(tag);
+        for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, value);
+        for (const child of children) if (child !== undefined && child !== false) element.append(child);
+        return element;
+    }
 
-/**
- * The element with this id, which index.html always has.
- *
- * @param {string} id
- */
-export function byId(id) {
-    const element = document.getElementById(id);
-    if (!(element instanceof HTMLElement)) throw new Error(`index.html has no element ${id}`);
-    return element;
-}
+    /**
+     * An SVG element with attributes.
+     *
+     * @template {keyof SVGElementTagNameMap} K
+     * @param {K} tag
+     * @param {Record<string, string | number>} [attributes]
+     * @returns {SVGElementTagNameMap[K]}
+     */
+    static s(tag, attributes = {}) {
+        const element = document.createElementNS(Dom.#SVG, tag);
+        for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, String(value));
+        return element;
+    }
 
-/**
- * The SVG element with this id, which index.html always has.
- *
- * @param {string} id
- */
-export function svgById(id) {
-    const element = document.getElementById(id);
-    if (!(element instanceof SVGElement)) throw new Error(`index.html has no SVG element ${id}`);
-    return element;
-}
+    /**
+     * A link that runs an action, by mouse or keyboard.
+     *
+     * @param {string} text
+     * @param {() => void} action
+     */
+    static link(text, action) {
+        const anchor = Dom.h("a", { role: "button", tabindex: "0" }, text);
+        anchor.addEventListener("click", action);
+        anchor.addEventListener("keydown", (event) => event.key === "Enter" && action());
+        return anchor;
+    }
 
-/** The reader's system asks for less motion: nothing moves for show, and changes happen at once. */
-export const still = matchMedia("(prefers-reduced-motion: reduce)");
+    /**
+     * The element with this id, which index.html always has.
+     *
+     * @param {string} id
+     */
+    static byId(id) {
+        const element = document.getElementById(id);
+        if (!(element instanceof HTMLElement)) throw new Error(`index.html has no element ${id}`);
+        return element;
+    }
 
-/**
- * Bring a part of the page in as it changes: it fades in and rises a little.
- *
- * @param {Element} element
- */
-export function enter(element) {
-    if (still.matches) return;
+    /**
+     * The SVG element with this id, which index.html always has.
+     *
+     * @param {string} id
+     */
+    static svgById(id) {
+        const element = document.getElementById(id);
+        if (!(element instanceof SVGElement)) throw new Error(`index.html has no SVG element ${id}`);
+        return element;
+    }
 
-    element.animate(
-        [
-            { opacity: 0, transform: "translateY(6px)" },
-            { opacity: 1, transform: "none" },
-        ],
-        { duration: 240, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
-    );
-}
+    /**
+     * The reader's system asks for less motion: nothing moves for show, and changes happen at once.
+     *
+     * @readonly
+     */
+    static still = matchMedia("(prefers-reduced-motion: reduce)");
 
-/** Browser storage can be missing or refuse, in a private window for example. The page works without it. */
-export const store = {
     /**
-     * @template T
-     * @param {string} key
-     * @returns {T | undefined}
+     * Bring a part of the page in as it changes: it fades in and rises a little.
+     *
+     * @param {Element} element
      */
-    get(key) {
-        try {
-            const value = localStorage.getItem(`circuit-studio:${key}`);
-            return value === null ? undefined : /** @type {T} */ (JSON.parse(value));
-        } catch {
-            return undefined;
-        }
-    },
+    static enter(element) {
+        if (Dom.still.matches) return;
+
+        element.animate(
+            [
+                { opacity: 0, transform: "translateY(6px)" },
+                { opacity: 1, transform: "none" },
+            ],
+            { duration: 240, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
+        );
+    }
 
     /**
-     * @param {string} key
-     * @param {unknown} value
+     * Browser storage can be missing or refuse, in a private window for example. The page works without it.
+     *
+     * @readonly
      */
-    set(key, value) {
-        try {
-            localStorage.setItem(`circuit-studio:${key}`, JSON.stringify(value));
-        } catch {}
-    },
-};
+    static store = {
+        /**
+         * @template T
+         * @param {string} key
+         * @returns {T | undefined}
+         */
+        get(key) {
+            try {
+                const value = localStorage.getItem(`circuit-studio:${key}`);
+                return value === null ? undefined : /** @type {T} */ (JSON.parse(value));
+            } catch {
+                return undefined;
+            }
+        },
 
-/**
- * Go to a place in Studio, such as `graph/bgp` or `devices/edge-01/ports`. The place is the address's fragment, so the back button and a bookmark work.
- *
- * @param {string} route
- */
-export function go(route) {
-    location.hash = route;
+        /**
+         * @param {string} key
+         * @param {unknown} value
+         */
+        set(key, value) {
+            try {
+                localStorage.setItem(`circuit-studio:${key}`, JSON.stringify(value));
+            } catch {}
+        },
+    };
+
+    /**
+     * Go to a place in Studio, such as `graph/bgp` or `devices/edge-01/ports`. The place is the address's fragment, so the back button and a bookmark work.
+     *
+     * @param {string} route
+     */
+    static go(route) {
+        location.hash = route;
+    }
 }