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

package/src/js/util/getColorMenu.js

@@ -43,7 +43,8 @@ export default function getColorMenu(self, colorsSource, menuClass) {
   optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
   const menuHeight = `${(rowCount || 1) * optionSize}rem`;
   const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
-
+  /** @type {HTMLUListElement} */
+  // @ts-ignore -- <UL> is an `HTMLElement`
   const menu = createElement({
     tagName: 'ul',
     className: finalClass,
@@ -51,7 +52,7 @@ export default function getColorMenu(self, colorsSource, menuClass) {
   setAttribute(menu, 'role', 'listbox');
   setAttribute(menu, ariaLabel, menuLabel);
 
-  if (isScrollable) { // @ts-ignore
+  if (isScrollable) {
     setCSSProperties(menu, {
       '--grid-item-size': `${optionSize}rem`,
       '--grid-fit': fit,
@@ -62,15 +63,19 @@ export default function getColorMenu(self, colorsSource, menuClass) {
   }
 
   colorsArray.forEach((x) => {
-    const [value, label] = x.trim().split(':');
-    const xRealColor = new Color(value, format).toString();
-    const isActive = xRealColor === getAttribute(input, 'value');
+    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 || x}`,
+      innerText: `${label || value}`,
     });
 
     setAttribute(option, tabIndex, '0');
@@ -79,7 +84,7 @@ export default function getColorMenu(self, colorsSource, menuClass) {
     setAttribute(option, ariaSelected, isActive ? 'true' : 'false');
 
     if (isOptionsMenu) {
-      setElementStyle(option, { backgroundColor: x });
+      setElementStyle(option, { backgroundColor: value });
     }
 
     menu.append(option);

package/src/js/util/setMarkup.js

@@ -0,0 +1,122 @@
+import getAttribute from 'shorter-js/src/attr/getAttribute';
+import setAttribute from 'shorter-js/src/attr/setAttribute';
+import toUpperCase from 'shorter-js/src/misc/toUpperCase';
+// import ariaLabel from 'shorter-js/src/strings/ariaLabel';
+import ariaExpanded from 'shorter-js/src/strings/ariaExpanded';
+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 createElement from 'shorter-js/src/misc/createElement';
+import createElementNS from 'shorter-js/src/misc/createElementNS';
+
+import getColorForm from './getColorForm';
+import getColorControls from './getColorControls';
+import getColorMenu from './getColorMenu';
+import nonColors from './nonColors';
+import vHidden from './vHidden';
+import tabIndex from './tabindex';
+
+import Color from '../color';
+import ColorPalette from '../color-palette';
+
+/**
+* Generate HTML markup and update instance properties.
+* @param {CP.ColorPicker} self
+*/
+export default function setMarkup(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
+  const formatString = format === 'hex' ? hexLabel : toUpperCase(format);
+
+  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',
+  });
+  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',
+    });
+
+    // 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');
+}

package/src/js/util/version.js

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

package/src/scss/color-picker.scss

@@ -180,11 +180,9 @@ color-picker:focus,
   display: none;
   flex-wrap: wrap;
   flex-flow: column;
-  // max-height: 160px;
   margin: 0;
-  // overflow-y: auto;
   list-style: none;
-  padding-inline: 0;
+  padding-inline: 0; // Firefox
 }
 
 .color-dropdown.menu .color-defaults,
@@ -258,7 +256,6 @@ color-picker:focus,
   height: var(--grid-item-size);
   overflow: hidden;
   text-indent: 2.1rem;
-  // background: #eee;
 }
 .color-options .color-option:active,
 .color-options .color-option:focus {
@@ -309,7 +306,6 @@ color-picker:focus,
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
-  // max-width: fit-content;
   padding: .25rem 0 0;
   font: 12px sans-serif;
 }
@@ -396,8 +392,9 @@ color-picker:focus,
   user-select: none;
   background-color: #000;
   border: 1px solid #fff;
+  border-radius: 5px;
   outline: none;
-  // will-change: transform;
+  will-change: transform;
 }
 .knob:hover {
   box-shadow: 0 0 0 6px rgba(255,255,255,.5);
@@ -413,7 +410,6 @@ color-picker:focus,
   width: 7px;
   background-color: transparent;
   border: 0;
-  border-radius: 5px;
 }
 
 .txt-dark .color-pointer {

package/types/cp.d.ts

@@ -5,14 +5,21 @@ declare module "color-picker/src/js/util/nonColors" {
      */
     const nonColors: string[];
 }
+declare module "color-picker/src/js/util/roundPart" {
+    /**
+     * 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: number): number;
+}
 declare module "color-picker/src/js/color" {
-    export default Color;
     /**
      * @class
      * Returns a new `Color` instance.
      * @see https://github.com/bgrins/TinyColor
      */
-    class Color {
+    export default class Color {
         /**
          * @constructor
          * @param {CP.ColorInput} input the given colour value
@@ -195,21 +202,21 @@ declare module "color-picker/src/js/color-palette" {
      * Returns a color palette with a given set of parameters.
      * @example
      * new ColorPalette(0, 12, 10);
-     * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: array }
+     * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: Array<Color> }
      */
     export default class ColorPalette {
         /**
          * The `hue` parameter is optional, which would be set to 0.
          * @param {number[]} args represeinting hue, hueSteps, lightSteps
          * * `args.hue` the starting Hue [0, 360]
-         * * `args.hueSteps` Hue Steps Count [5, 13]
-         * * `args.lightSteps` Lightness Steps Count [8, 10]
+         * * `args.hueSteps` Hue Steps Count [5, 24]
+         * * `args.lightSteps` Lightness Steps Count [5, 12]
          */
         constructor(...args: number[]);
         hue: number;
         hueSteps: number;
         lightSteps: number;
-        colors: string[];
+        colors: any;
     }
 }
 declare module "color-picker/src/js/util/colorPickerLabels" {
@@ -225,6 +232,18 @@ declare module "color-picker/src/js/util/colorNames" {
      */
     const colorNames: string[];
 }
+declare module "color-picker/src/js/util/tabindex" {
+    export default tabIndex;
+    const tabIndex: "tabindex";
+}
+declare module "color-picker/src/js/util/isValidJSON" {
+    /**
+     * Check if a string is valid JSON string.
+     * @param {string} str the string input
+     * @returns {boolean} the query result
+     */
+    export default function isValidJSON(str: string): boolean;
+}
 declare module "color-picker/src/js/util/vHidden" {
     export default vHidden;
     const vHidden: "v-hidden";
@@ -247,6 +266,14 @@ declare module "color-picker/src/js/util/getColorControls" {
      */
     export default function getColorControls(self: CP.ColorPicker): HTMLElement | Element;
 }
+declare module "color-picker/src/js/util/setCSSProperties" {
+    /**
+     * Helps setting CSS variables to the color-menu.
+     * @param {HTMLElement} element
+     * @param {Record<string,any>} props
+     */
+    export default function setCSSProperties(element: HTMLElement, props: Record<string, any>): void;
+}
 declare module "color-picker/src/js/util/getColorMenu" {
     /**
      * Returns a color-defaults with given values and class.
@@ -257,15 +284,14 @@ declare module "color-picker/src/js/util/getColorMenu" {
      */
     export default function getColorMenu(self: CP.ColorPicker, colorsSource: CP.ColorPalette | string[], menuClass: string): HTMLElement | Element;
 }
-declare module "color-picker/src/js/util/isValidJSON" {
+declare module "color-picker/src/js/util/setMarkup" {
     /**
-     * Check if a string is valid JSON string.
-     * @param {string} str the string input
-     * @returns {boolean} the query result
-     */
-    export default function isValidJSON(str: string): boolean;
+    * Generate HTML markup and update instance properties.
+    * @param {CP.ColorPicker} self
+    */
+    export default function setMarkup(self: CP.ColorPicker): void;
 }
-declare module "color-picker/src/js/version" {
+declare module "color-picker/src/js/util/version" {
     export default Version;
     const Version: string;
 }
@@ -308,14 +334,24 @@ declare module "color-picker/src/js/color-picker" {
         format: CP.ColorFormats;
         /** Shows the `ColorPicker` dropdown. */
         showPicker(): void;
+        /**
+         * The `Space` & `Enter` keys specific event listener.
+         * Toggle visibility of the `ColorPicker` / the presets menu, showing one will hide the other.
+         * @param {KeyboardEvent} e
+         * @this {ColorPicker}
+         */
         /**
          * Toggle the `ColorPicker` dropdown visibility.
-         * @param {Event} e
+         * @param {Event=} e
          * @this {ColorPicker}
          */
-        togglePicker(this: ColorPicker, e: Event): void;
-        /** Toggles the visibility of the `ColorPicker` presets menu. */
-        toggleMenu(): void;
+        togglePicker(this: ColorPicker, e?: Event | undefined): void;
+        /**
+         * Toggles the visibility of the `ColorPicker` presets menu.
+         * @param {Event=} e
+         * @this {ColorPicker}
+         */
+        toggleMenu(this: ColorPicker, e?: Event | undefined): void;
         /**
          * The `ColorPicker` click event listener for the colour menu presets / defaults.
          * @param {Partial<Event>} e
@@ -371,13 +407,6 @@ declare module "color-picker/src/js/color-picker" {
          * @this {ColorPicker}
          */
         handleDismiss(this: ColorPicker, { code }: KeyboardEvent): void;
-        /**
-         * The `Space` & `Enter` keys specific event listener.
-         * Toggle visibility of the `ColorPicker` / the presets menu, showing one will hide the other.
-         * @param {KeyboardEvent} e
-         * @this {ColorPicker}
-         */
-        keyToggle(this: ColorPicker, e: KeyboardEvent): void;
         /**
          * The `ColorPicker` *keydown* event listener for control knobs.
          * @param {KeyboardEvent} e
@@ -427,6 +456,8 @@ declare module "color-picker/src/js/color-picker" {
         get isDark(): boolean;
         /** Checks if the current input value is a valid colour. */
         get isValid(): boolean;
+        /** Returns the colour appearance, usually the closest colour name for the current value. */
+        get appearance(): string | undefined;
         /** Updates `ColorPicker` visuals. */
         updateVisuals(): void;
         /**
@@ -482,27 +513,28 @@ declare module "color-picker/src/js/color-picker-element" {
     /**
      * `ColorPickerElement` Web Component.
      * @example
+     * <label for="UNIQUE_ID">Label</label>
      * <color-picker>
-     *   <input type="text">
+     *   <input id="UNIQUE_ID" value="red" format="hex" class="color-preview btn-appearance">
      * </color-picker>
+     * // or
+     * <label for="UNIQUE_ID">Label</label>
+     * <color-picker data-id="UNIQUE_ID" data-value="red" data-format="hex"></color-picker>
      */
     class ColorPickerElement extends HTMLElement {
-        /** @type {boolean} */
-        isDisconnected: boolean;
         /**
          * Returns the current color value.
-         * @returns {string?}
+         * @returns {string | undefined}
          */
-        get value(): string | null;
+        get value(): string | undefined;
         connectedCallback(): void;
         /** @type {HTMLInputElement} */
         input: HTMLInputElement | undefined;
         colorPicker: ColorPicker | undefined;
-        color: Color | undefined;
-        disconnectedCallback(): void;
+        /** @this {ColorPickerElement} */
+        disconnectedCallback(this: ColorPickerElement): void;
     }
     import ColorPicker from "color-picker/src/js/color-picker";
-    import Color from "color-picker/src/js/color";
 }
 declare module "color-picker/types/source/source" {
     export { default as Color } from "color-picker/src/js/color";

package/types/source/types.d.ts

@@ -83,7 +83,7 @@ export interface ColorPickerOptions {
   colorKeywords?: string[];
 }
 
-export type ColorInput = string | number | RGB | RGBA | HSL | HSLA | HSV | HSVA | HWB | ColorObject;
+export type ColorInput = string | RGB | RGBA | HSL | HSLA | HSV | HSVA | HWB | ColorObject;
 export type ColorFormats = string | 'rgb' | 'hex' | 'hex3' | 'hex4' | 'hex6' | 'hex8' | 'hsl' | 'hsv' | 'hwb';
 
 export type GetInstance<T> = (element: string | HTMLInputElement) => T | null;

package/src/js/util/templates.js

@@ -1,10 +0,0 @@
-/** A future project to allow using custom `ColorPicker` templates */
-const templates = {
-  control: {
-    tagName: 'div',
-    className: 'color-control',
-  },
-
-};
-
-export default templates;