migrate ui library

lib/ui/checkbox.d.ts

@@ -0,0 +1,2 @@
+export function createCheckbox(opts: any): HTMLElement
+export function resolveCheckbox(container: HTMLElement): HTMLElement

lib/ui/checkbox.js

@@ -0,0 +1,76 @@
+import { createIcon } from "./icon";
+
+function fillCheckbox(container, type, label) {
+    const layer = document.createElement('layer');
+    layer.className = 'check-box-inner';
+    layer.appendChild(createIcon(type, 'check'));
+    container.appendChild(layer);
+    if (label != null && label.length > 0) {
+        const span = document.createElement('span');
+        span.innerText = label;
+        container.appendChild(span);
+    }
+}
+
+function createCheckbox(opts) {
+    opts ??= {};
+    const container = document.createElement('label');
+    container.className = 'checkbox-wrapper';
+    const input = document.createElement('input');
+    input.setAttribute('type', 'checkbox');
+    if (typeof opts.onchange === 'function') {
+        input.addEventListener('change', opts.onchange);
+    }
+    container.appendChild(input);
+    if (opts.isImage) {
+        container.classList.add('checkbox-image');
+        let height = opts.imageHeight;
+        if (isNaN(height) || height <= 0) {
+            height = 14;
+        }
+        if (opts.checkedNode != null) {
+            if (!opts.checkedNode.classList.contains('checked')) {
+                opts.checkedNode.classList.add('checked');
+            }
+            container.appendChild(opts.checkedNode);
+        }
+        if (opts.uncheckedNode != null) {
+            if (!opts.uncheckedNode.classList.contains('unchecked')) {
+                opts.uncheckedNode.classList.add('unchecked');
+            }
+            container.appendChild(opts.uncheckedNode);
+        }
+    } else {
+        fillCheckbox(container, opts.type || 'fa-regular', opts.label);
+    }
+    return container;
+}
+
+function resolveCheckbox(container) {
+    const boxes = container.querySelectorAll('label[data-checkbox]');
+    for (let box of boxes) {
+        if (!box.classList.contains('checkbox-wrapper')) {
+            box.classList.add('checkbox-wrapper');
+        }
+        if (box.hasChildNodes()) {
+            if (!box.classList.contains('checkbox-image')) {
+                box.classList.add('checkbox-image');
+            }
+        } else {
+            const type = box.getAttribute('data-type') || 'fa-regular';
+            const label = box.getAttribute('data-label');
+            fillCheckbox(box, type, label)
+            box.removeAttribute('data-type');
+            box.removeAttribute('data-label');
+        }
+        const input = document.createElement('input');
+        input.setAttribute('type', 'checkbox');
+        box.insertBefore(input, box.firstChild);
+    }
+    return container;
+}
+
+export {
+    createCheckbox,
+    resolveCheckbox
+}

lib/ui/icon.d.ts

@@ -0,0 +1,2 @@
+export function createIcon(type: string, id: string): SVGSVGElement
+export function resolveIcon(container: HTMLElement): HTMLElement

lib/ui/icon.js

@@ -0,0 +1,33 @@
+const svgns = 'http://www.w3.org/2000/svg';
+
+function createUse(type, id) {
+    const c = typeof consts !== 'undefined' ? consts : {};
+    const path = c.path || '';
+    const ver = c.resver == null ? '' : `?${c.resver}`;
+    const use = document.createElementNS(svgns, 'use');
+    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `${path}lib/fonts/${type}.svg${ver}#${id}`);
+    return use;
+}
+
+function createIcon(type, id) {
+    const svg = document.createElementNS(svgns, 'svg');
+    svg.appendChild(createUse(type, id));
+    return svg;
+}
+
+function resolveIcon(container) {
+    const svgs = container.querySelectorAll('svg[data-id]');
+    for (let icon of svgs) {
+        const type = icon.getAttribute('data-type');
+        const id = icon.getAttribute('data-id');
+        icon.replaceChildren(createUse(type, id));
+        icon.removeAttribute('data-type');
+        icon.removeAttribute('data-id');
+    }
+    return container;
+}
+
+export {
+    createIcon,
+    resolveIcon
+}

lib/ui/tooltip.d.ts

@@ -0,0 +1,2 @@
+export function setTooltip(container: HTMLElement, content: string | HTMLElement): void
+export function resolveTooltip(container: HTMLElement): HTMLElement

lib/ui/tooltip.js

@@ -0,0 +1,58 @@
+function setTooltip(container, content) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tooltip-wrapper tooltip-color';
+    wrapper.style.visibility = 'hidden';
+    wrapper.style.opacity = 0;
+    const pointer = document.createElement('div');
+    pointer.className = 'tooltip-pointer tooltip-color';
+    const curtain = document.createElement('div');
+    curtain.className = 'tooltip-curtain tooltip-color';
+    wrapper.append(pointer, curtain);
+
+    const cnt = document.createElement('div');
+    cnt.className = 'tooltip-content';
+    if (content instanceof HTMLElement) {
+        cnt.appendChild(content);
+    } else {
+        cnt.innerText = content;
+    }
+    wrapper.appendChild(cnt);
+    container.insertAdjacentElement('afterend', wrapper);
+
+    let tid;
+    container.addEventListener('mouseenter', () => {
+        tid && clearTimeout(tid);
+        tid = setTimeout(() => {
+            const left = container.offsetLeft + container.offsetWidth / 2 - wrapper.offsetWidth / 2;
+            const top = container.offsetTop - wrapper.offsetHeight - 14;
+            wrapper.style.left = `${left}px`;
+            wrapper.style.top = `${top}px`;
+            wrapper.style.visibility = 'visible';
+            wrapper.style.opacity = 1;
+        }, 100);
+    });
+    container.addEventListener('mouseleave', () => {
+        tid && clearTimeout(tid);
+        tid = setTimeout(() => {
+            wrapper.style.visibility = 'hidden';
+            wrapper.style.opacity = 0;
+        }, 300);
+    });
+}
+
+function resolveTooltip(container) {
+    const tips = container.querySelectorAll('[title]');
+    for (let tip of tips) {
+        const title = tip.getAttribute('title');
+        if (title != null) {
+            tip.removeAttribute('title');
+            setTooltip(tip, title);
+        }
+    }
+    return container;
+}
+
+export {
+    setTooltip,
+    resolveTooltip
+}