@thednp/color-picker 0.0.1-alpha1 → 0.0.1

package/src/js/index.js

@@ -1,12 +1,3 @@
-import querySelectorAll from 'shorter-js/src/selectors/querySelectorAll';
 import ColorPicker from './color-picker';
 
-function initCallBack() {
-  const { init, selector } = ColorPicker;
-  [...querySelectorAll(selector)].forEach(init);
-}
-
-if (document.body) initCallBack();
-else document.addEventListener('DOMContentLoaded', initCallBack, { once: true });
-
 export default ColorPicker;

package/src/js/util/colorNames.js

@@ -1,156 +1,6 @@
 /**
- * A complete list of web safe colors.
- * @see https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json
+ * A list of 17 color names used for WAI-ARIA compliance.
  * @type {string[]}
  */
-const colorNames = [
-  'aliceblue',
-  'antiquewhite',
-  'aqua',
-  'aquamarine',
-  'azure',
-  'beige',
-  'bisque',
-  'black',
-  'blanchedalmond',
-  'blue',
-  'blueviolet',
-  'brown',
-  'burlywood',
-  'cadetblue',
-  'chartreuse',
-  'chocolate',
-  'coral',
-  'cornflowerblue',
-  'cornsilk',
-  'crimson',
-  'cyan',
-  'darkblue',
-  'darkcyan',
-  'darkgoldenrod',
-  'darkgray',
-  'darkgreen',
-  'darkgrey',
-  'darkkhaki',
-  'darkmagenta',
-  'darkolivegreen',
-  'darkorange',
-  'darkorchid',
-  'darkred',
-  'darksalmon',
-  'darkseagreen',
-  'darkslateblue',
-  'darkslategray',
-  'darkslategrey',
-  'darkturquoise',
-  'darkviolet',
-  'deeppink',
-  'deepskyblue',
-  'dimgray',
-  'dimgrey',
-  'dodgerblue',
-  'firebrick',
-  'floralwhite',
-  'forestgreen',
-  'fuchsia',
-  'gainsboro',
-  'ghostwhite',
-  'goldenrod',
-  'gold',
-  'gray',
-  'green',
-  'greenyellow',
-  'grey',
-  'honeydew',
-  'hotpink',
-  'indianred',
-  'indigo',
-  'ivory',
-  'khaki',
-  'lavenderblush',
-  'lavender',
-  'lawngreen',
-  'lemonchiffon',
-  'lightblue',
-  'lightcoral',
-  'lightcyan',
-  'lightgoldenrodyellow',
-  'lightgray',
-  'lightgreen',
-  'lightgrey',
-  'lightpink',
-  'lightsalmon',
-  'lightseagreen',
-  'lightskyblue',
-  'lightslategray',
-  'lightslategrey',
-  'lightsteelblue',
-  'lightyellow',
-  'lime',
-  'limegreen',
-  'linen',
-  'magenta',
-  'maroon',
-  'mediumaquamarine',
-  'mediumblue',
-  'mediumorchid',
-  'mediumpurple',
-  'mediumseagreen',
-  'mediumslateblue',
-  'mediumspringgreen',
-  'mediumturquoise',
-  'mediumvioletred',
-  'midnightblue',
-  'mintcream',
-  'mistyrose',
-  'moccasin',
-  'navajowhite',
-  'navy',
-  'oldlace',
-  'olive',
-  'olivedrab',
-  'orange',
-  'orangered',
-  'orchid',
-  'palegoldenrod',
-  'palegreen',
-  'paleturquoise',
-  'palevioletred',
-  'papayawhip',
-  'peachpuff',
-  'peru',
-  'pink',
-  'plum',
-  'powderblue',
-  'purple',
-  'rebeccapurple',
-  'red',
-  'rosybrown',
-  'royalblue',
-  'saddlebrown',
-  'salmon',
-  'sandybrown',
-  'seagreen',
-  'seashell',
-  'sienna',
-  'silver',
-  'skyblue',
-  'slateblue',
-  'slategray',
-  'slategrey',
-  'snow',
-  'springgreen',
-  'steelblue',
-  'tan',
-  'teal',
-  'thistle',
-  'tomato',
-  'turquoise',
-  'violet',
-  'wheat',
-  'white',
-  'whitesmoke',
-  'yellow',
-  'yellowgreen',
-];
+const colorNames = ['white', 'black', 'grey', 'red', 'orange', 'brown', 'gold', 'olive', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'violet', 'magenta', 'pink'];
 export default colorNames;

