@thednp/color-picker 0.0.1-alpha1

package/src/js/index.js

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,156 @@
+/**
+ * A complete list of web safe colors.
+ * @see https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json
+ * @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',
+];
+export default colorNames;

package/src/js/util/getColorControl.js

@@ -0,0 +1,49 @@
+import createElement from 'shorter-js/src/misc/createElement';
+import setAttribute from 'shorter-js/src/attr/setAttribute';
+import ariaLabelledBy from 'shorter-js/src/strings/ariaLabelledBy';
+
+import vHidden from './vHidden';
+
+/**
+ * Returns a new color control `HTMLElement`.
+ * @param {number} iteration
+ * @param {number} id
+ * @param {number} width
+ * @param {number} height
+ * @param {string=} labelledby
+ * @returns {HTMLElement | Element}
+ */
+export default function getColorControl(iteration, id, width, height, labelledby) {
+  const labelID = `appearance${iteration}_${id}`;
+  const knobClass = iteration === 1 ? 'color-pointer' : 'color-slider';
+  const control = createElement({
+    tagName: 'div',
+    className: 'color-control',
+  });
+  setAttribute(control, 'role', 'presentation');
+
+  control.append(
+    createElement({
+      id: labelID,
+      tagName: 'label',
+      className: `color-label ${vHidden}`,
+      ariaLive: 'polite',
+    }),
+    createElement({
+      tagName: 'canvas',
+      className: `visual-control${iteration}`,
+      ariaHidden: 'true',
+      width: `${width}`,
+      height: `${height}`,
+    }),
+  );
+
+  const knob = createElement({
+    tagName: 'div',
+    className: `${knobClass} knob`,
+  });
+  setAttribute(knob, ariaLabelledBy, labelledby || labelID);
+  setAttribute(knob, 'tabindex', '0');
+  control.append(knob);
+  return control;
+}

package/src/js/util/getColorForm.js

@@ -0,0 +1,58 @@
+import createElement from 'shorter-js/src/misc/createElement';
+import setAttribute from 'shorter-js/src/attr/setAttribute';
+import ObjectAssign from 'shorter-js/src/misc/ObjectAssign';
+import toUpperCase from 'shorter-js/src/misc/toUpperCase';
+
+import vHidden from './vHidden';
+
+/**
+ * Returns the color form.
+ * @param {CP.ColorPicker} self the `ColorPicker` instance
+ * @returns {HTMLElement | Element}
+ */
+export default function getColorForm(self) {
+  const { format, id } = self;
+  const colorForm = createElement({
+    tagName: 'div',
+    className: `color-form ${format}`,
+  });
+
+  let components = ['hex'];
+  if (format === 'rgb') components = ['red', 'green', 'blue', 'alpha'];
+  else if (format === 'hsl') components = ['hue', 'saturation', 'lightness', 'alpha'];
+
+  components.forEach((c) => {
+    const [C] = format === 'hex' ? ['#'] : toUpperCase(c).split('');
+    const cID = `color_${format}_${c}_${id}`;
+    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}` }),
+    );
+    const cInput = createElement({
+      tagName: 'input',
+      id: cID, // name: cID,
+      type: format === 'hex' ? 'text' : 'number',
+      value: c === 'alpha' ? '1' : '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'; }
+      }
+      ObjectAssign(cInput, {
+        min: '0',
+        max,
+        step,
+      });
+    }
+    colorForm.append(cInputLabel, cInput);
+  });
+  return colorForm;
+}

package/src/js/util/init.js

@@ -0,0 +1,14 @@
+import querySelectorAll from 'shorter-js/src/selectors/querySelectorAll';
+import getDocument from 'shorter-js/src/get/getDocument';
+import getDocumentBody from 'shorter-js/src/get/getDocumentBody';
+
+import { addListener } from 'event-listener.js';
+import ColorPicker from '../color-picker';
+
+function initCallBack() {
+  const { init, selector } = ColorPicker;
+  [...querySelectorAll(selector)].forEach(init);
+}
+
+if (getDocumentBody()) initCallBack();
+else addListener(getDocument(), 'DOMContentLoaded', initCallBack, { once: true });

package/src/js/util/templates.js

@@ -0,0 +1,9 @@
+const templates = {
+  control: {
+    tagName: 'div',
+    className: 'color-control',
+  },
+
+};
+
+export default templates;

package/src/js/util/vHidden.js

@@ -0,0 +1,2 @@
+const vHidden = 'v-hidden';
+export default vHidden;

package/src/js/version.js

@@ -0,0 +1,6 @@
+// @ts-ignore
+import { version } from '../../package.json';
+
+const Version = version;
+
+export default Version;