@alegendstale/holly-components 0.2.9 → 0.2.11

package/dist/utils/dragDropUtils.js

@@ -0,0 +1,121 @@
+export class DragDrop {
+    constructor(dropzones, draggables, onDrop) {
+        this.dropzones = dropzones;
+        this.draggables = draggables;
+        this.result = { beforeElement: null, insertedElement: null, afterElement: null, order: this.draggables };
+        this.onDrop = onDrop;
+        this.load();
+    }
+    dragStart(draggable, e) {
+        draggable.classList.toggle('is-dragging', true);
+    }
+    dragOver(dropzone, e) {
+        if (e.dataTransfer) {
+            const hasElement = Array.from(e.dataTransfer.items).some((item) => {
+                return item.kind !== 'element';
+            });
+            // Return early if element being dragged is not an element
+            if (hasElement)
+                return;
+        }
+        e.preventDefault();
+        this.result.beforeElement = this.getDragBeforeElement(e.clientX);
+        this.result.insertedElement = this.getDraggingElement();
+        this.result.afterElement = this.getDragAfterElement(e.clientX);
+        const insertedIndex = this.draggables.indexOf(this.result.insertedElement);
+        // If at the end of draggables
+        if (this.result.afterElement === null) {
+            // Append element
+            dropzone.appendChild(this.result.insertedElement);
+            // Remove element from order
+            this.result.order.splice(insertedIndex, 1);
+            // Add to end of order
+            this.result.order.push(this.result.insertedElement);
+        }
+        else {
+            // Place element between
+            dropzone.insertBefore(this.result.insertedElement, this.result.afterElement);
+            // Remove element from order
+            this.result.order.splice(insertedIndex, 1);
+            // Get the after index, post element removal
+            const afterIndex = this.draggables.indexOf(this.result.afterElement);
+            // Insert the element before the after index
+            this.result.order.splice(afterIndex, 0, this.result.insertedElement);
+        }
+    }
+    dragEnd(draggable, e) {
+        draggable.classList.toggle('is-dragging', false);
+        this.onDrop(e, this.result);
+        this.result = { beforeElement: null, insertedElement: null, afterElement: null, order: this.draggables };
+    }
+    load() {
+        for (let draggable of this.draggables) {
+            // Important, so that all types of elements can be dragged, including divs & spans
+            draggable.setAttribute('draggable', "true");
+            draggable.addEventListener("dragstart", (e) => this.dragStart(draggable, e));
+            draggable.addEventListener("dragend", (e) => this.dragEnd(draggable, e));
+        }
+        for (let dropzone of this.dropzones) {
+            dropzone.addEventListener("dragover", (e) => this.dragOver(dropzone, e));
+        }
+    }
+    unload() {
+        for (let draggable of this.draggables) {
+            draggable.removeEventListener('dragstart', (e) => this.dragStart(draggable, e));
+            draggable.removeEventListener('dragend', (e) => this.dragEnd(draggable, e));
+        }
+        for (let dropzone of this.dropzones) {
+            dropzone.removeEventListener('dragover', (e) => this.dragOver(dropzone, e));
+        }
+    }
+    /**
+     * @returns The element which is being dragged
+     */
+    getDraggingElement() {
+        return this.draggables.filter((draggable) => draggable.classList.contains('is-dragging'))[0];
+    }
+    /**
+     * @returns All draggable elements not being dragged
+     */
+    getDraggableElements() {
+        return this.draggables.filter((draggable) => !draggable.classList.contains('is-dragging'));
+    }
+    /**
+     * Gets the closest element before the dragged element
+     */
+    getDragBeforeElement(x) {
+        return this.getDraggableElements().reduce((closest, child) => {
+            const rect = child.getBoundingClientRect();
+            const leftPosition = x - rect.left;
+            const halfChildWidth = rect.width / 2;
+            const offset = leftPosition - halfChildWidth;
+            // Return the closest element to the right of the cursor
+            if (offset > 0 && offset < closest.offset)
+                return { offset, element: child };
+            else
+                return closest;
+        }, 
+        // Initial closest value
+        { offset: Number.POSITIVE_INFINITY, element: null })
+            .element;
+    }
+    /**
+     * Gets the closest element after the dragged element
+     */
+    getDragAfterElement(x) {
+        return this.getDraggableElements().reduce((closest, child) => {
+            const rect = child.getBoundingClientRect();
+            const leftPosition = x - rect.left;
+            const halfChildWidth = rect.width / 2;
+            const offset = leftPosition - halfChildWidth;
+            // Return the closest element to the left of the cursor
+            if (offset < 0 && offset > closest.offset)
+                return { offset, element: child };
+            else
+                return closest;
+        }, 
+        // Initial closest value
+        { offset: Number.NEGATIVE_INFINITY, element: null })
+            .element;
+    }
+}

