@nebularstreams/libmui 2.0.13 → 2.0.14

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

@@ -215,6 +215,11 @@ function tokenizeUrl(tokenizedUrl, parameters, options) {
         return message || "(not enough parameters)";
     }
 }
+function sanitizeFilename(filename) {
+    return filename ? filename.trim()
+        .toLowerCase()
+        .replace(/[^0-9A-Z.-]+/gi, "") : null;
+}
 
 export {
     tokenize,
@@ -223,5 +228,6 @@ export {
     tokenizeKeep,
     tokenizeWithDefault,
     tokenizeUrl,
-    getPointedData
+    getPointedData,
+    sanitizeFilename
 };

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/FontSelectorButton.js

@@ -0,0 +1,36 @@
+import m from "mithril";
+import {defineWidget, ButtonNew} from "./Basic";
+
+const
+    // TODO
+    FontSelectorButton = defineWidget(
+        ({attrs}) => {
+            const {fontFamily, state, onchange} = attrs;
+            return m(".flexrow.grows.fontgroup", {class: attrs.class}, [
+                ...fontFamily && !attrs.nodelete
+                    ? [
+                        m(ButtonNew, {
+                            class: "scaff-right unitsize",
+                            icon: "trash",
+                            onClick: () => {
+                                onchange(undefined);
+                                state.setTransState();
+                            }
+                        })
+                    ]
+                    : [],
+                m(ButtonNew, {
+                    class: "grows transp font-125 ohidden",
+                    text: fontFamily || "default",
+                    icon: "font",
+                    onClick: () => state.setTransState("fontsel", (selected) => {
+                        onchange(selected);
+                        state.setTransState();
+                    })
+                }),
+
+            ]);
+        }
+    );
+
+export default FontSelectorButton;

package/src/widgets/PlusMinusWidget.js

@@ -0,0 +1,55 @@
+import m from "mithril";
+import {ButtonNew, defineWidget} from "./Basic";
+
+const
+    PlusMinus = defineWidget(
+        ({attrs}) => {
+            return m(".flexrow.wrap.grows",
+                {
+                    ...attrs.label && {"aria-label": attrs.label},
+                    class: (attrs.label ? "witharia" : "") + " " + (attrs.class || ""),
+                    title: attrs.title || ""
+                },
+                [
+                    m(ButtonNew, {
+                        icon: "minus",
+                        class: "unitsizesmall transp",
+                        title: attrs.title ? "decrease the " + attrs.title : "",
+                        onClick: () => {
+                            const {
+                                step = 1,
+                                min = 0
+                            } = attrs;
+                            let v = attrs.value || 0;
+                            if (Number.isNaN(v)) v = 0;
+                            v -= step;
+                            if (v < min) v = min;
+                            attrs.onchange(v);
+                            m.redraw();
+                        }
+                    }),
+                    m(".currentvalue.al-center.grows.unitheightsmall", {
+                        title: attrs.title
+                    }, String(attrs.value || 0)),
+                    m(ButtonNew, {
+                        icon: "plus",
+                        class: "unitsizesmall transp",
+                        title: attrs.title ? "decrease the " + attrs.title : "",
+                        onClick: () => {
+                            const {
+                                step = 1,
+                                max = 0
+                            } = attrs;
+
+                            let v = attrs.value || 0;
+                            if (max && v === max) return;
+                            v += step;
+                            attrs.onchange(v);
+                            m.redraw();
+                        }
+                    })
+                ]);
+        }
+    );
+
+export default PlusMinus;