@thednp/color-picker 0.0.2-alpha5 → 1.0.1

package/dist/js/color-picker.js

@@ -1,5 +1,5 @@
 /*!
-* ColorPicker v0.0.2alpha5 (http://thednp.github.io/color-picker)
+* ColorPicker v1.0.1 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -15,27 +15,26 @@
   /**
    * The global event listener.
    *
-   * @this {Element | HTMLElement | Window | Document}
-   * @param {Event} e
-   * @returns {void}
+   * @type {EventListener}
+   * @this {EventTarget}
    */
   function globalListener(e) {
     const that = this;
     const { type } = e;
-    const oneEvMap = EventRegistry[type] ? [...EventRegistry[type]] : [];
 
-    oneEvMap.forEach((elementsMap) => {
+    [...EventRegistry[type]].forEach((elementsMap) => {
       const [element, listenersMap] = elementsMap;
-      [...listenersMap].forEach((listenerMap) => {
-        if (element === that) {
+      /* istanbul ignore else */
+      if (element === that) {
+        [...listenersMap].forEach((listenerMap) => {
           const [listener, options] = listenerMap;
           listener.apply(element, [e]);
 
           if (options && options.once) {
             removeListener(element, type, listener, options);
           }
-        }
-      });
+        });
+      }
     });
   }
 
@@ -43,10 +42,7 @@
    * Register a new listener with its options and attach the `globalListener`
    * to the target if this is the first listener.
    *
-   * @param {Element | HTMLElement | Window | Document} element
-   * @param {string} eventType
-   * @param {EventListenerObject['handleEvent']} listener
-   * @param {AddEventListenerOptions=} options
+   * @type {Listener.ListenerAction<EventTarget>}
    */
   const addListener = (element, eventType, listener, options) => {
     // get element listeners first
@@ -64,9 +60,7 @@
     const { size } = oneElementMap;
 
     // register listener with its options
-    if (oneElementMap) {
-      oneElementMap.set(listener, options);
-    }
+    oneElementMap.set(listener, options);
 
     // add listener last
     if (!size) {
@@ -78,10 +72,7 @@
    * Remove a listener from registry and detach the `globalListener`
    * if no listeners are found in the registry.
    *
-   * @param {Element | HTMLElement | Window | Document} element
-   * @param {string} eventType
-   * @param {EventListenerObject['handleEvent']} listener
-   * @param {AddEventListenerOptions=} options
+   * @type {Listener.ListenerAction<EventTarget>}
    */
   const removeListener = (element, eventType, listener, options) => {
     // get listener first
@@ -100,6 +91,7 @@
     if (!oneEventMap || !oneEventMap.size) delete EventRegistry[eventType];
 
     // remove listener last
+    /* istanbul ignore else */
     if (!oneElementMap || !oneElementMap.size) {
       element.removeEventListener(eventType, globalListener, eventOptions);
     }
@@ -201,12 +193,6 @@
    */
   const changeEvent = 'change';
 
-  /**
-   * A global namespace for `touchstart` event.
-   * @type {string}
-   */
-  const touchstartEvent = 'touchstart';
-
   /**
    * A global namespace for `touchmove` event.
    * @type {string}
@@ -214,28 +200,22 @@
   const touchmoveEvent = 'touchmove';
 
   /**
-   * A global namespace for `touchend` event.
+   * A global namespace for `pointerdown` event.
    * @type {string}
    */
-  const touchendEvent = 'touchend';
+  const pointerdownEvent = 'pointerdown';
 
   /**
-   * A global namespace for `mousedown` event.
+   * A global namespace for `pointermove` event.
    * @type {string}
    */
-  const mousedownEvent = 'mousedown';
+  const pointermoveEvent = 'pointermove';
 
   /**
-   * A global namespace for `mousemove` event.
+   * A global namespace for `pointerup` event.
    * @type {string}
    */
-  const mousemoveEvent = 'mousemove';
-
-  /**
-   * A global namespace for `mouseup` event.
-   * @type {string}
-   */
-  const mouseupEvent = 'mouseup';
+  const pointerupEvent = 'pointerup';
 
   /**
    * A global namespace for `scroll` event.
@@ -283,27 +263,6 @@
     return getDocument(node).documentElement;
   }
 
-  /**
-   * Returns the `Window` object of a target node.
-   * @see https://github.com/floating-ui/floating-ui
-   *
-   * @param {(Node | HTMLElement | Element | Window)=} node target node
-   * @returns {globalThis}
-   */
-  function getWindow(node) {
-    if (node == null) {
-      return window;
-    }
-
-    if (!(node instanceof Window)) {
-      const { ownerDocument } = node;
-      return ownerDocument ? ownerDocument.defaultView || window : window;
-    }
-
-    // @ts-ignore
-    return node;
-  }
-
   /**
    * Shortcut for `window.getComputedStyle(element).propertyName`
    * static method.
@@ -1400,7 +1359,7 @@
         format = 'hwb';
       }
       if (isValidCSSUnit(color.a)) {
-        a = color.a; // @ts-ignore -- `parseFloat` works with numbers too
+        a = color.a;
         a = isPercentage(`${a}`) || parseFloat(a) > 1 ? bound01(a, 100) : a;
       }
     }
@@ -1411,9 +1370,6 @@
     return {
       ok,
       format,
-      // r: Math.min(255, Math.max(rgb.r, 0)),
-      // g: Math.min(255, Math.max(rgb.g, 0)),
-      // b: Math.min(255, Math.max(rgb.b, 0)),
       r: rgb.r,
       g: rgb.g,
       b: rgb.b,
@@ -2252,17 +2208,16 @@
     const isOptionsMenu = menuClass === 'color-options';
     const isPalette = colorsSource instanceof ColorPalette;
     const menuLabel = isOptionsMenu ? presetsLabel : defaultsLabel;
-    let colorsArray = isPalette ? colorsSource.colors : colorsSource;
-    colorsArray = colorsArray instanceof Array ? colorsArray : [];
+    const colorsArray = isPalette ? colorsSource.colors : colorsSource;
     const colorsCount = colorsArray.length;
     const { lightSteps } = isPalette ? colorsSource : { lightSteps: null };
-    const fit = lightSteps || [9, 10].find((x) => colorsCount > x * 2 && !(colorsCount % x)) || 5;
+    const fit = lightSteps || [9, 10].find((x) => colorsCount >= x * 2 && !(colorsCount % x)) || 5;
     const isMultiLine = isOptionsMenu && colorsCount > fit;
     let rowCountHover = 2;
-    rowCountHover = isMultiLine && colorsCount >= fit * 2 ? 3 : rowCountHover;
-    rowCountHover = colorsCount >= fit * 3 ? 4 : rowCountHover;
-    rowCountHover = colorsCount >= fit * 4 ? 5 : rowCountHover;
-    const rowCount = rowCountHover - (colorsCount < fit * 3 ? 1 : 2);
+    rowCountHover = isMultiLine && colorsCount > fit * 2 ? 3 : rowCountHover;
+    rowCountHover = isMultiLine && colorsCount > fit * 3 ? 4 : rowCountHover;
+    rowCountHover = isMultiLine && colorsCount > fit * 4 ? 5 : rowCountHover;
+    const rowCount = rowCountHover - (colorsCount <= fit * 3 ? 1 : 2);
     const isScrollable = isMultiLine && colorsCount > rowCount * fit;
     let finalClass = menuClass;
     finalClass += isScrollable ? ' scrollable' : '';
@@ -2270,7 +2225,7 @@
     const gap = isMultiLine ? '1px' : '0.25rem';
     let optionSize = isMultiLine ? 1.75 : 2;
     optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
-    const menuHeight = `${(rowCount || 1) * optionSize}rem`;
+    const menuHeight = `${rowCount * optionSize}rem`;
     const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
     /** @type {HTMLUListElement} */
     // @ts-ignore -- <UL> is an `HTMLElement`
@@ -2377,16 +2332,14 @@
       });
 
       // color presets
-      if ((colorPresets instanceof Array && colorPresets.length)
-        || (colorPresets instanceof ColorPalette && colorPresets.colors)) {
-        const presetsMenu = getColorMenu(self, colorPresets, 'color-options');
-        presetsDropdown.append(presetsMenu);
+      if (colorPresets) {
+        presetsDropdown.append(getColorMenu(self, colorPresets, 'color-options'));
       }
 
       // explicit defaults [reset, initial, inherit, transparent, currentColor]
+      // also custom defaults [default: #069, complementary: #930]
       if (colorKeywords && colorKeywords.length) {
-        const keywordsMenu = getColorMenu(self, colorKeywords, 'color-defaults');
-        presetsDropdown.append(keywordsMenu);
+        presetsDropdown.append(getColorMenu(self, colorKeywords, 'color-defaults'));
       }
 
       const presetsBtn = createElement({
@@ -2423,9 +2376,7 @@
     setAttribute(input, tabIndex, '-1');
   }
 
-  var version = "0.0.2alpha5";
-
-  // @ts-ignore
+  var version = "1.0.1";
 
   const Version = version;
 
@@ -2445,7 +2396,7 @@
   // ColorPicker Static Methods
   // ==========================
 
-  /** @type {CP.GetInstance<ColorPicker>} */
+  /** @type {CP.GetInstance<ColorPicker, HTMLInputElement>} */
   const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
 
   /** @type {CP.InitCallback<ColorPicker>} */
@@ -2480,17 +2431,12 @@
     const fn = action ? addListener : removeListener;
     const { input, colorMenu, parent } = self;
     const doc = getDocument(input);
-    const win = getWindow(input);
-    const pointerEvents = `on${touchstartEvent}` in doc
-      ? { down: touchstartEvent, move: touchmoveEvent, up: touchendEvent }
-      : { down: mousedownEvent, move: mousemoveEvent, up: mouseupEvent };
+    const win = doc.defaultView;
 
-    fn(self.controls, pointerEvents.down, self.pointerDown);
+    fn(self.controls, pointerdownEvent, self.pointerDown);
     self.controlKnobs.forEach((x) => fn(x, keydownEvent, self.handleKnobs));
 
-    // @ts-ignore -- this is `Window`
     fn(win, scrollEvent, self.handleScroll);
-    // @ts-ignore -- this is `Window`
     fn(win, resizeEvent, self.update);
 
     [input, ...self.inputs].forEach((x) => fn(x, changeEvent, self.changeHandler));
@@ -2500,8 +2446,8 @@
       fn(colorMenu, keydownEvent, self.menuKeyHandler);
     }
 
-    fn(doc, pointerEvents.move, self.pointerMove);
-    fn(doc, pointerEvents.up, self.pointerUp);
+    fn(doc, pointermoveEvent, self.pointerMove);
+    fn(doc, pointerupEvent, self.pointerUp);
     fn(parent, focusoutEvent, self.handleFocusOut);
     fn(doc, keyupEvent, self.handleDismiss);
   }
@@ -2520,6 +2466,7 @@
    * @returns {void}
    */
   function removePosition(element) {
+    /* istanbul ignore else */
     if (element) {
       ['bottom', 'top'].forEach((x) => removeClass(element, x));
     }
@@ -2583,7 +2530,6 @@
     constructor(target, config) {
       const self = this;
       /** @type {HTMLInputElement} */
-      // @ts-ignore
       const input = querySelector(target);
 
       // invalidate
@@ -2594,7 +2540,6 @@
       if (!parent) throw new TypeError('ColorPicker requires a specific markup to work.');
 
       /** @type {HTMLElement} */
-      // @ts-ignore
       self.parent = parent;
 
       /** @type {number} */
@@ -2622,6 +2567,7 @@
       } = normalizeOptions(this.isCE ? parent : input, colorPickerDefaults, config || {});
 
       let translatedColorLabels = colorNames;
+      /* istanbul ignore else */
       if (colorLabels instanceof Array && colorLabels.length === 17) {
         translatedColorLabels = colorLabels;
       } else if (colorLabels && colorLabels.split(',').length === 17) {
@@ -2638,7 +2584,7 @@
         ? JSON.parse(componentLabels) : componentLabels;
 
       /** @type {Record<string, string>} */
-      self.componentLabels = ObjectAssign(colorPickerLabels, tempComponentLabels);
+      self.componentLabels = ObjectAssign({ ...colorPickerLabels }, tempComponentLabels);
 
       /** @type {Color} */
       self.color = new Color(input.value || '#fff', format);
@@ -2647,14 +2593,14 @@
       self.format = format;
 
       // set colour defaults
-      if (colorKeywords instanceof Array) {
+      if (colorKeywords instanceof Array && colorKeywords.length) {
         self.colorKeywords = colorKeywords;
       } else if (typeof colorKeywords === 'string' && colorKeywords.length) {
         self.colorKeywords = colorKeywords.split(',').map((x) => x.trim());
       }
 
       // set colour presets
-      if (colorPresets instanceof Array) {
+      if (colorPresets instanceof Array && colorPresets.length) {
         self.colorPresets = colorPresets;
       } else if (typeof colorPresets === 'string' && colorPresets.length) {
         if (isValidJSON(colorPresets)) {
@@ -2687,26 +2633,20 @@
       const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
       // set main elements
       /** @type {HTMLElement} */
-      // @ts-ignore
       self.pickerToggle = querySelector('.picker-toggle', parent);
       /** @type {HTMLElement} */
-      // @ts-ignore
       self.menuToggle = querySelector('.menu-toggle', parent);
       /** @type {HTMLElement} */
-      // @ts-ignore
       self.colorPicker = colorPicker;
       /** @type {HTMLElement} */
-      // @ts-ignore
       self.colorMenu = colorMenu;
       /** @type {HTMLInputElement[]} */
-      // @ts-ignore
       self.inputs = [...getElementsByClassName('color-input', parent)];
       const [controls] = getElementsByClassName('color-controls', parent);
       self.controls = controls;
       /** @type {(HTMLElement | Element)[]} */
       self.controlKnobs = [...getElementsByClassName('knob', controls)];
       /** @type {(HTMLElement)[]} */
-      // @ts-ignore
       self.visuals = [...getElementsByClassName('visual-control', controls)];
 
       // update colour picker controls, inputs and visuals
@@ -2785,6 +2725,7 @@
       let colorName;
 
       // determine color appearance
+      /* istanbul ignore else */
       if (lightness === 100 && saturation === 0) {
         colorName = colorLabels.white;
       } else if (lightness === 0) {
@@ -2858,7 +2799,6 @@
      * @this {ColorPicker}
      */
     handleFocusOut({ relatedTarget }) {
-      // @ts-ignore
       if (relatedTarget && !this.parent.contains(relatedTarget)) {
         this.hide(true);
       }
@@ -2885,13 +2825,14 @@
       const self = this;
       const { activeElement } = getDocument(self.input);
 
-      if ((e.type === touchmoveEvent && self.dragElement)
+      self.updateDropdownPosition();
+
+      /* istanbul ignore next */
+      if (([pointermoveEvent, touchmoveEvent].includes(e.type) && self.dragElement)
         || (activeElement && self.controlKnobs.includes(activeElement))) {
         e.stopPropagation();
         e.preventDefault();
       }
-
-      self.updateDropdownPosition();
     }
 
     /**
@@ -2901,7 +2842,6 @@
      */
     menuKeyHandler(e) {
       const { target, code } = e;
-      // @ts-ignore
       const { previousElementSibling, nextElementSibling, parentElement } = target;
       const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
       const allSiblings = [...parentElement.children];
@@ -2940,20 +2880,20 @@
 
     /**
      * The `ColorPicker` click event listener for the colour menu presets / defaults.
-     * @param {Partial<Event>} e
+     * @param {Event} e
      * @this {ColorPicker}
      */
     menuClickHandler(e) {
       const self = this;
-      /** @type {*} */
       const { target } = e;
       const { colorMenu } = self;
       const newOption = (getAttribute(target, 'data-value') || '').trim();
       // invalidate for targets other than color options
       if (!newOption.length) return;
       const currentActive = querySelector('li.active', colorMenu);
-      let newColor = nonColors.includes(newOption) ? 'white' : newOption;
-      newColor = newOption === 'transparent' ? 'rgba(0,0,0,0)' : newOption;
+      let newColor = newOption;
+      newColor = nonColors.includes(newColor) ? 'white' : newColor;
+      newColor = newColor === 'transparent' ? 'rgba(0,0,0,0)' : newColor;
 
       const {
         r, g, b, a,
@@ -2965,7 +2905,9 @@
 
       self.update();
 
+      /* istanbul ignore else */
       if (currentActive !== target) {
+        /* istanbul ignore else */
         if (currentActive) {
           removeClass(currentActive, 'active');
           removeAttribute(currentActive, ariaSelected);
@@ -2983,15 +2925,13 @@
 
     /**
      * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
-     * @param {TouchEvent} e
+     * @param {PointerEvent} e
      * @this {ColorPicker}
      */
     pointerDown(e) {
       const self = this;
       /** @type {*} */
-      const {
-        type, target, touches, pageX, pageY,
-      } = e;
+      const { target, pageX, pageY } = e;
       const { colorMenu, visuals, controlKnobs } = self;
       const [v1, v2, v3] = visuals;
       const [c1, c2, c3] = controlKnobs;
@@ -2999,11 +2939,10 @@
       const visual = controlKnobs.includes(target) ? target.previousElementSibling : target;
       const visualRect = getBoundingClientRect(visual);
       const html = getDocumentElement(v1);
-      const X = type === 'touchstart' ? touches[0].pageX : pageX;
-      const Y = type === 'touchstart' ? touches[0].pageY : pageY;
-      const offsetX = X - html.scrollLeft - visualRect.left;
-      const offsetY = Y - html.scrollTop - visualRect.top;
+      const offsetX = pageX - html.scrollLeft - visualRect.left;
+      const offsetY = pageY - html.scrollTop - visualRect.top;
 
+      /* istanbul ignore else */
       if (target === v1 || target === c1) {
         self.dragElement = visual;
         self.changeControl1(offsetX, offsetY);
@@ -3027,7 +2966,7 @@
 
     /**
      * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
-     * @param {TouchEvent} e
+     * @param {PointerEvent} e
      * @this {ColorPicker}
      */
     pointerUp({ target }) {
@@ -3036,9 +2975,8 @@
       const doc = getDocument(parent);
       const currentOpen = querySelector(`${colorPickerParentSelector}.open`, doc) !== null;
       const selection = doc.getSelection();
-      // @ts-ignore
+
       if (!self.dragElement && !selection.toString().length
-        // @ts-ignore
         && !parent.contains(target)) {
         self.hide(currentOpen);
       }
@@ -3048,25 +2986,20 @@
 
     /**
      * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
-     * @param {TouchEvent} e
+     * @param {PointerEvent} e
      */
     pointerMove(e) {
       const self = this;
       const { dragElement, visuals } = self;
       const [v1, v2, v3] = visuals;
-      const {
-        // @ts-ignore
-        type, touches, pageX, pageY,
-      } = e;
+      const { pageX, pageY } = e;
 
       if (!dragElement) return;
 
       const controlRect = getBoundingClientRect(dragElement);
       const win = getDocumentElement(v1);
-      const X = type === touchmoveEvent ? touches[0].pageX : pageX;
-      const Y = type === touchmoveEvent ? touches[0].pageY : pageY;
-      const offsetX = X - win.scrollLeft - controlRect.left;
-      const offsetY = Y - win.scrollTop - controlRect.top;
+      const offsetX = pageX - win.scrollLeft - controlRect.left;
+      const offsetY = pageY - win.scrollTop - controlRect.top;
 
       if (dragElement === v1) {
         self.changeControl1(offsetX, offsetY);
@@ -3100,13 +3033,16 @@
       const currentKnob = controlKnobs.find((x) => x === activeElement);
       const yRatio = offsetHeight / 360;
 
+      /* istanbul ignore else */
       if (currentKnob) {
         let offsetX = 0;
         let offsetY = 0;
 
+        /* istanbul ignore else */
         if (target === c1) {
           const xRatio = offsetWidth / 100;
 
+          /* istanbul ignore else */
           if ([keyArrowLeft, keyArrowRight].includes(code)) {
             self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
           } else if ([keyArrowUp, keyArrowDown].includes(code)) {
@@ -3152,6 +3088,7 @@
       const isNonColorValue = self.hasNonColor && nonColors.includes(currentValue);
       const alpha = i4 ? v4 : (1 - controlPositions.c3y / offsetHeight);
 
+      /* istanbul ignore else */
       if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
         if (activeElement === input) {
           if (isNonColorValue) {
@@ -3466,6 +3403,7 @@
       const hue = roundPart(hsl.h * 360);
       let newColor;
 
+      /* istanbul ignore else */
       if (format === 'hex') {
         newColor = self.color.toHexString(true);
         i1.value = self.hex;
@@ -3566,15 +3504,15 @@
         const relatedBtn = openPicker ? pickerToggle : menuToggle;
         const animationDuration = openDropdown && getElementTransitionDuration(openDropdown);
 
-        // if (!self.isValid) {
         self.value = self.color.toString(true);
-        // }
 
+        /* istanbul ignore else */
         if (openDropdown) {
           removeClass(openDropdown, 'show');
           setAttribute(relatedBtn, ariaExpanded, 'false');
           setTimeout(() => {
             removePosition(openDropdown);
+            /* istanbul ignore else */
             if (!querySelector('.show', parent)) {
               removeClass(parent, 'open');
               toggleEventsOnShown(self);
@@ -3587,7 +3525,7 @@
           focus(pickerToggle);
         }
         setAttribute(input, tabIndex, '-1');
-        if (menuToggle) {
+        if (relatedBtn === menuToggle) {
           setAttribute(menuToggle, tabIndex, '-1');
         }
       }
@@ -3625,6 +3563,11 @@
     getBoundingClientRect,
   });
 
+  /**
+   * A single import is required to add the `CP` namespace to `src` sources.
+   * @typedef {import("../../types/index")}
+   */
+
   return ColorPicker;
 
 }));