@thednp/color-picker 2.0.0-alpha1 → 2.0.0-alpha10

package/package.json

@@ -1,98 +1,116 @@
-{
-  "name": "@thednp/color-picker",
-  "version": "2.0.0-alpha1",
-  "author": "thednp",
-  "license": "MIT",
-  "description": "🎨 Modern Color Picker Component",
-  "homepage": "http://thednp.github.io/color-picker",
-  "source": "./src/ts/index.ts",
-  "main": "./dist/js/color-picker.js",
-  "module": "./dist/js/color-picker.mjs",
-  "types": "./dist/js/color-picker.d.ts",
-  "style": "./dist/css/color-picker.css",
-  "sass": "./src/scss/color-picker.scss",
-  "exports": {
-    ".": {
-      "require": "./dist/color-picker.cjs",
-      "import": "./dist/color-picker.mjs"
-    }
-  },
-  "scripts": {
-    "pre-test": "npm run clean-coverage",
-    "test": "npm run pre-test && cypress run",
-    "cypress": "npm run pre-test && npx cypress open",
-    "clean-coverage": "rimraf coverage .nyc_output",
-    "coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
-    "format": "prettier --write \"src/**/*.ts\"",
-    "fix:ts": "eslint src --config .eslintrc.cjs --fix",
-    "lint:ts": "eslint src --config .eslintrc.cjs",
-    "fix:css": "stylelint --config .stylelintrc.json --fix scss \"src/scss/*.scss\"",
-    "lint:css": "stylelint --config .stylelintrc.json scss \"src/scss/*.scss\"",
-    "build": "npm run lint:ts && npm run build-vite && npm run dts",
-    "build-vite": "vite build && npm run docs",
-    "dev": "vite --open ./docs/index.html --port 8577",
-    "dts": "dts-bundle-generator --config ./dts.config.ts",
-    "docs": "ncp dist/js/color-picker.js docs/js/color-picker.js && ncp dist/js/color-picker.js.map docs/js/color-picker.js.map",
-    "copy": "npm-run-all --parallel copy-*",
-    "copy-css-cp": "ncp dist/css/color-picker.css docs/css/color-picker.css",
-    "copy-css-rtl": "ncp dist/css/color-picker.rtl.css docs/css/color-picker.rtl.css",
-    "compile": "npm run lint:css && npm-run-all --parallel compile-* && npm run copy",
-    "compile-scss": "node compile.js",
-    "compile-scss-min": "node compile.js MIN:true",
-    "compile-scss-rtl": "node compile.js MIN:false,DIR:rtl",
-    "compile-scss-rtl-min": "node compile.js MIN:true,DIR:rtl"
-  },
-  "bugs": {
-    "url": "https://github.com/thednp/color-picker/issues"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/thednp/color-picker.git"
-  },
-  "keywords": [
-    "color",
-    "picker",
-    "color-picker",
-    "colorpicker",
-    "palette",
-    "color-palette",
-    "typescript"
-  ],
-  "dependencies": {
-    "@thednp/color": "^1.0.6",
-    "@thednp/event-listener": "^2.0.0",
-    "@thednp/shorty": "^2.0.0-alpha14"
-  },
-  "devDependencies": {
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
-    "@cypress/code-coverage": "^3.10.3",
-    "@types/istanbul-lib-instrument": "^1.7.4",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
-    "cypress": "^12.9.0",
-    "dts-bundle-generator": "^8.0.0",
-    "eslint": "^8.37.0",
-    "eslint-plugin-jsdoc": "^40.1.1",
-    "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-prettier": "^4.2.1",
-    "istanbul-lib-coverage": "^3.2.0",
-    "istanbul-lib-instrument": "^5.2.1",
-    "ncp": "^2.0.0",
-    "npm-run-all": "^4.1.5",
-    "nyc": "^15.1.0",
-    "prettier": "^2.8.7",
-    "rimraf": "^4.4.1",
-    "sass": "^1.60.0",
-    "stylelint": "^15.4.0",
-    "stylelint-config-standard": "^32.0.0",
-    "stylelint-config-standard-scss": "^7.0.1",
-    "stylelint-order": "^6.0.3",
-    "stylelint-scss": "^4.6.0",
-    "typescript": "^5.0.3",
-    "vite": "^4.3.9"
-  }
-}
+{
+  "name": "@thednp/color-picker",
+  "version": "2.0.0-alpha10",
+  "author": "thednp",
+  "license": "MIT",
+  "description": "🎨 Modern Color Picker Component",
+  "homepage": "http://thednp.github.io/color-picker",
+  "source": "./src/ts/index.ts",
+  "main": "./dist/js/color-picker.js",
+  "module": "./dist/js/color-picker.mjs",
+  "style": "./dist/css/color-picker.css",
+  "sass": "./src/scss/color-picker.scss",
+  "exports": {
+    ".": {
+      "require": "./dist/js/color-picker.cjs",
+      "import": "./dist/js/color-picker.mjs",
+      "types": "./dist/js/color-picker.d.ts"
+    },
+    "./dist/css/color-picker.css": {
+      "import": "./dist/css/color-picker.css",
+      "require": "./dist/css/color-picker.css"
+    },
+    "./dist/css/color-picker.rtl.css": {
+      "import": "./dist/css/color-picker.rtl.css",
+      "require": "./dist/css/color-picker.rtl.css"
+    },
+    "./src/scss/color-picker.scss": {
+      "import": "./src/scss/color-picker.scss",
+      "require": "./src/scss/color-picker.scss"
+    },
+    "./src/scss/color-picker.rtl.scss": {
+      "import": "./src/scss/color-picker.rtl.scss",
+      "require": "./src/scss/color-picker.rtl.scss"
+    }
+  },
+  "bugs": {
+    "url": "https://github.com/thednp/color-picker/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thednp/color-picker.git"
+  },
+  "keywords": [
+    "color",
+    "picker",
+    "color-picker",
+    "colorpicker",
+    "palette",
+    "color-palette",
+    "typescript"
+  ],
+  "dependencies": {
+    "@thednp/color": "^1.0.8",
+    "@thednp/shorty": "2.0.0-alpha22"
+  },
+  "devDependencies": {
+    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
+    "@cypress/code-coverage": "^3.12.0",
+    "@types/istanbul-lib-instrument": "^1.7.4",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
+    "cypress": "^13.1.0",
+    "dts-bundle-generator": "^8.0.1",
+    "eslint": "^8.49.0",
+    "eslint-plugin-jsdoc": "^46.5.1",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-prettier": "^5.0.0",
+    "istanbul-lib-coverage": "^3.2.0",
+    "istanbul-lib-instrument": "^6.0.0",
+    "ncp": "^2.0.0",
+    "npm-run-all": "^4.1.5",
+    "nyc": "^15.1.0",
+    "prettier": "^3.0.3",
+    "rimraf": "^5.0.1",
+    "sass": "^1.66.1",
+    "stylelint": "^15.10.3",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^11.0.0",
+    "stylelint-order": "^6.0.3",
+    "stylelint-scss": "^5.1.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
+  },
+  "packageManager": "pnpm@8.6.12",
+  "scripts": {
+    "pre-test": "npm run clean-coverage",
+    "test": "npm run pre-test && cypress run",
+    "cypress": "npm run pre-test && npx cypress open",
+    "clean-coverage": "rimraf coverage .nyc_output",
+    "coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "lint": "npm run lint:ts && npm run check:ts && npm run lint:css",
+    "fix:ts": "eslint src --config .eslintrc.cjs --fix",
+    "lint:ts": "eslint src --config .eslintrc.cjs",
+    "check:ts": "tsc --noEmit",
+    "fix:css": "stylelint --config .stylelintrc.json --fix scss \"src/scss/*.scss\"",
+    "lint:css": "stylelint --config .stylelintrc.json scss \"src/scss/*.scss\"",
+    "build": "npm run lint && npm run build-vite && npm run dts",
+    "build-vite": "vite build && npm run docs",
+    "dev": "vite --open ./docs/dev.html --port 8577",
+    "dts": "dts-bundle-generator --config ./dts.config.ts",
+    "docs": "ncp dist/js/color-picker.js docs/js/color-picker.js && ncp dist/js/color-picker.js.map docs/js/color-picker.js.map",
+    "copy": "npm-run-all --parallel copy-*",
+    "copy-css-cp": "ncp dist/css/color-picker.css docs/css/color-picker.css",
+    "copy-css-rtl": "ncp dist/css/color-picker.rtl.css docs/css/color-picker.rtl.css",
+    "compile": "npm run lint:css && npm-run-all --parallel compile-* && npm run copy",
+    "compile-scss": "node compile.js",
+    "compile-scss-min": "node compile.js MIN:true",
+    "compile-scss-rtl": "node compile.js MIN:false,DIR:rtl",
+    "compile-scss-rtl-min": "node compile.js MIN:true,DIR:rtl"
+  }
+}

package/src/scss/color-picker.scss

@@ -5,6 +5,10 @@
   position: relative;
   display: flex;
 
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
   @each $name in "white", "black" {
     @each $lvl in $transparency-levels {
       @if  type-of($name) == "string" and type-of($lvl) == "number" {
@@ -64,7 +68,11 @@
 }
 
 .color-dropdown.picker { left: 0; }
-.color-dropdown.menu { right: 0; max-height: 230px; }
+
+.color-dropdown.menu {
+  right: 0;
+  max-height: 230px;
+}
 
 .open .color-dropdown.top {
   top: auto;
@@ -94,7 +102,8 @@
 /* btn-appearance */
 .btn-appearance {
   width: 100%;
-  height: 1.5rem;
+
+  // height: 1.5rem;
   padding: .6rem 1rem;
   font-size: 1rem;
   line-height: 1.5;
@@ -147,10 +156,10 @@
 /* picker-toggle */
 .picker-toggle {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
   background: transparent;
   border: 0;
 }
@@ -290,7 +299,8 @@
   transition: var(--options-transition);
 }
 
-.color-options.scrollable:hover {
+// .color-options.scrollable:hover {
+.color-dropdown.menu:hover .scrollable {
   height: var(--grid-hover-height);
 }
 
@@ -312,7 +322,7 @@
   width: var(--grid-item-size);
   height: var(--grid-item-size);
   overflow: hidden;
-  text-indent: 2.1rem;
+  color: rgba(0,0,0,0%);
 
   &:active, &:focus {
     outline: none;
@@ -410,7 +420,7 @@
 
 /* visual control */
 .visual-control {
-  height: 150px;
+  height: 230px;
 
   /* important for mobile devices */
   touch-action: none;
@@ -418,7 +428,7 @@
 }
 
 .visual-control1 {
-  width: 150px;
+  width: 230px;
 }
 
 .visual-control2,
@@ -427,12 +437,7 @@
   cursor: ns-resize;
 }
 
-@media (min-width: 578px) {
-  .visual-control { height: 230px; }
-  .visual-control1 { width: 230px; }
-}
-
-@media (min-width: 1200px) {
+@media (width >= 980px) {
   .visual-control { height: 300px; }
   .visual-control1 { width: 300px; }
 }
@@ -457,6 +462,7 @@
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   height: 7px;
 
   /* important for mobile devices */

package/src/ts/index.ts

@@ -1,5 +1,3 @@
-import { addListener, removeListener } from '@thednp/event-listener';
-
 import {
   ariaDescription,
   ariaSelected,
@@ -37,6 +35,7 @@ import {
   getDocumentElement,
   getDocument,
   ObjectAssign,
+  ObjectFromEntries,
   Data,
   getInstance,
   setElementStyle,
@@ -52,6 +51,8 @@ import {
   isArray,
   isString,
   getWindow,
+  on,
+  off,
 } from '@thednp/shorty';
 
 // ColorPicker Util
@@ -67,6 +68,7 @@ import setMarkup from './util/setMarkup';
 
 import ColorPickerOptions from './interface/colorPickerOptions';
 import ColorPickerLabels from './interface/colorPickerLabels';
+import type ColorNames from './interface/ColorNames';
 import { version } from '../../package.json';
 
 // ColorPicker GC
@@ -95,7 +97,7 @@ const initColorPicker = (element: HTMLInputElement) => new ColorPicker(element);
  * Add / remove `ColorPicker` main event listeners.
  */
 const toggleEvents = (self: ColorPicker, action?: boolean) => {
-  const fn = action ? addListener : removeListener;
+  const fn = action ? on : off;
   const { input, pickerToggle, menuToggle } = self;
 
   fn(input, focusinEvent, self.showPicker);
@@ -110,7 +112,7 @@ const toggleEvents = (self: ColorPicker, action?: boolean) => {
  * Add / remove `ColorPicker` event listeners active only when open.
  */
 const toggleEventsOnShown = (self: ColorPicker, action?: boolean) => {
-  const fn = action ? addListener : removeListener;
+  const fn = action ? on : off;
   const { input, colorMenu, parent } = self;
   const doc = getDocument(input);
   const win = getWindow(doc);
@@ -208,6 +210,8 @@ export default class ColorPicker {
   public static setAttribute = setAttribute;
   public static getBoundingClientRect = getBoundingClientRect;
   public static version = version;
+  public static colorNames = colorNames;
+  public static colorPickerLabels = colorPickerLabels;
 
   id: number;
   input: HTMLInputElement;
@@ -222,7 +226,7 @@ export default class ColorPicker {
     c2y: number;
     c3y: number;
   };
-  colorLabels: Record<string, string> = {};
+  colorLabels: ColorNames = ObjectFromEntries(colorNames.map(c => [c, c])) as ColorNames;
   colorKeywords: string[] | false;
   colorPresets: ColorPalette | string[] | false;
   componentLabels: ColorPickerLabels;
@@ -263,7 +267,7 @@ export default class ColorPicker {
       c2y: 0,
       c3y: 0,
     };
-    this.colorLabels = {};
+    // this.colorLabels = {};
     this.colorKeywords = false;
     this.colorPresets = false;
 
@@ -283,9 +287,7 @@ export default class ColorPicker {
     }
 
     // expose colour labels to all methods
-    colorNames.forEach((c, i) => {
-      this.colorLabels[c] = translatedColorLabels[i].trim();
-    });
+    ObjectAssign(this.colorLabels, ObjectFromEntries(translatedColorLabels.map((c, i) => [colorNames[i], c])));
 
     // update and expose component labels
     const tempComponentLabels =
@@ -318,22 +320,6 @@ export default class ColorPicker {
       this.colorPresets = colorPresets.split(',').map((x: string) => x.trim());
     }
 
-    // bind events
-    this.showPicker = this.showPicker.bind(this);
-    this.togglePicker = this.togglePicker.bind(this);
-    this.toggleMenu = this.toggleMenu.bind(this);
-    this.menuClickHandler = this.menuClickHandler.bind(this);
-    this.menuKeyHandler = this.menuKeyHandler.bind(this);
-    this.pointerDown = this.pointerDown.bind(this);
-    this.pointerMove = this.pointerMove.bind(this);
-    this.pointerUp = this.pointerUp.bind(this);
-    this.update = this.update.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
-    this.handleFocusOut = this.handleFocusOut.bind(this);
-    this.changeHandler = this.changeHandler.bind(this);
-    this.handleDismiss = this.handleDismiss.bind(this);
-    this.handleKnobs = this.handleKnobs.bind(this);
-
     // generate markup
     setMarkup(this);
 
@@ -513,11 +499,11 @@ export default class ColorPicker {
    * @param e
    * @this {ColorPicker}
    */
-  handleFocusOut({ relatedTarget }: FocusEvent & { relatedTarget: HTMLElement }): void {
+  handleFocusOut = ({ relatedTarget }: FocusEvent & { relatedTarget: HTMLElement }): void => {
     if (relatedTarget && !this.parent.contains(relatedTarget)) {
       this.hide(true);
     }
-  }
+  };
 
   /**
    * The `ColorPicker` *keyup* event listener when open.
@@ -525,19 +511,18 @@ export default class ColorPicker {
    * @param e
    * @this {ColorPicker}
    */
-  handleDismiss({ code }: KeyboardEvent): void {
+  handleDismiss = ({ code }: KeyboardEvent): void => {
     if (this.isOpen && code === keyEscape) {
       this.hide();
     }
-  }
+  };
 
   /**
    * The `ColorPicker` *scroll* event listener when open.
    *
    * @param e
-   * @this {ColorPicker}
    */
-  handleScroll(e: Event): void {
+  handleScroll = (e: Event) => {
     const { activeElement } = getDocument(this.input);
 
     this.updateDropdownPosition();
@@ -550,14 +535,14 @@ export default class ColorPicker {
       e.stopPropagation();
       e.preventDefault();
     }
-  }
+  };
 
   /**
    * The `ColorPicker` keyboard event listener for menu navigation.
    *
    * @param e
    */
-  menuKeyHandler(e: Event & { target: HTMLElement; code: string }) {
+  menuKeyHandler = (e: KeyboardEvent & { target: HTMLElement }) => {
     const { target, code } = e;
     const { previousElementSibling, nextElementSibling, parentElement } = target;
     const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
@@ -591,7 +576,7 @@ export default class ColorPicker {
     if ([keyEnter, keySpace].includes(code)) {
       this.menuClickHandler(e);
     }
-  }
+  };
 
   /**
    * The `ColorPicker` click event listener for the colour menu presets / defaults.
@@ -599,7 +584,7 @@ export default class ColorPicker {
    * @param e
    * @this {ColorPicker}
    */
-  menuClickHandler(e: Event): void {
+  menuClickHandler = (e: Event) => {
     const { target } = e;
     const { colorMenu } = this;
     const newOption = (getAttribute(target as HTMLElement, 'data-value') || '').trim();
@@ -637,14 +622,15 @@ export default class ColorPicker {
       }
       firePickerChange(this);
     }
-  }
+  };
 
   /**
    * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
    *
    * @param e
    */
-  pointerDown(e: Event & { target: HTMLElement; pageX: number; pageY: number }) {
+  pointerDown = (e: PointerEvent & { target: HTMLElement }) => {
+    if (e.button !== 0) return;
     const { target, pageX, pageY } = e;
     const { colorMenu, visuals, controlKnobs } = this;
     const [v1, v2, v3] = visuals;
@@ -675,7 +661,7 @@ export default class ColorPicker {
       }
     }
     e.preventDefault();
-  }
+  };
 
   /**
    * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
@@ -683,7 +669,7 @@ export default class ColorPicker {
    * @param e
    * @this
    */
-  pointerUp({ target }: PointerEvent & { target: HTMLElement }) {
+  pointerUp = ({ target }: PointerEvent & { target: HTMLElement }) => {
     const { parent } = this;
     const doc = getDocument(parent);
     const currentOpen = querySelector(`${colorPickerParentSelector}.open`, doc) !== null;
@@ -694,14 +680,14 @@ export default class ColorPicker {
     }
 
     this.dragElement = undefined;
-  }
+  };
 
   /**
    * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
    *
    * @param {PointerEvent} e
    */
-  pointerMove(e: PointerEvent): void {
+  pointerMove = (e: PointerEvent) => {
     const { dragElement, visuals } = this;
     const [v1, v2, v3] = visuals;
     const { pageX, pageY } = e;
@@ -724,14 +710,14 @@ export default class ColorPicker {
     if (dragElement === v3) {
       this.changeAlpha(offsetY);
     }
-  }
+  };
 
   /**
    * The `ColorPicker` *keydown* event listener for control knobs.
    *
    * @param e
    */
-  handleKnobs(e: Event & { code: string }) {
+  handleKnobs = (e: Event & { code: string }) => {
     const { target, code } = e;
 
     // only react to arrow buttons
@@ -777,10 +763,10 @@ export default class ColorPicker {
       }
       this.handleScroll(e);
     }
-  }
+  };
 
   /** The event listener of the colour form inputs. */
-  changeHandler(): void {
+  changeHandler = (): void => {
     let colorSource;
     const { inputs, format, value: currentValue, input, controlPositions, visuals } = this;
     const { activeElement } = getDocument(input);
@@ -845,7 +831,7 @@ export default class ColorPicker {
         this.value = currentValue;
       }
     }
-  }
+  };
 
   /**
    * Updates `ColorPicker` first control:
@@ -975,14 +961,14 @@ export default class ColorPicker {
    * * initialization
    * * window resize
    */
-  update() {
+  update = () => {
     this.updateDropdownPosition();
     this.updateAppearance();
     this.setControlPositions();
     this.updateInputs(true);
     this.updateControls();
     this.updateVisuals();
-  }
+  };
 
   /** Updates the open dropdown position on *scroll* event. */
   updateDropdownPosition() {
@@ -1155,7 +1141,7 @@ export default class ColorPicker {
    *
    * @param e
    */
-  togglePicker(e?: Event) {
+  togglePicker = (e?: Event) => {
     if (e) e.preventDefault();
     const { colorPicker } = this;
 
@@ -1164,16 +1150,16 @@ export default class ColorPicker {
     } else {
       showDropdown(this, colorPicker);
     }
-  }
+  };
 
   /** Shows the `ColorPicker` dropdown. */
-  showPicker() {
+  showPicker = () => {
     const { colorPicker } = this;
 
     if (!['top', 'bottom'].some(c => hasClass(colorPicker, c))) {
       showDropdown(this, colorPicker);
     }
-  }
+  };
 
   /**
    * Toggles the visibility of the `ColorPicker` presets menu.
@@ -1181,7 +1167,7 @@ export default class ColorPicker {
    * @param e
    * @this {ColorPicker}
    */
-  toggleMenu(e?: Event) {
+  toggleMenu = (e?: Event) => {
     if (e) e.preventDefault();
     const { colorMenu } = this;
 
@@ -1190,7 +1176,7 @@ export default class ColorPicker {
     } else {
       showDropdown(this, colorMenu);
     }
-  }
+  };
 
   /**
    * Hides the currently open `ColorPicker` dropdown.