6824997836

Committed 10 Nov 2023 12:46PM UTC coverage: 96.636% (-0.03%) from 96.665%

Build # 6824997836

Build Type

Pull #983

github

Committed by

web-flow

Commit Message

Merge 787ca060f into 24c60a55c

Pull Request Pull Request #983: feat: Refactor toggle directive into popover component

Run Details

3257 of 3574 branches covered (0.0%)

Branch coverage included in aggregate %.

252 of 260 new or added lines in 1 file covered. (96.92%)

14 existing lines in 3 files now uncovered.

19957 of 20448 relevant lines covered (97.6%)

435.98 hits per line

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

95.23

/src/components/common/controllers/key-bindings.ts

import type { ReactiveController, ReactiveControllerHost } from 'lit';
import type { Ref } from 'lit/directives/ref.js';

/* Common keys */
export const arrowLeft = 'ArrowLeft' as const;
export const arrowRight = 'ArrowRight' as const;
export const arrowUp = 'ArrowUp' as const;
export const arrowDown = 'ArrowDown' as const;
export const enterKey = 'Enter' as const;
export const spaceBar = ' ' as const;
export const homeKey = 'Home' as const;
export const endKey = 'End' as const;
export const pageUpKey = 'PageUp' as const;
export const pageDownKey = 'PageDown' as const;
export const tabKey = 'Tab' as const;

/* Modifiers */
export const altKey = 'Alt' as const;
export const ctrlKey = 'Ctrl' as const;
export const metaKey = 'Meta' as const;
export const shiftKey = 'Shift' as const;

/* Types */
export type KeyBindingHandler = (event: KeyboardEvent) => void;

/**
 * Whether the current event should be ignored by the controller.
 *
 * @param node - The event target
 * @param event - The event object
 *
 * When `true` is returned, the current event is ignored.
 */
export type KeyBindingSkipCallback = (
  node: Element,
  event: KeyboardEvent
) => boolean;

/**
 * The event type which will trigger the bound handler.
 *
 * @remarks
 * `keydownRepeat` is similar to `keydown` with the exception
 * that after the handler is invoked the pressed state of the key is reset
 * in the controller.
 */
export type KeyBindingTrigger = 'keydown' | 'keyup' | 'keydownRepeat';

/**
 * Configuration object for the controller.
 */
export interface KeyBindingControllerOptions {
  /**
   * By default, the controller listens for keypress events in the context of the host element.
   * If you pass a `ref`, you can limit the observation to a certain DOM part of the host scope.
   */
  ref?: Ref;
  /**
   * Option to ignore key press events.
   *
   * If passed an array of CSS selectors, it will ignore key presses originating from elements in the event composed path
   * that match one of the selectors.
   * Otherwise you can pass a {@link KeyBindingSkipCallback} function.
   *
   * Defaults to `['input', 'textarea', 'select']`.
   *
   * @example
   * ```ts
   * {
   *  // Skip events originating from elements with `readonly` attribute
   *  skip: ['[readonly]']
   * }
   * ...
   * {
   * // Same as above but with a callback
   *  skip: (node: Element) => node.hasAttribute('readonly')
   * }
   * ```
   */
  skip?: string[] | KeyBindingSkipCallback;
  /**
   * A set of KeyBindingOptions configuration which is applied to every handler
   * that is added to the controller.
   *
   * Any additional KeyBindingOptions values passed when `set` is called
   * will be merged with `bindingDefaults`.
   */
  bindingDefaults?: KeyBindingOptions;
}

/**
 * Configuration object for customizing the behavior of
 * the registered handler.
 */
export interface KeyBindingOptions {
  /**
   * The event type(s) on which the handler will be invoked.
   *
   * Defaults to `keydown` if not set.
   */
  triggers?: KeyBindingTrigger[];
  /**
   * Whether to call `preventDefault` on the target event before the handler is invoked.
   */
  preventDefault?: boolean;
  /**
   * Whether to call `stopPropagation` on the target event before the handler is invoked.
   */
  stopPropagation?: boolean;
}

