10945029288

Committed 19 Sep 2024 04:24PM UTC coverage: 96.234% (-3.0%) from 99.203%

Build # 10945029288

Build Type

push

github

Committed by

thednp

Commit Message

fix ci error

Run Details

469 of 509 branches covered (92.14%)

Branch coverage included in aggregate %.

732 of 739 relevant lines covered (99.05%)

59.96 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

89.9

/src/ts/util/getColorMenu.ts

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;

1	import { setAttribute, getAttribute, createElement, setElementStyle } from '@thednp/shorty';
2
3	import Color from '@thednp/color';
4	import ColorPalette from '../colorPalette';
5	import ColorPicker from '../index';
6
7	/**
8	* Returns a color-defaults with given values and class.
9	*/
10	const getColorMenu = (self: ColorPicker, colorsSource: ColorPalette \| string[], menuClass: string): HTMLElement => {	1✔
11	const { input, format, componentLabels } = self;	56✔
12	const { defaultsLabel, presetsLabel } = componentLabels;	56✔
13	const isOptionsMenu = menuClass === 'color-options';	56✔
14	const isPalette = colorsSource instanceof ColorPalette;	56✔
15	const menuLabel = isOptionsMenu ? presetsLabel : defaultsLabel;	56✔
16	const colorsArray = isPalette ? colorsSource.colors : colorsSource;	56!
17	const colorsCount = colorsArray.length;	56✔
18	const { lightSteps } = isPalette ? colorsSource : { lightSteps: null };	56!
19	const fit = lightSteps \|\| [9, 10].find(x => colorsCount >= x * 2 && !(colorsCount % x)) \|\| 5;	112✔
20	const isMultiLine = isOptionsMenu && colorsCount > fit;	56✔
21	let rowCountHover = 2;	56✔
22	rowCountHover = isMultiLine && colorsCount > fit * 2 ? 3 : rowCountHover;	56✔
23	rowCountHover = isMultiLine && colorsCount > fit * 3 ? 4 : rowCountHover;	56!
24	rowCountHover = isMultiLine && colorsCount > fit * 4 ? 5 : rowCountHover;	56!
25	const rowCount = rowCountHover - (colorsCount <= fit * 3 ? 1 : 2);	56!
26	const isScrollable = isMultiLine && colorsCount > rowCount * fit;	56✔
27	let finalClass = menuClass;	56✔
28	finalClass += isScrollable ? ' scrollable' : '';	56✔
29	finalClass += isMultiLine ? ' multiline' : '';	56✔
30	const gap = isMultiLine ? '1px' : '0.25rem';	56✔
31	let optionSize = isMultiLine ? 1.75 : 2;	56✔
32	optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;	56✔
33	const menuHeight = `${rowCount * optionSize}rem`;	56✔
34	const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;	56✔
35
36	// <UL> is an `HTMLElement`
37	const menu = createElement({	56✔
38	tagName: 'ul',
39	className: finalClass,
40	role: 'listbox',
41	ariaLabel: menuLabel,
42	}) as HTMLElement;
43
44	if (isScrollable) {	56✔
45	setElementStyle(menu, {	26✔
46	'--grid-item-size': `${optionSize}rem`,
47	'--grid-fit': `${fit}`,
48	'--grid-gap': gap,
49	'--grid-height': menuHeight,
50	'--grid-hover-height': menuHeightHover,
51	});
52	}
53
54	colorsArray.forEach(x => {	56✔
55	let [value, label] = typeof x === 'string' ? x.trim().split(':') : [];	907!
56	if (x instanceof Color) {	907!
57	value = x.toHexString();	×
58	label = value;	×
59	}
60	const color = new Color(x instanceof Color ? x : value, format);	907!
61	const isActive = color.toString() === getAttribute(input, 'value');	907✔
62	const active = isActive ? ' active' : '';	907✔
63
64	const option = createElement({	907✔
65	tagName: 'li',
66	className: `color-option${active}`,
67	innerText: `${label \|\| value}`,	1,811✔
68	tabIndex: 0,
69	role: 'option',
70	ariaSelected: isActive ? 'true' : 'false',	907✔
71	}) as HTMLElement;
72	setAttribute(option, 'data-value', `${value}`);	907✔
73
74	if (isOptionsMenu) {	907✔
75	setElementStyle(option, { backgroundColor: value });	790✔
76	}
77
78	menu.append(option);	907✔
79	});
80	return menu;	56✔
81	};
82
83	export default getColorMenu;

thednp / color-picker / 10945029288

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous