@nebularstreams/libmui 3.1.1 → 4.0.1

package/src/widgets/RangeWidget.js

@@ -1,200 +0,0 @@
-import m from "mithril";
-import MithrilRange from "../util/mithril-range";
-
-let
-    __timer;
-
-const
-    resetMultiplier = (state) => {
-        /*
-        if (state.curMultiplier > 1 && state.value < state.curMax * (state.curMultiplier - 1)) {
-            state.curMultiplier = Math.ceil(state.value / state.curMax);
-            m.redraw();
-        }
-        */
-
-        const
-            // req multiplier to show value within negative bounds
-            maxMultiplier = state.value > state.curMax ? Math.ceil(state.value / state.curMax) : 1,
-            // req multiplier to show value within positive bounds
-            minMultiplier = (state.curMin < 0 && state.value < state.curMin) ? Math.abs(Math.ceil(state.value / state.curMin)) : 1,
-            // chosen
-            multiplier = Math.min(Math.max(minMultiplier, maxMultiplier), state.maxMultiplier);
-
-        if (state.curMultiplier !== multiplier) {
-            state.curMultiplier = multiplier;
-            m.redraw();
-        }
-    },
-    increaseMultiplier = (state) => {
-        if (
-            state.value >= (state.curMax * state.curMultiplier) * 0.9
-            && state.maxMultiplier > 1
-            && state.curMultiplier <= state.maxMultiplier - 1
-        ) {
-            state.curMultiplier++;
-            return true;
-        }
-        if (state.curMin < 0) return increaseMinMultiplier(state);
-    },
-    increaseMinMultiplier = (state) => {
-        if (state.value <= (state.curMin * state.curMultiplier) * 0.9
-            && state.maxMultiplier > 1
-            && state.curMultiplier <= state.maxMultiplier - 1
-        ) {
-            state.curMultiplier++;
-            return true;
-        }
-    },
-    RangeSlider = {
-
-        oninit: ({attrs, state}) => {
-            Object.assign(state, {
-                value: attrs.value || 0,
-                initial: attrs.value || 0,
-                curMax: attrs.max,
-                curMin: attrs.min,
-                curMultiplier: 1,
-                maxMultiplier: attrs.multiplier || 1,
-                id: "I" + Date.now()
-            });
-            // adjust initial multiplier
-            if (state.maxMultiplier > 1) {
-                if (state.value > attrs.max) {
-                    state.curMultiplier = Math.ceil(state.value / attrs.max);
-                } else if (attrs.min < 0 && state.value < attrs.min) {
-                    state.curMultiplier = Math.abs(Math.ceil(state.value / attrs.min));
-                }
-            }
-        },
-        onupdate: ({attrs, state}) => {
-            const
-                attrsMultiplier = attrs.multiplier || 1,
-                attrsValue = attrs.value || 0;
-
-            if (state.curMax !== attrs.max || state.maxMultiplier !== attrsMultiplier) {
-
-                Object.assign(state, {
-                    curMax: attrs.max,
-                    curMin: attrs.min,
-                    maxMultiplier: attrsMultiplier,
-                    value: attrs.value,
-                    initial: attrsValue
-                });
-                if (!increaseMultiplier(state)) {
-                    clearTimeout(state.timer);
-                    state.timer = setTimeout(resetMultiplier, 1000, state);
-                }
-
-                m.redraw();
-
-            } else if (state.initial !== attrsValue) {
-
-                Object.assign(state, {
-                    value: attrsValue,
-                    initial: attrsValue
-                });
-
-                clearTimeout(__timer);
-                __timer = setTimeout(() => m.redraw(), 50);
-
-                /*
-                                if (!increaseMultiplier(state)) {
-                                    state.timer = setTimeout(resetMultiplier, 1000, state);
-                                    clearTimeout(state.timer);
-                                }
-                 */
-            }
-        },
-        view: ({attrs, state}) => m(
-            ".range.flexcol.control.relative" + (attrs.multiplier > 1 ? ".withmultiplier" : ""),
-            {
-                ...attrs.class && {class: attrs.class},
-                title: attrs.hint || "Click, then use arrows to finetune value if needed"
-            },
-            [
-                ...attrs.title ? [m("label", {class: "rangelabel", htmlFor: state.id}, attrs.title)] : [],
-                m(MithrilRange, {
-                    onchange: (value) => {
-
-                        state.value = value;
-
-                        const increased = increaseMultiplier(state);
-
-                        if (!increased && state.curMultiplier > 1) {
-                            clearTimeout(state.timer);
-                            state.timer = setTimeout(resetMultiplier, 1000, state);
-                        }
-
-                        if (attrs.onchange) {
-                            attrs.onchange(value);
-                        } else {
-                            m.redraw();
-                        }
-                    },
-                    ondrag: (value) => {
-                        if (value !== state.value) {
-                            state.value = value;
-                            if (attrs.ondrag) attrs.ondrag(value);
-                            return true;
-                        }
-                        return false;
-                    },
-                    value: state.value || 0,
-                    min: (attrs.min || 0) * state.curMultiplier,
-                    max: (state.curMax * state.curMultiplier) || 100,
-                    step: attrs.step || 1,
-                    relative: attrs.relative,
-                    factor: attrs.factor
-                }, [
-                    m(".currentval", attrs.parser
-                        ? attrs.parser(state.value, attrs.step < 1)
-                        : state.value
-                            ? attrs.step < 1
-                                ? state.value.toFixed(2)
-                                : ("" + Math.floor(state.value)) : "")
-                ])
-                /*
-                m(".datalist.flexrow", [
-                    m("div", attrs.getLabel(0)),
-                    m(".ismax", attrs.getLabel(attrs.max || 100))
-                ])
-                 */
-            ]
-        )
-    },
-    RangeWidget = {
-        view: ({attrs, state}) => m(RangeSlider, {
-            value: attrs.value || 0,
-            min: attrs.min || 0,
-            max: attrs.max || 100,
-            step: attrs.step || 0.1,
-            class: (attrs.disabled ? "disabled " : "") + (attrs.class || ""),
-            title: attrs.title,
-            multiplier: attrs.multiplier,
-            hint: attrs.hint,
-            parser: attrs.parser,
-            relative: attrs.relative,
-            factor: attrs.factor,
-
-            // values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-            getLabel: (value) => (value ? "" + value : "default"),
-            ondrag: (value) => {
-                state.changed = true;
-                state.value = value;
-                if (attrs.onchange) attrs.onchange(value, true);
-                return true;
-            },
-            onchange: (value) => {
-                if (attrs.auto0) {
-                    value = 0;
-                } else if (attrs.autoValue) value = attrs.autoValue;
-                state.changed = true;
-                state.value = value;
-                if (attrs.onchange) attrs.onchange(value, false);
-                return true;
-            }
-        })
-    };
-
-export default RangeWidget;

