igniteui-webcomponents/animations/player.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import { isElement } from '../components/common/util.js';
const listenerOptions = { once: true };
function getPrefersReducedMotion() {
    return globalThis?.matchMedia('(prefers-reduced-motion: reduce)').matches;
}
class AnimationController {
    get target() {
        if (isElement(this._target)) {
            return this._target;
        }
        return this._target?.value ?? this.host;
    }
    constructor(host, _target) {
        this.host = host;
        this._target = _target;
        this.host.addController(this);
    }
    parseKeyframes(keyframes) {
        return keyframes.map((keyframe) => {
            if (!keyframe.height)
                return keyframe;
            return {
                ...keyframe,
                height: keyframe.height === 'auto'
                    ? `${this.target.scrollHeight}px`
                    : keyframe.height,
            };
        });
    }
    async play(animation) {
        const { steps, options } = animation;
        if (options?.duration === Number.POSITIVE_INFINITY) {
            throw new Error('Promise-based animations must be finite.');
        }
        return new Promise((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);
        });
    }
    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();
            });
        }));
    }
    hostConnected() { }
}
export function addAnimationController(host, target) {
    return new AnimationController(host, target);
}
export function startViewTransition(callback) {
    if (getPrefersReducedMotion() || !document.startViewTransition) {
        callback?.();
        return {};
    }
    return { transition: document.startViewTransition(callback) };
}
//# sourceMappingURL=player.js.map