@nebularstreams/libmui 2.0.17 → 2.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nebularstreams/libmui",
   "description": "Micro UI based on Mithril",
-  "version": "2.0.17",
+  "version": "2.5.0",
   "type": "module",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -9,6 +9,7 @@ import ComboWidget from "./widgets/ComboWidget";
 import ComboPrompt from "./widgets/ComboPrompt";
 import SwitchWidget from "./widgets/SwitchWidget";
 import ColorJoeWidget from "./widgets/ColorJoeWidget";
+import ColorJoePack from "./widgets/ColorJoePack";
 import * as OverflowUtils from "./widgets/OverflowUtils";
 import {clearModal, popupMessage} from "./util/widgets";
 import Separator from "./widgets/Separator";
@@ -50,6 +51,7 @@ export {
     ButtonNew,
     CardieWidget,
     ColorJoeWidget,
+    ColorJoePack,
     ComboPrompt,
     ComboWidget,
     Empty,

package/src/widgets/ColorJoePack.js

@@ -0,0 +1,108 @@
+import m from "mithril";
+import {ButtonNew, defineWidget} from "./Basic";
+import ColorJoeWidget from "./ColorJoeWidget";
+
+const
+    DEFAULT_COLOR = [255, 255, 255, 1],
+    hslToRgb = (h, s, l) => {
+
+        let r,
+            g,
+            b;
+
+        if (s === 0) {
+            r = g = b = l; // achromatic
+        } else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0) t += 1;
+                if (t > 1) t -= 1;
+                if (t < 1 / 6) return p + (q - p) * 6 * t;
+                if (t < 1 / 2) return q;
+                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+
+            const
+                q = l < 0.5 ? l * (1 + s) : l + s - l * s,
+                p = 2 * l - q;
+
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+
+        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+    };
+
+export default  defineWidget(
+    ({attrs}) => {
+
+        const
+            {colors = [], max = 8} = attrs,
+            length = colors.length,
+            getRgb = (colorBase = [0, 0, 0, 0]) => ("rgba("
+                + (colorBase.map((c, i) => (i < 3 ? Math.floor(c * 255) : c)).join(",")) + ")"),
+
+            getHsl = (colorBase = [0, 0, 0, 0]) => ("rgba("
+                + (hslToRgb(colorBase[0], colorBase[1], colorBase[2]).join(","))
+                + "," + colorBase[3] + ")");
+
+        return m(".flexrow.wrap.gradient.grows",
+            {
+                class: attrs.class
+            },
+            [
+
+                ...colors.map((entry, index) => m(
+                    ColorJoeWidget,
+                    {
+                        class: "grows",
+                        color: attrs.hsl ? getHsl(colors[index]) : getRgb(colors[index]),
+                        title: "Click to edit, or Shift-click to remove this color from the collection",
+                        hsl: attrs.hsl,
+                        onchange: (parsedColor, colorObject) => {
+                            let finalColor;
+                            if (attrs.hsl) {
+                                const hsl = colorObject.hsl();
+                                finalColor = [hsl.hue(), hsl.saturation(), hsl.lightness(), colorObject.a()];
+                            } else {
+                                finalColor = [colorObject.r(), colorObject.g(), colorObject.b(), colorObject.a()];
+                            }
+                            colors[index] = finalColor;
+                            if (attrs.onchange) {
+                                attrs.onchange(colors);
+                            }
+                            m.redraw();
+                        },
+                        onshiftclick: () => {
+                            colors.splice(index, 1);
+                            if (attrs.onchange) {
+                                attrs.onchange(colors);
+                            }
+                            m.redraw();
+                        }
+                    }
+                )),
+
+                ...(length < max)
+                    ? [
+                        m(ButtonNew, {
+                            icon: "plus",
+                            class: "unitheightsmall accent bg-window-lo " + (length ? "mini" : "grows"),
+                            title: "Add a new color to the collection, or SHIFT-CLICK to delete all colors",
+                            onClick: (e) => {
+                                if (e.shiftKey) {
+                                    colors.splice(0, colors.length);
+                                } else {
+                                    colors.push(DEFAULT_COLOR);
+                                }
+                                if (attrs.onchange) {
+                                    attrs.onchange(colors);
+                                }
+                                m.redraw();
+                            }
+                        })
+                    ] : []
+            ]);
+    }
+);

package/src/widgets/EmptyButton.js

@@ -1,39 +1,36 @@
-const
+import m from "mithril"
+import {defineWidget, ButtonNew, Empty} from "./Basic.js"
 
-	m = require("mithril"),
-	defineWidget = require("util.definewidget"),
-
-	{ ButtonNew, Empty } = require("app.widgets");
 
 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
-				})
-			] : []
-		]
-	)
+    ({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
+                })
+            ] : []
+        ]
+    )
 );
 
 module.exports = EmptyButton;