uikit 3.25.27-dev.9e97c1f → 3.25.27

package/src/js/core/video.js

@@ -1,10 +1,8 @@
 import {
     hasAttr,
-    isFocusable,
     isTag,
     isTouch,
     mute,
-    observeIntersection,
     parent,
     pause,
     play,
@@ -13,62 +11,27 @@ import {
     query,
 } from 'uikit-util';
 import { intersection } from '../api/observables';
-import Media from '../mixin/media';
-import ScrollDriven from '../mixin/scroll-driven';
-
-const loopKey = Symbol();
 
 export default {
-    mixins: [Media, ScrollDriven],
-
     args: 'autoplay',
 
     props: {
         automute: Boolean,
         autoplay: Boolean,
         restart: Boolean,
-        inviewMargin: String,
-        inviewQueued: Number,
         hoverTarget: Boolean,
-        hoverRewind: Number,
-        reducedMotionTime: Number,
     },
 
     data: {
         automute: false,
         autoplay: true,
         restart: false,
-        inviewMargin: '0px',
-        inviewQueued: 0,
         hoverTarget: false,
-        hoverRewind: 0,
-        reducedMotionTime: 0,
-        media: '(prefers-reduced-motion: reduce)',
     },
 
     beforeConnect() {
-        const isVideo = (this.isVideo = isTag(this.$el, 'video'));
-
-        this.interactionDriven = ['hover', 'parallax'].includes(this.autoplay);
-
-        if (this.interactionDriven && !isVideo) {
-            this.interactionDriven = this.autoplay = false;
-        }
-
-        this.restart = isVideo && this.restart;
-        this.parallax = this.autoplay === 'parallax';
-        this.inviewQueued = isVideo && this.autoplay === 'inview' && this.inviewQueued;
-
-        if (this.inviewQueued) {
-            this.$el[loopKey] = this.$el.loop;
-            this.$el.loop = false;
-        }
-
-        if (
-            ['hover', 'inview'].includes(this.autoplay) &&
-            isVideo &&
-            !hasAttr(this.$el, 'preload')
-        ) {
+        const isVideo = isTag(this.$el, 'video');
+        if (this.autoplay === 'inview' && isVideo && !hasAttr(this.$el, 'preload')) {
             this.$el.preload = 'none';
         }
 
@@ -77,10 +40,10 @@ export default {
         }
 
         if (this.autoplay === 'hover') {
-            this.hoverTarget = query(this.hoverTarget, this.$el) || this.$el;
-
-            if (!isFocusable(this.hoverTarget)) {
-                this.hoverTarget.tabIndex = 0;
+            if (isVideo) {
+                this.$el.tabIndex = 0;
+            } else {
+                this.autoplay = true;
             }
         }
 
@@ -90,44 +53,19 @@ export default {
         }
     },
 
-    connected() {
-        if (
-            !this.$el.controls &&
-            !this.$el.poster &&
-            (this.interactionDriven || this.inviewQueued)
-        ) {
-            this.cancelPreview = preview(this.$el);
-        }
-    },
-
-    disconnected() {
-        this._reverseAbort?.abort();
-
-        this.cancelPreview?.();
-        this.cancelPreview = null;
-
-        if (this.$el[loopKey]) {
-            this.$el.loop = true;
-        }
-
-        queue.delete(this.$el);
-    },
-
     events: [
         {
             name: `${pointerEnter} focusin`,
 
-            el: ({ hoverTarget }) => hoverTarget,
+            el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
 
             filter: ({ autoplay }) => autoplay === 'hover',
 
             handler(e) {
-                this._reverseAbort?.abort();
-
                 if (!isTouch(e) || !isPlaying(this.$el)) {
-                    this.play();
+                    play(this.$el);
                 } else {
-                    this.pause();
+                    pauseHover(this.$el, this.restart);
                 }
             },
         },
@@ -135,34 +73,14 @@ export default {
         {
             name: `${pointerLeave} focusout`,
 
-            el: ({ hoverTarget }) => hoverTarget,
+            el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
 
             filter: ({ autoplay }) => autoplay === 'hover',
 
             handler(e) {
-                if (!isTouch(e) && !this.matchMedia) {
-                    this._reverseAbort?.abort();
-                    this.pause();
-                    this._reverseAbort = playReverse(this.$el, this.hoverRewind);
-                }
-            },
-        },
-        {
-            name: 'loadedmetadata durationchange',
-            filter: ({ parallax }) => parallax,
-            handler() {
-                this.$emit('resize');
-            },
-        },
-        {
-            name: 'error pause ended',
-            filter: ({ inviewQueued }) => inviewQueued,
-            handler(e) {
-                if (e.type === 'error' || (e.type === 'ended' && !this.$el[loopKey])) {
-                    queue.delete(this.$el);
+                if (!isTouch(e)) {
+                    pauseHover(this.$el, this.restart);
                 }
-
-                playNextQueued();
             },
         },
     ],
@@ -177,166 +95,33 @@ export default {
         }),
 
         intersection({
-            filter: ({ $el, interactionDriven }) => !interactionDriven && $el.preload !== 'none',
-            handler([{ isIntersecting }]) {
+            filter: ({ $el, autoplay }) => autoplay !== 'hover' && $el.preload !== 'none',
+            handler([{ isIntersecting, target }]) {
                 if (!document.fullscreenElement) {
                     if (isIntersecting) {
                         if (this.autoplay) {
-                            this.play();
+                            play(target);
                         }
                     } else {
-                        this.pause();
+                        pauseHover(target, this.restart);
                     }
                 }
             },
             args: { intersecting: false },
-            options: ({ $el, autoplay, inviewMargin }) => ({
+            options: ({ $el, autoplay }) => ({
                 root: autoplay === 'inview' ? null : parent($el).closest(':not(a)'),
-                rootMargin: autoplay === 'inview' ? inviewMargin : '0px',
             }),
         }),
     ],
-
-    update: {
-        write({ percent }) {
-            if (!this.parallax) {
-                return;
-            }
-
-            const { duration, seeking } = this.$el;
-            if (!isNaN(duration) && !seeking) {
-                const value = this.matchMedia ? this.reducedMotionTime : percent * duration;
-                setCurrentTime(this.$el, value);
-            }
-        },
-
-        events: ['scroll', 'resize'],
-    },
-
-    methods: {
-        play() {
-            if (this.matchMedia) {
-                this.pause();
-
-                if (this.isVideo) {
-                    setCurrentTime(this.$el, this.reducedMotionTime);
-                }
-            } else if (this.inviewQueued) {
-                queue.set(this.$el, this.inviewQueued);
-                playNextQueued();
-            } else {
-                this.cancelPreview?.();
-                play(this.$el);
-            }
-        },
-
-        pause() {
-            pause(this.$el);
-
-            queue.delete(this.$el);
-
-            if (this.restart) {
-                setCurrentTime(this.$el, 0);
-            }
-        },
-    },
 };
 
-function setCurrentTime(videoEl, time) {
-    if (videoEl.currentTime !== time) {
-        videoEl.currentTime = time;
-    }
-}
-
 function isPlaying(videoEl) {
     return !videoEl.paused && !videoEl.ended;
 }
 
-function preview($el) {
-    if (!$el.requestVideoFrameCallback) {
-        return;
+function pauseHover(el, restart) {
+    pause(el);
+    if (restart && isTag(el, 'video')) {
+        el.currentTime = 0;
     }
-
-    let frame;
-    const pausePreview = () => {
-        disconnect();
-        pause($el);
-    };
-
-    const observer = observeIntersection($el, () => {
-        observer.disconnect();
-        frame = $el.requestVideoFrameCallback(pausePreview);
-        play($el);
-    });
-
-    const disconnect = () => {
-        observer.disconnect();
-        $el.cancelVideoFrameCallback(frame);
-    };
-
-    return disconnect;
-}
-
-const queue = new Map();
-const played = new WeakMap();
-
-let frame;
-function playNextQueued() {
-    cancelAnimationFrame(frame);
-    frame = requestAnimationFrame(() => {
-        const getPlayed = (el) => played.get(el) ?? 0;
-        const videos = shuffle(queue.keys()).sort((a, b) => getPlayed(a) - getPlayed(b));
-        let active = videos.filter(isPlaying).length;
-
-        for (const el of videos) {
-            const maxQueued = queue.get(el);
-
-            if (isPlaying(el) || active / queue.size >= maxQueued) {
-                continue;
-            }
-
-            played.set(el, getPlayed(el) + 1);
-            play(el);
-            active++;
-        }
-    });
-}
-
-function shuffle(array) {
-    array = [...array];
-    for (let i = array.length - 1; i > 0; i--) {
-        let j = Math.floor(Math.random() * (i + 1));
-        [array[i], array[j]] = [array[j], array[i]];
-    }
-    return array;
-}
-
-function playReverse(el, playbackRate) {
-    const start = el.currentTime;
-
-    if (isNaN(start) || !playbackRate) {
-        return;
-    }
-
-    playbackRate *= Math.max(1, start / 10 + 0.5);
-
-    const controller = new AbortController();
-    const time = Date.now();
-    (function next() {
-        requestAnimationFrame(() => {
-            if (controller.signal.aborted) {
-                return;
-            }
-
-            if (!el.seeking) {
-                el.currentTime = Math.max(0, start - ((Date.now() - time) * playbackRate) / 1000);
-            }
-
-            if (el.currentTime > 0) {
-                next();
-            }
-        });
-    })();
-
-    return controller;
 }

package/src/js/mixin/internal/slideshow-animations.js

@@ -2,12 +2,20 @@ import { css } from 'uikit-util';
 
 export default {
     slide: {
-        percent: translated,
+        show(dir) {
+            return [{ transform: translate(dir * -100) }, { transform: translate() }];
+        },
 
-        translate: (percent, dir) => [
-            { transform: translate(dir * -100 * percent) },
-            { transform: translate(dir * 100 * (1 - percent)) },
-        ],
+        percent(current) {
+            return translated(current);
+        },
+
+        translate(percent, dir) {
+            return [
+                { transform: translate(dir * -100 * percent) },
+                { transform: translate(dir * 100 * (1 - percent)) },
+            ];
+        },
     },
 };
 

package/src/js/mixin/internal/slideshow-transitioner.js

@@ -1,8 +1,8 @@
 import { clamp, createEvent, css, noop, resetProps, Transition, trigger } from 'uikit-util';
 
 export default function Transitioner(prev, next, dir, { animation, easing }) {
-    const { percent, translate } = animation;
-    const props = translate(1, dir);
+    const { percent, translate, show = noop } = animation;
+    const props = show(dir);
 
     const { promise, resolve } = withResolvers();
 

package/src/js/mixin/parallax.js

@@ -382,7 +382,10 @@ function getCssValue(el, prop, value) {
 }
 
 function fillObject(keys, value) {
-    return Object.fromEntries(keys.map((prop) => [prop, value]));
+    return keys.reduce((data, prop) => {
+        data[prop] = value;
+        return data;
+    }, {});
 }
 
 /*

package/src/js/mixin/position.js

@@ -27,7 +27,7 @@ export default {
     },
 
     connected() {
-        this.pos = [...this.$props.pos.split('-'), 'center'].slice(0, 2);
+        this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
         [this.dir, this.align] = this.pos;
         this.axis = includes(['top', 'bottom'], this.dir) ? 'y' : 'x';
     },

package/src/js/mixin/slider-parallax.js

@@ -1,30 +1,59 @@
-import { hasClass, includes, trigger } from 'uikit-util';
-import ScrollDriven from './scroll-driven';
+import { hasClass, includes, query, scrolledOver, toPx, trigger } from 'uikit-util';
+import { resize, scroll } from '../api/observables';
+import { ease } from './parallax';
 
 export default {
-    mixins: [ScrollDriven],
-
     props: {
         parallax: Boolean,
+        parallaxTarget: Boolean,
+        parallaxStart: String,
+        parallaxEnd: String,
+        parallaxEasing: Number,
     },
 
     data: {
         parallax: false,
+        parallaxTarget: false,
+        parallaxStart: 0,
+        parallaxEnd: 0,
+        parallaxEasing: 0,
     },
 
+    observe: [
+        resize({
+            target: ({ $el, parallaxTarget }) => [$el, parallaxTarget],
+            filter: ({ parallax }) => parallax,
+        }),
+        scroll({ filter: ({ parallax }) => parallax }),
+    ],
+
     computed: {
-        parallaxTargetFallback() {
-            return this.list;
+        parallaxTarget({ parallaxTarget }, $el) {
+            return (parallaxTarget && query(parallaxTarget, $el)) || this.list;
         },
     },
 
     update: {
-        write({ percent }) {
+        read() {
             if (!this.parallax) {
-                return;
+                return false;
+            }
+
+            const target = this.parallaxTarget;
+
+            if (!target) {
+                return false;
             }
 
-            const [prevIndex, slidePercent] = this.getIndexAt(percent);
+            const start = toPx(this.parallaxStart, 'height', target, true);
+            const end = toPx(this.parallaxEnd, 'height', target, true);
+            const percent = ease(scrolledOver(target, start, end), this.parallaxEasing);
+
+            return { parallax: this.getIndexAt(percent) };
+        },
+
+        write({ parallax }) {
+            const [prevIndex, slidePercent] = parallax;
 
             const nextIndex = this.getValidIndex(prevIndex + Math.ceil(slidePercent));
 

package/src/js/mixin/togglable.js

@@ -9,7 +9,6 @@ import {
     isBoolean,
     isFunction,
     isVisible,
-    pick,
     removeClass,
     startsWith,
     toFloat,
@@ -164,18 +163,20 @@ async function toggleTransition(el, show, { animation, duration, velocity, trans
         _toggle(el, true);
     }
 
-    const prevProps = pick(el.style, [
-        'padding',
-        'border',
-        'width',
-        'height',
-        'minWidth',
-        'minHeight',
-        'overflowY',
-        'overflowX',
-        marginProp,
-        marginStartProp,
-    ]);
+    const prevProps = Object.fromEntries(
+        [
+            'padding',
+            'border',
+            'width',
+            'height',
+            'minWidth',
+            'minHeight',
+            'overflowY',
+            'overflowX',
+            marginProp,
+            marginStartProp,
+        ].map((key) => [key, el.style[key]]),
+    );
 
     const dim = dimensions(el);
     const currentMargin = toFloat(css(el, marginProp));

package/src/js/util/attr.js

@@ -10,13 +10,13 @@ export function attr(element, name, value) {
 
     if (isUndefined(value)) {
         return toNode(element)?.getAttribute(name);
-    }
-
-    for (const el of toNodes(element)) {
-        if (value === null) {
-            removeAttr(el, name);
-        } else {
-            el.setAttribute(name, value);
+    } else {
+        for (const el of toNodes(element)) {
+            if (value === null) {
+                removeAttr(el, name);
+            } else {
+                el.setAttribute(name, value);
+            }
         }
     }
 }

package/src/js/util/dom.js

@@ -68,9 +68,10 @@ export function wrapInner(element, structure) {
 }
 
 export function unwrap(element) {
-    for (const elementParent of new Set(toNodes(element).map(parent))) {
-        elementParent.replaceWith(...elementParent.childNodes);
-    }
+    toNodes(element)
+        .map(parent)
+        .filter((value, index, self) => self.indexOf(value) === index)
+        .forEach((parent) => parent.replaceWith(...parent.childNodes));
 }
 
 const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;

package/src/js/util/lang.js

@@ -178,8 +178,8 @@ export function uniqueBy(array, prop) {
 
 export function pick(obj, props) {
     const result = {};
-    for (const key of props) {
-        result[key] = obj[key];
+    for (const prop of props) {
+        result[prop] = obj[prop];
     }
     return result;
 }

package/src/js/util/player.js

@@ -42,9 +42,7 @@ function isIFrame(el) {
 }
 
 function isYoutube(el) {
-    return /\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\/.*/.test(
-        el.src,
-    );
+    return /\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\//.test(el.src);
 }
 
 function isVimeo(el) {
@@ -60,7 +58,7 @@ function post(el, cmd) {
     el.contentWindow.postMessage(JSON.stringify({ event: 'command', ...cmd }), '*');
 }
 
-const stateKey = Symbol();
+const stateKey = '_ukPlayer';
 let counter = 0;
 function enableApi(el) {
     if (el[stateKey]) {

package/src/js/util/style.js

@@ -37,22 +37,23 @@ export function css(element, property, value, priority) {
 
             if (isUndefined(value)) {
                 return getComputedStyle(element).getPropertyValue(property);
+            } else {
+                element.style.setProperty(
+                    property,
+                    isNumeric(value) && !cssNumber[property] && !isCustomProperty(property)
+                        ? `${value}px`
+                        : value || isNumber(value)
+                          ? value
+                          : '',
+                    priority,
+                );
             }
-            element.style.setProperty(
-                property,
-                isNumeric(value) && !cssNumber[property] && !isCustomProperty(property)
-                    ? `${value}px`
-                    : value || isNumber(value)
-                      ? value
-                      : '',
-                priority,
-            );
         } else if (isArray(property)) {
-            const values = {};
+            const props = {};
             for (const prop of property) {
-                values[prop] = css(element, prop);
+                props[prop] = css(element, prop);
             }
-            return values;
+            return props;
         } else if (isObject(property)) {
             for (const prop in property) {
                 css(element, prop, property[prop], value);

package/src/js/util/viewport.js

@@ -18,18 +18,20 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
         return false;
     }
 
-    const rects = overflowParents(element).map((parent) => {
-        const { top, left, bottom, right } = offsetViewport(parent);
-
-        return {
-            top: top - offsetTop,
-            left: left - offsetLeft,
-            bottom: bottom + offsetTop,
-            right: right + offsetLeft,
-        };
-    });
-
-    return intersectRect(...rects, offset(element));
+    return intersectRect(
+        ...overflowParents(element)
+            .map((parent) => {
+                const { top, left, bottom, right } = offsetViewport(parent);
+
+                return {
+                    top: top - offsetTop,
+                    left: left - offsetLeft,
+                    bottom: bottom + offsetTop,
+                    right: right + offsetLeft,
+                };
+            })
+            .concat(offset(element)),
+    );
 }
 
 export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
@@ -143,16 +145,17 @@ export function scrollParents(element, scrollable = false, props = []) {
         ancestors = ancestors.slice(fixedIndex);
     }
 
-    return [
-        scrollEl,
-        ...ancestors.filter(
-            (parent) =>
-                css(parent, 'overflow')
-                    .split(' ')
-                    .some((prop) => includes(['auto', 'scroll', ...props], prop)) &&
-                (!scrollable || parent.scrollHeight > offsetViewport(parent).height),
-        ),
-    ].reverse();
+    return [scrollEl]
+        .concat(
+            ancestors.filter(
+                (parent) =>
+                    css(parent, 'overflow')
+                        .split(' ')
+                        .some((prop) => includes(['auto', 'scroll', ...props], prop)) &&
+                    (!scrollable || parent.scrollHeight > offsetViewport(parent).height),
+            ),
+        )
+        .reverse();
 }
 
 export function scrollParent(...args) {