package/src/js/util/colorPickerLabels.js

@@ -0,0 +1,22 @@
+/** @type {Record<string, string>} */
+const colorPickerLabels = {
+  pickerLabel: 'Colour Picker',
+  appearanceLabel: 'Colour Appearance',
+  valueLabel: 'Colour Value',
+  toggleLabel: 'Select Colour',
+  presetsLabel: 'Colour Presets',
+  defaultsLabel: 'Colour Defaults',
+  formatLabel: 'Format',
+  alphaLabel: 'Alpha',
+  hexLabel: 'Hexadecimal',
+  hueLabel: 'Hue',
+  whitenessLabel: 'Whiteness',
+  blacknessLabel: 'Blackness',
+  saturationLabel: 'Saturation',
+  lightnessLabel: 'Lightness',
+  redLabel: 'Red',
+  greenLabel: 'Green',
+  blueLabel: 'Blue',
+};
+
+export default colorPickerLabels;

package/src/js/util/getColorControls.js

@@ -0,0 +1,103 @@
+import ariaLabel from 'shorter-js/src/strings/ariaLabel';
+import ariaValueMin from 'shorter-js/src/strings/ariaValueMin';
+import ariaValueMax from 'shorter-js/src/strings/ariaValueMax';
+import createElement from 'shorter-js/src/misc/createElement';
+import setAttribute from 'shorter-js/src/attr/setAttribute';
+
+import tabIndex from './tabindex';
+
+/**
+ * Returns all color controls for `ColorPicker`.
+ *
+ * @param {CP.ColorPicker} self the `ColorPicker` instance
+ * @returns {HTMLElement | Element} color controls
+ */
+export default function getColorControls(self) {
+  const { format, componentLabels } = self;
+  const {
+    hueLabel, alphaLabel, lightnessLabel, saturationLabel,
+    whitenessLabel, blacknessLabel,
+  } = componentLabels;
+
+  const max1 = format === 'hsl' ? 360 : 100;
+  const max2 = format === 'hsl' ? 100 : 360;
+  const max3 = 100;
+
+  let ctrl1Label = format === 'hsl'
+    ? `${hueLabel} & ${lightnessLabel}`
+    : `${lightnessLabel} & ${saturationLabel}`;
+
+  ctrl1Label = format === 'hwb'
+    ? `${whitenessLabel} & ${blacknessLabel}`
+    : ctrl1Label;
+
+  const ctrl2Label = format === 'hsl'
+    ? `${saturationLabel}`
+    : `${hueLabel}`;
+
+  const colorControls = createElement({
+    tagName: 'div',
+    className: `color-controls ${format}`,
+  });
+
+  const colorPointer = 'color-pointer';
+  const colorSlider = 'color-slider';
+
+  const controls = [
+    {
+      i: 1,
+      c: colorPointer,
+      l: ctrl1Label,
+      min: 0,
+      max: max1,
+    },
+    {
+      i: 2,
+      c: colorSlider,
+      l: ctrl2Label,
+      min: 0,
+      max: max2,
+    },
+    {
+      i: 3,
+      c: colorSlider,
+      l: alphaLabel,
+      min: 0,
+      max: max3,
+    },
+  ];
+
+  controls.forEach((template) => {
+    const {
+      i, c, l, min, max,
+    } = template;
+    const control = createElement({
+      tagName: 'div',
+      className: 'color-control',
+    });
+    setAttribute(control, 'role', 'presentation');
+
+    control.append(
+      createElement({
+        tagName: 'div',
+        className: `visual-control visual-control${i}`,
+      }),
+    );
+
+    const knob = createElement({
+      tagName: 'div',
+      className: `${c} knob`,
+      ariaLive: 'polite',
+    });
+
+    setAttribute(knob, ariaLabel, l);
+    setAttribute(knob, 'role', 'slider');
+    setAttribute(knob, tabIndex, '0');
+    setAttribute(knob, ariaValueMin, `${min}`);
+    setAttribute(knob, ariaValueMax, `${max}`);
+    control.append(knob);
+    colorControls.append(control);
+  });
+
+  return colorControls;
+}

