@thednp/color-picker 0.0.2-alpha5 → 1.0.1

package/dist/js/color-picker-esm.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)
 */
@@ -9,27 +9,26 @@ const EventRegistry = {};
 /**
  * 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);
         }
-      }
-    });
+      });
+    }
   });
 }
 
@@ -37,10 +36,7 @@ function globalListener(e) {
  * 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
@@ -58,9 +54,7 @@ const addListener = (element, eventType, listener, options) => {
   const { size } = oneElementMap;
 
   // register listener with its options
-  if (oneElementMap) {
-    oneElementMap.set(listener, options);
-  }
+  oneElementMap.set(listener, options);
 
   // add listener last
   if (!size) {
@@ -72,10 +66,7 @@ const addListener = (element, eventType, listener, options) => {
  * 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
@@ -94,6 +85,7 @@ const removeListener = (element, eventType, listener, options) => {
   if (!oneEventMap || !oneEventMap.size) delete EventRegistry[eventType];
 
   // remove listener last
+  /* istanbul ignore else */
   if (!oneElementMap || !oneElementMap.size) {
     element.removeEventListener(eventType, globalListener, eventOptions);
   }
@@ -195,12 +187,6 @@ const keydownEvent = 'keydown';
  */
 const changeEvent = 'change';
 
-/**
- * A global namespace for `touchstart` event.
- * @type {string}
- */
-const touchstartEvent = 'touchstart';
-
 /**
  * A global namespace for `touchmove` event.
  * @type {string}
@@ -208,28 +194,22 @@ const touchstartEvent = 'touchstart';
 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.
@@ -277,27 +257,6 @@ function getDocumentElement(node) {
   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.
@@ -1394,7 +1353,7 @@ function inputToRGB(input) {
       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;
     }
   }
@@ -1405,9 +1364,6 @@ function inputToRGB(input) {
   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,
@@ -2246,17 +2202,16 @@ function getColorMenu(self, colorsSource, menuClass) {
   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' : '';
@@ -2264,7 +2219,7 @@ function getColorMenu(self, colorsSource, menuClass) {
   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`
@@ -2371,16 +2326,14 @@ function setMarkup(self) {
     });
 
     // 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({
@@ -2417,9 +2370,7 @@ function setMarkup(self) {
   setAttribute(input, tabIndex, '-1');
 }
 
-var version = "0.0.2alpha5";
-
-// @ts-ignore
+var version = "1.0.1";
 
 const Version = version;
 
@@ -2439,7 +2390,7 @@ const colorPickerDefaults = {
 // ColorPicker Static Methods
 // ==========================
 
-/** @type {CP.GetInstance<ColorPicker>} */
+/** @type {CP.GetInstance<ColorPicker, HTMLInputElement>} */
 const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
 
 /** @type {CP.InitCallback<ColorPicker>} */
@@ -2474,17 +2425,12 @@ function toggleEventsOnShown(self, action) {
   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));
@@ -2494,8 +2440,8 @@ function toggleEventsOnShown(self, action) {
     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);
 }
@@ -2514,6 +2460,7 @@ function firePickerChange(self) {
  * @returns {void}
  */
 function removePosition(element) {
+  /* istanbul ignore else */
   if (element) {
     ['bottom', 'top'].forEach((x) => removeClass(element, x));
   }
@@ -2577,7 +2524,6 @@ class ColorPicker {
   constructor(target, config) {
     const self = this;
     /** @type {HTMLInputElement} */
-    // @ts-ignore
     const input = querySelector(target);
 
     // invalidate
@@ -2588,7 +2534,6 @@ class ColorPicker {
     if (!parent) throw new TypeError('ColorPicker requires a specific markup to work.');
 
     /** @type {HTMLElement} */
-    // @ts-ignore
     self.parent = parent;
 
     /** @type {number} */
@@ -2616,6 +2561,7 @@ class ColorPicker {
     } = 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) {
@@ -2632,7 +2578,7 @@ class ColorPicker {
       ? 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);
@@ -2641,14 +2587,14 @@ class ColorPicker {
     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)) {
@@ -2681,26 +2627,20 @@ class ColorPicker {
     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
@@ -2779,6 +2719,7 @@ class ColorPicker {
     let colorName;
 
     // determine color appearance
+    /* istanbul ignore else */
     if (lightness === 100 && saturation === 0) {
       colorName = colorLabels.white;
     } else if (lightness === 0) {
@@ -2852,7 +2793,6 @@ class ColorPicker {
    * @this {ColorPicker}
    */
   handleFocusOut({ relatedTarget }) {
-    // @ts-ignore
     if (relatedTarget && !this.parent.contains(relatedTarget)) {
       this.hide(true);
     }
@@ -2879,13 +2819,14 @@ class ColorPicker {
     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();
   }
 
   /**
@@ -2895,7 +2836,6 @@ class ColorPicker {
    */
   menuKeyHandler(e) {
     const { target, code } = e;
-    // @ts-ignore
     const { previousElementSibling, nextElementSibling, parentElement } = target;
     const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
     const allSiblings = [...parentElement.children];
@@ -2934,20 +2874,20 @@ class ColorPicker {
 
   /**
    * 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,
@@ -2959,7 +2899,9 @@ class ColorPicker {
 
     self.update();
 
+    /* istanbul ignore else */
     if (currentActive !== target) {
+      /* istanbul ignore else */
       if (currentActive) {
         removeClass(currentActive, 'active');
         removeAttribute(currentActive, ariaSelected);
@@ -2977,15 +2919,13 @@ class ColorPicker {
 
   /**
    * 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;
@@ -2993,11 +2933,10 @@ class ColorPicker {
     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);
@@ -3021,7 +2960,7 @@ class ColorPicker {
 
   /**
    * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
-   * @param {TouchEvent} e
+   * @param {PointerEvent} e
    * @this {ColorPicker}
    */
   pointerUp({ target }) {
@@ -3030,9 +2969,8 @@ class ColorPicker {
     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);
     }
@@ -3042,25 +2980,20 @@ class ColorPicker {
 
   /**
    * 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);
@@ -3094,13 +3027,16 @@ class ColorPicker {
     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)) {
@@ -3146,6 +3082,7 @@ class ColorPicker {
     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) {
@@ -3460,6 +3397,7 @@ class ColorPicker {
     const hue = roundPart(hsl.h * 360);
     let newColor;
 
+    /* istanbul ignore else */
     if (format === 'hex') {
       newColor = self.color.toHexString(true);
       i1.value = self.hex;
@@ -3560,15 +3498,15 @@ class ColorPicker {
       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);
@@ -3581,7 +3519,7 @@ class ColorPicker {
         focus(pickerToggle);
       }
       setAttribute(input, tabIndex, '-1');
-      if (menuToggle) {
+      if (relatedBtn === menuToggle) {
         setAttribute(menuToggle, tabIndex, '-1');
       }
     }
@@ -3619,4 +3557,9 @@ ObjectAssign(ColorPicker, {
   getBoundingClientRect,
 });
 
+/**
+ * A single import is required to add the `CP` namespace to `src` sources.
+ * @typedef {import("../../types/index")}
+ */
+
 export { ColorPicker as default };