@nebularstreams/libmui 3.1.0 → 4.0.0

package/src/widgets/CoolContentTicker.js

@@ -1,244 +0,0 @@
-import m from 'mithril';
-import {defineWidget, ButtonNew} from "./Basic.js"
-import {promptName} from "./OverflowUtils"
-import {confirmPromise} from "../util/fuckingconfirm.js"
-
-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(
-                (attrs.themeClass ? attrs.themeClass:".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(
-            "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 && 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" + (items.length ? " some" : " empty"),
-                                onClick: (e) => onAdd(e.ctrlKey || e.metaKey),
-                                text: items?.length ? "" : addText
-                            })
-                        ]
-                        : [],
-
-                    ...!themeIcon && attrs.currentWidget && current >= 0 && items[current]
-                        ? attrs.currentWidget(items[current], current) || []
-                        : [],
-
-                    ...!themeIcon && attrs.altCurrentWidget && altIndex >= 0 && items[altIndex]
-                        ? attrs.altCurrentWidget(items[altIndex], current) || []
-                        : [],
-
-                    ...children
-                ];
-
-            return themeIcon
-                ? [
-                    m(ThematicWrapper, {
-                        title: themeTitle,
-                        containerClass: attrs.containerClass,
-                        themeClass: attrs.themeClass,
-                        icon: themeIcon
-                    }, allItems),
-                    ...attrs.currentWidget && current >= 0 && items[current] ? attrs.currentWidget(items[current], current) || [] : [],
-                    ...attrs.altCurrentWidget && altIndex >= 0 && items[altIndex] ? attrs.altCurrentWidget(items[altIndex], altIndex) || [] : [],
-
-                ] : 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, ThematicWrapper, optionsPrompt};

package/src/widgets/CoolerEmpty.js

@@ -1,37 +0,0 @@
-import m from "mithril"
-import {defineWidget, ButtonNew, Empty} from "./Basic.js"
-
-
-function TRANSLATE(message, arr, def) {
-    return arr ? arr[message] || (def || message) : (def || message);
-}
-
-const
-    CoolerEmpty = {
-        oninit: ({attrs}) => {
-            attrs.oninit && attrs.oninit()
-        },
-        view: ({attrs}) => m(Empty, {
-            class: attrs.class,
-            icon: attrs.icon,
-            size: attrs.size || 4
-        }, [
-            ...attrs.header ? [m("h3.pad-2.marg-0", TRANSLATE(attrs.header, attrs.headers))] : [],
-            m(".pad-2", TRANSLATE(attrs.message, attrs.messages)),
-            ...attrs.action ? [
-                m(ButtonNew, {
-                    text: attrs.action.caption,
-                    class: "accentbutton marg-4 marg-v pad-2 font-150",
-                    onClick: attrs.action.onclick
-                })
-            ] : [],
-            ...attrs.actions
-                ? attrs.actions.map((action) => m(ButtonNew, {
-                    text: action.caption,
-                    class: "accentbutton marg-4 marg-v pad-2 font-150",
-                    onClick: action.onclick
-                }))
-                : []
-        ])
-    };
-export default CoolerEmpty;

package/src/widgets/EmptyButton.js

@@ -1,36 +0,0 @@
-import m from "mithril"
-import {defineWidget, ButtonNew, Empty} from "./Basic.js"
-
-
-const EmptyButton = defineWidget(
-    ({attrs}) => m(
-        Empty,
-        {
-            size: 2,
-            icon: attrs.icon,
-            class: "pad-2"
-        },
-        [
-            ...attrs.texts
-                .map((text) => m(".text", text)),
-            ...attrs.buttonText ? [
-                m(ButtonNew, {
-                    class: "font-125 accentbutton unitheightsmall",
-                    icon: attrs.icon || "plus",
-                    text: attrs.buttonText,
-                    onClick: attrs.onClick
-                })
-            ] : [],
-            ...attrs.buttonAlt ? [
-                m(ButtonNew, {
-                    class: "font-125 accentbutton unitheightsmall",
-                    icon: attrs.iconAlt || "plus",
-                    text: attrs.buttonTextAlt,
-                    onClick: attrs.onClick
-                })
-            ] : []
-        ]
-    )
-);
-
-export default EmptyButton;

