7032003252

Committed 29 Nov 2023 11:38AM UTC coverage: 97.263% (+0.2%) from 97.039%

Build # 7032003252

Build Type

Pull #983

github

Committed by

web-flow

Commit Message

Merge 81fdd3ec8 into 74804a855

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

Run Details

3254 of 3468 branches covered (0.0%)

Branch coverage included in aggregate %.

1393 of 1393 new or added lines in 15 files covered. (100.0%)

4 existing lines in 2 files now uncovered.

20340 of 20790 relevant lines covered (97.84%)

429.3 hits per line

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

95.18

/src/components/toggle/toggle.controller.ts

import { ReactiveController, ReactiveControllerHost } from 'lit';
import type { DirectiveResult } from 'lit/directive';

import { IgcToggleDirective, igcToggle } from './toggle.directive.js';
import type { IgcToggleComponent } from './types.js';

type ToggleHost = ReactiveControllerHost & IgcToggleComponent & HTMLElement;

/**
 * Toggle controller configuration
 */
interface ToggleControllerConfig {
  /** The element, relative to which, the toggle will be positioned. */
  target?: HTMLElement;
  /**
   * The function to call when closing the toggle element from an user interaction (scroll, click).
   */
  closeCallback?: Function;
}

/* blazorSuppress */
/**
 * Controller, bundling the creation of a toggle directive and handling global events,
 * related to the configuration of togglable components.
 */
export class IgcToggleController implements ReactiveController {
  private host: IgcToggleComponent & HTMLElement;
  private sourceElement?: Element;
  private initialScrollTop = 0;
  private initialScrollLeft = 0;
  private _target!: HTMLElement;
  private _hide?: Function;
  private _abortController = new AbortController();

  /**
   *  Abort controller used to clean up document level event listeners
   *  See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#add_an_abortable_listener
   */
  protected get abortController() {
    if (this._abortController.signal.aborted) {
      this._abortController = new AbortController();
    }
    return this._abortController;
  }

  /** The directive that marks the toggle. */
  public toggleDirective!: DirectiveResult<typeof IgcToggleDirective>;
  public rendered!: Promise<void>;

  public set target(value: HTMLElement) {
    this._target = value;
    this.update();
  }

  /** The element, relative to which, the toggle will be positioned. */
  public get target() {
    return this._target;
  }

  constructor(host: ToggleHost, config?: ToggleControllerConfig) {
    (this.host = host).addController(this);

    if (config?.target) {
      this._target = config.target;
    }

    if (config?.closeCallback) {
      this._hide = config.closeCallback;
    }

    this.update();
  }

  public hostDisconnected() {
    this.abortController.abort();
  }

  public update() {
    this.toggleDirective = igcToggle(this.target, this.host, this);
    this.configureListeners();
  }

  protected hide() {
    this._hide ? this._hide() : this.host.hide();
  }

  private addEventListeners() {
    const options: AddEventListenerOptions = {
      capture: true,
      signal: this.abortController.signal,
    };

    if (!this.host.keepOpenOnOutsideClick) {
      document.addEventListener('click', this.documentClicked, options);
    }

    document.addEventListener('scroll', this.handleScroll, options);
  }

  private configureListeners() {
    this.host.open ? this.addEventListeners() : this.abortController.abort();
  }

  private blockScroll = (event: Event) => {
    event.preventDefault();
    if (!this.sourceElement || this.sourceElement !== event.target) {
      this.sourceElement = event.target as Element;
      this.initialScrollTop =
        this.sourceElement.scrollTop ??
        this.sourceElement.firstElementChild?.scrollTop;
      this.initialScrollLeft =
        this.sourceElement.scrollLeft ??
        this.sourceElement.firstElementChild?.scrollLeft;
    }

    this.sourceElement.scrollTop = this.initialScrollTop;
    this.sourceElement.scrollLeft = this.initialScrollLeft;
    if (this.sourceElement.firstElementChild) {
      this.sourceElement.firstElementChild.scrollTop = this.initialScrollTop;
      this.sourceElement.firstElementChild.scrollLeft = this.initialScrollLeft;
    }
  };

  /** The document's click event handler to override in the host component if necessary. */
  private documentClicked = (event: MouseEvent) => {
    if (!this.host.keepOpenOnOutsideClick) {
      const tree = event.composed ? event.composedPath() : [event.target];

      if (tree.includes(this.host) || tree.includes(this.target)) {
        return;
      }

      this.hide();
    }
  };

  /** The document's scroll event handler to override in the host component if necessary. */
  private handleScroll = (event: Event) => {
    switch (this.host.scrollStrategy) {
      case 'scroll':
        break;
      case 'block':
        this.blockScroll(event);
        break;
      case 'close':
        this.hide();
        break;
    }
  };
}

