8110261026

Committed 01 Mar 2024 10:52AM UTC coverage: 97.708% (+0.1%) from 97.584%

Build # 8110261026

Build Type

Pull #1086

github

Committed by

web-flow

Commit Message

Merge ddbc279f7 into 23b9a674b

Pull Request Pull Request #1086: Add date picker component

Run Details

3428 of 3630 branches covered (94.44%)

Branch coverage included in aggregate %.

829 of 831 new or added lines in 9 files covered. (99.76%)

17 existing lines in 3 files now uncovered.

21381 of 21761 relevant lines covered (98.25%)

493.83 hits per line

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

95.41

/src/animations/player.ts

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

import type { AnimationReferenceMetadata } from './types.js';
import { isElement } from '../components/common/util.js';

const listenerOptions = { once: true };

function getPrefersReducedMotion() {
  return globalThis?.matchMedia('(prefers-reduced-motion: reduce)').matches;
}

class AnimationController implements ReactiveController {
  protected get target() {
    if (isElement(this._target)) {
      return this._target;
    }
    return this._target?.value ?? this.host;
  }

  constructor(
    private readonly host: ReactiveControllerHost & HTMLElement,
    private _target?: Ref<HTMLElement> | HTMLElement
  ) {
    this.host.addController(this);
  }

  private parseKeyframes(keyframes: Keyframe[]) {
    return keyframes.map((keyframe) => {
      if (!keyframe.height) return keyframe;

      return {
        ...keyframe,
        height:
          keyframe.height === 'auto'
            ? `${this.target.scrollHeight}px`
            : keyframe.height,
      };
    });
  }

  public async play(animation: AnimationReferenceMetadata) {
    const { steps, options } = animation;

    if (options?.duration === Infinity) {
      throw new Error('Promise-based animations must be finite.');
    }

    return new Promise<AnimationPlaybackEvent>((resolve) => {
      const animation = this.target.animate(this.parseKeyframes(steps), {
        ...options,
        duration: getPrefersReducedMotion() ? 0 : options!.duration,
      });

      animation.addEventListener('cancel', resolve, listenerOptions);
      animation.addEventListener('finish', resolve, listenerOptions);
    });
  }

  public stopAll() {
    return Promise.all(
      this.target.getAnimations().map((animation) => {
        return new Promise((resolve) => {
          const resolver = () => requestAnimationFrame(resolve);
          animation.addEventListener('cancel', resolver, listenerOptions);
          animation.addEventListener('finish', resolver, listenerOptions);

          animation.cancel();
        });
      })
    );
  }

  public hostConnected() {}
}

/**
 * Creates and attaches an animation player instance to the passed in `host` element.
 * The player will run animations on the passed in `target`, or if `target` is undefined,
 * the host element itself.
 */
export function addAnimationController(
  host: ReactiveControllerHost & HTMLElement,
  target?: Ref<HTMLElement> | HTMLElement
) {
  return new AnimationController(host, target);
}

1	import type { ReactiveController, ReactiveControllerHost } from 'lit';	29✔
2	import type { Ref } from 'lit/directives/ref.js';	29✔
3		29✔
4	import type { AnimationReferenceMetadata } from './types.js';	29✔
5	import { isElement } from '../components/common/util.js';	29✔
6		29✔
7	const listenerOptions = { once: true };	29✔
8		29✔
9	function getPrefersReducedMotion() {	134✔
10	return globalThis?.matchMedia('(prefers-reduced-motion: reduce)').matches;	134✔
11	}	134✔
12		29✔
13	class AnimationController implements ReactiveController {	29✔
14	protected get target() {	29✔
15	if (isElement(this._target)) {	351!
UNCOV 16	return this._target;	×
UNCOV 17	}	×
18	return this._target?.value ?? this.host;	351✔
19	}	351✔
20		29✔
21	constructor(	29✔
22	private readonly host: ReactiveControllerHost & HTMLElement,	1,802✔
23	private _target?: Ref<HTMLElement> \| HTMLElement	1,802✔
24	) {	1,802✔
25	this.host.addController(this);	1,802✔
26	}	1,802✔
27		29✔
28	private parseKeyframes(keyframes: Keyframe[]) {	29✔
29	return keyframes.map((keyframe) => {	134✔
30	if (!keyframe.height) return keyframe;	268✔
31		84✔
32	return {	84✔
33	...keyframe,	84✔
34	height:	84✔
35	keyframe.height === 'auto'	84✔
36	? `${this.target.scrollHeight}px`	84✔
37	: keyframe.height,	268!
38	};	268✔
39	});	134✔
40	}	134✔
41		29✔
42	public async play(animation: AnimationReferenceMetadata) {	29✔
43	const { steps, options } = animation;	135✔
44		135✔
45	if (options?.duration === Infinity) {	135✔
46	throw new Error('Promise-based animations must be finite.');	1✔
47	}	1✔
48		134✔
49	return new Promise<AnimationPlaybackEvent>((resolve) => {	134✔
50	const animation = this.target.animate(this.parseKeyframes(steps), {	134✔
51	...options,	134✔
52	duration: getPrefersReducedMotion() ? 0 : options!.duration,	134!
53	});	134✔
54		134✔
55	animation.addEventListener('cancel', resolve, listenerOptions);	134✔
56	animation.addEventListener('finish', resolve, listenerOptions);	134✔
57	});	134✔
58	}	134✔
59		29✔
60	public stopAll() {	29✔
61	return Promise.all(	133✔
62	this.target.getAnimations().map((animation) => {	133✔
63	return new Promise((resolve) => {	22✔
64	const resolver = () => requestAnimationFrame(resolve);	22✔
65	animation.addEventListener('cancel', resolver, listenerOptions);	22✔
66	animation.addEventListener('finish', resolver, listenerOptions);	22✔
67		22✔
68	animation.cancel();	22✔
69	});	22✔
70	})	133✔
71	);	133✔
72	}	133✔
73		29✔
74	public hostConnected() {}	29✔
75	}	29✔
76		29✔
77	/**	29✔
78	* Creates and attaches an animation player instance to the passed in `host` element.	29✔
79	* The player will run animations on the passed in `target`, or if `target` is undefined,	29✔
80	* the host element itself.	29✔
81	*/	29✔
82	export function addAnimationController(	29✔
83	host: ReactiveControllerHost & HTMLElement,	1,802✔
84	target?: Ref<HTMLElement> \| HTMLElement	1,802✔
85	) {	1,802✔
86	return new AnimationController(host, target);	1,802✔
87	}	1,802✔

IgniteUI / igniteui-webcomponents / 8110261026

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