package/src/widgets/SelectFileMiniButton.js

@@ -1,170 +0,0 @@
-/**
- *
- * A Button to read a text file
- * @typedef {{ root:string, key:string, format:string, type:string, onUpload:function(boolean,Error?), quality:number}} UploadImageAttrs
- *
- * @author Rodolfo Lopez Pintor, 2019
- *
- */
-
-import m from "mithril";
-import {defineWidget, Icon, ButtonNew, Notification} from "./Basic";
-import MainState from "../app/MainState.js"
-
-
-function processDataUrl(file) {
-    return new Promise((resolve, reject) => {
-
-        const reader = new FileReader();
-        reader.onload = function (evt) {
-
-            const
-                data = evt.target.result;
-
-            if (data) resolve({name: file.name, url: data}); else reject(new Error("no data"));
-
-        };
-        reader.readAsDataURL(file);
-    });
-
-}
-
-function processImage(file) {
-    return new Promise((resolve, reject) => {
-
-        const reader = new FileReader();
-        reader.onload = function (evt) {
-
-            const
-                data = evt.target.result,
-                pict = new Image();
-
-            pict.onerror = function (error) {
-                evt.target.value = "";
-                reject(error);
-            };
-
-            pict.onload = function () {
-                resolve(pict);
-            };
-
-            // noinspection JSValidateTypes
-            pict.src = data;
-
-        };
-        reader.readAsDataURL(file);
-    });
-
-}
-
-const
-    MediaSelectButton = defineWidget(
-        ({attrs}) => m(ButtonNew, {
-            class: "unitsizesmall rectbutton ohidden",
-            icon: "images",
-            onClick: () => MainState.setTransState("image", undefined, {
-                giphyQuery: "frame",
-                onOverride: (global, item) => {
-                    const translated = item ? attrs.parse ? attrs.parse(item) : item : undefined;
-                    if (translated) {
-                        attrs.onImage(translated);
-                        m.redraw();
-                    }
-                }
-            })
-        })
-    );
-
-// noinspection JSValidateTypes
-const
-    FileSelectButton = defineWidget(
-        (vnode) => {
-
-            const {attrs} = vnode;
-
-            return m(
-                "button.selectfile.relative",
-                {
-                    ...attrs.class && {class: attrs.class}
-                },
-                [
-                    m(Icon, {icon: attrs.icon || "upload", iconClass: attrs.iconClass}),
-                    ...attrs.text ? [m("span.text", {class: attrs.textClass}, attrs.text)] : [],
-                    m("input", {
-                        class: "absolute w-100 h-100 ohidden",
-                        type: "file",
-                        accept: attrs.accept || null,
-                        title: attrs.title,
-                        onchange: (event) => {
-                            if (event.target.files && event.target.files.length) {
-                                attrs.onFile(event.target.files[0]);
-                                event.target.value = "";
-                            }
-                        }
-                    })
-
-                ]
-            );
-        }
-    ),
-
-    ImageSelectButton = defineWidget(
-        ({attrs}) => m(FileSelectButton, {
-            class: attrs.class,
-            accept: attrs.accept || "image/*",
-            icon: attrs.icon || "image",
-            iconClass: attrs.iconClass,
-            textClass: attrs.textClass,
-            text: attrs.text,
-            onFile: (file) => attrs.onImageFiles([{type: "image", file}])
-        })
-    ),
-
-
-    ImageProcessButton = defineWidget(
-        ({attrs}) => m(ImageSelectButton, {
-            class: attrs.class,
-            icon: attrs.icon,
-            text: attrs.text,
-            accept: attrs.accept,
-            iconClass: attrs.iconClass,
-            textClass: attrs.textClass,
-            onImageFiles: (files) => {
-                if (files.length) {
-                    processImage(files[0].file)
-                        .then(attrs.onImage)
-                        .catch((e) => {
-                            if (attrs.onError) attrs.onError(e);
-                        });
-                }
-            }
-        })
-    ),
-    ImageDataButton = defineWidget(
-        ({attrs}) => m(ImageSelectButton, {
-            class: attrs.class,
-            icon: attrs.icon,
-            text: attrs.text,
-            accept: attrs.accept,
-            iconClass: attrs.iconClass,
-            textClass: attrs.textClass,
-            onImageFiles: (files) => {
-                if (files.length) {
-                    processDataUrl(files[0].file)
-                        .then(attrs.onImageUrl)
-                        .catch((e) => {
-                            if (attrs.onError) attrs.onError(e);
-                        });
-                }
-            }
-        })
-    );
-
-export {
-    FileSelectButton,
-    ImageDataButton,
-    ImageSelectButton,
-    ImageProcessButton,
-    MediaSelectButton,
-    processImage
-};

