@thednp/color-picker 1.0.0 → 2.0.0-alpha1

package/src/js/index.js

@@ -1,3 +0,0 @@
-import ColorPicker from './color-picker';
-
-export default ColorPicker;

package/src/js/util/colorNames.js

@@ -1,6 +0,0 @@
-/**
- * A list of 17 color names used for WAI-ARIA compliance.
- * @type {string[]}
- */
-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/getColorControls.js

@@ -1,103 +0,0 @@
-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/isValidJSON.js

@@ -1,13 +0,0 @@
-/**
- * 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

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

package/src/js/util/roundPart.js

@@ -1,9 +0,0 @@
-/**
- * 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

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

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

package/src/js/util/toggleCEAttr.js

@@ -1,70 +0,0 @@
-import setAttribute from 'shorter-js/src/attr/setAttribute';
-import removeAttribute from 'shorter-js/src/attr/removeAttribute';
-import ObjectKeys from 'shorter-js/src/misc/ObjectKeys';
-
-import ColorPalette from '../color-palette';
-import colorNames from './colorNames';
-import colorPickerLabels from './colorPickerLabels';
-
-/**
- * A small utility to toggle `ColorPickerElement` attributes
- * when `connectedCallback` or `disconnectedCallback` methods
- * are called and helps the instance keep its value and settings instact.
- *
- * @param {CP.ColorPickerElement} self ColorPickerElement instance
- * @param {Function=} callback when `true`, attributes are added
- *
- * @example
- * const attributes = [
- *   // essentials
- *   'value', 'format',
- *   // presets menus
- *   'color-presets', 'color-keywords',
- *   // labels
- *   'color-labels', 'component-labels',
- * ];
- */
-export default function toggleCEAttr(self, callback) {
-  if (callback) {
-    const { input, colorPicker } = self;
-
-    const {
-      value, format, colorPresets, colorKeywords, componentLabels, colorLabels,
-    } = colorPicker;
-
-    const { id, placeholder } = input;
-
-    setAttribute(self, 'data-id', id);
-    setAttribute(self, 'data-value', value);
-    setAttribute(self, 'data-format', format);
-    setAttribute(self, 'data-placeholder', placeholder);
-
-    if (ObjectKeys(colorPickerLabels).some((l) => colorPickerLabels[l] !== componentLabels[l])) {
-      setAttribute(self, 'data-component-labels', JSON.stringify(componentLabels));
-    }
-    if (!colorNames.every((c) => c === colorLabels[c])) {
-      setAttribute(self, 'data-color-labels', colorNames.map((n) => colorLabels[n]).join(','));
-    }
-    if (colorPresets instanceof ColorPalette) {
-      const { hue, hueSteps, lightSteps } = colorPresets;
-      setAttribute(self, 'data-color-presets', JSON.stringify({ hue, hueSteps, lightSteps }));
-    }
-    if (Array.isArray(colorPresets) && colorPresets.length) {
-      setAttribute(self, 'data-color-presets', colorPresets.join(','));
-    }
-    if (colorKeywords) {
-      setAttribute(self, 'data-color-keywords', colorKeywords.join(','));
-    }
-    setTimeout(callback, 0);
-  } else {
-    // keep id
-    // removeAttribute(self, 'data-id');
-    removeAttribute(self, 'data-value');
-    removeAttribute(self, 'data-format');
-    removeAttribute(self, 'data-placeholder');
-    removeAttribute(self, 'data-component-labels');
-    removeAttribute(self, 'data-color-labels');
-    removeAttribute(self, 'data-color-presets');
-    removeAttribute(self, 'data-color-keywords');
-  }
-}

package/src/js/util/version.js

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

package/src/js/version.js

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