@nebularstreams/libmui 2.0.13 → 2.0.14

package/src/widgets/SelectFileMiniButton.js

@@ -0,0 +1,194 @@
+/**
+ *
+ * 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";
+
+
+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: () => attrs.state.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}])
+        })
+    ),
+
+    VideoUploadButton = defineWidget(
+        ({attrs}) => m(FileSelectButton, {
+            class: attrs.class,
+            accept: attrs.accept || ".mp4,.webm",
+            icon: attrs.icon || "video",
+            iconClass: attrs.iconClass,
+            textClass: attrs.textClass,
+            text: attrs.text,
+
+            onFile: (file) => {
+                if (file) {
+                    attrs.entity.saveBlob(file.name, file, "video", undefined, false)
+                        .then(() => {
+                            if (attrs.onVideo) {
+                                attrs.onVideo(attrs.path);
+                            } else {
+                                m.redraw();
+                            }
+                        })
+                        .catch((e) => Notification.add(e.message));
+                }
+            }
+        })
+    ),
+
+    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 {
+    VideoUploadButton,
+    FileSelectButton,
+    ImageDataButton,
+    ImageSelectButton,
+    ImageProcessButton,
+    MediaSelectButton,
+    processImage
+};

package/src/widgets/SmileysButton.js

@@ -0,0 +1,18 @@
+import m from "mithril";
+import {defineWidget, ButtonNew} from "./Basic";
+
+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: () => state.setTransState("emoji", onchange, {icons})
+            });
+        }
+    );
+
+export default SmileysButton;

package/src/widgets/SmileysPanel.js

@@ -0,0 +1,20 @@
+import m from "mithril";
+import {defineWidget} from "./Basic";
+import TitleBarWidget from "./TitleBarWidget";
+import SmileysWidget from "./SmileysWidget";
+
+export default defineWidget(
+    ({attrs}) => [
+        ...attrs.toggle ? [] : [
+            m(TitleBarWidget, {
+                onClick: attrs.onClose,
+                title: "Add an emoji"
+            })
+        ],
+        m(SmileysWidget, {
+            horizontal: true,
+            onClick: attrs.onClick,
+            icons: attrs.icons
+        })
+    ]
+);

package/src/widgets/SmileysWidget.js

@@ -0,0 +1,199 @@
+import m from "mithril";
+import {defineWidget, Empty} from "./Basic";
+import InputWidget from "./InputWidget";
+import EMOJIS from "../meta/EMOJIS";
+import FONTAWESOME from "../meta/FONTAWESOME";
+
+const
+
+    FAVOLEGEND = "⭐️",
+    FAVORITES = {},
+    BLACKLIST = {Component: true};
+
+/*
+
+ {
+			"codes": "1F3F4 E0067 E0062 E0077 E006C E0073 E007F",
+			"char": "🏴󠁧󠁢󠁷󠁬󠁳󠁿",
+			"name": "flag: Wales",
+			"category": "Flags (subdivision-flag)",
+			"group": "Flags",
+			"subgroup": "subdivision-flag"
+		}
+
+ */
+
+let
+    favorites,
+    groups,
+    filtered,
+    filterText,
+    ICONSET;
+
+function filter(text, minlen = 2) {
+    if (text && text.length >= minlen) {
+        filtered = ICONSET.filter((smiley) => (smiley.name.toLowerCase()
+            .indexOf(text) >= 0));
+        m.redraw();
+    } else if (filtered) {
+        filtered = null;
+        m.redraw();
+    }
+}
+
+function setIconset(emojis, icons) {
+    ICONSET = [
+        ...emojis ? EMOJIS : [],
+        ...icons ? FONTAWESOME : []
+    ];
+    calc();
+}
+
+function calc() {
+    favorites = FAVORITES || {};
+    const favkeys = ObjectKeys(favorites);
+    groups = ICONSET.reduce((total, item) => {
+            const {
+                char,
+                group,
+                name,
+                icon,
+                class: clase
+            } = item;
+            if (!BLACKLIST[group]) {
+                if (total[group]) {
+                    total[group].push({
+                        char,
+                        name,
+                        icon,
+                        class: clase
+                    });
+                } else {
+                    total[group] = [{
+                        char,
+                        name,
+                        icon,
+                        class: clase
+                    }
+                    ];
+                }
+            }
+            return total;
+        },
+        favkeys.length
+            ? {
+
+                favorites: favkeys.map((char) => ({
+                    name: favorites[char].name,
+                    char
+                }))
+            }
+            : {});
+}
+
+function del(item) {
+    if (item && item.char && favorites[item.char]) {
+        delete favorites[item.char];
+        calc();
+    }
+}
+
+function save(item) {
+    if (item && item.char && item.name && !item.icon) {
+        favorites[item.char] = item.name;
+        calc();
+    }
+}
+
+const SmileysWidget = defineWidget(
+    ({attrs, state}) => m("widget.ohidden",
+        {
+            class: (attrs.mainclass ? attrs.mainclass : "smileyswidget") + " " + (attrs.horizontal ? "flexcol" : "flexrow")
+        },
+        [
+            m(InputWidget, {
+                hint: "search emoji ...",
+                containerClass: "bottombox forinputs unitheight col-12 font-125 order-end",
+                class: "font-125 transparent",
+                autofocus: true,
+                value: filterText,
+                oninput: (value) => {
+                    filterText = value.toLowerCase();
+                    filter(filterText);
+                },
+                onchange: () => {
+                }
+            }),
+
+            ...filtered
+                ? [
+                    m(
+                        "icons.flexrow.wrap.scrolly.grows",
+                        filtered.length
+                            ? filtered.map(
+                                (smiley) => m(".smiley", {
+                                    onclick: (e) => {
+                                        if (state.current === "favorites" && e.shiftKey) {
+                                            del(smiley);
+                                        } else {
+                                            save(smiley);
+                                        }
+                                        attrs.onClick(smiley.char, smiley);
+                                    },
+                                    class: smiley.class || ""
+                                }, smiley.char))
+                            : [
+                                m(Empty, {
+                                    icon: "smile",
+                                    message: "No icons found",
+                                    size: 2
+                                })
+                            ]
+                    )
+                ]
+                : [
+                    m(
+                        ".categories.noshrink",
+                        {
+                            class: attrs.horizontal ? "flexrow wrap" : "flexcol"
+                        },
+                        Object.keys(groups)
+                            .map((group) => m(".grows.cat", {
+                                className: (state.current === group ? "accent" : "") + " " + (group === "favorites" ? "isfav" : ""),
+                                onclick: () => {
+                                    state.current = group;
+                                    m.redraw();
+                                }
+                            }, group === "favorites"
+                                ? FAVOLEGEND : group))
+                    ),
+                    m(
+                        "icons.flexrow.wrap.scrolly.grows",
+                        groups[state.current]
+                            ? groups[state.current].map((smiley) => m(".smiley", {
+                                onclick: (e) => {
+                                    if (state.current === "favorites" && e.shiftKey) {
+                                        del(smiley);
+                                    } else {
+                                        save(smiley);
+                                    }
+                                    attrs.onClick(smiley.char, smiley);
+                                },
+                                class: smiley.class || ""
+                            }, smiley.char))
+                            : []
+                    )
+                ]
+
+
+        ]
+    ),
+    ({attrs, state}) => {
+        setIconset(!attrs.noemojis, attrs.icons);
+        [state.current] = Object.keys(groups);
+    }
+);
+
+export default SmileysWidget;
+
+