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

package/src/js/color.js

@@ -4,6 +4,7 @@ import setElementStyle from 'shorter-js/src/misc/setElementStyle';
 import ObjectAssign from 'shorter-js/src/misc/ObjectAssign';
 
 import nonColors from './util/nonColors';
+import roundPart from './util/roundPart';
 
 // Color supported formats
 const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsb', 'hwb'];
@@ -172,7 +173,7 @@ function getRGBFromName(name) {
  * @returns {string} - the hexadecimal value
  */
 function convertDecimalToHex(d) {
-  return Math.round(d * 255).toString(16);
+  return roundPart(d * 255).toString(16);
 }
 
 /**
@@ -426,9 +427,9 @@ function hsvToRgb(H, S, V) {
  */
 function rgbToHex(r, g, b, allow3Char) {
   const hex = [
-    pad2(Math.round(r).toString(16)),
-    pad2(Math.round(g).toString(16)),
-    pad2(Math.round(b).toString(16)),
+    pad2(roundPart(r).toString(16)),
+    pad2(roundPart(g).toString(16)),
+    pad2(roundPart(b).toString(16)),
   ];
 
   // Return a 3 character hex if possible
@@ -453,9 +454,9 @@ function rgbToHex(r, g, b, allow3Char) {
  */
 function rgbaToHex(r, g, b, a, allow4Char) {
   const hex = [
-    pad2(Math.round(r).toString(16)),
-    pad2(Math.round(g).toString(16)),
-    pad2(Math.round(b).toString(16)),
+    pad2(roundPart(r).toString(16)),
+    pad2(roundPart(g).toString(16)),
+    pad2(roundPart(b).toString(16)),
     pad2(convertDecimalToHex(a)),
   ];
 
@@ -617,6 +618,8 @@ function inputToRGB(input) {
   let w = null;
   let b = null;
   let h = null;
+  let r = null;
+  let g = null;
   let ok = false;
   let format = 'hex';
 
@@ -627,7 +630,10 @@ function inputToRGB(input) {
   }
   if (typeof color === 'object') {
     if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
-      rgb = { r: color.r, g: color.g, b: color.b }; // RGB values in [0, 255] range
+      ({ r, g, b } = color);
+      [r, g, b] = [...[r, g, b]]
+        .map((n) => bound01(n, isPercentage(n) ? 100 : 255) * 255).map(roundPart);
+      rgb = { r, g, b }; // RGB values now are all in [0, 255] range
       ok = true;
       format = 'rgb';
     } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
@@ -715,14 +721,6 @@ export default class Color {
     self.ok = ok;
     /** @type {CP.ColorFormats} */
     self.format = configFormat || format;
-
-    // Don't let the range of [0,255] come back in [0,1].
-    // Potentially lose a little bit of precision here, but will fix issues where
-    // .5 gets interpreted as half of the total, instead of half of 1
-    // If it was supposed to be 128, this was already taken care of by `inputToRgb`
-    if (r < 1) self.r = Math.round(r);
-    if (g < 1) self.g = Math.round(g);
-    if (b < 1) self.b = Math.round(b);
   }
 
   /**
@@ -738,7 +736,7 @@ export default class Color {
    * @returns {boolean} the query result
    */
   get isDark() {
-    return this.brightness < 128;
+    return this.brightness < 120;
   }
 
   /**
@@ -790,13 +788,13 @@ export default class Color {
     const {
       r, g, b, a,
     } = this;
-    const [R, G, B] = [r, g, b].map((x) => Math.round(x));
+    const [R, G, B] = [r, g, b].map((x) => roundPart(x));
 
     return {
       r: R,
       g: G,
       b: B,
-      a: Math.round(a * 100) / 100,
+      a: roundPart(a * 100) / 100,
     };
   }
 
@@ -826,7 +824,7 @@ export default class Color {
     const {
       r, g, b, a,
     } = this.toRgb();
-    const A = a === 1 ? '' : ` / ${Math.round(a * 100)}%`;
+    const A = a === 1 ? '' : ` / ${roundPart(a * 100)}%`;
 
     return `rgb(${r} ${g} ${b}${A})`;
   }
@@ -921,10 +919,10 @@ export default class Color {
     let {
       h, s, l, a,
     } = this.toHsl();
-    h = Math.round(h * 360);
-    s = Math.round(s * 100);
-    l = Math.round(l * 100);
-    a = Math.round(a * 100) / 100;
+    h = roundPart(h * 360);
+    s = roundPart(s * 100);
+    l = roundPart(l * 100);
+    a = roundPart(a * 100) / 100;
 
     return a === 1
       ? `hsl(${h}, ${s}%, ${l}%)`
@@ -941,11 +939,11 @@ export default class Color {
     let {
       h, s, l, a,
     } = this.toHsl();
-    h = Math.round(h * 360);
-    s = Math.round(s * 100);
-    l = Math.round(l * 100);
-    a = Math.round(a * 100);
-    const A = a < 100 ? ` / ${Math.round(a)}%` : '';
+    h = roundPart(h * 360);
+    s = roundPart(s * 100);
+    l = roundPart(l * 100);
+    a = roundPart(a * 100);
+    const A = a < 100 ? ` / ${roundPart(a)}%` : '';
 
     return `hsl(${h}deg ${s}% ${l}%${A})`;
   }
@@ -972,11 +970,11 @@ export default class Color {
     let {
       h, w, b, a,
     } = this.toHwb();
-    h = Math.round(h * 360);
-    w = Math.round(w * 100);
-    b = Math.round(b * 100);
-    a = Math.round(a * 100);
-    const A = a < 100 ? ` / ${Math.round(a)}%` : '';
+    h = roundPart(h * 360);
+    w = roundPart(w * 100);
+    b = roundPart(b * 100);
+    a = roundPart(a * 100);
+    const A = a < 100 ? ` / ${roundPart(a)}%` : '';
 
     return `hwb(${h}deg ${w}% ${b}%${A})`;
   }
@@ -1122,5 +1120,6 @@ ObjectAssign(Color, {
   numberInputToObject,
   stringInputToObject,
   inputToRGB,
+  roundPart,
   ObjectAssign,
 });

package/src/js/util/getColorControls.js

@@ -4,6 +4,8 @@ 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`.
  *
@@ -69,10 +71,8 @@ export default function getColorControls(self) {
     const {
       i, c, l, min, max,
     } = template;
-    // const hidden = i === 2 && format === 'hwb' ? ' v-hidden' : '';
     const control = createElement({
       tagName: 'div',
-      // className: `color-control${hidden}`,
       className: 'color-control',
     });
     setAttribute(control, 'role', 'presentation');
@@ -92,7 +92,7 @@ export default function getColorControls(self) {
 
     setAttribute(knob, ariaLabel, l);
     setAttribute(knob, 'role', 'slider');
-    setAttribute(knob, 'tabindex', '0');
+    setAttribute(knob, tabIndex, '0');
     setAttribute(knob, ariaValueMin, `${min}`);
     setAttribute(knob, ariaValueMax, `${max}`);
     control.append(knob);

package/src/js/util/getColorForm.js

@@ -59,7 +59,6 @@ export default function getColorForm(self) {
       max,
       step,
     });
-    // }
     colorForm.append(cInputLabel, cInput);
   });
   return colorForm;

package/src/js/util/getColorMenu.js

@@ -5,6 +5,8 @@ import getAttribute from 'shorter-js/src/attr/getAttribute';
 import createElement from 'shorter-js/src/misc/createElement';
 import setElementStyle from 'shorter-js/src/misc/setElementStyle';
 
+import setCSSProperties from './setCSSProperties';
+import tabIndex from './tabindex';
 import Color from '../color';
 import ColorPalette from '../color-palette';
 
@@ -25,45 +27,38 @@ export default function getColorMenu(self, colorsSource, menuClass) {
   colorsArray = colorsArray instanceof Array ? colorsArray : [];
   const colorsCount = colorsArray.length;
   const { lightSteps } = isPalette ? colorsSource : { lightSteps: null };
-  let fit = lightSteps
-    || Math.max(...[5, 6, 7, 8, 9, 10].filter((x) => colorsCount > (x * 2) && !(colorsCount % x)));
-  fit = Number.isFinite(fit) ? fit : 5;
+  const fit = lightSteps || [9, 10].find((x) => colorsCount > x * 2 && !(colorsCount % x)) || 5;
   const isMultiLine = isOptionsMenu && colorsCount > fit;
-  let rowCountHover = 1;
-  rowCountHover = isMultiLine && colorsCount < 27 ? 2 : rowCountHover;
-  rowCountHover = colorsCount >= 27 ? 3 : rowCountHover;
-  rowCountHover = colorsCount >= 36 ? 4 : rowCountHover;
-  rowCountHover = colorsCount >= 45 ? 5 : rowCountHover;
-  const rowCount = rowCountHover - (colorsCount < 27 ? 1 : 2);
-  const isScrollable = isMultiLine && colorsCount > rowCountHover * fit;
+  let rowCountHover = 2;
+  rowCountHover = isMultiLine && colorsCount >= fit * 2 ? 3 : rowCountHover;
+  rowCountHover = colorsCount >= fit * 3 ? 4 : rowCountHover;
+  rowCountHover = 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 = !(colorsCount % 10) && isMultiLine ? 1.5 : optionSize;
+  optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
   const menuHeight = `${(rowCount || 1) * optionSize}rem`;
   const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
-  const gridTemplateColumns = `repeat(${fit}, ${optionSize}rem)`;
-  const gridTemplateRows = `repeat(auto-fill, ${optionSize}rem)`;
 
   const menu = createElement({
     tagName: 'ul',
     className: finalClass,
   });
   setAttribute(menu, 'role', 'listbox');
-  setAttribute(menu, ariaLabel, `${menuLabel}`);
+  setAttribute(menu, ariaLabel, menuLabel);
 
-  if (isOptionsMenu) {
-    if (isScrollable) {
-      const styleText = 'this.style.height=';
-      setAttribute(menu, 'onmouseout', `${styleText}'${menuHeight}'`);
-      setAttribute(menu, 'onmouseover', `${styleText}'${menuHeightHover}'`);
-    }
-    const menuStyle = {
-      height: isScrollable ? menuHeight : '', gridTemplateColumns, gridTemplateRows, gap,
-    };
-    setElementStyle(menu, menuStyle);
+  if (isScrollable) { // @ts-ignore
+    setCSSProperties(menu, {
+      '--grid-item-size': `${optionSize}rem`,
+      '--grid-fit': fit,
+      '--grid-gap': gap,
+      '--grid-height': menuHeight,
+      '--grid-hover-height': menuHeightHover,
+    });
   }
 
   colorsArray.forEach((x) => {
@@ -78,15 +73,13 @@ export default function getColorMenu(self, colorsSource, menuClass) {
       innerText: `${label || x}`,
     });
 
-    setAttribute(option, 'tabindex', '0');
+    setAttribute(option, tabIndex, '0');
     setAttribute(option, 'data-value', `${value}`);
     setAttribute(option, 'role', 'option');
     setAttribute(option, ariaSelected, isActive ? 'true' : 'false');
 
     if (isOptionsMenu) {
-      setElementStyle(option, {
-        width: `${optionSize}rem`, height: `${optionSize}rem`, backgroundColor: x,
-      });
+      setElementStyle(option, { backgroundColor: x });
     }
 
     menu.append(option);

package/src/js/util/roundPart.js

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

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

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

package/src/scss/color-picker.scss

@@ -223,16 +223,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 +254,30 @@ 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;
+  // background: #eee;
 }
 .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 +285,6 @@ color-picker:focus,
 }
 
 .color-options .color-option.active {
-  opacity: 1;
   &:after {
     position: absolute;
     top: 50%;
@@ -269,7 +292,7 @@ color-picker:focus,
     width: 4px;
     height: 4px;
     margin: -2px 0 0 -2px;
-    content: " ";
+    content: "";
     border-radius: 4px;
   }
 }
@@ -287,7 +310,7 @@ color-picker:focus,
   flex-wrap: wrap;
   align-items: center;
   // max-width: fit-content;
-  padding: .5rem 0 0;
+  padding: .25rem 0 0;
   font: 12px sans-serif;
 }
 
@@ -374,7 +397,7 @@ color-picker:focus,
   background-color: #000;
   border: 1px solid #fff;
   outline: none;
-  will-change: transform;
+  // will-change: transform;
 }
 .knob:hover {
   box-shadow: 0 0 0 6px rgba(255,255,255,.5);

package/types/cp.d.ts

@@ -406,7 +406,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 +466,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