interface KeyBinding {
  keys: string[];
  handler: KeyBindingHandler;
  options?: KeyBindingOptions;
  modifiers?: string[];
}

const __modifiers = new Set<string>(
  [altKey, ctrlKey, metaKey, shiftKey].map((key) => key.toLowerCase())
);

const defaultOptions: KeyBindingControllerOptions = {
  skip: ['input', 'textarea', 'select'],
};

function normalizeKeys(keys: string | string[]) {
  return (Array.isArray(keys) ? keys : [keys]).map((key) => key.toLowerCase());
}

function isModifier(key: string) {
  return __modifiers.has(key);
}

function isKeydown(event: Event) {
  return event.type === 'keydown';
}

function isKeyup(event: Event) {
  return event.type === 'keyup';
}

function isKeydownTrigger(triggers?: KeyBindingTrigger[]) {
  return triggers
    ? triggers.includes('keydown') || isKeydownRepeatTrigger(triggers)
    : false;
}

function isKeyupTrigger(triggers?: KeyBindingTrigger[]) {
  return triggers ? triggers.includes('keyup') : false;
}

function isKeydownRepeatTrigger(triggers?: KeyBindingTrigger[]) {
  return triggers ? triggers.includes('keydownRepeat') : false;
}

function isElement(node: EventTarget): node is Element {
  return (node as Element).nodeType === Node.ELEMENT_NODE;
}

export function parseKeys(keys: string | string[]) {
  const parsed = normalizeKeys(keys);
  return {
    keys: parsed.filter((key) => !isModifier(key)),
    modifiers: parsed.filter((key) => isModifier(key)),
  };
}

class KeyBindingController implements ReactiveController {
  protected _host: ReactiveControllerHost & Element;
  protected _ref?: Ref;
  protected _options?: KeyBindingControllerOptions;
  private bindings = new Set<KeyBinding>();
  private pressedKeys = new Set<string>();

  protected get _element() {
    return this._ref ? this._ref.value : this._host;
  }

  constructor(
    host: ReactiveControllerHost & Element,
    options?: KeyBindingControllerOptions
  ) {
    this._host = host;
    this._ref = options?.ref;
    this._options = { ...defaultOptions, ...options };
    host.addController(this);
  }

  /**
   * Checks and executes any event modifiers that are present in the matched binding.
   */
  private eventModifiersMatch(binding: KeyBinding, event: KeyboardEvent) {
    if (binding.options?.preventDefault) {
      event.preventDefault();
    }

    if (binding.options?.stopPropagation) {
      event.stopPropagation();
    }
  }

  private keysMatch(binding: KeyBinding, event: KeyboardEvent) {
    const modifiers = binding.modifiers ?? [];
    return (
      binding.keys.every((key) => this.pressedKeys.has(key)) &&
      modifiers.every((mod) => !!event[`${mod}Key` as keyof KeyboardEvent])
    );
  }

  private bindingMatches(binding: KeyBinding, event: KeyboardEvent) {
    const triggers = binding.options?.triggers ?? ['keydown'];

    if (!this.keysMatch(binding, event)) {
      return false;
    }

    if (isKeydown(event) && isKeydownTrigger(triggers)) {
      return true;
    }

    if (isKeyup(event) && isKeyupTrigger(triggers)) {
      return true;
    }

    return false;
  }

  private _handleEvent(event: KeyboardEvent) {
    const key = event.key.toLowerCase();
    const path = event.composedPath();
    const skip = this._options?.skip;

    if (!this._element || !path.includes(this._element)) {
      return;
    }

    if (skip) {
      const shouldSkip = Array.isArray(skip)
        ? path.some(
            (target) =>
              isElement(target) &&
              skip.some((selector) => target.matches(selector))
          )
        : skip.call(this._host, event.target as Element, event);

      if (shouldSkip) {
        return;
      }
    }

    if (isModifier(key)) {
      this.pressedKeys.clear();
    }

    if (isKeydown(event) && !isModifier(key)) {
      this.pressedKeys.add(key);
    }

    for (const binding of this.bindings) {
      if (this.bindingMatches(binding, event)) {
        this.eventModifiersMatch(binding, event);

        binding.handler.call(this._host, event);

        if (isKeydownRepeatTrigger(binding.options?.triggers)) {
          this.pressedKeys.delete(key);
        }
      }
    }

    if (isKeyup(event) && !isModifier(key)) {
      this.pressedKeys.delete(key);
    }
  }

