@nebularstreams/libmui 0.1.0

package/src/util/widgets.core.js

@@ -0,0 +1,314 @@
+/* eslint-disable no-nested-ternary */
+/**
+ * Basic Mithril Widget functions
+ * Provides some utilities and basic UI functions like an Alert or a Confirmation dialog
+ *
+ * @author Rodolfo Lopez Pintor, 2020 <rlp@nebular.tv>
+ * @module apps.widgets.basic
+ *
+ */
+import m from "mithril";
+import * as widget from "./widgets";
+import * as Tokenizer from "./util.tokenizer";
+import {Button, Empty} from "../widgets/Basic";
+
+/**
+ *
+ * Computes a Class String
+ *
+ * @param {string} initials INitial CSS Classes
+ * @param {Object<string, boolean>} clases New classes dictionary
+ * @return {string} The CSS Class expression like .class1.class2.class3
+ * @public
+ * @static
+ */
+
+const packClassString = (initials, clases) => {
+    const finals = [];
+    if (clases) for (const cla of Object.keys(clases)) if (clases[cla]) finals.push("." + cla);
+    return (initials || "") + finals.join("");
+};
+
+
+const packClass = (initials, clases) => {
+    const finals = initials ? [initials] : [];
+    if (clases) for (const cla of Object.keys(clases)) if (clases[cla]) finals.push(cla);
+    return finals.join(" ");
+};
+
+/**
+ * Shows a modal confirm dialog
+ * @param {string} title The dialog title
+ * @param {string} message The dialog message
+ * @param {Array} buttons Buttons to display
+ * @param {Object=} options noCancel: dialog is uncanellable
+ * @public
+ * @static
+ */
+
+function Confirm(title, message,
+                 buttons = ["CANCEL", "OK"], options = {}
+) {
+    widget.popupMessage(
+        m(
+            {
+                view: () => [
+                    ...title ? [m("h3", title)] : [],
+                    ...message ? [m("h4", message)] : [],
+                    m(".container",
+                        buttons.map(
+                            option => m(
+                                "button",
+                                {
+                                    onclick: () => {
+                                        document.getElementById("modal-container").style.display = "none";
+                                        if (option.onclick) option.onclick(option.caption);
+                                    }
+                                },
+                                option.caption || "OK"
+                            )
+                        ))
+                ]
+            },
+            {}
+        ),
+        options.onCancel || !options.noCancel
+    );
+}
+
+function ConfirmPromise(title, message, actions, isModal = false) {
+
+    let onCancel = undefined;
+
+    if (typeof isModal === "function") {
+        onCancel = isModal;
+        isModal = false;
+    }
+
+    return new Promise((resolve) => {
+
+        const opts = actions.map((name, idx) => ({
+            caption: name,
+            onclick: () => resolve({
+                idx,
+                name
+            })
+        }));
+
+        Confirm(title, message, opts, {
+            onCancel,
+            noCancel: isModal
+        });
+    });
+}
+
+/**
+ * Shows An Alert Modal Dialog
+ * @param {string} title Dialog Title
+ * @param {string} message Dialog Message
+ * @param {string?} caption Button caption
+ * @param {function?} onclick On press handler
+ * @public
+ * @static
+ */
+
+function Alert(title, message, caption, onclick) {
+    return Confirm(title, message, [{caption, onclick}]);
+}
+
+
+function OverflowMenu(domItem, item, actions, options) {
+
+    return new Promise((resolve) => {
+
+        options = options || {};
+
+        function closeResolve(value) {
+            widget.popupMessage(null);
+            try {
+                resolve(value);
+            } catch (e) {
+                //
+            }
+        }
+
+        const
+            classes = packClassString(".popup.flexcol", {
+                ".favlist": options.favlist,
+                ".isfav": domItem && domItem.classList.contains("isfav"),
+                ".isplay": domItem && domItem.classList.contains("selected")
+            });
+
+        widget.popupMessage(
+            m({
+                view: () => m(
+                    classes,
+                    {
+                        onclick: (event) => {
+
+                            if (event.target.nodeName === "INPUT") {
+                                return;
+                            }
+
+                            const
+                                action = event.target.getAttribute("data-action");
+
+                            if (action) {
+                                closeResolve({
+                                    domItem,
+                                    item,
+                                    action
+                                });
+                            } else {
+                                widget.popupMessage(null);
+                            }
+                        }
+                    },
+                    [
+                        ...item.title ? [m("h3", {id: "modaltitle"}, item.title)] : [],
+                        ...actions.map(action => (action.type === "text"
+                            ? m(
+                                "input.action",
+                                {
+                                    value: action.value || "",
+                                    type: "text",
+                                    placeholder: action.hint || "",
+                                    oncreate: ({dom}) => dom.focus(),
+                                    onkeyup: (ev) => {
+                                        if (ev.keyCode === 27) {
+                                            closeResolve({domItem, item, action});
+                                        }
+                                    },
+                                    onchange: (ev) => {
+                                        ev.target.blur();
+                                        closeResolve({
+                                            domItem,
+                                            item,
+                                            action,
+                                            value: ev.target.value
+                                        });
+                                    }
+                                }
+                            )
+                            : m(
+                                Button,
+                                {
+                                    ...action,
+                                    onclick: () => closeResolve({
+                                        domItem,
+                                        item,
+                                        action
+                                    })
+                                },
+                                action.caption
+                            )))
+                    ]
+                )
+            }),
+            true
+        );
+    });
+}
+
+/**
+ * Creates an HTML UL/LI structure with the object properties
+ * @param {Object} object An object to render
+ * @param {RenderOptions?} options
+ * @param {Object[]} children additional vnodes
+ * @param {string} recurse parent key
+ * @param isArrayChild
+ * @return {m} The rendered view
+ * @public
+ * @static
+ */
+
+function RenderObject(object, options, children, recurse, isArrayChild = false) {
+
+    // noinspection JSValidateTypes
+    options = options || {};
+    const {arrayClass = "isarray", arrayChildClass = "ischildren", objectClass = "isobject"} = options;
+
+    return m(
+        "ul",
+        {
+            ...(options.attrs || {}),
+            class: options.class
+        },
+        object
+            ? [
+                ...(options.keys || Object.keys(object))
+                    .map((key) => {
+
+                        const
+                            value = object[key] || null,
+                            isObject = value !== null && (typeof value === "object"),
+                            isArray = isObject && value.length,
+                            fullkey = (recurse ? recurse + "_" : "") + key;
+
+                        return m(
+                            "li.field_" + (options.start || "") + fullkey,
+                            {
+                                class: (isArray ? arrayClass : isObject ? (objectClass + " ") : "") + (isArrayChild ? arrayChildClass : ""),
+                                "data-title": options.titles ? options.titles[key] || key : key,
+                                ...(options.itemAttrs || {})
+                            },
+                            // eslint-disable-next-line
+                            isObject
+                                ? [
+                                    m(".subvalues",
+                                        RenderObject(
+                                            value,
+                                            {
+                                                ...options,
+                                                keys: null
+                                            },
+                                            null,
+                                            (recurse ? recurse + "_" : "") + key,
+                                            isArray
+                                        ))]
+                                : (
+                                    (options.renderer && options.renderer[fullkey])
+                                        ? options.renderer[fullkey](value)
+                                        : m("span.value", object[key])
+                                )
+                        );
+                    }),
+                ...children || []
+            ]
+            : [
+                m(".empty", {})
+            ]
+    );
+
+}
+
+
+const
+    JSONWidget = {
+        view:
+            ({attrs, children}) => {
+                let object;
+                try {
+                    object = attrs.pointer
+                        ? Tokenizer.getPointedData(attrs.object, attrs.pointer)
+                        : attrs.object;
+                } catch (e) {
+                    return m(Empty, {message: e.message, ...attrs});
+                }
+
+                return object
+                    ? RenderObject(object, attrs, children)
+                    : m(Empty, attrs);
+            }
+    };
+
+// noinspection JSUnusedGlobalSymbols
+export {
+    Alert,
+    Confirm,
+    ConfirmPromise,
+    RenderObject,
+    OverflowMenu,
+    JSONWidget,
+    packClass
+}

