@thednp/color-picker 2.0.2 → 2.0.4

package/src/ts/interface/ColorNames.ts

@@ -1,20 +0,0 @@
-export default interface ColorNames {
-  white: string;
-  black: string;
-  grey: string;
-  red: string;
-  orange: string;
-  brown: string;
-  gold: string;
-  olive: string;
-  yellow: string;
-  lime: string;
-  green: string;
-  teal: string;
-  cyan: string;
-  blue: string;
-  violet: string;
-  magenta: string;
-  pink: string;
-  [key: string]: string;
-}

package/src/ts/interface/colorPickerLabels.ts

@@ -1,20 +0,0 @@
-export default interface ColorPickerLabels {
-  pickerLabel: string;
-  appearanceLabel: string;
-  valueLabel: string;
-  toggleLabel: string;
-  presetsLabel: string;
-  defaultsLabel: string;
-  formatLabel: string;
-  alphaLabel: string;
-  hexLabel: string;
-  hueLabel: string;
-  whitenessLabel: string;
-  blacknessLabel: string;
-  saturationLabel: string;
-  lightnessLabel: string;
-  redLabel: string;
-  greenLabel: string;
-  blueLabel: string;
-  [key: string]: string;
-}

package/src/ts/interface/colorPickerOptions.ts

@@ -1,11 +0,0 @@
-import type { ColorFormats } from '@thednp/color';
-import ColorPickerLabels from './colorPickerLabels';
-import ColorPalette from '../colorPalette';
-
-export default interface ColorPickerOptions {
-  colorLabels: string | string[];
-  componentLabels: ColorPickerLabels;
-  format: ColorFormats;
-  colorPresets: string | string[] | ColorPalette | false;
-  colorKeywords: string | string[] | false;
-}

package/src/ts/interface/paletteOptions.ts

@@ -1,6 +0,0 @@
-export default interface PaletteOptions {
-  hue: number;
-  hueSteps: number;
-  lightSteps: number;
-  saturation: number;
-}

package/src/ts/util/colorNames.ts

@@ -1,21 +0,0 @@
-/** A list of 17 color names used for WAI-ARIA compliance. */
-const colorNames: string[] = [
-  'white',
-  'black',
-  'grey',
-  'red',
-  'orange',
-  'brown',
-  'gold',
-  'olive',
-  'yellow',
-  'lime',
-  'green',
-  'teal',
-  'cyan',
-  'blue',
-  'violet',
-  'magenta',
-  'pink',
-];
-export default colorNames;

package/src/ts/util/colorPickerLabels.ts

@@ -1,24 +0,0 @@
-import ColorPickerLabels from '../interface/colorPickerLabels';
-
-/** The labels presented to the user. */
-const colorPickerLabels: 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/ts/util/getColorControls.ts

