till download files, everything works

2024-11-01 22:13:14 +01:00
1 parent ce893a4185
commit ed1a580b09
@@ -0,0 +1,169 @@
+import { startWaapiAnimation } from './index.mjs';
+import { createGeneratorEasing } from '../../../easing/utils/create-generator-easing.mjs';
+import { browserNumberValueTypes } from '../../../render/dom/value-types/number-browser.mjs';
+import { invariant } from '../../../utils/errors.mjs';
+import { noop } from '../../../utils/noop.mjs';
+import { secondsToMilliseconds, millisecondsToSeconds } from '../../../utils/time-conversion.mjs';
+import { isGenerator } from '../../generators/utils/is-generator.mjs';
+import { attachTimeline } from './utils/attach-timeline.mjs';
+import { getFinalKeyframe } from './utils/get-final-keyframe.mjs';
+import { setCSSVar, setStyle } from './utils/style.mjs';
+import { supportsLinearEasing } from './utils/supports-linear-easing.mjs';
+import { supportsPartialKeyframes } from './utils/supports-partial-keyframes.mjs';
+import { supportsWaapi } from './utils/supports-waapi.mjs';
+
+const state = new WeakMap();
+function hydrateKeyframes(valueName, keyframes, read) {
+    for (let i = 0; i < keyframes.length; i++) {
+        if (keyframes[i] === null) {
+            keyframes[i] = i === 0 ? read() : keyframes[i - 1];
+        }
+        if (typeof keyframes[i] === "number" &&
+            browserNumberValueTypes[valueName]) {
+            keyframes[i] = browserNumberValueTypes[valueName].transform(keyframes[i]);
+        }
+    }
+    if (!supportsPartialKeyframes() && keyframes.length < 2) {
+        keyframes.unshift(read());
+    }
+}
+const defaultEasing = "easeOut";
+function getElementAnimationState(element) {
+    const animationState = state.get(element) || new Map();
+    state.set(element, animationState);
+    return state.get(element);
+}
+class NativeAnimation {
+    constructor(element, valueName, valueKeyframes, options) {
+        const isCSSVar = valueName.startsWith("--");
+        this.setValue = isCSSVar ? setCSSVar : setStyle;
+        this.options = options;
+        this.updateFinishedPromise();
+        invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
+        const existingAnimation = getElementAnimationState(element).get(valueName);
+        existingAnimation && existingAnimation.stop();
+        const readInitialKeyframe = () => {
+            return valueName.startsWith("--")
+                ? element.style.getPropertyValue(valueName)
+                : window.getComputedStyle(element)[valueName];
+        };
+        if (!Array.isArray(valueKeyframes)) {
+            valueKeyframes = [valueKeyframes];
+        }
+        hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
+        if (isGenerator(options.type)) {
+            const generatorOptions = createGeneratorEasing(options, 100, options.type);
+            options.ease = supportsLinearEasing()
+                ? generatorOptions.ease
+                : defaultEasing;
+            options.duration = secondsToMilliseconds(generatorOptions.duration);
+            options.type = "keyframes";
+        }
+        else {
+            options.ease = options.ease || defaultEasing;
+        }
+        this.removeAnimation = () => { var _a; return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName); };
+        const onFinish = () => {
+            this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, this.options));
+            this.cancel();
+            this.resolveFinishedPromise();
+        };
+        if (!supportsWaapi()) {
+            onFinish();
+        }
+        else {
+            this.animation = startWaapiAnimation(element, valueName, valueKeyframes, options);
+            if (options.autoplay === false) {
+                this.animation.pause();
+            }
+            this.animation.onfinish = onFinish;
+            if (this.pendingTimeline) {
+                attachTimeline(this.animation, this.pendingTimeline);
+            }
+            getElementAnimationState(element).set(valueName, this);
+        }
+    }
+    get duration() {
+        return millisecondsToSeconds(this.options.duration || 300);
+    }
+    get time() {
+        var _a;
+        if (this.animation) {
+            return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
+        }
+        return 0;
+    }
+    set time(newTime) {
+        if (this.animation) {
+            this.animation.currentTime = secondsToMilliseconds(newTime);
+        }
+    }
+    get speed() {
+        return this.animation ? this.animation.playbackRate : 1;
+    }
+    set speed(newSpeed) {
+        if (this.animation) {
+            this.animation.playbackRate = newSpeed;
+        }
+    }
+    get state() {
+        return this.animation ? this.animation.playState : "finished";
+    }
+    get startTime() {
+        return this.animation ? this.animation.startTime : null;
+    }
+    play() {
+        if (this.state === "finished") {
+            this.updateFinishedPromise();
+        }
+        this.animation && this.animation.play();
+    }
+    pause() {
+        this.animation && this.animation.pause();
+    }
+    stop() {
+        if (!this.animation ||
+            this.state === "idle" ||
+            this.state === "finished") {
+            return;
+        }
+        if (this.animation.commitStyles) {
+            this.animation.commitStyles();
+        }
+        this.cancel();
+    }
+    complete() {
+        this.animation && this.animation.finish();
+    }
+    cancel() {
+        this.removeAnimation();
+        try {
+            this.animation && this.animation.cancel();
+        }
+        catch (e) { }
+    }
+    /**
+     * Allows the returned animation to be awaited or promise-chained. Currently
+     * resolves when the animation finishes at all but in a future update could/should
+     * reject if its cancels.
+     */
+    then(resolve, reject) {
+        return this.currentFinishedPromise.then(resolve, reject);
+    }
+    updateFinishedPromise() {
+        this.currentFinishedPromise = new Promise((resolve) => {
+            this.resolveFinishedPromise = resolve;
+        });
+    }
+    attachTimeline(timeline) {
+        if (!this.animation) {
+            this.pendingTimeline = timeline;
+        }
+        else {
+            attachTimeline(this.animation, timeline);
+        }
+        return noop;
+    }
+}
+
+export { NativeAnimation };
@@ -0,0 +1,36 @@
+import { resolveElements } from '../../../render/dom/utils/resolve-element.mjs';
+import { invariant } from '../../../utils/errors.mjs';
+import { secondsToMilliseconds } from '../../../utils/time-conversion.mjs';
+import { getValueTransition } from '../../utils/get-value-transition.mjs';
+import { NativeAnimation } from './NativeAnimation.mjs';
+
+function animateElements(elementOrSelector, keyframes, options, scope) {
+    const elements = resolveElements(elementOrSelector, scope);
+    const numElements = elements.length;
+    invariant(Boolean(numElements), "No valid element provided.");
+    const animations = [];
+    for (let i = 0; i < numElements; i++) {
+        const element = elements[i];
+        const elementTransition = { ...options };
+        /**
+         * Resolve stagger function if provided.
+         */
+        if (typeof elementTransition.delay === "function") {
+            elementTransition.delay = elementTransition.delay(i, numElements);
+        }
+        for (const valueName in keyframes) {
+            const valueKeyframes = keyframes[valueName];
+            const valueOptions = {
+                ...getValueTransition(options, valueName),
+            };
+            valueOptions.duration = valueOptions.duration
+                ? secondsToMilliseconds(valueOptions.duration)
+                : valueOptions.duration;
+            valueOptions.delay = secondsToMilliseconds(valueOptions.delay || 0);
+            animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
+        }
+    }
+    return animations;
+}
+
+export { animateElements };
@@ -0,0 +1,12 @@
+import { GroupPlaybackControls } from '../../GroupPlaybackControls.mjs';
+import { animateElements } from './animate-elements.mjs';
+
+const createScopedWaapiAnimate = (scope) => {
+    function scopedAnimate(elementOrSelector, keyframes, options) {
+        return new GroupPlaybackControls(animateElements(elementOrSelector, keyframes, options, scope));
+    }
+    return scopedAnimate;
+};
+const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
+
+export { animateMini, createScopedWaapiAnimate };
@@ -0,0 +1,44 @@
+import { isBezierDefinition } from '../../../easing/utils/is-bezier-definition.mjs';
+import { generateLinearEasing } from './utils/linear.mjs';
+import { supportsLinearEasing } from './utils/supports-linear-easing.mjs';
+
+function isWaapiSupportedEasing(easing) {
+    return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
+        !easing ||
+        (typeof easing === "string" &&
+            (easing in supportedWaapiEasing || supportsLinearEasing())) ||
+        isBezierDefinition(easing) ||
+        (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
+}
+const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+const supportedWaapiEasing = {
+    linear: "linear",
+    ease: "ease",
+    easeIn: "ease-in",
+    easeOut: "ease-out",
+    easeInOut: "ease-in-out",
+    circIn: /*@__PURE__*/ cubicBezierAsString([0, 0.65, 0.55, 1]),
+    circOut: /*@__PURE__*/ cubicBezierAsString([0.55, 0, 1, 0.45]),
+    backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+    backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
+};
+function mapEasingToNativeEasing(easing, duration) {
+    if (!easing) {
+        return undefined;
+    }
+    else if (typeof easing === "function" && supportsLinearEasing()) {
+        return generateLinearEasing(easing, duration);
+    }
+    else if (isBezierDefinition(easing)) {
+        return cubicBezierAsString(easing);
+    }
+    else if (Array.isArray(easing)) {
+        return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) ||
+            supportedWaapiEasing.easeOut);
+    }
+    else {
+        return supportedWaapiEasing[easing];
+    }
+}
+
+export { cubicBezierAsString, isWaapiSupportedEasing, mapEasingToNativeEasing, supportedWaapiEasing };
@@ -0,0 +1,23 @@
+import { mapEasingToNativeEasing } from './easing.mjs';
+
+function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease, times, } = {}) {
+    const keyframeOptions = { [valueName]: keyframes };
+    if (times)
+        keyframeOptions.offset = times;
+    const easing = mapEasingToNativeEasing(ease, duration);
+    /**
+     * If this is an easing array, apply to keyframes, not animation as a whole
+     */
+    if (Array.isArray(easing))
+        keyframeOptions.easing = easing;
+    return element.animate(keyframeOptions, {
+        delay,
+        duration,
+        easing: !Array.isArray(easing) ? easing : "linear",
+        fill: "both",
+        iterations: repeat + 1,
+        direction: repeatType === "reverse" ? "alternate" : "normal",
+    });
+}
+
+export { startWaapiAnimation };
@@ -0,0 +1,6 @@
+function attachTimeline(animation, timeline) {
+    animation.timeline = timeline;
+    animation.onfinish = null;
+}
+
+export { attachTimeline };
@@ -0,0 +1,12 @@
+const isNotNull = (value) => value !== null;
+function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
+    const resolvedKeyframes = keyframes.filter(isNotNull);
+    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
+        ? 0
+        : resolvedKeyframes.length - 1;
+    return !index || finalKeyframe === undefined
+        ? resolvedKeyframes[index]
+        : finalKeyframe;
+}
+
+export { getFinalKeyframe };
@@ -0,0 +1,15 @@
+import { progress } from '../../../../utils/progress.mjs';
+
+// Create a linear easing point for every 10 ms
+const resolution = 10;
+const generateLinearEasing = (easing, duration // as milliseconds
+) => {
+    let points = "";
+    const numPoints = Math.max(Math.round(duration / resolution), 2);
+    for (let i = 0; i < numPoints; i++) {
+        points += easing(progress(0, numPoints - 1, i)) + ", ";
+    }
+    return `linear(${points.substring(0, points.length - 2)})`;
+};
+
+export { generateLinearEasing };
@@ -0,0 +1,9 @@
+import { memo } from '../../../../utils/memo.mjs';
+import { supportsFlags } from './supports-flags.mjs';
+
+function memoSupports(callback, supportsFlag) {
+    const memoized = memo(callback);
+    return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };
+}
+
+export { memoSupports };
@@ -0,0 +1,8 @@
+function setCSSVar(element, name, value) {
+    element.style.setProperty(`--${name}`, value);
+}
+function setStyle(element, name, value) {
+    element.style[name] = value;
+}
+
+export { setCSSVar, setStyle };
@@ -0,0 +1,9 @@
+/**
+ * Add the ability for test suites to manually set support flags
+ * to better test more environments.
+ */
+const supportsFlags = {
+    linearEasing: undefined,
+};
+
+export { supportsFlags };
@@ -0,0 +1,15 @@
+import { memoSupports } from './memo-supports.mjs';
+
+const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
+    try {
+        document
+            .createElement("div")
+            .animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
+}, "linearEasing");
+
+export { supportsLinearEasing };
@@ -0,0 +1,13 @@
+import { memo } from '../../../../utils/memo.mjs';
+
+const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
+    try {
+        document.createElement("div").animate({ opacity: [1] });
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
+});
+
+export { supportsPartialKeyframes };
@@ -0,0 +1,5 @@
+import { memo } from '../../../../utils/memo.mjs';
+
+const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
+
+export { supportsWaapi };