@nebularstreams/libmui 2.0.13 → 2.0.15

package/src/util/tainter.js

@@ -0,0 +1,31 @@
+import m from "mithril";
+
+let
+    gTainted = false;
+
+function taint() {
+    gTainted = true;
+}
+
+function taintRedraw() {
+    const r = gTainted;
+    gTainted = true;
+    // eslint-disable-next-line no-unused-expressions
+    r && m.redraw();
+}
+
+function isTainted() {
+    return gTainted;
+}
+
+function untaint() {
+    gTainted = false;
+    m.redraw();
+}
+
+export {
+    taint,
+    taintRedraw,
+    isTainted,
+    untaint
+};

package/src/util/util.tokenizer.js

@@ -216,6 +216,37 @@ function tokenizeUrl(tokenizedUrl, parameters, options) {
     }
 }
 
+function sanitizeFilename(filename) {
+    return filename ? filename.trim()
+        .toLowerCase()
+        .replace(/[^0-9A-Z.-]+/gi, "") : null;
+}
+
+
+const generateFilename = (url, prefix = undefined) => {
+
+    const
+        dateCode = parseInt(md5(url)
+            .substring(24), 16)
+            .toString(32);
+
+    return (prefix ? sanitizeFilename(prefix) + "-" : "") + dateCode;
+
+}; // 2025 --- 24 years layer i'm 50 ! I wonder about my past self ...
+
+const Tokenizer = {
+    tokenize,
+    tokenizeStrict,
+    tokenizeObject,
+    tokenizeKeep,
+    tokenizeWithDefault,
+    tokenizeUrl,
+    getPointedData,
+    sanitizeFilename,
+    generateFilename
+};
+
+export default Tokenizer;
 export {
     tokenize,
     tokenizeStrict,
@@ -223,5 +254,7 @@ export {
     tokenizeKeep,
     tokenizeWithDefault,
     tokenizeUrl,
-    getPointedData
+    getPointedData,
+    sanitizeFilename,
+    generateFilename
 };

package/src/widgets/ButtonChoiceWidget.js

@@ -0,0 +1,72 @@
+import m from "mithril";
+import {ButtonNew, defineWidget} from "./Basic";
+import Separator from "./Separator"
+
+const
+
+    /*
+         SizeChoices = {
+             "1080p": {width: 1920, height: 1080, value: "1080p"},
+             "720p": {width: 1280, height: 720, value: "720p"},
+             "Fluid": {width: null, height: null, value: "Fluid"},
+             "Custom": {value: ""}
+         }
+     */
+
+    ButtonChoiceWidget = defineWidget(
+        ({attrs}) => {
+
+            const
+                {value, field, toggle, element, emptyMessage, chooseKey, chooseDict} = attrs,
+                choose = (!attrs.choose && chooseKey && chooseDict) ? chooseDict[chooseKey] : attrs.choose,
+                choices = choose
+                    ? choose.map((choice) => ({value: choice, caption: choice}))
+                    : attrs.choices || {};
+
+            const
+                keys = Object.keys(choices),
+                has = keys.length,
+                clase = (attrs.class || "") + (attrs.subclass ? " " + attrs.subclass : " scaff scaff-b1");
+
+            return has || emptyMessage
+                ? [
+                    ...attrs.label ? [m(Separator, {text: attrs.label, class: attrs.labelClass || ""})] : [],
+                    m(
+                        (element || "div") + ".buttonchoice.flexrow.ohidden",
+                        {
+                            class: clase + (attrs.icon ? " withicon fa-" + attrs.icon : ""),
+                            title: attrs.title
+                        },
+                        m(
+                            ".flexrow.grows.ohidden.wrap" + (attrs.icon ? " scaff-left" : ""),
+                            keys.length
+                                ? keys.map((choicekey) => {
+
+                                    const
+                                        choice = choices[choicekey],
+                                        choicevalue = attrs.raw && field ? choice : choice.value,
+                                        finalchoicevalue = field ? choicevalue[field] : choicevalue,
+                                        current = finalchoicevalue === value;
+
+                                    // noinspection EqualityComparisonWithCoercionJS
+                                    return m(ButtonNew, {
+
+                                        icon: choice.icon || undefined,
+                                        class: "grows scaff-b0 " + (attrs.buttonClass ? attrs.buttonClass + " " : "rectbutton unitheightsmall ") + (choice.class ? choice.class + " " : "") + (current ? "accent" : ""),
+                                        title: choice.current ? choice.titleOn || choice.title : choice.titleOff || choice.title,
+                                        onClick: (e) => {
+                                            attrs.onchange(toggle ? current ? undefined : choice : choice, choicekey, e);
+                                            m.redraw();
+                                        }
+                                    }, attrs.render ? attrs.render(choice) : choice.caption || choicekey);
+                                })
+                                : [m(".emptychoice.grows.al-center.align-self-center.unitheightsmall", attrs.emptyMessage)]
+                        )
+                    )
+                ]
+                : [];
+        }
+    );
+
+export default ButtonChoiceWidget;
+

package/src/widgets/ColorJoeWidget.js

@@ -0,0 +1,144 @@
+import m from "mithril";
+import defineWidget from "../util/widgets.utils";
+import {popupMessage} from "../util/widgets"
+
+const
+    colorjoe = require("colorjoe");
+// TODO
+// ColorProbeButton = require("ColorProbeButton");
+
+const
+    ColorJoe = defineWidget(
+        () => m(".colorjoe-frame.absolute"),
+        null,
+        ({attrs, dom}) => {
+
+            window.SCALE = 1;
+
+            attrs.state.joe = (attrs.hsl ? colorjoe.hsl : colorjoe.rgb)(
+                dom,
+                attrs.color,
+                attrs.noalpha
+                    ? []
+                    : [
+                        // "currentColor",
+                        "alpha"
+                    ]
+            );
+
+            attrs.state.joe.on("change", (c) => {
+                attrs.onColor(attrs.noalpha ? c.css() : c.cssa(), c);
+            })
+                .update();
+        }
+    ),
+    FAVORITES = [],
+    ColorJoeWrapper = defineWidget(
+        ({attrs, state, children}) => m(".colorjoe-popper.flexcol", {
+            class: attrs.noalpha ? "no-alpha" : ""
+        }, [
+            m(ColorJoe, {...attrs, state}),
+            ...children,
+            m(".flexrow.extended.w-100.scaff-top.pad-2.wrap", [
+
+                [0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => m("button.scaff.scaff-b1.marg-1.unitheightsmall.grows", {
+                    class: FAVORITES[i] ? "" : "chequered",
+                    style: {
+                        ...FAVORITES[i] && {backgroundColor: FAVORITES[i]}
+                    },
+                    onclick: (e) => {
+                        if (e.shiftKey) {
+                            FAVORITES[i] = state.joe.get()
+                                .css();
+                        } else {
+                            if (FAVORITES[i]) state.joe.set(FAVORITES[i]);
+                        }
+                        if (attrs.onRedraw) attrs.onRedraw(); else m.redraw();
+                    }
+                })),
+                m(".flexbreak"),
+                /* TODO ELECTRON
+                m(ColorProbeButton, {
+                    class: "grows marg-1 scaff scaff-b1 unitheightsmall",
+                    icon: "magic",
+                    title: "Pick a color from the scene",
+                    onColor: (color) => state.joe.set(color)
+                }),
+                 */
+                ...attrs.onRemove ? [m("button.scaff.scaff-b1.unitheightsmall.marg-1.pad-2.pad-h.grows.fabf.transp.bg-accent.fa-trash", {
+                    onclick: () => attrs.onRemove(state.joe.get())
+                })] : []
+            ])
+        ])
+    ),
+    popupColor = (vnode) => popupMessage(
+        () => m(ColorJoeWrapper, {
+            noalpha: vnode.attrs.noalpha,
+            color: vnode.state.color,
+            hsl: vnode.attrs.hsl,
+            onColor: (parsedColor, colorObject) => {
+                vnode.state.color = parsedColor;
+                if (vnode.attrs.onchange) vnode.attrs.onchange(parsedColor, colorObject);
+                m.redraw();
+            },
+            onRemove: () => {
+                if (vnode.attrs.onchange) vnode.attrs.onchange(null, null);
+                popupMessage(null);
+            },
+            onRedraw: () => {
+                popupMessage.redraw();
+                m.redraw();
+            }
+        }, vnode.children),
+
+        () => {
+        },
+
+        ".modal-content-popper"
+    );
+
+const ColorJoeWidget = defineWidget(
+    (vnode) => {
+        const {attrs, state} = vnode;
+        return [
+            m(
+                ".colorjoe-cell.chequered",
+                {
+                    class: (attrs.class || "") + (state.shown ? " open" : ""),
+                    title: attrs.title,
+                    ...attrs.style && {style: attrs.style}
+                },
+                [
+                    m(".inset", {
+                        style: {
+                            backgroundColor: state.color
+                        },
+                        ...attrs.caption && {"data-caption": attrs.caption, class: "titled"},
+                        onclick: (e) => {
+                            if (attrs.onshiftclick && (e.shiftKey || e.ctrlKey)) {
+                                attrs.onshiftclick();
+                            } else {
+                                popupColor(vnode);
+                            }
+                        }
+                    })
+                ])
+        ];
+    },
+    ({attrs, state}) => {
+        state.original = attrs.color;
+        state.color = state.original || "rgba(0,0,0,0)";
+    },
+    null,
+    null,
+    ({attrs, state}) => {
+        if (state.original !== attrs.color) {
+            state.original = attrs.color;
+            state.color = state.original || "rgba(0,0,0,0)";
+            m.redraw();
+        }
+    }
+);
+
+
+export default ColorJoeWidget;

package/src/widgets/ComboWidget.js

@@ -0,0 +1,155 @@
+import m from "mithril";
+
+const
+    PropGroup = {
+        view: ({attrs}) => attrs.items.map(({name}, index) => m(
+            "option",
+            {
+                ...(attrs.state.index === index + (attrs.offset || 0)) && {selected: true}
+            },
+            name
+        ))
+    };
+
+let
+    __timer;
+
+function parseGroups(attrs, state) {
+
+    if (attrs.groups) {
+
+        state.groups = {};
+        state.allItems = [];
+
+        attrs.parsed = true;
+
+        const
+            groupKeys = Object.keys(attrs.groups);
+
+        groupKeys.forEach((groupKey) => {
+            state.groups[groupKey] = {
+                label: groupKey,
+                len: attrs.groups[groupKey].length,
+                items: attrs.groups[groupKey]
+            };
+        });
+
+        const
+            groupValues = Object.values(state.groups);
+
+        groupValues
+            .forEach((group, index) => {
+
+                if (attrs.value) {
+                    state.index = 0;
+                }
+
+                group.offset = index ? groupValues[index - 1].offset + groupValues[index - 1].len : 0;
+                state.allItems = state.allItems.concat(group.items);
+                if (attrs.value) {
+
+                    group.items.forEach((item, itemIndex) => {
+                        const
+                            itemValue = item.value,
+                            parsedValue = attrs.parser ? attrs.parser(itemValue) : itemValue;
+                        if (parsedValue === attrs.value) {
+                            state.index = itemIndex + group.offset;
+                        }
+                    });
+                }
+            });
+    } else if (attrs.items) {
+        state.index = 0;
+        for (let i = 0, l = attrs.items.length; i < l; i++) {
+            const
+                itemValue = attrs.items[i].value,
+                parsedValue = attrs.parser ? attrs.parser(itemValue) : itemValue;
+            if (parsedValue === attrs.value) {
+                state.index = i;
+                break;
+            }
+        }
+        state.allItems = attrs.items;
+    } else {
+        state.allItems = [];
+    }
+
+}
+
+const ComboWidget = {
+
+    /**
+     * Creates the Widget View
+     * @param vnode
+     * @param {SelectAttrs} vnode.attrs
+     * @param {Object} vnode.state
+     * @return {*}
+     * @private
+     */
+
+
+    view: ({attrs, state}) => {
+        const {groups} = state;
+        return m(
+            "select",
+            {
+                "aria-label": attrs.caption,
+                class: attrs.class,
+                oninput: (ev) => {
+
+                    // el desincronismo es si se camian los items y el state no se entera
+                    // esto asegura que estan synchro
+                    parseGroups(attrs, state);
+
+                    const
+                        index = state.index = ev.target.selectedIndex,
+                        item = index >= 0 ? state.allItems[index] : null;
+
+                    if (attrs.onchange && item) {
+                        attrs.onchange(item.value, item, index);
+                    }
+
+                    m.redraw();
+                }
+            },
+            groups
+                ? Object.values(groups)
+                    .map((group) => m("optgroup", {label: group.label}, m(PropGroup, {
+                        items: group.items,
+                        offset: group.offset,
+                        state
+                    })))
+                : m(PropGroup, {items: (attrs.items != null ? attrs.items : []), state}));
+    },
+
+    oninit: ({attrs, state}) => {
+        Object.assign(state, {
+            index: attrs.index || 0,
+            initial: attrs.value
+        });
+        parseGroups(attrs, state);
+    },
+
+    oncreate: () => {
+    },
+
+    onupdate: ({attrs, state}) => {
+
+        const refresh = (attrs.value !== undefined && state.initial !== attrs.value);
+
+        if (!state.groups && !state.allItems || refresh) {
+
+            // sets index from attrs.value
+            parseGroups(attrs, state);
+
+            if (refresh) {
+                state.initial = attrs.value;
+                clearTimeout(__timer);
+                __timer = setTimeout(() => m.redraw(), 50);
+            }
+        }
+
+    }
+};
+
+export default ComboWidget;

package/src/widgets/CoolContentTicker.js

@@ -0,0 +1,239 @@
+import {defineWidget, ButtonNew} from "./Basic.js"
+import {promptName} from "./OverflowUtils"
+import {confirmPromise} from "../util/fuckingconfirm"
+
+const
+    ThematicWrapper = defineWidget(
+        ({attrs, children}) => m(
+            ".buttonchoice.withicon.flexrow.scaff.scaff-b1.fadein.ohidden.fa-" + (attrs.icon || "gear"),
+            {class: (attrs.containerClass || "col-11 grows marg-1"), title: attrs.title},
+            m(
+                ".flexrow.wrap.grows.col-11.ohidden.scaff-left.bg-inputs",
+                {class: attrs.class},
+                children
+            )
+        )
+    ),
+    optionsPrompt = (items, index, onAdd, onDelete, onEdit, allowUpdate) => {
+
+        const item = items[index];
+
+        confirmPromise(
+            null,
+
+            "Choose an action for this preset",
+
+            onAdd && allowUpdate
+                ? ["DELETE", "RENAME", "UPDATE", "CANCEL"]
+                : ["DELETE", "RENAME", "CANCEL"]
+        )
+            .then(({idx}) => {
+
+                if (idx === 0) {
+                    items.splice(index, 1);
+                    if (onDelete) onDelete(index);
+                    m.redraw();
+                } else if (idx === 1) {
+                    setTimeout(() => promptName(
+                        "Rename Preset",
+                        item.title || "",
+                        "type a name for this preset",
+                        (newName) => {
+                            if (newName) {
+                                newName = newName.trim();
+                                if (newName) {
+                                    item.title = newName.substring(0, 24);
+                                    m.redraw();
+                                }
+                            }
+                        }
+                    ), 10);
+                } else if (onAdd && idx === 2) {
+                    onAdd(false, index);
+                }
+            });
+    },
+    GenericButtonTicker = defineWidget(
+        ({attrs, children}) => {
+
+            const
+                {
+                    title, noUpdate, items = [], current, altIndex, onEdit, emptyText,
+                    onAdd, onSelect, onDelete, addText = "Add New",
+                    unconfirm, buttonClass, themeIcon, themeTitle
+                } = attrs,
+
+                allItems = [
+
+                    ...items.map(
+                        (item, index) => m(
+                            "button.grows.marg-1.ellipsis.ohidden.hasShift",
+                            {
+
+                                class: (buttonClass ? buttonClass : "unitheightsmall scaff-b1")
+                                    + (index === current ? " accent" : "")
+                                    + (index === altIndex ? " alt-accent" : ""),
+
+                                title,
+                                onclick: (e) => {
+                                    if (e.metaKey && onEdit) {
+                                        onEdit(item);
+                                    } else if (onAdd && e.shiftKey) {
+                                        if (unconfirm) {
+                                            items.splice(index, 1);
+                                            if (onDelete) onDelete(index);
+                                            m.redraw();
+                                        } else {
+                                            optionsPrompt(items, index, onAdd, onDelete, undefined, !noUpdate);
+                                        }
+                                    } else {
+                                        onSelect(item, index, e.metaKey, e.shiftKey);
+                                    }
+                                }
+                            },
+                            (item.title || item.name || item.text || String(1 + index)).substring(0, 32)
+                        )
+                    ),
+
+                    ...!items.length && emptyText
+                        ? [
+                            m(".grows.marg-1.ellipsis.ohidden.al-center", emptyText)
+                        ] : [],
+
+                    ...onAdd
+                        ? [
+                            m(ButtonNew, {
+                                tabIndex: -1,
+                                icon: attrs.icon || "plus",
+                                title: attrs.addTitle || "Add a new item",
+                                class: "pad-2 pad-h al-center unitheightsmall transp addbut scaff-left bg-window-lo grows",
+                                onClick: (e) => onAdd(e.ctrlKey || e.metaKey),
+                                text: items?.length ? "" : addText
+                            })
+                        ]
+                        : [],
+
+                    ...!themeIcon && attrs.currentWidget && current >= 0 && items[current]
+                        ? attrs.currentWidget(items[current], current) || []
+                        : [],
+
+                    ...children
+                ];
+
+            return themeIcon
+                ? [
+                    m(ThematicWrapper, {
+                        title: themeTitle,
+                        containerClass: attrs.containerClass,
+                        icon: themeIcon
+                    }, allItems),
+                    ...attrs.currentWidget && current >= 0 && items[current] ? attrs.currentWidget(items[current], current) || [] : []
+                ] : allItems;
+        }
+    ),
+    CoolGenericTicker = defineWidget(
+        ({attrs, children}) => {
+
+            const
+                {
+                    nocontainer,
+                    emptyText,
+                    title,
+                    addTitle,
+                    items,
+                    currentIndex,
+                    altIndex,
+                    onEdit,
+                    onDelta,
+                    onSelect,
+                    onAdd,
+                    addText,
+                    icon,
+                    buttonClass
+                } = attrs,
+                itemz = ((items && items.length <= (attrs.max || 15)) || !onDelta)
+                    ? m(GenericButtonTicker, {
+                        addTitle,
+                        emptyText,
+                        title,
+                        items,
+                        current: currentIndex,
+                        altIndex,
+                        onSelect,
+                        onAdd,
+                        onEdit,
+                        addText,
+                        icon,
+                        buttonClass
+                    }, children)
+                    : [
+                        m(ButtonNew, {
+                            tabIndex: -1,
+                            icon: "caret-right",
+                            class: "unitheightsmall grows marg-1 no-marg-left",
+                            onClick: () => onDelta(-1)
+                        }),
+                        ...items
+                            ? [
+                                m(
+                                    ".scaff.unitheightsmall.value.al-center.bg-window-lo.grows.marg-1.no-marg-left ",
+                                    (1 + currentIndex) + " / " + items.length
+                                )
+                            ]
+                            : [],
+                        m(ButtonNew, {
+                            tabIndex: -1,
+                            icon: "caret-left",
+                            class: "unitheightsmall grows marg-1 marg-v",
+                            onClick: () => onDelta(1)
+                        }),
+                        ...onAdd
+                            ? [
+                                m(ButtonNew, {
+                                    tabIndex: -1,
+                                    icon: attrs.icon || "plus",
+                                    class: "unitheightsmall marg-1 marg-v",
+                                    onClick: () => onAdd()
+                                })
+                            ] : []
+                    ];
+
+            return nocontainer
+                ? itemz
+                : items.length || !onAdd ? m(
+                    ".flexrow.wrap.max.minusbar",
+                    {class: (attrs.dynclass ? attrs.dynclass() + " " : "") + attrs.class},
+                    itemz
+                ) : [];
+        }
+    ),
+
+    CoolContentTicker = defineWidget(
+        ({attrs}) => {
+
+            if (!attrs.layer.items) return [];
+
+            const
+                {global, layer, remoteFirst: isRemote, isCue} = attrs,
+                {storyWrapper} = global,
+                {id, items} = layer,
+
+                currentIndex = storyWrapper.getTickerIndex(id, isRemote),
+                altIndex = isRemote ? storyWrapper.getTickerIndex(id, false) : undefined;
+
+            // noinspection JSUnusedGlobalSymbols
+            return m(CoolGenericTicker, {
+                title: attrs.title,
+                onAdd: attrs.onAdd,
+                class: "marg-1 marg-h grows",
+                items,
+                currentIndex,
+                altIndex,
+                current: items[currentIndex] || undefined,
+                onDelta: (direction) => storyWrapper.tickLayer(layer, direction, isRemote, isCue),
+                onSelect: (item, index, force) => storyWrapper.setTickerIndex(layer, index, force, isRemote, isCue)
+            });
+        }
+    );
+
+export {CoolContentTicker, CoolGenericTicker, GenericButtonTicker, optionsPrompt};