@bornova/colorpicker 1.0.0 → 1.0.1

package/dist/esm/colorpicker.js

@@ -1,4 +1,4 @@
-/* @bornova/colorpicker v1.0.0 */
+/* @bornova/colorpicker v1.0.1 */
 const settings = {
     el: "[data-colorpicker]",
     parent: "body",
@@ -36,7 +36,16 @@ const settings = {
     }
 };
 
-const ctx = document.createElement("canvas").getContext("2d");
+let ctx;
+
+function getCtx() {
+    if (!ctx && typeof document !== "undefined") {
+        try {
+            ctx = document.createElement("canvas").getContext("2d");
+        } catch {}
+    }
+    return ctx;
+}
 
 function HSVAtoRGBA(hsva) {
     const saturation = hsva.s / 100;
@@ -105,25 +114,70 @@ function RGBAtoHSVA(rgba) {
 
 function strToRGBA(str) {
     const regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
+    const canvasCtx = getCtx();
     let match, rgba;
-    ctx.fillStyle = "#000";
-    ctx.fillStyle = str;
-    match = regex.exec(ctx.fillStyle);
-    if (match) {
-        rgba = {
-            r: Number(match[3]),
-            g: Number(match[4]),
-            b: Number(match[5]),
-            a: Number(match[6])
-        };
+    if (canvasCtx) {
+        canvasCtx.fillStyle = "#000";
+        canvasCtx.fillStyle = str;
+        match = regex.exec(canvasCtx.fillStyle);
+        if (match) {
+            rgba = {
+                r: Number(match[3]),
+                g: Number(match[4]),
+                b: Number(match[5]),
+                a: match[6] === "" ? 1 : Number(match[6])
+            };
+        } else {
+            match = canvasCtx.fillStyle.replace("#", "").match(/.{2}/g).map(h => parseInt(h, 16));
+            rgba = {
+                r: match[0],
+                g: match[1],
+                b: match[2],
+                a: match[3] !== undefined ? Number((match[3] / 255).toFixed(2)) : 1
+            };
+        }
     } else {
-        match = ctx.fillStyle.replace("#", "").match(/.{2}/g).map(h => parseInt(h, 16));
-        rgba = {
-            r: match[0],
-            g: match[1],
-            b: match[2],
-            a: 1
-        };
+        match = regex.exec(str);
+        if (match) {
+            rgba = {
+                r: Number(match[3]),
+                g: Number(match[4]),
+                b: Number(match[5]),
+                a: match[6] === "" ? 1 : Number(match[6])
+            };
+        } else {
+            const hex = str.replace("#", "");
+            if (hex.length === 3 || hex.length === 4) {
+                const r = parseInt(hex[0] + hex[0], 16);
+                const g = parseInt(hex[1] + hex[1], 16);
+                const b = parseInt(hex[2] + hex[2], 16);
+                const a = hex.length === 4 ? Number((parseInt(hex[3] + hex[3], 16) / 255).toFixed(2)) : 1;
+                rgba = {
+                    r: r,
+                    g: g,
+                    b: b,
+                    a: a
+                };
+            } else if (hex.length === 6 || hex.length === 8) {
+                const r = parseInt(hex.slice(0, 2), 16);
+                const g = parseInt(hex.slice(2, 4), 16);
+                const b = parseInt(hex.slice(4, 6), 16);
+                const a = hex.length === 8 ? Number((parseInt(hex.slice(6, 8), 16) / 255).toFixed(2)) : 1;
+                rgba = {
+                    r: r,
+                    g: g,
+                    b: b,
+                    a: a
+                };
+            } else {
+                rgba = {
+                    r: 0,
+                    g: 0,
+                    b: 0,
+                    a: 1
+                };
+            }
+        }
     }
     return rgba;
 }
@@ -134,7 +188,7 @@ function RGBAToHex(rgba) {
     const B = rgba.b.toString(16).padStart(2, "0");
     let A = "";
     if (settings.alpha && (rgba.a < 1 || settings.forceAlpha)) {
-        A = (rgba.a * 255 | 0).toString(16).padStart(2, "0");
+        A = Math.round(rgba.a * 255).toString(16).padStart(2, "0");
     }
     return "#" + R + G + B + A;
 }
@@ -399,11 +453,17 @@ function attachVirtualInstance(element) {
             if (element.matches(selector)) {
                 currentInstanceId = selector;
                 defaultInstance = {};
-                unsupportedOptions.forEach(option => delete options[option]);
-                for (const option of Object.keys(options)) {
+                const clonedOptions = {
+                    ...options
+                };
+                unsupportedOptions.forEach(option => delete clonedOptions[option]);
+                for (const option of Object.keys(clonedOptions)) {
                     defaultInstance[option] = Array.isArray(settings[option]) ? [ ...settings[option] ] : settings[option];
+                    if (option === "clearButton") {
+                        defaultInstance["clearLabel"] = settings.clearLabel;
+                    }
                 }
-                configure(options);
+                configure(clonedOptions);
                 break;
             }
         }
@@ -446,13 +506,22 @@ function openPicker(event) {
         colorValue.focus({
             preventScroll: true
         });
-        colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
+        let selectionStart = 0;
+        let selectionEnd = 0;
+        try {
+            selectionStart = currentEl.selectionStart;
+            selectionEnd = currentEl.selectionEnd;
+        } catch {}
+        colorValue.setSelectionRange(selectionStart, selectionEnd);
     }
     if (settings.selectInput) {
         colorValue.select();
     }
     if (keyboardNav || settings.swatchesOnly) {
-        getFocusableElements().shift().focus();
+        const firstFocusable = getFocusableElements().shift();
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
     }
     currentEl.dispatchEvent(new Event("open", {
         bubbles: false
@@ -564,6 +633,14 @@ function closePicker(revert) {
                     bubbles: true
                 }));
             }
+        } else {
+            const value = colorValue.value;
+            if (value === "") {
+                pickColor("");
+            } else {
+                setColorFromStr(value);
+                pickColor(colorValue.value);
+            }
         }
         setTimeout(() => {
             if (oldColor !== prevEl.value) {
@@ -825,13 +902,17 @@ function init() {
         }
         if (key === "Tab" && target.matches(".clr-picker *")) {
             const focusables = getFocusableElements();
-            const firstFocusable = focusables.shift();
-            const lastFocusable = focusables.pop();
-            if (shiftKey && target === firstFocusable) {
-                lastFocusable.focus();
-                event.preventDefault();
-            } else if (!shiftKey && target === lastFocusable) {
-                firstFocusable.focus();
+            if (focusables.length > 1) {
+                const firstFocusable = focusables[0];
+                const lastFocusable = focusables[focusables.length - 1];
+                if (shiftKey && target === firstFocusable) {
+                    lastFocusable.focus();
+                    event.preventDefault();
+                } else if (!shiftKey && target === lastFocusable) {
+                    firstFocusable.focus();
+                    event.preventDefault();
+                }
+            } else if (focusables.length === 1) {
                 event.preventDefault();
             }
         }

package/package.json

@@ -1,51 +1,51 @@
-{
-  "name": "@bornova/colorpicker",
-  "version": "1.0.0",
-  "description": "A lightweight and elegant JavaScript color picker written in vanilla JavaScript. Zero dependencies.",
-  "keywords": [
-    "color",
-    "picker",
-    "javascript"
-  ],
-  "homepage": "https://github.com/bornova/ColorPicker#readme",
-  "bugs": {
-    "url": "https://github.com/bornova/ColorPicker/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bornova/ColorPicker.git"
-  },
-  "license": "MIT",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/colorpicker.js"
-    }
-  },
-  "jsdelivr": "./dist/browser/colorpicker.min.js",
-  "unpkg": "./dist/browser/colorpicker.min.js",
-  "types": "./dist/types/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "prebuild": "npm run lint && npm run prettier",
-    "build": "rollup -c && npm run types",
-    "format": "npm run prettier:fix && npm run lint:fix",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
-    "prettier": "prettier --check .",
-    "prettier:fix": "prettier --write .",
-    "types": "tsc"
-  },
-  "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@rollup/plugin-terser": "^1.0.0",
-    "eslint": "^10.4.0",
-    "globals": "^17.6.0",
-    "prettier": "^3.8.3",
-    "rollup": "^4.60.4",
-    "typescript": "^6.0.3"
-  }
-}
+{
+  "name": "@bornova/colorpicker",
+  "version": "1.0.1",
+  "description": "A lightweight and elegant JavaScript color picker written in vanilla JavaScript. Zero dependencies.",
+  "keywords": [
+    "color",
+    "picker",
+    "javascript"
+  ],
+  "homepage": "https://github.com/bornova/ColorPicker#readme",
+  "bugs": {
+    "url": "https://github.com/bornova/ColorPicker/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bornova/ColorPicker.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/colorpicker.js"
+    }
+  },
+  "jsdelivr": "./dist/browser/colorpicker.min.js",
+  "unpkg": "./dist/browser/colorpicker.min.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prebuild": "npm run lint && npm run prettier",
+    "build": "rollup -c && npm run types",
+    "format": "npm run prettier:fix && npm run lint:fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "prettier": "prettier --check .",
+    "prettier:fix": "prettier --write .",
+    "types": "tsc"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@rollup/plugin-terser": "^1.0.0",
+    "eslint": "^10.4.0",
+    "globals": "^17.6.0",
+    "prettier": "^3.8.3",
+    "rollup": "^4.60.4",
+    "typescript": "^6.0.3"
+  }
+}