  private onKeyUp = (event: Event) => {
    this._handleEvent(event as KeyboardEvent);
  };

  private onKeyDown = (event: Event) => {
    this._handleEvent(event as KeyboardEvent);
  };

  /**
   * Registers a keybinding handler.
   */
  public set(
    key: string | string[],
    fn: KeyBindingHandler,
    options?: KeyBindingOptions
  ) {
    this.bindings.add({
      ...parseKeys(key),
      handler: fn,
      options: { ...this._options?.bindingDefaults, ...options },
    });

    return this;
  }

  /**
   * Register a handler function which is called when the target receives a key
   * which "activates" it.
   *
   * In the browser context this is usually either an Enter and/or Space keypress.
   */
  public setActivateHandler(
    fn: KeyBindingHandler,
    options?: KeyBindingOptions
  ) {
    for (const key of [enterKey, spaceBar]) {
      this.set(key, fn, options);
    }

    return this;
  }

  public hostConnected(): void {
    this._host.addEventListener('keyup', this.onKeyUp);
    this._host.addEventListener('keydown', this.onKeyDown);
  }

  public hostDisconnected(): void {
    this._host.removeEventListener('keyup', this.onKeyUp);
    this._host.removeEventListener('keydown', this.onKeyDown);
  }
}

/**
 * Creates a keybinding controller and adds to it to the passed `element`
 * with the provided `options`.
 */
export function addKeybindings(
  element: ReactiveControllerHost & Element,
  options?: KeyBindingControllerOptions
) {
  return new KeyBindingController(element, options);
}

