@nebularstreams/libmui 2.0.2 → 2.0.4

package/src/index.js

@@ -0,0 +1,34 @@
+import m from "mithril";
+
+import {Button, ButtonNew, Icon, Empty, Selector} from "./widgets/Basic";
+import CardieWidget from "./widgets/CardieWidget";
+import InputWidget from "./widgets/InputWidget";
+import NoticeWidget from "./widgets/NoticeWidget";
+import SwitchWidget from "./widgets/SwitchWidget";
+import * as OverflowUtils from "./widgets/OverflowUtils";
+import {clearModal, popupMessage} from "./util/widgets";
+import Separator from "./widgets/Separator";
+import RangeWidget from "./widgets/RangeWidget";
+import startApp from "./app/app"
+import defineWidget from "./util/widgets.utils";
+
+import "./style.js"
+
+export {
+    Button,
+    ButtonNew,
+    CardieWidget,
+    Empty,
+    Icon,
+    InputWidget,
+    NoticeWidget,
+    OverflowUtils,
+    RangeWidget,
+    Selector,
+    SwitchWidget,
+    Separator,
+    clearModal,
+    popupMessage,
+    startApp,
+    defineWidget
+}

package/src/style.js

@@ -0,0 +1,14 @@
+import "./css/body.css"
+import "./css/flex.css"
+import "./css/cardie.css"
+import "./css/b-root.css"
+import "./css/b-root-bootstrap.css"
+import "./css/b-root-bootstrap-ext.css"
+import "./css/b-root-semantic-flex.css"
+import "./css/b-root-semantic-size.css"
+import "./css/a-measures.css"
+
+import "./css/fontawesome/fontawesome.css"
+import "./css/fontawesome/fontawesome-solid.css"
+import "./css/fontawesome/fontawesome-ext.css"
+import "./css/fontawesome/brands.min.css"

package/src/util/fuckingconfirm.js

@@ -0,0 +1,28 @@
+import {ConfirmPromise} from "./widgets.core";
+
+function confirm(text, onAction, onCancel = undefined, optionYes = "YES", optionNo = "NO") {
+    ConfirmPromise(null, text, [optionNo, optionYes], onCancel)
+        .then(({idx}) => {
+            if (idx) onAction(idx); else if (onCancel) onCancel();
+        })
+        .catch(() => {
+            if (onCancel) onCancel();
+        });
+}
+
+function confirmPromise(text, options = ["NO", "YES"], cancelError = "cancelled") {
+
+    return new Promise((resolve, reject) => {
+        ConfirmPromise(null, text, options, () => reject(new Error(cancelError)))
+            .then(({idx}) => {
+                if (idx) {
+                    resolve(idx);
+                } else {
+                    reject(new Error(cancelError));
+                }
+            });
+    });
+
+}
+
+export {confirm, confirmPromise};

package/src/util/mithril-range.js

@@ -0,0 +1,443 @@
+import m from "mithril";
+
+
+///////////////////////////////////////////////
+// Mithril Range
+// (c) 2017-2018 by Mike Linkovich
+// https://github.com/spacejack/mithril-range
+// License: MIT
+///////////////////////////////////////////////
+const
+
+    NONE = 0,
+    MOUSE = 1,
+    TOUCH = 2,
+
+    // So we aren't triggered by echoed mouse events (some mobile browsers)
+    DEVICE_DELAY = 350,
+
+    isIOS = !!navigator.userAgent.match(/iPhone|iPad|iPod/i);
+
+// This is some unbelievable stone-age nonsense.
+// Workaround for webkit bug where event.preventDefault
+// within touchmove handler fails to prevent scrolling.
+
+let
+    iOSHackApplied = false;
+
+/** Clamp number to range */
+function clamp(n, min, max) {
+    return Math.min(Math.max(n, min), max);
+}
+
+function applyIOSHack() {
+    // Only apply this hack if iOS, haven't yet applied it,
+    // and only if a component is actually created
+    if (!isIOS || iOSHackApplied) {
+        return;
+    }
+    window.addEventListener("touchmove", function () {
+    });
+    iOSHackApplied = true;
+}
+
+export function quantize(val, min, max, step) {
+    if (max - min <= 0) {
+        return min;
+    }
+    if (step <= 0) {
+        return clamp(val, min, max);
+    }
+    const
+        steps = Math.ceil((max - min) / step),
+        v = min + Math.round(steps * (val - min) / (max - min)) * step;
+    return clamp(v, min, max);
+}
+
+
+/** Range Component */
+function MithrilRange() {
+    let
+        elHit,
+        elBar,
+        elBar0,
+        elBar1,
+        elHandle,
+        rcBar,
+        device = NONE,
+        pressed = false,
+
+        useAbsolute = false,
+        factorCoarse = 4,
+        factorFine = 1,
+        absolute,
+        lastRead,
+
+        // Attrs we need to cache
+        min = 0,
+        max = 10,
+        value = 0,
+        startValue = 0,
+        step = 1,
+        orientation = "horizontal",
+        onchange,
+        ondrag;
+
+    // App handlers
+    function onPressAbsolute(x, y) {
+        startValue = value;
+        pressed = absolute = true;
+        rcBar = elBar.getBoundingClientRect();
+        const val = moveHandleAbsolute(x, y);
+        if (val !== value) {
+            value = val;
+            if (ondrag && ondrag(value) !== false) {
+                m.redraw();
+            }
+        }
+    }
+
+    function onPressDelta(x, y, e, isTouch) {
+        startValue = value;
+        pressed = true;
+        absolute = false;
+        rcBar = elBar.getBoundingClientRect();
+        lastRead = (orientation === "vertical") ? y : x;
+        if (!isTouch) e.target.requestPointerLock();
+    }
+
+    function moveHandleAbsolute(x, y) {
+
+        let
+            barLength,
+            delta;
+
+        if (orientation === "vertical") {
+
+            barLength = rcBar.bottom - rcBar.top;
+            delta = rcBar.bottom - y;
+
+        } else {
+            barLength = rcBar.right - rcBar.left;
+            delta = x - rcBar.left;
+        }
+
+        delta = clamp(delta, 0, barLength);
+        const val = quantize((delta / barLength) * (max - min) + min, min, max, step);
+        setStyles(val);
+        return val;
+    }
+
+    function moveHandleDelta(x, y, event) {
+
+        const
+            factor = event.shiftKey
+                ? factorCoarse
+                : (event.metaKey || event.ctrlKey)
+                    ? 4 * factorCoarse
+                    : factorFine;
+
+        let
+            delta;
+
+        if (orientation === "vertical") {
+            delta = event.movementY || 0;
+        } else {
+            delta = event.movementX || 0;
+        }
+
+        let newVal;
+        let s = step > 0 ? step : (max - min) / 100;
+
+        if (delta < 0) {
+            newVal = Math.max(value + s * factor * delta, min);
+        } else if (delta > 0) { // right/up
+            newVal = Math.min(value + s * factor * delta, max);
+        } else {
+            return value;
+        }
+
+        newVal = quantize(newVal, min, max, step);
+
+        setStyles(newVal);
+        return newVal;
+
+    }
+
+    function onPress(x, y, event) {
+        return useAbsolute
+            ? onPressAbsolute(x, y, event)
+            : onPressDelta(x, y, event);
+    }
+
+    function moveHandle(x, y, event) {
+        return absolute
+            ? moveHandleAbsolute(x, y, event)
+            : moveHandleDelta(x, y, event);
+    }
+
+    // Event handlers
+    function onMouseDown(e) {
+        if (device === TOUCH) {
+            return;
+        }
+        device = MOUSE;
+        if (e.button !== 0) {
+            return;
+        }
+        window.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", onMouseUp);
+        onPress(e.clientX, e.clientY, e);
+    }
+
+    function onMouseMove(e) {
+        e.preventDefault();
+        onMove(e.clientX, e.clientY, e);
+    }
+
+    function onMouseUp(e) {
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+        onRelease(e.clientX, e.clientY, e);
+    }
+
+    function onTouchStart(e) {
+        if (device === MOUSE) {
+            return;
+        }
+        elHit.addEventListener("touchmove", onTouchMove);
+        elHit.addEventListener("touchend", onTouchEnd);
+        const t = e.changedTouches[0];
+        onPress(t.clientX, t.clientY, e, true);
+    }
+
+    function onTouchMove(e) {
+        e.preventDefault();
+        const t = e.changedTouches[0];
+        onMove(t.clientX, t.clientY, e);
+    }
+
+    function onTouchEnd(e) {
+        elHit.removeEventListener("touchmove", onTouchMove);
+        elHit.removeEventListener("touchend", onTouchEnd);
+        const t = e.changedTouches[0];
+        onRelease(t.clientX, t.clientY, t);
+    }
+
+    function onKeyDown(e) {
+
+        const k = e.keyCode;
+        let newVal;
+
+        if (k === 33) { // pgup
+            e.preventDefault();
+            let s = Math.max((max - min) / 10, step);
+            if (s <= 0) {
+                s = 1;
+            }
+            newVal = quantize(value + s, min, max, step);
+        } else if (k === 34) { // pgdown
+            e.preventDefault();
+            let s = Math.max((max - min) / 10, step);
+            if (s <= 0) {
+                s = 1;
+            }
+            newVal = quantize(value - s, min, max, step);
+        } else if (k === 35) { // end
+            e.preventDefault();
+            newVal = max;
+        } else if (k === 36) { // home
+            e.preventDefault();
+            newVal = min;
+        } else if (k === 37 || k === 40) { // left/down
+            e.preventDefault();
+            let s = (step > 0 ? step : (max - min) / 10) * (e.shiftKey ? 0.25 : (e.ctrlKey || e.metaKey) ? 4 : 1);
+            newVal = Math.max(value - s, min);
+        } else if (k === 38 || k === 39) { // right/up
+            e.preventDefault();
+            let s = (step > 0 ? step : (max - min) / 10) * (e.shiftKey ? 0.25 : (e.ctrlKey || e.metaKey) ? 4 : 1);
+            newVal = Math.min(value + s, max);
+        } else if (k === 48) { // 0
+            newVal = (max + min) / 2;
+        }
+        if (typeof newVal !== "number" || newVal === value) {
+            return; // no change to make
+        }
+        value = newVal;
+        setStyles(value);
+        if (onchange && onchange(value) !== false) {
+            m.redraw();
+        }
+    }
+
+    function onMove(x, y, event) {
+        if (!pressed) {
+            return;
+        }
+
+        const val = moveHandle(x, y, event);
+        if (val !== value) {
+            value = val;
+            if (ondrag && ondrag(value) !== false) {
+                m.redraw();
+            }
+        }
+    }
+
+    function onRelease(x, y, e) {
+
+        if (!pressed) {
+            return;
+        }
+
+        pressed = false;
+        value = moveHandle(x, y, e);
+
+        if (onchange && onchange(value) !== false) {
+            m.redraw();
+        }
+
+        /*
+        if (value !== startValue) {
+            if (onchange && onchange(value) !== false) {
+                m.redraw();
+            }
+        }
+        */
+
+        if (!absolute) document.exitPointerLock();
+
+        setTimeout(function () {
+            if (!pressed) {
+                device = NONE;
+            }
+        }, DEVICE_DELAY);
+    }
+
+    /** Compute handle position style */
+    function positionStyle(val) {
+        let s = (val - min) / (max - min);
+        if (orientation === "vertical") {
+            s = 1.0 - s;
+        }
+        return String(100 * s) + "%";
+    }
+
+    /** Set styles for movable parts */
+    function setStyles(value) {
+        const
+            ps = positionStyle(value),
+            rps = positionStyle(max - value + min);
+
+        if (orientation === "vertical") {
+            elHandle.style.top = ps;
+            elBar0.style.height = ps;
+            elBar1.style.height = rps;
+        } else {
+            elHandle.style.left = ps;
+            elBar0.style.width = rps;
+            elBar1.style.width = ps;
+        }
+    }
+
+    /** Some attrs need to be cached (and updated) so that they are current in event handlers */
+    function updateAttrs(attrs) {
+        min = attrs.min;
+        max = attrs.max;
+        step = (typeof attrs.step === "number" && !Number.isNaN(attrs.step))
+            ? clamp(attrs.step, 0, max - min) : 1;
+        orientation = attrs.orientation === "vertical" ? "vertical" : "horizontal";
+        onchange = attrs.onchange;
+        ondrag = attrs.ondrag;
+        if (typeof attrs.value === "number") {
+            value = clamp(attrs.value, min, max);
+        }
+        useAbsolute = !attrs.relative;
+        factorCoarse = (attrs.factor && attrs.factor[0]) || 4;
+        factorFine = (attrs.factor && attrs.factor[1]) || 1;
+
+    }
+
+    /** Return mithril component hooks object */
+    return {
+        oncreate: ({attrs, dom}) => {
+            applyIOSHack();
+            updateAttrs(attrs);
+            elHit = dom;
+            elBar = elHit.querySelector(".mithril-range-bar");
+            elBar0 = elBar.querySelector(".mithril-range-bar-0");
+            elBar1 = elBar.querySelector(".mithril-range-bar-1");
+            elHandle = elBar.querySelector(".mithril-range-handle");
+            elHit.addEventListener("mousedown", onMouseDown);
+            elHit.addEventListener("touchstart", onTouchStart);
+            elHit.addEventListener("keydown", onKeyDown);
+        },
+        onremove: function () {
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+            elHit.removeEventListener("mousedown", onMouseDown);
+            elHit.removeEventListener("touchstart", onTouchStart);
+            elHit.removeEventListener("touchmove", onTouchMove);
+            elHit.removeEventListener("touchend", onTouchEnd);
+            elHit.removeEventListener("keydown", onKeyDown);
+        },
+        view: function ({attrs, children}) {
+
+            updateAttrs(attrs);
+            value = quantize(value, min, max, step);
+            const a = {
+                class: "mithril-range nokey" + (attrs.relative ? " isrelative " : " ") + (value === 0 ? "atzero" : value < 0 ? "belowzero" : "overzero") + (attrs.class != null ? " " + attrs.class : ""),
+                tabIndex: "0",
+                role: "slider",
+                "aria-valuemin": String(min),
+                "aria-valuemax": String(max),
+                "aria-valuenow": String(value),
+                "aria-orientation": orientation
+            };
+            if (attrs.id) {
+                a.id = attrs.id;
+            }
+            // noinspection JSUnresolvedVariable
+            if (attrs.ariaLabelledby) {
+                a["aria-labelledby"] = attrs.ariaLabelledby;
+            }
+            if (attrs.disabled) {
+                a.style = {pointerEvents: "none"};
+                a["aria-disabled"] = "true";
+            }
+            const
+                ps = positionStyle(value),
+                rps = positionStyle(max - value + min);
+            let
+                handleStyle,
+                bar0Style,
+                bar1Style;
+
+            if (orientation === "vertical") {
+                handleStyle = {top: ps};
+                bar0Style = {height: ps};
+                bar1Style = {height: rps};
+            } else {
+                handleStyle = {left: ps};
+                bar0Style = {width: rps};
+                bar1Style = {width: ps};
+            }
+            return m("div", a, m("div", {class: "mithril-range-bar nokey"}, m("div", {
+                class: "mithril-range-bar-0 nokey",
+                style: bar0Style
+            }), m("div", {
+                class: "mithril-range-bar-1 nokey",
+                style: bar1Style
+            }), m("div", {
+                class: "mithril-range-handle nokey",
+                style: handleStyle
+            }, children)), !!attrs.name && m("input", {
+                type: "hidden",
+                name: attrs.name,
+                value: String(value)
+            }));
+        }
+    };
+}
+
+export default MithrilRange;

package/src/util/util.clone.js

@@ -0,0 +1,8 @@
+const
+    ENABLE_SCLONE = true, // atm SLOWER than JSON
+    softClone = (o) => JSON.parse(JSON.stringify(o)),
+    clone = window.structuredClone && ENABLE_SCLONE
+        ? window.structuredClone
+        : softClone;
+
+export default clone;