@nebularstreams/libmui 0.1.0

package/src/util/mithril-range.js

@@ -0,0 +1,444 @@
+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;
+}
+
+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);
+}
+
+exports.quantize = quantize;
+
+/** 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,10 @@
+/* global EXPORTS */
+
+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;

package/src/util/util.tokenizer.js

@@ -0,0 +1,227 @@
+/* eslint-disable */
+/**
+ *
+ * String Tokenizer functions
+ *
+ * Substitutes parameters inside strings
+ * Parameters are separated by $ at the beggining and end: $PARAM$, $PARAM1$
+ * Parameters can navigate source object like $object/very/deep$
+ * Parameters can include VERY SIMPLE default values like $object/very/deep=myvalue$
+ *
+ *          Note that default values cannot contain conflicting regexp symbols. This is a side functionality
+ *          and never meant to support any default value use case, but alpha chars and numbers
+ *
+ * (c) Rodolfo LP 2001 - Public Domain
+ *
+ * @typedef {{ id:string,url:string}} UrlDefinition
+ * @typedef {{ message:string, getTitle:boolean=false, defaultTitle:string="url" }} ResolveUrlOptions
+ */
+
+/* eslint-disable no-use-before-define,no-unused-vars,prefer-destructuring,no-param-reassign,no-prototype-builtins */
+
+// eslint-disable-next-line no-useless-escape
+// noinspection RegExpRedundantEscape
+const
+    TAG = "[TOKENIZER]",
+    TOK_EXPR = /\$([A-Za-z0-9_\/\:\=]+)\$/g,
+
+    tokenize = (str, obj, isEncode) => tokenizeCore(str, obj, {
+        encode: isEncode,
+        defvalue: ""
+    }),
+    tokenizeKeep = (str, obj, isEncode) => tokenizeCore(str, obj, {encode: isEncode}),
+    tokenizeWithDefault = (str, obj, defaultValue) => tokenizeCore(str, obj, defaultValue == null ? null : {defvalue: defaultValue}),
+    tokenizeStrict = (str, obj, isEncode, isUnescape) => tokenizeCore(str, obj, {
+        encode: isEncode,
+        unescape: isUnescape,
+        dothrow: true
+    }),
+
+    Parsers = {
+        daterel: epoch => new Date(epoch).toISOString()
+    };
+
+function tokenizeCore(str, obj, options) {
+
+    if (!str) return "";
+    if (typeof (str) !== "string") return str;
+
+    // eslint-disable-next-line no-param-reassign
+    options = options || {};
+    obj = obj || {};
+
+    let ckey;
+
+    return str.replace(TOK_EXPR, (match, complexkey) => {
+
+        let defval = null,
+            isFreak = false;
+
+        if (complexkey.indexOf("=") > 0) {
+            ckey = complexkey.split("=");
+            complexkey = ckey[0];
+            isFreak = (ckey.length === 3);
+            // eslint-disable-next-line no-nested-ternary
+            defval = isFreak
+                ? options.dothrow ? ckey[2] : null
+                : ckey[1];
+        }
+
+        const typed = complexkey.split(":"),
+            key = typed[0],
+            keytype = typed[1] || null,
+
+            keys = key.split("/"),
+            root = keys.shift();
+
+        let
+            data = obj[root];
+
+        if (typeof (data) === "number") data = "" + data;
+
+        let fdata = (keys.length ? getPointedData(data, keys.join("/")) : data) || defval;
+
+        if (fdata == null && options.dothrow) {
+            throw new Error("Parameter " + root + (keys.length ? "/" + keys.join("/") : "") + " is required");
+        }
+
+        if (fdata == null) {
+            fdata = options.hasOwnProperty("defvalue")
+                ? options.defvalue
+                : "$" + key + (isFreak ? "==" + ckey[2] : "") + "$";
+        }
+
+        if (keytype && Parsers[keytype]) {
+            fdata = Parsers[keytype](fdata);
+        }
+
+        if (options.unescape) {
+            fdata = unescape(fdata);
+        }
+
+        return (options.encode ? escape(fdata) : fdata);
+
+    });
+}
+
+/**
+ * Resolves a pointer into a JSON data structure
+ * @param {Object} data JSON Data
+ * @param {String} pointer Pointer expression
+ * @return {Object | null} resolved data
+ */
+
+const getPointedData = function (data, pointer) {
+    if (!pointer) return data;
+    try {
+        const ps = pointer.split("/");
+        let d = data;
+        // eslint-disable-next-line guard-for-in
+        for (const l in ps) {
+            d = d[ps[l]];
+            if (!d) {
+                d = null;
+                break;
+            }
+        }
+        return d;
+    } catch (e) {
+        return null;
+    }
+};
+
+/**
+ * Tokenizes one object with another
+ * @param {object} source
+ * @param {object} tokenizeValues
+ * @param strict Whether to require all templates to be resolved
+ * @retuen {object} source
+ */
+
+function tokenizeObject(source, tokenizeValues, strict, asNewObject) {
+
+    const tokenizer = strict ? tokenizeStrict : tokenizeKeep;
+    const retObject = asNewObject ? {} : source;
+
+    if (typeof source === "string") {
+        return tokenizer(source, tokenizeValues);
+    }
+
+    if (typeof source === "object") {
+
+        if (source.length) {
+            // root is an array
+            // an array
+            const arr = [];
+            for (const item of source) {
+                arr.push(tokenizeObject(item, tokenizeValues, strict, true));
+            }
+            return arr;
+        }
+
+        for (const prop of Object.keys(source)) {
+            const value = source[prop];
+            if (typeof value === "object") {
+                retObject[prop] = tokenizeObject(value, tokenizeValues, strict, true);
+            } else if (typeof value === "string") {
+                retObject[prop] = tokenizer(source[prop], tokenizeValues);
+            } else {
+                retObject[prop] = value;
+            }
+        }
+    }
+    return retObject;
+}
+
+/**
+ * Resolves a playout URL
+ * @param {string|UrlDefinition} tokenizedUrl The URL to parse
+ * @param {Object=} parameters Parameters to tokenize the URL with
+ * @param {ResolveUrlOptions=} options Miscellaneous options for this call
+ * @return string
+ */
+
+function tokenizeUrl(tokenizedUrl, parameters, options) {
+
+    options = options || {};
+
+    const
+        {message, getTitle, defaultTitle} = options,
+        finalDefaultTitle = defaultTitle || "Url",
+        title = typeof tokenizedUrl === "string"
+            ? defaultTitle
+            : (typeof tokenizedUrl === "object" && tokenizedUrl.id ? tokenizedUrl.id || finalDefaultTitle : finalDefaultTitle);
+
+
+    // just return the title of an URL
+    if (getTitle) {
+        return title;
+    }
+
+    //  return the url itself
+    const
+        url = typeof tokenizedUrl === "string"
+            ? tokenizedUrl
+            : (typeof tokenizedUrl === "object" && tokenizedUrl.url ? tokenizedUrl.url : null);
+
+    try {
+        return tokenizeStrict(
+            url,
+            parameters || {},
+            "..."
+        );
+    } catch (e) {
+        console.log(TAG, e.message);
+        return message || "(not enough parameters)";
+    }
+}
+
+export {
+    tokenize,
+    tokenizeStrict,
+    tokenizeObject,
+    tokenizeKeep,
+    tokenizeWithDefault,
+    tokenizeUrl,
+    getPointedData
+};