1	import type { ReactiveController, ReactiveControllerHost } from 'lit';	40✔
2	import type { Ref } from 'lit/directives/ref.js';	40✔
3		40✔
4	/* Common keys */	40✔
5	export const arrowLeft = 'ArrowLeft' as const;	40✔
6	export const arrowRight = 'ArrowRight' as const;	40✔
7	export const arrowUp = 'ArrowUp' as const;	40✔
8	export const arrowDown = 'ArrowDown' as const;	40✔
9	export const enterKey = 'Enter' as const;	40✔
10	export const spaceBar = ' ' as const;	40✔
11	export const homeKey = 'Home' as const;	40✔
12	export const endKey = 'End' as const;	40✔
13	export const pageUpKey = 'PageUp' as const;	40✔
14	export const pageDownKey = 'PageDown' as const;	40✔
15	export const tabKey = 'Tab' as const;	40✔
16		40✔
17	/* Modifiers */	40✔
18	export const altKey = 'Alt' as const;	40✔
19	export const ctrlKey = 'Ctrl' as const;	40✔
20	export const metaKey = 'Meta' as const;	40✔
21	export const shiftKey = 'Shift' as const;	40✔
22		40✔
23	/* Types */	40✔
24	export type KeyBindingHandler = (event: KeyboardEvent) => void;	40✔
25		40✔
26	/**	40✔
27	* Whether the current event should be ignored by the controller.	40✔
28	*	40✔
29	* @param node - The event target	40✔
30	* @param event - The event object	40✔
31	*	40✔
32	* When `true` is returned, the current event is ignored.	40✔
33	*/	40✔
34	export type KeyBindingSkipCallback = (	40✔
35	node: Element,	40✔
36	event: KeyboardEvent	40✔
37	) => boolean;	40✔
38		40✔
39	/**	40✔
40	* The event type which will trigger the bound handler.	40✔
41	*	40✔
42	* @remarks	40✔
43	* `keydownRepeat` is similar to `keydown` with the exception	40✔
44	* that after the handler is invoked the pressed state of the key is reset	40✔
45	* in the controller.	40✔
46	*/	40✔
47	export type KeyBindingTrigger = 'keydown' \| 'keyup' \| 'keydownRepeat';	40✔
48		40✔
49	/**	40✔
50	* Configuration object for the controller.	40✔
51	*/	40✔
52	export interface KeyBindingControllerOptions {	40✔
53	/**	40✔
54	* By default, the controller listens for keypress events in the context of the host element.	40✔
55	* If you pass a `ref`, you can limit the observation to a certain DOM part of the host scope.	40✔
56	*/	40✔
57	ref?: Ref;	40✔
58	/**	40✔
59	* Option to ignore key press events.	40✔
60	*	40✔
61	* If passed an array of CSS selectors, it will ignore key presses originating from elements in the event composed path	40✔
62	* that match one of the selectors.	40✔
63	* Otherwise you can pass a {@link KeyBindingSkipCallback} function.	40✔
64	*	40✔
65	* Defaults to `['input', 'textarea', 'select']`.	40✔
66	*	40✔
67	* @example	40✔
68	* ```ts	40✔
69	* {	40✔
70	* // Skip events originating from elements with `readonly` attribute	40✔
71	* skip: ['[readonly]']	40✔
72	* }	40✔
73	* ...	40✔
74	* {	40✔
75	* // Same as above but with a callback	40✔
76	* skip: (node: Element) => node.hasAttribute('readonly')	40✔
77	* }	40✔
78	* ```	40✔
79	*/	40✔
80	skip?: string[] \| KeyBindingSkipCallback;	40✔
81	/**	40✔
82	* A set of KeyBindingOptions configuration which is applied to every handler	40✔
83	* that is added to the controller.	40✔
84	*	40✔
85	* Any additional KeyBindingOptions values passed when `set` is called	40✔
86	* will be merged with `bindingDefaults`.	40✔
87	*/	40✔
88	bindingDefaults?: KeyBindingOptions;	40✔
89	}	40✔
90		40✔
91	/**	40✔
92	* Configuration object for customizing the behavior of	40✔
93	* the registered handler.	40✔
94	*/	40✔
95	export interface KeyBindingOptions {	40✔
96	/**	40✔
97	* The event type(s) on which the handler will be invoked.	40✔
98	*	40✔
99	* Defaults to `keydown` if not set.	40✔
100	*/	40✔
101	triggers?: KeyBindingTrigger[];	40✔
102	/**	40✔
103	* Whether to call `preventDefault` on the target event before the handler is invoked.	40✔
104	*/	40✔
105	preventDefault?: boolean;	40✔
106	/**	40✔
107	* Whether to call `stopPropagation` on the target event before the handler is invoked.	40✔
108	*/	40✔
109	stopPropagation?: boolean;	40✔
110	}	40✔
111		40✔
112	interface KeyBinding {	40✔
113	keys: string[];	40✔
114	handler: KeyBindingHandler;	40✔
115	options?: KeyBindingOptions;	40✔
116	modifiers?: string[];	40✔
117	}	40✔
118		40✔
119	const __modifiers = new Set<string>(	40✔
120	[altKey, ctrlKey, metaKey, shiftKey].map((key) => key.toLowerCase())	40✔
121	);	40✔
122		40✔
123	const defaultOptions: KeyBindingControllerOptions = {	40✔
124	skip: ['input', 'textarea', 'select'],	40✔
125	};	40✔
126		40✔
127	function normalizeKeys(keys: string \| string[]) {	1,773✔
128	return (Array.isArray(keys) ? keys : [keys]).map((key) => key.toLowerCase());	1,773✔
129	}	1,773✔
130		40✔
131	function isModifier(key: string) {	4,640✔
132	return __modifiers.has(key);	4,640✔
133	}	4,640✔
134		40✔
135	function isKeydown(event: Event) {	233✔
136	return event.type === 'keydown';	233✔
137	}	233✔
138		40✔
139	function isKeyup(event: Event) {	171✔
140	return event.type === 'keyup';	171✔
141	}	171✔
142		40✔
143	function isKeydownTrigger(triggers?: KeyBindingTrigger[]) {	62✔
144	return triggers	62✔
145	? triggers.includes('keydown') \|\| isKeydownRepeatTrigger(triggers)	62✔
146	: false;	62!
147	}	62✔
148		40✔
149	function isKeyupTrigger(triggers?: KeyBindingTrigger[]) {	57✔
150	return triggers ? triggers.includes('keyup') : false;	57!
151	}	57✔
152		40✔
153	function isKeydownRepeatTrigger(triggers?: KeyBindingTrigger[]) {	67✔
154	return triggers ? triggers.includes('keydownRepeat') : false;	67✔
155	}	67✔
156		40✔
157	function isElement(node: EventTarget): node is Element {	140✔
158	return (node as Element).nodeType === Node.ELEMENT_NODE;	140✔
159	}	140✔
160		40✔
161	export function parseKeys(keys: string \| string[]) {	40✔
162	const parsed = normalizeKeys(keys);	1,773✔
163	return {	1,773✔
164	keys: parsed.filter((key) => !isModifier(key)),	1,773✔
165	modifiers: parsed.filter((key) => isModifier(key)),	1,773✔
166	};	1,773✔
167	}	1,773✔
168		40✔
169	class KeyBindingController implements ReactiveController {	40✔
170	protected _host: ReactiveControllerHost & Element;	40✔
171	protected _ref?: Ref;	40✔
172	protected _options?: KeyBindingControllerOptions;	40✔
173	private bindings = new Set<KeyBinding>();	40✔
174	private pressedKeys = new Set<string>();	40✔
175		40✔
176	protected get _element() {	40✔
177	return this._ref ? this._ref.value : this._host;	300✔
178	}	300✔
179		40✔
180	constructor(	40✔
181	host: ReactiveControllerHost & Element,	352✔
182	options?: KeyBindingControllerOptions	352✔
183	) {	352✔
184	this._host = host;	352✔
185	this._ref = options?.ref;	352!
186	this._options = { ...defaultOptions, ...options };	352✔
187	host.addController(this);	352✔
188	}	352✔
189		40✔
190	/**	40✔
191	* Checks and executes any event modifiers that are present in the matched binding.	40✔
192	*/	40✔
193	private eventModifiersMatch(binding: KeyBinding, event: KeyboardEvent) {	40✔
194	if (binding.options?.preventDefault) {	62!
195	event.preventDefault();	62✔
196	}	62✔
197		62✔
198	if (binding.options?.stopPropagation) {	62!
199	event.stopPropagation();	×
200	}	×
201	}	62✔
202		40✔
203	private keysMatch(binding: KeyBinding, event: KeyboardEvent) {	40✔
204	const modifiers = binding.modifiers ?? [];	646!
205	return (	646✔
206	binding.keys.every((key) => this.pressedKeys.has(key)) &&	646✔
207	modifiers.every((mod) => !!event[`${mod}Key` as keyof KeyboardEvent])	137✔
208	);	646✔
209	}	646✔
210		40✔
211	private bindingMatches(binding: KeyBinding, event: KeyboardEvent) {	40✔
212	const triggers = binding.options?.triggers ?? ['keydown'];	646!
213		646✔
214	if (!this.keysMatch(binding, event)) {	646✔
215	return false;	527✔
216	}	527✔
217		119✔
218	if (isKeydown(event) && isKeydownTrigger(triggers)) {	646✔
219	return true;	62✔
220	}	62✔
221		57✔
222	if (isKeyup(event) && isKeyupTrigger(triggers)) {	646!
UNCOV 223	return true;	×
UNCOV 224	}	×
225		57✔
226	return false;	57✔
227	}	57✔
228		40✔
229	private _handleEvent(event: KeyboardEvent) {	40✔
230	const key = event.key.toLowerCase();	150✔
231	const path = event.composedPath();	150✔
232	const skip = this._options?.skip;	150!
233		150✔
234	if (!this._element \|\| !path.includes(this._element)) {	150✔
235	return;	32✔
236	}	32✔
237		118✔
238	if (skip) {	118✔
239	const shouldSkip = Array.isArray(skip)	118✔
240	? path.some(	118✔
241	(target) =>	16✔
242	isElement(target) &&	140✔
243	skip.some((selector) => target.matches(selector))	88✔
244	)	118✔
245	: skip.call(this._host, event.target as Element, event);	118✔
246		118✔
247	if (shouldSkip) {	118✔
248	return;	4✔
249	}	4✔
250	}	118✔
251		114✔
252	if (isModifier(key)) {	150!
UNCOV 253	this.pressedKeys.clear();	×
UNCOV 254	}	×
255		114✔
256	if (isKeydown(event) && !isModifier(key)) {	150✔
257	this.pressedKeys.add(key);	57✔
258	}	57✔
259		114✔
260	for (const binding of this.bindings) {	150✔
261	if (this.bindingMatches(binding, event)) {	646✔
262	this.eventModifiersMatch(binding, event);	62✔
263		62✔
264	binding.handler.call(this._host, event);	62✔
265		62✔
266	if (isKeydownRepeatTrigger(binding.options?.triggers)) {	62!
267	this.pressedKeys.delete(key);	5✔
268	}	5✔
269	}	62✔
270	}	646✔
271		114✔
272	if (isKeyup(event) && !isModifier(key)) {	150✔
273	this.pressedKeys.delete(key);	57✔
274	}	57✔
275	}	150✔
276		40✔
277	private onKeyUp = (event: Event) => {	40✔
278	this._handleEvent(event as KeyboardEvent);	106✔
279	};	40✔
280		40✔
281	private onKeyDown = (event: Event) => {	40✔
282	this._handleEvent(event as KeyboardEvent);	106✔
283	};	40✔
284		40✔
285	/**	40✔
286	* Registers a keybinding handler.	40✔
287	*/	40✔
288	public set(	40✔
289	key: string \| string[],	1,716✔
290	fn: KeyBindingHandler,	1,716✔
291	options?: KeyBindingOptions	1,716✔
292	) {	1,716✔
293	this.bindings.add({	1,716✔
294	...parseKeys(key),	1,716✔
295	handler: fn,	1,716✔
296	options: { ...this._options?.bindingDefaults, ...options },	1,716!
297	});	1,716✔
298		1,716✔
299	return this;	1,716✔
300	}	1,716✔
301		40✔
302	/**	40✔
303	* Register a handler function which is called when the target receives a key	40✔
304	* which "activates" it.	40✔
305	*	40✔
306	* In the browser context this is usually either an Enter and/or Space keypress.	40✔
307	*/	40✔
308	public setActivateHandler(	40✔
309	fn: KeyBindingHandler,	122✔
310	options?: KeyBindingOptions	122✔
311	) {	122✔
312	for (const key of [enterKey, spaceBar]) {	122✔
313	this.set(key, fn, options);	244✔
314	}	244✔
315		122✔
316	return this;	122✔
317	}	122✔
318		40✔
319	public hostConnected(): void {	40✔
320	this._host.addEventListener('keyup', this.onKeyUp);	306✔
321	this._host.addEventListener('keydown', this.onKeyDown);	306✔
322	}	306✔
323		40✔
324	public hostDisconnected(): void {	40✔
325	this._host.removeEventListener('keyup', this.onKeyUp);	306✔
326	this._host.removeEventListener('keydown', this.onKeyDown);	306✔
327	}	306✔
328	}	40✔
329		40✔
330	/**	40✔
331	* Creates a keybinding controller and adds to it to the passed `element`	40✔
332	* with the provided `options`.	40✔
333	*/	40✔
334	export function addKeybindings(	40✔
335	element: ReactiveControllerHost & Element,	352✔
336	options?: KeyBindingControllerOptions	352✔
337	) {	352✔
338	return new KeyBindingController(element, options);	352✔
339	}	352✔

IgniteUI / igniteui-webcomponents / 6824997836

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