package/src/widgets/Separator.js

@@ -1,21 +0,0 @@
-import m from "mithril";
-import defineWidget from "../util/widgets.utils";
-
-
-const
-
-	Separator = defineWidget(
-		({ attrs, children }) => m(
-			".separator",
-			{
-				class: attrs.class || "mini",
-				...attrs.onClick && { onclick: attrs.onClick }
-			},
-			[
-				m("span.grows", attrs.text),
-				...(children || [])
-			]
-		)
-	);
-
-export default Separator;

package/src/widgets/SmileysButton.js

@@ -1,19 +0,0 @@
-import m from "mithril";
-import {defineWidget, ButtonNew} from "./Basic";
-import MainState from "../app/MainState.js"
-
-const
-    SmileysButton = defineWidget(
-        ({attrs}) => {
-            const {icon, onchange, icons, state} = attrs;
-            return m(ButtonNew, {
-                title: "Click to select icon or emoji for this marker",
-                class: "chequered  " + (attrs.class || "font-200"),
-                icon: icon && icon.icon,
-                text: icon && icon.glyph,
-                onClick: () => MainState.setTransState("emoji", onchange, {icons})
-            });
-        }
-    );
-
-export default SmileysButton;

package/src/widgets/SwitchWidget.js

@@ -1,42 +0,0 @@
-import m from "mithril";
-import defineWidget from "../util/widgets.utils";
-import {Icon} from "./Basic";
-
-const
-    SwitchWidget = defineWidget(
-        ({attrs, state}) => m((attrs.unit || "") + ".flexrow" + (attrs.subline ? " withsubline" : ""),
-            {
-                class: attrs.class,
-                text: attrs.text,
-                title: attrs.title || null,
-                onclick: () => {
-                    state.checked = !state.checked;
-                    if (attrs.onchange) {
-                        attrs.onchange(state.checked);
-                    }
-                    m.redraw();
-                }
-            },
-            attrs.right
-                ? [
-                    ...attrs.text ? [m("span.grows.caption", attrs.subline ? {"data-subline": attrs.subline} : {}, attrs.text)] : [],
-                    m(Icon, {iconClass: "pad-2 pad-h", icon: state.checked ? "toggle-on" : "toggle-off"})
-                ]
-                : [
-                    m(Icon, {iconClass: "pad-2 pad-h", icon: state.checked ? "toggle-on" : "toggle-off"}),
-                    ...attrs.text ? [m("span.grows.caption", attrs.subline ? {"data-subline": attrs.subline} : {}, attrs.text)] : []
-                ]),
-        ({attrs, state}) => {
-            state.checked = state.original = attrs.checked;
-        },
-        null,
-        null,
-        ({attrs, state}) => {
-            if (attrs.checked !== state.original) {
-                state.checked = state.original = attrs.checked;
-                m.redraw();
-            }
-        }
-    );
-
-export default SwitchWidget;