1	import { ReactiveController, ReactiveControllerHost } from 'lit';	33✔
2	import type { DirectiveResult } from 'lit/directive';	33✔
3		33✔
4	import { IgcToggleDirective, igcToggle } from './toggle.directive.js';	33✔
5	import type { IgcToggleComponent } from './types.js';	33✔
6		33✔
7	type ToggleHost = ReactiveControllerHost & IgcToggleComponent & HTMLElement;	33✔
8		33✔
9	/**	33✔
10	* Toggle controller configuration	33✔
11	*/	33✔
12	interface ToggleControllerConfig {	33✔
13	/** The element, relative to which, the toggle will be positioned. */	33✔
14	target?: HTMLElement;	33✔
15	/**	33✔
16	* The function to call when closing the toggle element from an user interaction (scroll, click).	33✔
17	*/	33✔
18	closeCallback?: Function;	33✔
19	}	33✔
20		33✔
21	/* blazorSuppress */	33✔
22	/**	33✔
23	* Controller, bundling the creation of a toggle directive and handling global events,	33✔
24	* related to the configuration of togglable components.	33✔
25	*/	33✔
26	export class IgcToggleController implements ReactiveController {	33✔
27	private host: IgcToggleComponent & HTMLElement;	33✔
28	private sourceElement?: Element;	33✔
29	private initialScrollTop = 0;	33✔
30	private initialScrollLeft = 0;	33✔
31	private _target!: HTMLElement;	33✔
32	private _hide?: Function;	33✔
33	private _abortController = new AbortController();	33✔
34		33✔
35	/**	33✔
36	* Abort controller used to clean up document level event listeners	33✔
37	* See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#add_an_abortable_listener	33✔
38	*/	33✔
39	protected get abortController() {	33✔
40	if (this._abortController.signal.aborted) {	181✔
41	this._abortController = new AbortController();	75✔
42	}	75✔
43	return this._abortController;	181✔
44	}	181✔
45		33✔
46	/** The directive that marks the toggle. */	33✔
47	public toggleDirective!: DirectiveResult<typeof IgcToggleDirective>;	33✔
48	public rendered!: Promise<void>;	33✔
49		33✔
50	public set target(value: HTMLElement) {	33✔
51	this._target = value;	39✔
52	this.update();	39✔
53	}	39✔
54		33✔
55	/** The element, relative to which, the toggle will be positioned. */	33✔
56	public get target() {	33✔
57	return this._target;	110✔
58	}	110✔
59		33✔
60	constructor(host: ToggleHost, config?: ToggleControllerConfig) {	33✔
61	(this.host = host).addController(this);	71✔
62		71✔
63	if (config?.target) {	71!
64	this._target = config.target;	×
65	}	×
66		71✔
67	if (config?.closeCallback) {	71✔
68	this._hide = config.closeCallback;	71✔
69	}	71✔
70		71✔
71	this.update();	71✔
72	}	71✔
73		33✔
74	public hostDisconnected() {	33✔
75	this.abortController.abort();	71✔
76	}	71✔
77		33✔
78	public update() {	33✔
79	this.toggleDirective = igcToggle(this.target, this.host, this);	110✔
80	this.configureListeners();	110✔
81	}	110✔
82		33✔
83	protected hide() {	33✔
UNCOV 84	this._hide ? this._hide() : this.host.hide();	×
UNCOV 85	}	×
86		33✔
87	private addEventListeners() {	33✔
88	const options: AddEventListenerOptions = {	35✔
89	capture: true,	35✔
90	signal: this.abortController.signal,	35✔
91	};	35✔
92		35✔
93	if (!this.host.keepOpenOnOutsideClick) {	35✔
94	document.addEventListener('click', this.documentClicked, options);	35✔
95	}	35✔
96		35✔
97	document.addEventListener('scroll', this.handleScroll, options);	35✔
98	}	35✔
99		33✔
100	private configureListeners() {	33✔
101	this.host.open ? this.addEventListeners() : this.abortController.abort();	110✔
102	}	110✔
103		33✔
104	private blockScroll = (event: Event) => {	33✔
105	event.preventDefault();	32✔
106	if (!this.sourceElement \|\| this.sourceElement !== event.target) {	32✔
107	this.sourceElement = event.target as Element;	32✔
108	this.initialScrollTop =	32✔
109	this.sourceElement.scrollTop ??	32✔
110	this.sourceElement.firstElementChild?.scrollTop;	32✔
111	this.initialScrollLeft =	32✔
112	this.sourceElement.scrollLeft ??	32✔
113	this.sourceElement.firstElementChild?.scrollLeft;	32✔
114	}	32✔
115		32✔
116	this.sourceElement.scrollTop = this.initialScrollTop;	32✔
117	this.sourceElement.scrollLeft = this.initialScrollLeft;	32✔
118	if (this.sourceElement.firstElementChild) {	32✔
119	this.sourceElement.firstElementChild.scrollTop = this.initialScrollTop;	32✔
120	this.sourceElement.firstElementChild.scrollLeft = this.initialScrollLeft;	32✔
121	}	32✔
122	};	33✔
123		33✔
124	/** The document's click event handler to override in the host component if necessary. */	33✔
125	private documentClicked = (event: MouseEvent) => {	33✔
126	if (!this.host.keepOpenOnOutsideClick) {	37✔
127	const tree = event.composed ? event.composedPath() : [event.target];	37!
128		37✔
129	if (tree.includes(this.host) \|\| tree.includes(this.target)) {	37!
130	return;	37✔
131	}	37✔
132		32!
133	this.hide();	32✔
134	}	32✔
135	};	33✔
136		33✔
137	/** The document's scroll event handler to override in the host component if necessary. */	33✔
138	private handleScroll = (event: Event) => {	33✔
139	switch (this.host.scrollStrategy) {	32✔
140	case 'scroll':	32✔
141	break;	32✔
142	case 'block':	32✔
143	this.blockScroll(event);	32✔
144	break;	32✔
145	case 'close':	32✔
146	this.hide();	32✔
147	break;	32✔
148	}	32✔
149	};	33✔
150	}	33✔

IgniteUI / igniteui-webcomponents / 7032003252

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