@thednp/color-picker 0.0.1 → 0.0.2-alpha1

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/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
@@ -202,15 +209,16 @@ declare module "color-picker/src/js/color-palette" {
          * 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: Color[];
     }
+    import Color from "color-picker/src/js/color";
 }
 declare module "color-picker/src/js/util/colorPickerLabels" {
     export default colorPickerLabels;
@@ -225,6 +233,22 @@ 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/version" {
+    export default Version;
+    const Version: string;
+}
 declare module "color-picker/src/js/util/vHidden" {
     export default vHidden;
     const vHidden: "v-hidden";
@@ -247,6 +271,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,19 +289,16 @@ 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;
-}
-declare module "color-picker/src/js/version" {
-    export default Version;
-    const Version: string;
+    * 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/color-picker" {
+    /** @type {CP.GetInstance<ColorPicker>} */
+    export const getColorPickerInstance: CP.GetInstance<ColorPicker>;
     /**
      * Color Picker Web Component
      * @see http://thednp.github.io/color-picker
@@ -482,8 +511,9 @@ declare module "color-picker/src/js/color-picker-element" {
     /**
      * `ColorPickerElement` Web Component.
      * @example
-     * <color-picker>
-     *   <input type="text">
+     * <label for="UNIQUE_ID">Label</label>
+     * <color-picker data-format="hex" data-value="#075">
+     *   <input id="UNIQUE_ID" type="text" class="color-preview btn-appearance">
      * </color-picker>
      */
     class ColorPickerElement extends HTMLElement {

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;