package/src/widgets/FontSelectorButton.js

@@ -1,37 +0,0 @@
-import m from "mithril";
-import {defineWidget, ButtonNew} from "./Basic";
-import MainState from "../app/MainState.js"
-
-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);
-                                MainState.setTransState();
-                            }
-                        })
-                    ]
-                    : [],
-                m(ButtonNew, {
-                    class: "grows transp font-125 ohidden",
-                    text: fontFamily || "default",
-                    icon: "font",
-                    onClick: () => MainState.setTransState("fontsel", (selected) => {
-                        onchange(selected);
-                        MainState.setTransState();
-                    })
-                }),
-
-            ]);
-        }
-    );
-
-export default FontSelectorButton;

package/src/widgets/InputWidget.js

@@ -1,254 +0,0 @@
-import m from "mithril";
-import {ButtonNew} from "./Basic";
-
-/* eslint-disable no-prototype-builtins,no-nested-ternary */
-/* global m, Hammer */
-
-const
-
-    getInput = (attrs, value, parse = false) => {
-        if (parse || attrs.type === "number") {
-            const val = attrs.float ? Number.parseFloat(value) : Number.parseInt(value, 10);
-            return Number.isNaN(val) ? undefined : val;
-        }
-        return value;
-    },
-    getValue = (attrs, state, parse) => {
-        const lastVal = state.hasOwnProperty("value") ? state.value : attrs.value;
-        return getInput(attrs, lastVal, parse);
-    },
-    /*
-        hammer = new Hammer.Manager(dom, { touchAction: "pan-y" }),
-            panner = new Hammer.Pan({ direction: Hammer.DIRECTION_VERTICAL }),
-            singleTap = listenTap && new Hammer.Tap();
-
-        hammer.add(listenTap ? [panner, singleTap] : [panner]);
-        hammer.on("panstart", (e) => {
-
-     */
-
-    StaticFieldWidget = {
-        view: (vnode) => {
-            const {attrs, state} = vnode;
-            // este vnode NO es el mismo que el del hammer, pero su estado SI !
-            state.attrs = attrs; // guardamos una copia de los ultimos attrs en el estado
-
-            return m(
-                ".input-static.w-100.ellipsis",
-                {
-                    class: (attrs.onDrag ? "withdrag " : "") + (attrs.staticClass || "grows"),
-                    ...attrs.staticTitle && {title: attrs.staticTitle},
-                    ...attrs.onDrag || {onclick: attrs.onClick},
-                    oncreate: ({dom, state}) => {
-
-                        if (attrs.onDrag && !attrs.readonly) {
-
-                            const
-                                hammer = state.hammer = new Hammer.Manager(dom, {touchAction: "pan-y"}),
-                                panner = new Hammer.Pan({direction: Hammer.DIRECTION_VERTICAL}),
-                                singleTap = new Hammer.Tap();
-
-                            hammer.add([panner, singleTap]);
-                            hammer.on("tap", () => vnode.state.attrs.onClick());
-                            hammer.on("panup", (e) => vnode.state.attrs.onDrag(-1, e.srcEvent));
-                            hammer.on("pandown", (e) => vnode.state.attrs.onDrag(1, e.srcEvent));
-                            hammer.on("panend pancancel", (e) => vnode.state.attrs.onDrag(0, e.srcEvent));
-                        }
-                        if (attrs.focus) {
-                            dom.focus();
-                        }
-                    },
-                    onremove: ({state}) => {
-                        state.hammer && state.hammer.destroy();
-                    }
-                },
-                attrs.value
-            );
-        }
-    },
-    InputWidget = {
-        view: ({attrs, state}) => {
-            const reset = (redraw) => {
-                    // if (state.value !== undefined && state.showInput) delete state.showInput;
-                    if (state.value && state.showInput) delete state.showInput;
-                    delete state.value;
-                    if (redraw) m.redraw();
-                },
-                inputActions = [
-                    ...(attrs.multi && !attrs.alwaysmulti && (!attrs.type || attrs.type === "text"))
-                        ? [
-                            m(ButtonNew, {
-                                icon: state.multi ? "angle-double-up" : "angle-double-down",
-                                class: "pad-2 transp inputaction",
-                                onClick: () => {
-                                    state.multi = !state.multi;
-                                    m.redraw();
-                                }
-                            })
-                        ]
-                        : [],
-
-                    ...attrs.actions ? attrs.actions.map((action) => m(ButtonNew, {
-                        ...action,
-                        class: "inputaction transp pad-2"
-                    })) : [],
-
-                    ...attrs.action
-                        ? [
-                            m(ButtonNew, {...attrs.action, class: "inputaction transp pad-2"})
-                        ] : []
-                ];
-
-            return m(
-                ".textfield.flexcol.relative",
-                {
-                    class: (attrs.label ? "witharia" : "") + (attrs.containerClass ? " " + attrs.containerClass : ""),
-                    ...attrs.label && {"aria-label": attrs.label}
-                },
-                m(".textfieldinner.flexrow", [
-                    (attrs.staticField && (attrs.readonly || !state.showInput))
-                        ? m(StaticFieldWidget, {
-                            readonly: attrs.readonly,
-                            staticClass: (state.dragging ? "accent " : "") + (attrs.staticClass || ""),
-                            staticTitle: attrs.staticTitle || attrs.draginc && "Click then drag up and down to modify value, or just click to enter a custom value",
-                            value: attrs.displayTitle || getValue(attrs, state),
-                            focus: attrs.focus,
-                            ...attrs.draginc && !attrs.readonly && {
-                                onDrag: (direction, event) => {
-                                    if (direction) {
-                                        state.dragging = true;
-                                        let value = getValue(attrs, state, true);
-                                        if (Number.isNaN(value) || value === undefined) return;
-                                        value += direction * attrs.draginc;
-                                        if (attrs.max !== undefined && value > attrs.max) value = attrs.max;
-                                        if (attrs.min !== undefined && value < attrs.min) value = attrs.min;
-                                        state.value = attrs.type === "number" ? value : String(value);
-                                        attrs.onchange(state.value, event);
-                                    } else {
-                                        delete state.dragging;
-                                        delete state.value;
-                                        m.redraw();
-                                    }
-                                }
-                            },
-                            ...attrs.readonly || {
-                                onClick: () => {
-                                    state.showInput = true;
-                                    state.value = attrs.value;
-                                    m.redraw();
-                                }
-                            }
-                        })
-
-                        : ((state.multi || attrs.alwaysmulti) && (!attrs.type || attrs.type === "text"))
-                            ? m("textarea.w-100", {
-                                class: attrs.class,
-                                value: getValue(attrs, state),
-                                ...attrs.title && {title: attrs.title},
-                                placeholder: attrs.hint || "",
-                                oninput: (event) => {
-                                    state.value = getInput(attrs, event.target.value);
-                                    if (attrs.validator) state.isValid = attrs.validator(state.value);
-                                    if (attrs.onchange) {
-                                        (attrs.oninput || attrs.onchange)(state.value, event, true);
-                                    }
-                                },
-                                onchange: (event) => {
-                                    if (attrs.onchange) {
-                                        if (attrs.validator) state.isValid = attrs.validator(state.value);
-                                        const value = getInput(attrs, event.target.value);
-                                        reset(false);
-                                        attrs.onchange(value, event, true);
-                                    }
-                                },
-                                onblur: () => {
-                                    if (state.showInput) {
-                                        reset(true);
-                                    }
-                                },
-                                onkeyup: (event) => {
-                                    if (event.key === "Escape" && state.showInput) {
-                                        reset(false);
-                                    }
-                                }
-                            })
-                            : m("input.w-100", {
-                                ...attrs.id && {id: attrs.id},
-                                type: attrs.type || "text",
-                                ...attrs.max !== undefined && {max: attrs.max},
-                                ...attrs.min !== undefined && {min: attrs.min},
-                                ...attrs.step > 0 && {step: attrs.step},
-                                ...attrs.maxlength && {maxlength: attrs.maxlength},
-                                class: (attrs.class || "") + (attrs.validator ? state.isValid ? " bg-ok" : " bg-error" : ""),
-                                ...attrs.title && {title: attrs.title},
-                                value: getValue(attrs, state),
-                                placeholder: attrs.hint || "",
-                                ...attrs.readonly
-                                    ? {
-                                        readonly: "readonly"
-                                    }
-                                    : {
-                                        oninput: (event) => {
-                                            state.value = getInput(attrs, event.target.value);
-                                            event.fromoninput = true;
-                                            if (attrs.validator) state.isValid = attrs.validator(state.value);
-                                            if (attrs.onchange) {
-                                                (attrs.oninput || attrs.onchange)(state.value, event);
-                                            }
-                                        },
-                                        onchange: (event) => {
-                                            if (attrs.onchange) {
-                                                if (attrs.validator) state.isValid = attrs.validator(state.value);
-                                                event.enterPressed = state.enterPressed;
-                                                delete state.enterPressed;
-                                                attrs.onchange(getInput(attrs, event.target.value), event);
-                                                if (attrs.staticField) {
-                                                    reset(true);
-                                                } else {
-                                                    delete state.value;
-                                                }
-                                            }
-                                        },
-                                        onblur: () => {
-                                            if (state.showInput) {
-                                                reset(true);
-                                            }
-                                        },
-                                        onkeyup: (event) => {
-                                            if (state.showInput) {
-                                                if (event.key === "Escape") {
-                                                    reset(true);
-                                                } else if (event.key === "Enter") {
-                                                    if (state.value === attrs.value || !state.value) {
-                                                        attrs.onchange(attrs.value, event);
-                                                        reset(true);
-                                                    }
-                                                }
-                                            }
-                                        },
-                                        onbeforeinput: (e) => {
-                                            if (attrs.subtype === "number" && e.data && !/^[0-9.\-]$/.test(e.data)) {
-                                                e.preventDefault();     // nothing but 0-9 or “.” gets through
-                                            }
-                                        },
-                                        inputmode: attrs.subtype === "number" ? "decimal" : undefined, // nicer mobile keyboard
-                                        onkeypress: (event) => {
-                                            if (!state.showInput && event.key === "Enter") {
-                                                attrs.onenter && attrs.onenter(event.target.value, event);
-                                            }
-                                        }
-                                    },
-                            }),
-
-                    ...inputActions.length ? [m(".span.actions", inputActions)] : [],
-                ]));
-        },
-        oninit: ({attrs, state}) => {
-            if (attrs.staticField && attrs.draginc) {
-                const value = getValue(attrs, state, true);
-                state.showInput = (Number.isNaN(value) || value === undefined || value === null);
-            }
-        }
-    };
-
-export default InputWidget;

package/src/widgets/NoticeWidget.js

@@ -1,31 +0,0 @@
-import m from "mithril";
-import {Icon, defineWidget} from "./Basic";
-
-const
-    NoticeWidget = defineWidget(
-        ({attrs, children}) => (
-            children.length
-                ? m(
-                    ".notice.cardie.flexcol.pad-3",
-                    {class: attrs.class || "marg-2 font-75"},
-                    m(
-                        ".flexrow",
-                        [
-                            ...attrs.icon ? [m(Icon, attrs)] : [],
-                            m(".pad-2.pad-h", attrs.text)
-                        ]
-                    ),
-                    ...children
-                )
-                : m(
-                    ".notice.cardie.flexrow.pad-3",
-                    {class: attrs.class || "marg-2 font-75", onclick: attrs.onClick},
-                    [
-                        ...attrs.icon ? [m(Icon, attrs)] : [],
-                        (attrs.texts || [attrs.text]).map((t) => m(".pad-2.pad-h", t))
-                    ]
-                )
-        )
-    );
-
-export default NoticeWidget;