@thednp/color-picker 0.0.1-alpha2 → 0.0.2-alpha1

package/src/js/color-picker.js

@@ -1,14 +1,10 @@
 import { addListener, removeListener } from 'event-listener.js';
 
 import ariaDescription from 'shorter-js/src/strings/ariaDescription';
-// import ariaLabel from 'shorter-js/src/strings/ariaLabel';
 import ariaSelected from 'shorter-js/src/strings/ariaSelected';
 import ariaExpanded from 'shorter-js/src/strings/ariaExpanded';
 import ariaValueText from 'shorter-js/src/strings/ariaValueText';
 import ariaValueNow from 'shorter-js/src/strings/ariaValueNow';
-import ariaHasPopup from 'shorter-js/src/strings/ariaHasPopup';
-import ariaHidden from 'shorter-js/src/strings/ariaHidden';
-import ariaLabelledBy from 'shorter-js/src/strings/ariaLabelledBy';
 import keyArrowDown from 'shorter-js/src/strings/keyArrowDown';
 import keyArrowUp from 'shorter-js/src/strings/keyArrowUp';
 import keyArrowLeft from 'shorter-js/src/strings/keyArrowLeft';
@@ -31,7 +27,7 @@ import keyupEvent from 'shorter-js/src/strings/keyupEvent';
 import resizeEvent from 'shorter-js/src/strings/resizeEvent';
 import focusoutEvent from 'shorter-js/src/strings/focusoutEvent';
 
-import isMobile from 'shorter-js/src/boolean/isMobile';
+// import isMobile from 'shorter-js/src/boolean/isMobile';
 import getDocument from 'shorter-js/src/get/getDocument';
 import getDocumentElement from 'shorter-js/src/get/getDocumentElement';
 import getWindow from 'shorter-js/src/get/getWindow';
@@ -42,8 +38,6 @@ import getElementTransitionDuration from 'shorter-js/src/get/getElementTransitio
 import querySelector from 'shorter-js/src/selectors/querySelector';
 import closest from 'shorter-js/src/selectors/closest';
 import getElementsByClassName from 'shorter-js/src/selectors/getElementsByClassName';
-import createElement from 'shorter-js/src/misc/createElement';
-import createElementNS from 'shorter-js/src/misc/createElementNS';
 import dispatchEvent from 'shorter-js/src/misc/dispatchEvent';
 import ObjectAssign from 'shorter-js/src/misc/ObjectAssign';
 import Data, { getInstance } from 'shorter-js/src/misc/data';
@@ -60,17 +54,16 @@ import removeAttribute from 'shorter-js/src/attr/removeAttribute';
 
 // ColorPicker Util
 // ================
+import Color from './color';
+import ColorPalette from './color-palette';
 import colorPickerLabels from './util/colorPickerLabels';
 import colorNames from './util/colorNames';
 import nonColors from './util/nonColors';
-import getColorForm from './util/getColorForm';
-import getColorControls from './util/getColorControls';
-import getColorMenu from './util/getColorMenu';
-import vHidden from './util/vHidden';
+import tabIndex from './util/tabindex';
 import isValidJSON from './util/isValidJSON';
-import Color from './color';
-import ColorPalette from './color-palette';
-import Version from './version';
+import roundPart from './util/roundPart';
+import setMarkup from './util/setMarkup';
+import Version from './util/version';
 
 // ColorPicker GC
 // ==============
@@ -81,15 +74,15 @@ const colorPickerDefaults = {
   componentLabels: colorPickerLabels,
   colorLabels: colorNames,
   format: 'rgb',
-  colorPresets: undefined,
-  colorKeywords: nonColors,
+  colorPresets: false,
+  colorKeywords: false,
 };
 
 // ColorPicker Static Methods
 // ==========================
 
 /** @type {CP.GetInstance<ColorPicker>} */
-const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
+export const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
 
 /** @type {CP.InitCallback<ColorPicker>} */
 const initColorPicker = (element) => new ColorPicker(element);
@@ -97,110 +90,6 @@ const initColorPicker = (element) => new ColorPicker(element);
 // ColorPicker Private Methods
 // ===========================
 