package/src/js/util/getColorForm.js

@@ -6,12 +6,13 @@ import toUpperCase from 'shorter-js/src/misc/toUpperCase';
 import vHidden from './vHidden';
 
 /**
- * Returns the color form.
+ * Returns the color form for `ColorPicker`.
+ *
  * @param {CP.ColorPicker} self the `ColorPicker` instance
- * @returns {HTMLElement | Element}
+ * @returns {HTMLElement | Element} a new `<div>` element with color component `<input>`
  */
 export default function getColorForm(self) {
-  const { format, id } = self;
+  const { format, id, componentLabels } = self;
   const colorForm = createElement({
     tagName: 'div',
     className: `color-form ${format}`,
@@ -20,38 +21,44 @@ export default function getColorForm(self) {
   let components = ['hex'];
   if (format === 'rgb') components = ['red', 'green', 'blue', 'alpha'];
   else if (format === 'hsl') components = ['hue', 'saturation', 'lightness', 'alpha'];
+  else if (format === 'hwb') components = ['hue', 'whiteness', 'blackness', 'alpha'];
 
   components.forEach((c) => {
     const [C] = format === 'hex' ? ['#'] : toUpperCase(c).split('');
     const cID = `color_${format}_${c}_${id}`;
+    const formatLabel = componentLabels[`${c}Label`];
     const cInputLabel = createElement({ tagName: 'label' });
     setAttribute(cInputLabel, 'for', cID);
     cInputLabel.append(
       createElement({ tagName: 'span', ariaHidden: 'true', innerText: `${C}:` }),
-      createElement({ tagName: 'span', className: vHidden, innerText: `${c}` }),
+      createElement({ tagName: 'span', className: vHidden, innerText: formatLabel }),
     );
     const cInput = createElement({
       tagName: 'input',
-      id: cID, // name: cID,
+      id: cID,
+      // name: cID, - prevent saving the value to a form
       type: format === 'hex' ? 'text' : 'number',
-      value: c === 'alpha' ? '1' : '0',
+      value: c === 'alpha' ? '100' : '0',
       className: `color-input ${c}`,
-      autocomplete: 'off',
-      spellcheck: 'false',
     });
-    if (format !== 'hex') {
-      // alpha
-      let max = '1';
-      let step = '0.01';
-      if (c !== 'alpha') {
-        if (format === 'rgb') { max = '255'; step = '1'; } else if (c === 'hue') { max = '360'; step = '1'; } else { max = '100'; step = '1'; }
+    setAttribute(cInput, 'autocomplete', 'off');
+    setAttribute(cInput, 'spellcheck', 'false');
+
+    // alpha
+    let max = '100';
+    let step = '1';
+    if (c !== 'alpha') {
+      if (format === 'rgb') {
+        max = '255'; step = '1';
+      } else if (c === 'hue') {
+        max = '360'; step = '1';
       }
-      ObjectAssign(cInput, {
-        min: '0',
-        max,
-        step,
-      });
     }
+    ObjectAssign(cInput, {
+      min: '0',
+      max,
+      step,
+    });
     colorForm.append(cInputLabel, cInput);
   });
   return colorForm;

package/src/js/util/getColorMenu.js

@@ -0,0 +1,88 @@
+import ariaLabel from 'shorter-js/src/strings/ariaLabel';
+import ariaSelected from 'shorter-js/src/strings/ariaSelected';
+import setAttribute from 'shorter-js/src/attr/setAttribute';
+import getAttribute from 'shorter-js/src/attr/getAttribute';
+import createElement from 'shorter-js/src/misc/createElement';
+import setElementStyle from 'shorter-js/src/misc/setElementStyle';
+
+import setCSSProperties from './setCSSProperties';
+import tabIndex from './tabindex';
+import Color from '../color';
+import ColorPalette from '../color-palette';
+
+/**
+ * Returns a color-defaults with given values and class.
+ * @param {CP.ColorPicker} self
+ * @param {CP.ColorPalette | string[]} colorsSource
+ * @param {string} menuClass
+ * @returns {HTMLElement | Element}
+ */
+export default function getColorMenu(self, colorsSource, menuClass) {
+  const { input, format, componentLabels } = self;
+  const { defaultsLabel, presetsLabel } = componentLabels;
+  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 colorsCount = colorsArray.length;
+  const { lightSteps } = isPalette ? colorsSource : { lightSteps: null };
+  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);
+  const isScrollable = isMultiLine && colorsCount > rowCount * fit;
+  let finalClass = menuClass;
+  finalClass += isScrollable ? ' scrollable' : '';
+  finalClass += isMultiLine ? ' multiline' : '';
+  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 menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
+
+  const menu = createElement({
+    tagName: 'ul',
+    className: finalClass,
+  });
+  setAttribute(menu, 'role', 'listbox');
+  setAttribute(menu, ariaLabel, menuLabel);
+
+  if (isScrollable) { // @ts-ignore
+    setCSSProperties(menu, {
+      '--grid-item-size': `${optionSize}rem`,
+      '--grid-fit': fit,
+      '--grid-gap': gap,
+      '--grid-height': menuHeight,
+      '--grid-hover-height': menuHeightHover,
+    });
+  }
+
+  colorsArray.forEach((x) => {
+    const [value, label] = x.trim().split(':');
+    const xRealColor = new Color(value, format).toString();
+    const isActive = xRealColor === getAttribute(input, 'value');
+    const active = isActive ? ' active' : '';
+
+    const option = createElement({
+      tagName: 'li',
+      className: `color-option${active}`,
+      innerText: `${label || x}`,
+    });
+
+    setAttribute(option, tabIndex, '0');
+    setAttribute(option, 'data-value', `${value}`);
+    setAttribute(option, 'role', 'option');
+    setAttribute(option, ariaSelected, isActive ? 'true' : 'false');
+
+    if (isOptionsMenu) {
+      setElementStyle(option, { backgroundColor: x });
+    }
+
+    menu.append(option);
+  });
+  return menu;
+}

package/src/js/util/isValidJSON.js

@@ -0,0 +1,13 @@
+/**
+ * Check if a string is valid JSON string.
+ * @param {string} str the string input
+ * @returns {boolean} the query result
+ */
+export default function isValidJSON(str) {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}

package/src/js/util/nonColors.js

@@ -0,0 +1,5 @@
+/**
+ * A list of explicit default non-color values.
+ */
+const nonColors = ['transparent', 'currentColor', 'inherit', 'revert', 'initial'];
+export default nonColors;

package/src/js/util/roundPart.js

@@ -0,0 +1,9 @@
+/**
+ * Round colour components, for all formats except HEX.
+ * @param {number} v one of the colour components
+ * @returns {number} the rounded number
+ */
+export default function roundPart(v) {
+  const floor = Math.floor(v);
+  return v - floor < 0.5 ? floor : Math.round(v);
+}

package/src/js/util/setCSSProperties.js

@@ -0,0 +1,12 @@
+import ObjectKeys from 'shorter-js/src/misc/ObjectKeys';
+
+/**
+ * Helps setting CSS variables to the color-menu.
+ * @param {HTMLElement} element
+ * @param {Record<string,any>} props
+ */
+export default function setCSSProperties(element, props) {
+  ObjectKeys(props).forEach((prop) => {
+    element.style.setProperty(prop, props[prop]);
+  });
+}

package/src/js/util/tabindex.js

@@ -0,0 +1,3 @@
+const tabIndex = 'tabindex';
+
+export default tabIndex;

package/src/js/util/templates.js

@@ -1,3 +1,4 @@
+/** A future project to allow using custom `ColorPicker` templates */
 const templates = {
   control: {
     tagName: 'div',

package/src/scss/color-picker.rtl.scss

@@ -0,0 +1,23 @@
+@import "color-picker";
+
+[dir="rtl"] {
+  .color-preview { text-align: right; }
+
+  .menu-toggle {
+    right: auto; left: 0;
+    border-radius: .25rem 0 0 .25rem;
+  }
+  .color-dropdown.picker {
+    right: 0; left: auto;
+  }
+  .color-dropdown.menu {
+    right: auto; left: 0;
+  }
+  .color-control + .color-control {
+    margin-right: .5rem;
+    margin-left: 0;
+  }
+  .color-options.scrollable {
+    margin: 0 0 0 -.5rem;
+  }
+}