package/dist/utils/generateUtils.js

@@ -1,40 +1,74 @@
-import o from "colorsea";
-var M = /* @__PURE__ */ ((s) => (s.Complimentary = "Complimentary", s.Monochromatic = "Monochromatic", s.Analogous = "Analogous", s.Triadic = "Triadic", s.Tetradic = "Tetradic", s.Random = "Random", s))(M || {});
-function B(s, c = { baseColor: o.random() }) {
-  let { baseColor: e, settings: a } = c;
-  e || (e = o.random());
-  let r = [];
-  switch (s) {
-    case "Complimentary":
-      r = [e.hex(), e.complement().hex()], a && (a.aliases = ["Base", "Complimentary Color"]);
-      break;
-    case "Monochromatic":
-      const n = e.lighten(20), h = e.lighten(10), l = e.darken(10), d = e.darken(20);
-      r = [n.hex(), h.hex(), e.hex(), l.hex(), d.hex()], a && (a.aliases = ["Lightest", "Lighter", "Base", "Darker", "Darkest"]);
-      break;
-    case "Analogous":
-      const x = e.adjustHue(-25), m = e.adjustHue(25);
-      r = [x.hex(), e.hex(), m.hex()], a && (a.aliases = ["Analogous East", "Base", "Analogous West"]);
-      break;
-    case "Triadic":
-      const u = e.spin(120), g = e.spin(240);
-      r = [e.hex(), u.hex(), g.hex()], a && (a.aliases = ["Triadic First", "Base", "Triadic Third"]);
-      break;
-    case "Tetradic":
-      const p = e.spin(90), T = e.spin(180), k = e.spin(270);
-      r = [e.hex(), p.hex(), T.hex(), k.hex()], a && (a.aliases = ["Base", "Tetradic Second", "Tetradic Third", "Tetradic Fourth"]);
-      break;
-    case "Random":
-      const f = Math.max(Math.round(Math.random() * 10), 2);
-      let t = [];
-      for (let i = 0; i < f; i++)
-        t.push(o.random().hex());
-      r = t, a && (a.aliases = []);
-      break;
-  }
-  return { colors: r, settings: a };
+import colorsea from "colorsea";
+export var Combination;
+(function (Combination) {
+    Combination["Complimentary"] = "Complimentary";
+    Combination["Monochromatic"] = "Monochromatic";
+    Combination["Analogous"] = "Analogous";
+    Combination["Triadic"] = "Triadic";
+    Combination["Tetradic"] = "Tetradic";
+    Combination["Random"] = "Random";
+})(Combination || (Combination = {}));
+/**
+ * Generate colors based on color theory
+ * @param baseColor Initial color to generate the rest from
+ * @param combination The type of color theory combination to use
+ * @param settings The settings for the palette
+ * @returns Generated colors & settings
+ */
+export function generateColors(combination, optional = { baseColor: colorsea.random() }) {
+    let { baseColor, settings } = optional;
+    // Never called because baseColor is set by default in parameters
+    if (!baseColor)
+        baseColor = colorsea.random();
+    let colors = [];
+    switch (combination) {
+        case Combination.Complimentary:
+            colors = [baseColor.hex(), baseColor.complement().hex()];
+            if (settings)
+                settings.aliases = ['Base', 'Complimentary Color'];
+            break;
+        case Combination.Monochromatic:
+            const lightest = baseColor.lighten(20);
+            const lighter = baseColor.lighten(10);
+            const darker = baseColor.darken(10);
+            const darkest = baseColor.darken(20);
+            colors = [lightest.hex(), lighter.hex(), baseColor.hex(), darker.hex(), darkest.hex()];
+            if (settings)
+                settings.aliases = ['Lightest', 'Lighter', 'Base', 'Darker', 'Darkest'];
+            break;
+        case Combination.Analogous:
+            const east = baseColor.adjustHue(-25);
+            const west = baseColor.adjustHue(25);
+            colors = [east.hex(), baseColor.hex(), west.hex()];
+            if (settings)
+                settings.aliases = ['Analogous East', 'Base', 'Analogous West'];
+            break;
+        case Combination.Triadic:
+            const hex120 = baseColor.spin(120);
+            const hex240 = baseColor.spin(240);
+            colors = [baseColor.hex(), hex120.hex(), hex240.hex()];
+            if (settings)
+                settings.aliases = ['Triadic First', 'Base', 'Triadic Third'];
+            break;
+        case Combination.Tetradic:
+            const hex90 = baseColor.spin(90);
+            const hex180 = baseColor.spin(180);
+            const hex270 = baseColor.spin(270);
+            colors = [baseColor.hex(), hex90.hex(), hex180.hex(), hex270.hex()];
+            if (settings)
+                settings.aliases = ['Base', 'Tetradic Second', 'Tetradic Third', 'Tetradic Fourth'];
+            break;
+        case Combination.Random:
+            // Clamp to a minimum value of 2
+            const randomNumber = Math.max(Math.round(Math.random() * 10), 2);
+            let randomColors = [];
+            for (let i = 0; i < randomNumber; i++) {
+                randomColors.push(colorsea.random().hex());
+            }
+            colors = randomColors;
+            if (settings)
+                settings.aliases = [];
+            break;
+    }
+    return { colors, settings };
 }
-export {
-  M as Combination,
-  B as generateColors
-};

package/dist/utils/types.d.ts

@@ -1,4 +1,4 @@
-type client = {
+export type client = {
     x: number;
     y: number;
 };

package/dist/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,KAAK,MAAM,GAAG;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAA;CACT,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAA;CACT,CAAA"}

package/dist/utils/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"private": false,
-	"version": "0.2.9",
+	"version": "0.2.11",
 	"name": "@alegendstale/holly-components",
 	"description": "Reusable UI components created using lit",
 	"type": "module",

package/dist/_virtual/_commonjsHelpers.js

@@ -1,8 +0,0 @@
-var o = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function l(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
-}
-export {
-  o as commonjsGlobal,
-  l as getDefaultExportFromCjs
-};

package/dist/_virtual/x11.js

@@ -1,4 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};

package/dist/node_modules/colorsea/colors/x11.js

@@ -1,14 +0,0 @@
-import { commonjsGlobal as d, getDefaultExportFromCjs as r } from "../../../_virtual/_commonjsHelpers.js";
-import { __module as e } from "../../../_virtual/x11.js";
-(function(f, o) {
-  (function(i, a) {
-    f.exports = a();
-  })(d, function() {
-    return { aliceblue: "#f0f8ff", antiquewhite: "#faebd7", aqua: "#00ffff", aquamarine: "#7fffd4", azure: "#f0ffff", beige: "#f5f5dc", bisque: "#ffe4c4", black: "#000000", blanchedalmond: "#ffebcd", blue: "#0000ff", blueviolet: "#8a2be2", brown: "#a52a2a", burlywood: "#deb887", cadetblue: "#5f9ea0", chartreuse: "#7fff00", chocolate: "#d2691e", coral: "#ff7f50", cornflower: "#6495ed", cornflowerblue: "#6495ed", cornsilk: "#fff8dc", crimson: "#dc143c", cyan: "#00ffff", darkblue: "#00008b", darkcyan: "#008b8b", darkgoldenrod: "#b8860b", darkgray: "#a9a9a9", darkgreen: "#006400", darkgrey: "#a9a9a9", darkkhaki: "#bdb76b", darkmagenta: "#8b008b", darkolivegreen: "#556b2f", darkorange: "#ff8c00", darkorchid: "#9932cc", darkred: "#8b0000", darksalmon: "#e9967a", darkseagreen: "#8fbc8f", darkslateblue: "#483d8b", darkslategray: "#2f4f4f", darkslategrey: "#2f4f4f", darkturquoise: "#00ced1", darkviolet: "#9400d3", deeppink: "#ff1493", deepskyblue: "#00bfff", dimgray: "#696969", dimgrey: "#696969", dodgerblue: "#1e90ff", firebrick: "#b22222", floralwhite: "#fffaf0", forestgreen: "#228b22", fuchsia: "#ff00ff", gainsboro: "#dcdcdc", ghostwhite: "#f8f8ff", gold: "#ffd700", goldenrod: "#daa520", gray: "#808080", green: "#008000", greenyellow: "#adff2f", grey: "#808080", honeydew: "#f0fff0", hotpink: "#ff69b4", indianred: "#cd5c5c", indigo: "#4b0082", ivory: "#fffff0", khaki: "#f0e68c", laserlemon: "#ffff54", lavender: "#e6e6fa", lavenderblush: "#fff0f5", lawngreen: "#7cfc00", lemonchiffon: "#fffacd", lightblue: "#add8e6", lightcoral: "#f08080", lightcyan: "#e0ffff", lightgoldenrod: "#fafad2", lightgoldenrodyellow: "#fafad2", lightgray: "#d3d3d3", lightgreen: "#90ee90", lightgrey: "#d3d3d3", lightpink: "#ffb6c1", lightsalmon: "#ffa07a", lightseagreen: "#20b2aa", lightskyblue: "#87cefa", lightslategray: "#778899", lightslategrey: "#778899", lightsteelblue: "#b0c4de", lightyellow: "#ffffe0", lime: "#00ff00", limegreen: "#32cd32", linen: "#faf0e6", magenta: "#ff00ff", maroon: "#800000", maroon2: "#7f0000", maroon3: "#b03060", mediumaquamarine: "#66cdaa", mediumblue: "#0000cd", mediumorchid: "#ba55d3", mediumpurple: "#9370db", mediumseagreen: "#3cb371", mediumslateblue: "#7b68ee", mediumspringgreen: "#00fa9a", mediumturquoise: "#48d1cc", mediumvioletred: "#c71585", midnightblue: "#191970", mintcream: "#f5fffa", mistyrose: "#ffe4e1", moccasin: "#ffe4b5", navajowhite: "#ffdead", navy: "#000080", oldlace: "#fdf5e6", olive: "#808000", olivedrab: "#6b8e23", orange: "#ffa500", orangered: "#ff4500", orchid: "#da70d6", palegoldenrod: "#eee8aa", palegreen: "#98fb98", paleturquoise: "#afeeee", palevioletred: "#db7093", papayawhip: "#ffefd5", peachpuff: "#ffdab9", peru: "#cd853f", pink: "#ffc0cb", plum: "#dda0dd", powderblue: "#b0e0e6", purple: "#800080", purple2: "#7f007f", purple3: "#a020f0", rebeccapurple: "#663399", red: "#ff0000", rosybrown: "#bc8f8f", royalblue: "#4169e1", saddlebrown: "#8b4513", salmon: "#fa8072", sandybrown: "#f4a460", seagreen: "#2e8b57", seashell: "#fff5ee", sienna: "#a0522d", silver: "#c0c0c0", skyblue: "#87ceeb", slateblue: "#6a5acd", slategray: "#708090", slategrey: "#708090", snow: "#fffafa", springgreen: "#00ff7f", steelblue: "#4682b4", tan: "#d2b48c", teal: "#008080", thistle: "#d8bfd8", tomato: "#ff6347", turquoise: "#40e0d0", violet: "#ee82ee", wheat: "#f5deb3", white: "#ffffff", whitesmoke: "#f5f5f5", yellow: "#ffff00", yellowgreen: "#9acd32" };
-  });
-})(e);
-var l = e.exports;
-const t = /* @__PURE__ */ r(l);
-export {
-  t as default
-};