-/**
- * Generate HTML markup and update instance properties.
- * @param {ColorPicker} self
- */
-function initCallback(self) {
-  const {
-    input, parent, format, id, componentLabels, colorKeywords, colorPresets,
-  } = self;
-  const colorValue = getAttribute(input, 'value') || '#fff';
-
-  const {
-    toggleLabel, pickerLabel, formatLabel, hexLabel,
-  } = componentLabels;
-
-  // update color
-  const color = nonColors.includes(colorValue) ? '#fff' : colorValue;
-  self.color = new Color(color, format);
-
-  // set initial controls dimensions
-  // make the controls smaller on mobile
-  const dropClass = isMobile ? ' mobile' : '';
-  const formatString = format === 'hex' ? hexLabel : format.toUpperCase();
-
-  const pickerBtn = createElement({
-    id: `picker-btn-${id}`,
-    tagName: 'button',
-    className: 'picker-toggle btn-appearance',
-  });
-  setAttribute(pickerBtn, ariaExpanded, 'false');
-  setAttribute(pickerBtn, ariaHasPopup, 'true');
-  pickerBtn.append(createElement({
-    tagName: 'span',
-    className: vHidden,
-    innerText: `${pickerLabel}. ${formatLabel}: ${formatString}`,
-  }));
-
-  const pickerDropdown = createElement({
-    tagName: 'div',
-    className: `color-dropdown picker${dropClass}`,
-  });
-  setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
-  setAttribute(pickerDropdown, 'role', 'group');
-
-  const colorControls = getColorControls(self);
-  const colorForm = getColorForm(self);
-
-  pickerDropdown.append(colorControls, colorForm);
-  input.before(pickerBtn);
-  parent.append(pickerDropdown);
-
-  // set colour key menu template
-  if (colorKeywords || colorPresets) {
-    const presetsDropdown = createElement({
-      tagName: 'div',
-      className: `color-dropdown scrollable menu${dropClass}`,
-    });
-
-    // color presets
-    if ((colorPresets instanceof Array && colorPresets.length)
-      || (colorPresets instanceof ColorPalette && colorPresets.colors)) {
-      const presetsMenu = getColorMenu(self, colorPresets, 'color-options');
-      presetsDropdown.append(presetsMenu);
-    }
-
-    // explicit defaults [reset, initial, inherit, transparent, currentColor]
-    if (colorKeywords && colorKeywords.length) {
-      const keywordsMenu = getColorMenu(self, colorKeywords, 'color-defaults');
-      presetsDropdown.append(keywordsMenu);
-    }
-
-    const presetsBtn = createElement({
-      tagName: 'button',
-      className: 'menu-toggle btn-appearance',
-    });
-    setAttribute(presetsBtn, 'tabindex', '-1');
-    setAttribute(presetsBtn, ariaExpanded, 'false');
-    setAttribute(presetsBtn, ariaHasPopup, 'true');
-
-    const xmlns = encodeURI('http://www.w3.org/2000/svg');
-    const presetsIcon = createElementNS(xmlns, { tagName: 'svg' });
-    setAttribute(presetsIcon, 'xmlns', xmlns);
-    setAttribute(presetsIcon, 'viewBox', '0 0 512 512');
-    setAttribute(presetsIcon, ariaHidden, 'true');
-
-    const path = createElementNS(xmlns, { tagName: 'path' });
-    setAttribute(path, 'd', 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z');
-    setAttribute(path, 'fill', '#fff');
-    presetsIcon.append(path);
-    presetsBtn.append(createElement({
-      tagName: 'span',
-      className: vHidden,
-      innerText: `${toggleLabel}`,
-    }), presetsIcon);
-
-    parent.append(presetsBtn, presetsDropdown);
-  }
-
-  // solve non-colors after settings save
-  if (colorKeywords && nonColors.includes(colorValue)) {
-    self.value = colorValue;
-  }
-  setAttribute(input, 'tabindex', '-1');
-}
-
 /**
  * Add / remove `ColorPicker` main event listeners.
  * @param {ColorPicker} self
@@ -299,8 +188,19 @@ function showDropdown(self, dropdown) {
   addClass(dropdown, 'bottom');
   reflow(dropdown);
   addClass(dropdown, 'show');
+
   if (isPicker) self.update();
-  self.show();
+
+  if (!self.isOpen) {
+    toggleEventsOnShown(self, true);
+    self.updateDropdownPosition();
+    self.isOpen = true;
+    setAttribute(self.input, tabIndex, '0');
+    if (menuToggle) {
+      setAttribute(menuToggle, tabIndex, '0');
+    }
+  }
+
   setAttribute(nextBtn, ariaExpanded, 'true');
   if (activeBtn) {
     setAttribute(activeBtn, ariaExpanded, 'false');
@@ -423,7 +323,7 @@ export default class ColorPicker {
     self.handleKnobs = self.handleKnobs.bind(self);
 
     // generate markup
-    initCallback(self);
+    setMarkup(self);
 
     const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
     // set main elements
@@ -470,7 +370,7 @@ export default class ColorPicker {
   set value(v) { this.input.value = v; }
 
   /** Check if the colour presets include any non-colour. */
-  get includeNonColor() {
+  get hasNonColor() {
     return this.colorKeywords instanceof Array
       && this.colorKeywords.some((x) => nonColors.includes(x));
   }
@@ -526,7 +426,7 @@ export default class ColorPicker {
     const { r, g, b } = Color.hslToRgb(hue, 1, 0.5);
     const whiteGrad = 'linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)';
     const alpha = 1 - controlPositions.c3y / offsetHeight;
-    const roundA = Math.round((alpha * 100)) / 100;
+    const roundA = roundPart((alpha * 100)) / 100;
 
     if (format !== 'hsl') {
       const fill = new Color({
@@ -544,7 +444,7 @@ export default class ColorPicker {
       });
       setElementStyle(v2, { background: hueGradient });
     } else {
-      const saturation = Math.round((controlPositions.c2y / offsetHeight) * 100);
+      const saturation = roundPart((controlPositions.c2y / offsetHeight) * 100);
       const fill0 = new Color({
         r: 255, g: 0, b: 0, a: alpha,
       }).saturate(-saturation).toRgbString();
@@ -619,7 +519,7 @@ export default class ColorPicker {
     const self = this;
     const { activeElement } = getDocument(self.input);
 
-    if ((isMobile && self.dragElement)
+    if ((e.type === touchmoveEvent && self.dragElement)
       || (activeElement && self.controlKnobs.includes(activeElement))) {
       e.stopPropagation();
       e.preventDefault();
@@ -699,12 +599,12 @@ export default class ColorPicker {
 
     self.update();
 
-    if (currentActive) {
-      removeClass(currentActive, 'active');
-      removeAttribute(currentActive, ariaSelected);
-    }
-
     if (currentActive !== target) {
+      if (currentActive) {
+        removeClass(currentActive, 'active');
+        removeAttribute(currentActive, ariaSelected);
+      }
+
       addClass(target, 'active');
       setAttribute(target, ariaSelected, 'true');
 
@@ -826,30 +726,41 @@ export default class ColorPicker {
     if (![keyArrowUp, keyArrowDown, keyArrowLeft, keyArrowRight].includes(code)) return;
     e.preventDefault();
 
-    const { controlKnobs } = self;
+    const { format, controlKnobs, visuals } = self;
+    const { offsetWidth, offsetHeight } = visuals[0];
     const [c1, c2, c3] = controlKnobs;
     const { activeElement } = getDocument(c1);
     const currentKnob = controlKnobs.find((x) => x === activeElement);
+    const yRatio = offsetHeight / (format === 'hsl' ? 100 : 360);
 
     if (currentKnob) {
       let offsetX = 0;
       let offsetY = 0;
+
       if (target === c1) {
+        const xRatio = offsetWidth / (format === 'hsl' ? 360 : 100);
+
         if ([keyArrowLeft, keyArrowRight].includes(code)) {
-          self.controlPositions.c1x += code === keyArrowRight ? +1 : -1;
+          self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
         } else if ([keyArrowUp, keyArrowDown].includes(code)) {
-          self.controlPositions.c1y += code === keyArrowDown ? +1 : -1;
+          self.controlPositions.c1y += code === keyArrowDown ? yRatio : -yRatio;
         }
 
         offsetX = self.controlPositions.c1x;
         offsetY = self.controlPositions.c1y;
         self.changeControl1(offsetX, offsetY);
       } else if (target === c2) {
-        self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+        self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code)
+          ? yRatio
+          : -yRatio;
+
         offsetY = self.controlPositions.c2y;
         self.changeControl2(offsetY);
       } else if (target === c3) {
-        self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code) ? +1 : -1;
+        self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code)
+          ? yRatio
+          : -yRatio;
+
         offsetY = self.controlPositions.c3y;
         self.changeAlpha(offsetY);
       }
@@ -871,7 +782,7 @@ export default class ColorPicker {
     const [v1, v2, v3, v4] = format === 'rgb'
       ? inputs.map((i) => parseFloat(i.value) / (i === i4 ? 100 : 1))
       : inputs.map((i) => parseFloat(i.value) / (i !== i1 ? 100 : 360));
-    const isNonColorValue = self.includeNonColor && nonColors.includes(currentValue);
+    const isNonColorValue = self.hasNonColor && nonColors.includes(currentValue);
     const alpha = i4 ? v4 : (1 - controlPositions.c3y / offsetHeight);
 
     if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
@@ -1130,11 +1041,11 @@ export default class ColorPicker {
     } = componentLabels;
     const { r, g, b } = color.toRgb();
     const [knob1, knob2, knob3] = controlKnobs;
-    const hue = Math.round(hsl.h * 360);
+    const hue = roundPart(hsl.h * 360);
     const alpha = color.a;
     const saturationSource = format === 'hsl' ? hsl.s : hsv.s;
-    const saturation = Math.round(saturationSource * 100);
-    const lightness = Math.round(hsl.l * 100);
+    const saturation = roundPart(saturationSource * 100);
+    const lightness = roundPart(hsl.l * 100);
     const hsvl = hsv.v * 100;
     let colorName;
 
@@ -1181,8 +1092,8 @@ export default class ColorPicker {
       setAttribute(knob2, ariaValueNow, `${saturation}`);
     } else if (format === 'hwb') {
       const { hwb } = self;
-      const whiteness = Math.round(hwb.w * 100);
-      const blackness = Math.round(hwb.b * 100);
+      const whiteness = roundPart(hwb.w * 100);
+      const blackness = roundPart(hwb.b * 100);
       colorLabel = `HWB: ${hue}°, ${whiteness}%, ${blackness}%`;
       setAttribute(knob1, ariaDescription, `${valueLabel}: ${colorLabel}. ${appearanceLabel}: ${colorName}.`);
       setAttribute(knob1, ariaValueText, `${whiteness}% & ${blackness}%`);
@@ -1198,7 +1109,7 @@ export default class ColorPicker {
       setAttribute(knob2, ariaValueNow, `${hue}`);
     }
 
-    const alphaValue = Math.round(alpha * 100);
+    const alphaValue = roundPart(alpha * 100);
     setAttribute(knob3, ariaValueText, `${alphaValue}%`);
     setAttribute(knob3, ariaValueNow, `${alphaValue}`);
 
@@ -1221,10 +1132,16 @@ export default class ColorPicker {
   /** Updates the control knobs actual positions. */
   updateControls() {
     const { controlKnobs, controlPositions } = this;
+    let {
+      c1x, c1y, c2y, c3y,
+    } = controlPositions;
     const [control1, control2, control3] = controlKnobs;
-    setElementStyle(control1, { transform: `translate3d(${controlPositions.c1x - 4}px,${controlPositions.c1y - 4}px,0)` });
-    setElementStyle(control2, { transform: `translate3d(0,${controlPositions.c2y - 4}px,0)` });
-    setElementStyle(control3, { transform: `translate3d(0,${controlPositions.c3y - 4}px,0)` });
+    // round control positions
+    [c1x, c1y, c2y, c3y] = [c1x, c1y, c2y, c3y].map(roundPart);
+
+    setElementStyle(control1, { transform: `translate3d(${c1x - 4}px,${c1y - 4}px,0)` });
+    setElementStyle(control2, { transform: `translate3d(0,${c2y - 4}px,0)` });
+    setElementStyle(control3, { transform: `translate3d(0,${c3y - 4}px,0)` });
   }
 
   /**
@@ -1237,16 +1154,16 @@ export default class ColorPicker {
       value: oldColor, format, inputs, color, hsl,
     } = self;
     const [i1, i2, i3, i4] = inputs;
-    const alpha = Math.round(color.a * 100);
-    const hue = Math.round(hsl.h * 360);
+    const alpha = roundPart(color.a * 100);
+    const hue = roundPart(hsl.h * 360);
     let newColor;
 
     if (format === 'hex') {
       newColor = self.color.toHexString(true);
       i1.value = self.hex;
     } else if (format === 'hsl') {
-      const lightness = Math.round(hsl.l * 100);
-      const saturation = Math.round(hsl.s * 100);
+      const lightness = roundPart(hsl.l * 100);
+      const saturation = roundPart(hsl.s * 100);
       newColor = self.color.toHslString();
       i1.value = `${hue}`;
       i2.value = `${saturation}`;
@@ -1254,8 +1171,8 @@ export default class ColorPicker {
       i4.value = `${alpha}`;
     } else if (format === 'hwb') {
       const { w, b } = self.hwb;
-      const whiteness = Math.round(w * 100);
-      const blackness = Math.round(b * 100);
+      const whiteness = roundPart(w * 100);
+      const blackness = roundPart(b * 100);
 
       newColor = self.color.toHwbString();
       i1.value = `${hue}`;
@@ -1263,7 +1180,8 @@ export default class ColorPicker {
       i3.value = `${blackness}`;
       i4.value = `${alpha}`;
     } else if (format === 'rgb') {
-      const { r, g, b } = self.rgb;
+      let { r, g, b } = self.rgb;
+      [r, g, b] = [r, g, b].map(roundPart);
 
       newColor = self.color.toRgbString();
       i1.value = `${r}`;
@@ -1327,7 +1245,7 @@ export default class ColorPicker {
     const self = this;
     const { colorPicker } = self;
 
-    if (!hasClass(colorPicker, 'show')) {
+    if (!['top', 'bottom'].some((c) => hasClass(colorPicker, c))) {
       showDropdown(self, colorPicker);
     }
   }
@@ -1344,21 +1262,6 @@ export default class ColorPicker {
     }
   }
 
-  /** Shows the `ColorPicker` dropdown or the presets menu. */
-  show() {
-    const self = this;
-    const { menuToggle } = self;
-    if (!self.isOpen) {
-      toggleEventsOnShown(self, true);
-      self.updateDropdownPosition();
-      self.isOpen = true;
-      setAttribute(self.input, 'tabindex', '0');
-      if (menuToggle) {
-        setAttribute(menuToggle, 'tabindex', '0');
-      }
-    }
-  }
-
   /**
    * Hides the currently open `ColorPicker` dropdown.
    * @param {boolean=} focusPrevented
@@ -1393,9 +1296,9 @@ export default class ColorPicker {
       if (!focusPrevented) {
         focus(pickerToggle);
       }
-      setAttribute(input, 'tabindex', '-1');
+      setAttribute(input, tabIndex, '-1');
       if (menuToggle) {
-        setAttribute(menuToggle, 'tabindex', '-1');
+        setAttribute(menuToggle, tabIndex, '-1');
       }
     }
   }
@@ -1409,7 +1312,10 @@ export default class ColorPicker {
     [...parent.children].forEach((el) => {
       if (el !== input) el.remove();
     });
+
+    removeAttribute(input, tabIndex);
     setElementStyle(input, { backgroundColor: '' });
+
     ['txt-light', 'txt-dark'].forEach((c) => removeClass(parent, c));
     Data.remove(input, colorPickerString);
   }
@@ -1417,8 +1323,14 @@ export default class ColorPicker {
 
 ObjectAssign(ColorPicker, {
   Color,
+  ColorPalette,
   Version,
   getInstance: getColorPickerInstance,
   init: initColorPicker,
   selector: colorPickerSelector,
+  // utils important for render
+  roundPart,
+  setElementStyle,
+  setAttribute,
+  getBoundingClientRect,
 });