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

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/tabindex.js

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

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,
@@ -223,16 +221,30 @@ color-picker:focus,
   padding: 0;
   margin: 0;
   list-style: none;
+  --grid-item-size: 2rem; // grid item width / height
+  --grid-fit: 5; // grid columns
+  --grid-gap: .25rem; // grid vertical / horizontal spacing
+  --grid-height: auto; // default height
+  --grid-hover-height: auto; // height on hover
+  grid-template-columns: repeat(var(--grid-fit), var(--grid-item-size));
+  grid-template-rows: repeat(auto-fill, var(--grid-item-size));
+  gap: var(--grid-gap);
 }
 .color-options.scrollable {
+  height: var(--grid-height);
   margin: 0 -.5rem 0 0; // 0.5rem is the scrollbar width
   overflow-y: scroll;
   transition: height .33s ease;
 }
+.color-options.scrollable:hover {
+  height: var(--grid-hover-height);
+}
+.color-options + .color-defaults {
+  margin-top: .25rem;
+}
 .multiline + .color-defaults {
   flex-direction: row;
   flex-wrap: wrap;
-  margin-top: .25rem;
   .color-option {
     padding: .25rem .33rem; font-size: 12px;
   }
@@ -240,20 +252,29 @@ color-picker:focus,
 .color-options .color-option {
   // hide any text
   position: relative;
+  width: var(--grid-item-size);
+  height: var(--grid-item-size);
   overflow: hidden;
   text-indent: 2.1rem;
-  background: #eee;
-  opacity: .8;
-}
-.color-options .color-option:hover,
-.color-options .color-option:active,
-.color-options .color-option:focus {
-  opacity: 1;
 }
 .color-options .color-option:active,
 .color-options .color-option:focus {
   outline: none;
 }
+.color-options .color-option::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.color-options .color-option:hover::before,
+.color-options .color-option:active::before,
+.color-options .color-option:focus::before {
+  content: "";
+  border: 3px solid rgba(255,255,255.3,.75);
+  mix-blend-mode: difference;
+}
 
 .color-options .color-option:active,
 .color-options .color-option:focus {
@@ -261,7 +282,6 @@ color-picker:focus,
 }
 
 .color-options .color-option.active {
-  opacity: 1;
   &:after {
     position: absolute;
     top: 50%;
@@ -269,7 +289,7 @@ color-picker:focus,
     width: 4px;
     height: 4px;
     margin: -2px 0 0 -2px;
-    content: " ";
+    content: "";
     border-radius: 4px;
   }
 }
@@ -286,8 +306,7 @@ color-picker:focus,
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
-  // max-width: fit-content;
-  padding: .5rem 0 0;
+  padding: .25rem 0 0;
   font: 12px sans-serif;
 }
 
@@ -373,6 +392,7 @@ color-picker:focus,
   user-select: none;
   background-color: #000;
   border: 1px solid #fff;
+  border-radius: 5px;
   outline: none;
   will-change: transform;
 }
@@ -390,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
@@ -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
@@ -406,7 +435,7 @@ declare module "color-picker/src/js/color-picker" {
         /** Returns the current colour value */
         get value(): string;
         /** Check if the colour presets include any non-colour. */
-        get includeNonColor(): boolean;
+        get hasNonColor(): boolean;
         /** Check if the parent of the target is a `ColorPickerElement` instance. */
         get isCE(): boolean;
         /** Returns hexadecimal value of the current colour. */
@@ -466,8 +495,6 @@ declare module "color-picker/src/js/color-picker" {
          * @param {boolean=} isPrevented when `true`, the component original event is prevented
          */
         updateInputs(isPrevented?: boolean | undefined): void;
-        /** Shows the `ColorPicker` dropdown or the presets menu. */
-        show(): void;
         /**
          * Hides the currently open `ColorPicker` dropdown.
          * @param {boolean=} focusPrevented
@@ -484,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;