package/src/util/widgets.js

@@ -0,0 +1,72 @@
+import m from "mithril";
+
+let
+	mCurrentCancelable;
+
+function runCancelable(container) {
+	if (typeof mCurrentCancelable === "function") {
+		mCurrentCancelable();
+		mCurrentCancelable = undefined;
+	}
+	container.style.display = "none";
+	delete popupMessage.redraw;
+}
+
+// There are ways of doing this inside m.route but it is probably
+// cleaner and faster when kept outside of the main auto
+// rendering system
+
+function popupMessage(message, cancelable = false, contentClass = ".modal-content") {
+
+	const container = document.getElementById("modal-container");
+	container.classList.toggle("iscustom", contentClass !== ".modal-content");
+
+	if (cancelable) {
+
+		mCurrentCancelable = cancelable;
+
+		container.onclick = (event) => {
+			if (event.target.id === "modal-container") {
+				runCancelable(container);
+			}
+		};
+	}
+
+	if (!message) {
+		delete popupMessage.redraw;
+		if (message === null)
+			container.style.display = "none";
+		else
+			runCancelable(container);
+
+		return;
+	}
+
+	container.style.display = "flex";
+
+	popupMessage.redraw = () => {
+		m.render(
+			container,
+			m(contentClass, {
+				role: "alertdialog",
+				"aria-labelledby": "modaltitle",
+				"aria-modal": true
+			}, [
+				typeof message === "function" ? message() : message
+			])
+		);
+	};
+
+	popupMessage.redraw();
+}
+
+function clearModal() {
+	const container = document.getElementById("modal-container");
+	if (container.style.display !== "none") {
+		runCancelable(container);
+		return true;
+	}
+	return false;
+}
+
+export { popupMessage, clearModal };

package/src/util/widgets.utils.js

@@ -0,0 +1,10 @@
+export default function defineWidget (view, oninit, oncreate, onremove, onupdate) {
+    return {
+        ...view && {view},
+        ...oninit && {oninit},
+        ...oncreate && {oncreate},
+        ...onupdate && {onupdate},
+        ...onremove && {onremove}
+    }
+}
+