@@ -1,90 +0,0 @@
-import { createElement } from '@thednp/shorty';
-
-import ColorPicker from '..';
-
-/**
- * Returns all color controls for `ColorPicker`.
- *
- * @param self the `ColorPicker` instance
- * @returns color controls
- */
-const getColorControls = (self: ColorPicker): HTMLElement => {
-  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}`,
-  }) as HTMLElement;
-
-  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',
-      role: 'presentation',
-    }) as HTMLElement;
-
-    control.append(
-      createElement({
-        tagName: 'div',
-        className: `visual-control visual-control${i}`,
-      }) as HTMLElement,
-    );
-
-    const knob = createElement({
-      tagName: 'div',
-      className: `${c} knob`,
-      ariaLive: 'polite',
-      ariaLabel: l,
-      role: 'slider',
-      tabIndex: 0,
-      ariaValueMin: `${min}`,
-      ariaValueMax: `${max}`,
-    }) as HTMLElement;
-
-    control.append(knob);
-    colorControls.append(control);
-  });
-
-  return colorControls;
-};
-
-export default getColorControls;

package/src/ts/util/getColorForm.ts

@@ -1,75 +0,0 @@
-import { createElement, setAttribute, ObjectAssign, toUpperCase } from '@thednp/shorty';
-
-import vHidden from './vHidden';
-import ColorPicker from '../index';
-
-/**
- * Returns the color form for `ColorPicker`.
- *
- * @param self the `ColorPicker` instance
- * @returns a new `<div>` element with color component `<input>`
- */
-const getColorForm = (self: ColorPicker): HTMLElement => {
-  const { format, id, componentLabels } = self;
-  const colorForm = createElement({
-    tagName: 'div',
-    className: `color-form ${format}`,
-  }) as HTMLElement;
-
-  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: string): void => {
-    const [C] = format === 'hex' ? ['#'] : toUpperCase(c).split('');
-    const cID = `color_${format}_${c}_${id}`;
-    const formatLabel = componentLabels[`${c}Label`];
-    const cInputLabel = createElement({ tagName: 'label' }) as HTMLElement;
-    setAttribute(cInputLabel, 'for', cID);
-    cInputLabel.append(
-      createElement({
-        tagName: 'span',
-        ariaHidden: 'true',
-        innerText: `${C}:`,
-      }) as HTMLElement,
-      createElement({
-        tagName: 'span',
-        className: vHidden,
-        innerText: formatLabel,
-      }) as HTMLElement,
-    );
-    const cInput = createElement({
-      tagName: 'input',
-      id: cID,
-      // name: cID, - prevent saving the value to a form
-      type: format === 'hex' ? 'text' : 'number',
-      value: c === 'alpha' ? '100' : '0',
-      className: `color-input ${c}`,
-      autocomplete: 'off',
-      spellcheck: false,
-    } as Partial<HTMLInputElement>) as HTMLInputElement;
-
-    // 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,
-    });
-    colorForm.append(cInputLabel, cInput);
-  });
-  return colorForm;
-};
-
-export default getColorForm;

package/src/ts/util/getColorMenu.ts

@@ -1,83 +0,0 @@
-import { setAttribute, getAttribute, createElement, setElementStyle } from '@thednp/shorty';
-
-import Color from '@thednp/color';
-import ColorPalette from '../colorPalette';
-import ColorPicker from '../index';
-
-/**
- * Returns a color-defaults with given values and class.
- */
-const getColorMenu = (self: ColorPicker, colorsSource: ColorPalette | string[], menuClass: string): HTMLElement => {
-  const { input, format, componentLabels } = self;
-  const { defaultsLabel, presetsLabel } = componentLabels;
-  const isOptionsMenu = menuClass === 'color-options';
-  const isPalette = colorsSource instanceof ColorPalette;
-  const menuLabel = isOptionsMenu ? presetsLabel : defaultsLabel;
-  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 isMultiLine = isOptionsMenu && colorsCount > fit;
-  let rowCountHover = 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' : '';
-  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 * optionSize}rem`;
-  const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
-
-  // <UL> is an `HTMLElement`
-  const menu = createElement({
-    tagName: 'ul',
-    className: finalClass,
-    role: 'listbox',
-    ariaLabel: menuLabel,
-  }) as HTMLElement;
-
-  if (isScrollable) {
-    setElementStyle(menu, {
-      '--grid-item-size': `${optionSize}rem`,
-      '--grid-fit': `${fit}`,
-      '--grid-gap': gap,
-      '--grid-height': menuHeight,
-      '--grid-hover-height': menuHeightHover,
-    });
-  }
-
-  colorsArray.forEach(x => {
-    let [value, label] = typeof x === 'string' ? x.trim().split(':') : [];
-    if (x instanceof Color) {
-      value = x.toHexString();
-      label = value;
-    }
-    const color = new Color(x instanceof Color ? x : value, format);
-    const isActive = color.toString() === getAttribute(input, 'value');
-    const active = isActive ? ' active' : '';
-
-    const option = createElement({
-      tagName: 'li',
-      className: `color-option${active}`,
-      innerText: `${label || value}`,
-      tabIndex: 0,
-      role: 'option',
-      ariaSelected: isActive ? 'true' : 'false',
-    }) as HTMLElement;
-    setAttribute(option, 'data-value', `${value}`);
-
-    if (isOptionsMenu) {
-      setElementStyle(option, { backgroundColor: value });
-    }
-
-    menu.append(option);
-  });
-  return menu;
-};
-
-export default getColorMenu;

package/src/ts/util/isValidJSON.ts

@@ -1,19 +0,0 @@
-import { isString } from '@thednp/shorty';
-
-/**
- * Check if a string is valid JSON string.
- *
- * @param str the string input
- * @returns the query result
- */
-const isValidJSON = (str: unknown): str is string => {
-  if (!isString(str)) return false;
-  try {
-    JSON.parse(str);
-  } catch (e) {
-    return false;
-  }
-  return true;
-};
-
-export default isValidJSON;

package/src/ts/util/setMarkup.ts

