@nebularstreams/libmui 2.0.16 → 2.0.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nebularstreams/libmui",
   "description": "Micro UI based on Mithril",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "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";
@@ -26,6 +27,7 @@ import clone from "./util/util.clone"
 import Tokenizer from "./util/util.tokenizer"
 import {CoolContentTicker, CoolGenericTicker, GenericButtonTicker, optionsPrompt} from "./widgets/CoolContentTicker";
 import EmptyButton from "./widgets/EmptyButton";
+import tainter from "./util/tainter"
 
 import {
     VideoUploadButton,
@@ -49,6 +51,7 @@ export {
     ButtonNew,
     CardieWidget,
     ColorJoeWidget,
+    ColorJoePack,
     ComboPrompt,
     ComboWidget,
     Empty,
@@ -98,5 +101,6 @@ export {
     defineWidget,
     processImage,
     popupMessage,
-    startApp
+    startApp,
+    tainter
 }

package/src/util/tainter.js

@@ -23,9 +23,17 @@ function untaint() {
     m.redraw();
 }
 
+
 export {
     taint,
     taintRedraw,
     isTainted,
     untaint
 };
+
+export default {
+    taint,
+    taintRedraw,
+    isTainted,
+    untaint
+}

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();
+                            }
+                        })
+                    ] : []
+            ]);
+    }
+);