@@ -1,130 +0,0 @@
-import {
-  getAttribute,
-  setAttribute,
-  toUpperCase,
-  ariaHidden,
-  tabindex,
-  createElement,
-  createElementNS,
-} from '@thednp/shorty';
-
-import Color from '@thednp/color';
-
-import getColorForm from './getColorForm';
-import getColorControls from './getColorControls';
-import getColorMenu from './getColorMenu';
-import vHidden from './vHidden';
-
-import ColorPicker from '../index';
-
-/**
- * Generate HTML markup and update instance properties.
- *
- * @param self
- */
-const setMarkup = (self: ColorPicker) => {
-  const { input, parent, format, id, componentLabels, colorKeywords, colorPresets } = self;
-  const colorValue = getAttribute(input, 'value') || '#fff';
-  const { nonColors } = Color;
-
-  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
-  const formatString = format === 'hex' ? hexLabel : toUpperCase(format);
-
-  const pickerBtn = createElement<HTMLButtonElement>({
-    id: `picker-btn-${id}`,
-    tagName: 'button',
-    type: 'button',
-    className: 'picker-toggle btn-appearance',
-    ariaExpanded: 'false',
-    ariaHasPopup: 'true',
-  }) as HTMLButtonElement;
-
-  pickerBtn.append(
-    createElement({
-      tagName: 'span',
-      className: vHidden,
-      innerText: `${pickerLabel}. ${formatLabel}: ${formatString}`,
-    }) as HTMLElement,
-  );
-
-  const pickerDropdown = createElement({
-    tagName: 'div',
-    className: 'color-dropdown picker',
-    role: 'group',
-    ariaLabelledBy: `picker-btn-${id}`,
-  } as Partial<HTMLElement> & { ariaLabelledBy: string }) as HTMLElement;
-
-  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',
-    }) as HTMLElement;
-
-    // color presets
-    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) {
-      presetsDropdown.append(getColorMenu(self, colorKeywords, 'color-defaults'));
-    }
-
-    const presetsBtn = createElement<HTMLButtonElement>({
-      tagName: 'button',
-      type: 'button',
-      className: 'menu-toggle btn-appearance',
-      tabIndex: -1,
-      ariaExpanded: 'false',
-      ariaHasPopup: 'true',
-    }) as HTMLButtonElement;
-
-    const xmlns = encodeURI('http://www.w3.org/2000/svg');
-    const presetsIcon = createElementNS(xmlns, {
-      tagName: 'svg',
-    }) as HTMLElement;
-    setAttribute(presetsIcon, 'xmlns', xmlns);
-    setAttribute(presetsIcon, 'viewBox', '0 0 512 512');
-    setAttribute(presetsIcon, ariaHidden, 'true');
-
-    const path = createElementNS(xmlns, {
-      tagName: 'path',
-    }) as HTMLElement;
-    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}`,
-      }) as HTMLElement,
-      presetsIcon,
-    );
-
-    parent.append(presetsBtn, presetsDropdown);
-  }
-
-  // solve non-colors after settings save
-  if (colorKeywords && nonColors.includes(colorValue)) {
-    self.value = colorValue;
-  }
-  setAttribute(input, tabindex, '-1');
-};
-
-export default setMarkup;

package/src/ts/util/vHidden.ts

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

package/test/color-palette.test.ts

@@ -1,137 +0,0 @@
-import { expect, it, describe } from 'vitest';
-import Color from "@thednp/color";
-import ColorPalette from "~/ts/colorPalette";
-
-describe("ColorPalette Class Test", () => {
-  it("Test init with no parameter, use all default values", () => {
-    const cpl = new ColorPalette();
-    expect(cpl).to.be.instanceOf(ColorPalette);
-    expect(cpl.hue).to.equal(0);
-    expect(cpl.hueSteps).to.equal(12);
-    expect(cpl.lightSteps).to.equal(10);
-    expect(cpl.colors.length).to.equal(120);
-  });
-
-  it("Test init with 1 parameter, throws error", () => {
-    try {
-      new ColorPalette(0, undefined);
-    } catch (error) {
-      expect(error).to.be.instanceOf(TypeError);
-      expect(error).to.have.property(
-        "message",
-        'ColorPalette: the two minimum arguments must be numbers higher than 0.'
-      );
-    }
-  });
-
-  it("Test init with 2 invalid parameters, throws error", () => {
-    try {
-      new ColorPalette(0, 5);
-    } catch (error) {
-      expect(error).to.be.instanceOf(TypeError);
-      expect(error).to.have.property(
-        "message",
-        'ColorPalette: the two minimum arguments must be numbers higher than 0.'
-      );
-    }
-  });
-
-  it("Test init with 2 valid parameters", () => {
-    // generated with new `ColorPalette(1, 5)`
-    const testSample = ["#330000", "#990000", "#ff0000", "#ff6666", "#ffcccc"];
-    const cpl = new ColorPalette(1, 5);
-
-    expect(cpl).to.be.instanceOf(ColorPalette);
-    expect(cpl.hue).to.equal(0);
-    expect(cpl.hueSteps).to.equal(1);
-    expect(cpl.lightSteps).to.equal(5);
-    expect(cpl.saturation).to.equal(100);
-    expect(cpl.colors.length).to.equal(5);
-
-    cpl.colors.forEach((color, i) => {
-      expect(color).to.be.instanceOf(Color);
-      expect(color.toHexString()).to.equal(testSample[i]);
-    })
-  });
-
-  it("Test init with 14 lightSteps", () => {
-    // generated with `new ColorPalette(1, 14)`
-    const testSample = [
-      "#330000", "#550000", "#770000", "#990000", "#bb0000",
-      "#dd0000", "#ff0000", "#ff2222", "#ff4444", "#ff6666",
-      "#ff8888", "#ffaaaa", "#ffcccc", "#ffeeee",
-    ];
-    const cpl = new ColorPalette(1, 14);
-
-    expect(cpl).to.be.instanceOf(ColorPalette);
-    expect(cpl.hue).to.equal(0);
-    expect(cpl.hueSteps).to.equal(1);
-    expect(cpl.lightSteps).to.equal(14);
-    expect(cpl.colors.length).to.equal(14);
-
-    cpl.colors.forEach((color, i) => {
-      expect(color).to.be.instanceOf(Color);
-      // expect(color.ok).to.be.true;
-      expect(color.toHexString()).to.equal(testSample[i]);
-    })
-  });
-
-  it("Test init with 15 lightSteps", () => {
-    // generated with `new ColorPalette(1, 15)`
-    const testSample = [
-      "#110000", "#330000", "#550000", "#770000",
-      "#990000", "#bb0000", "#dd0000", "#ff0000",
-      "#ff2222", "#ff4444", "#ff6666", "#ff8888",
-      "#ffaaaa", "#ffcccc", "#ffeeee",
-    ];
-    const cpl = new ColorPalette(1, 15);
-
-    expect(cpl).to.be.instanceOf(ColorPalette);
-    expect(cpl.hue).to.equal(0);
-    expect(cpl.hueSteps).to.equal(1);
-    expect(cpl.lightSteps).to.equal(15);
-    expect(cpl.colors.length).to.equal(15);
-
-    cpl.colors.forEach((color, i) => {
-      expect(color).to.be.instanceOf(Color);
-      // expect(color.ok).to.be.true;
-      expect(color.toHexString()).to.equal(testSample[i]);
-    })
-  });
-
-  it("Test init with 3 valid parameters", () => {
-    // generated with `new ColorPalette(270, 1, 10)`
-    const testSample = [
-      "#240047", "#3b0075", "#5200a3", "#6900d1",
-      "#7f00ff", "#962eff", "#ad5cff", "#c48aff",
-      "#dbb8ff", "#f2e5ff",
-    ];
-    const cpl = new ColorPalette(270, 1, 10);
-
-    expect(cpl).to.be.instanceOf(ColorPalette);
-    expect(cpl.hue).to.equal(270);
-    expect(cpl.hueSteps).to.equal(1);
-    expect(cpl.lightSteps).to.equal(10);
-    expect(cpl.saturation).to.equal(100);
-    expect(cpl.colors.length).to.equal(10);
-    expect(cpl.colors.map(c => c.toHexString())).to.deep.equal(testSample);
-  });
-
-  it("Test init with 4 valid parameters", () => {
-    // generated with `new ColorPalette(270, 1, 10)`
-    const testSample = [
-      "#240740", "#3b0c6a", "#521093", "#6915bc",
-      "#7f19e6", "#9643ea", "#ad6cef", "#c495f3",
-      "#dbbff8", "#f2e8fc",
-    ];
-    const cpl = new ColorPalette(270, 1, 10, 80);
-
-    expect(cpl).to.be.instanceOf(ColorPalette);
-    expect(cpl.hue).to.equal(270);
-    expect(cpl.hueSteps).to.equal(1);
-    expect(cpl.lightSteps).to.equal(10);
-    expect(cpl.saturation).to.equal(80);
-    expect(cpl.colors.length).to.equal(10);
-    expect(cpl.colors.map(c => c.toHexString())).to.deep.equal(testSample);
-  });
-});