uikit 3.25.17-dev.80dfe87 → 3.25.17-dev.8c70e44

package/src/js/core/video.js

@@ -1,5 +1,6 @@
 import {
     hasAttr,
+    isFocusable,
     isTag,
     isTouch,
     mute,
@@ -11,26 +12,50 @@ import {
     query,
 } from 'uikit-util';
 import { intersection } from '../api/observables';
+import ScrollDriven from '../mixin/scroll-driven';
+
+const loopKey = Symbol();
 
 export default {
+    mixins: [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,
     },
 
     beforeConnect() {
         const isVideo = isTag(this.$el, 'video');
+
+        this.restart = isVideo && this.restart;
+        this.parallax = isVideo && this.autoplay === 'parallax';
+        this.manualControl = ['hover', 'parallax'].includes(this.autoplay);
+        this.inviewQueued = this.autoplay === 'inview' && this.inviewQueued;
+
+        if (this.inviewQueued) {
+            this.$el[loopKey] = this.$el.loop;
+            this.$el.loop = false;
+        }
+
         if (this.autoplay === 'inview' && isVideo && !hasAttr(this.$el, 'preload')) {
             this.$el.preload = 'none';
         }
@@ -41,7 +66,11 @@ export default {
 
         if (this.autoplay === 'hover') {
             if (isVideo) {
-                this.$el.tabIndex = 0;
+                this.hoverTarget = query(this.hoverTarget, this.$el) || this.$el;
+
+                if (!isFocusable(this.hoverTarget)) {
+                    this.hoverTarget.tabIndex = 0;
+                }
             } else {
                 this.autoplay = true;
             }
@@ -53,19 +82,29 @@ export default {
         }
     },
 
+    disconnected() {
+        if (this.$el[loopKey]) {
+            this.$el.loop = true;
+        }
+
+        queue.delete(this.$el);
+    },
+
     events: [
         {
             name: `${pointerEnter} focusin`,
 
-            el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
+            el: ({ hoverTarget }) => hoverTarget,
 
             filter: ({ autoplay }) => autoplay === 'hover',
 
             handler(e) {
+                this._reverseAbort?.abort();
+
                 if (!isTouch(e) || !isPlaying(this.$el)) {
-                    play(this.$el);
+                    this.play();
                 } else {
-                    pauseHover(this.$el, this.restart);
+                    this.pause();
                 }
             },
         },
@@ -73,14 +112,27 @@ export default {
         {
             name: `${pointerLeave} focusout`,
 
-            el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
+            el: ({ hoverTarget }) => hoverTarget,
 
             filter: ({ autoplay }) => autoplay === 'hover',
 
             handler(e) {
                 if (!isTouch(e)) {
-                    pauseHover(this.$el, this.restart);
+                    this._reverseAbort?.abort();
+                    this.pause();
+                    this._reverseAbort = playReverse(this.$el, this.hoverRewind);
+                }
+            },
+        },
+        {
+            name: 'error pause ended',
+            filter: ({ inviewQueued }) => inviewQueued,
+            handler(e) {
+                if (e.type === 'error' || (e.type === 'ended' && !this.$el[loopKey])) {
+                    queue.delete(this.$el);
                 }
+
+                playNextQueued();
             },
         },
     ],
@@ -95,33 +147,138 @@ export default {
         }),
 
         intersection({
-            filter: ({ $el, autoplay }) => autoplay !== 'hover' && $el.preload !== 'none',
-            handler([{ isIntersecting, target }]) {
+            filter: ({ $el, manualControl }) => !manualControl && $el.preload !== 'none',
+            handler([{ isIntersecting }]) {
                 if (!document.fullscreenElement) {
                     if (isIntersecting) {
                         if (this.autoplay) {
-                            play(target);
+                            this._autoplay();
                         }
                     } else {
-                        pauseHover(target, this.restart);
+                        this.pause();
                     }
                 }
             },
             args: { intersecting: false },
-            options: ({ $el, autoplay }) => ({
+            options: ({ $el, autoplay, inviewMargin }) => ({
                 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) {
+                this.$el.currentTime = percent * duration;
+            }
+        },
+
+        events: ['scroll', 'resize'],
+    },
+
+    methods: {
+        _autoplay() {
+            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                this.pause();
+
+                if (isTag(this.$el, 'video')) {
+                    this.$el.currentTime = this.reducedMotionTime;
+                }
+            } else {
+                this.play();
+            }
+        },
+
+        play() {
+            if (this.inviewQueued) {
+                queue.set(this.$el, this.inviewQueued);
+                playNextQueued();
+            } else {
+                play(this.$el);
+            }
+        },
+
+        pause() {
+            pause(this.$el);
+
+            queue.delete(this.$el);
+
+            if (this.restart) {
+                this.$el.currentTime = 0;
+            }
+        },
+    },
 };
 
 function isPlaying(videoEl) {
     return !videoEl.paused && !videoEl.ended;
 }
 
-function pauseHover(el, restart) {
-    pause(el);
-    if (restart && isTag(el, 'video')) {
-        el.currentTime = 0;
+const queue = new Map();
+const played = new WeakMap();
+
+let frame;
+async function playNextQueued() {
+    cancelAnimationFrame(frame);
+    await new Promise((resolve) => (frame = requestAnimationFrame(resolve)));
+
+    const getPlayed = (el) => played.get(el) ?? 0;
+    const videos = shuffle(queue.keys()).sort((a, b) => getPlayed(a) - getPlayed(b));
+
+    for (const el of videos) {
+        const maxQueued = queue.get(el);
+
+        if (isPlaying(el) || videos.filter(isPlaying).length / queue.size >= maxQueued) {
+            continue;
+        }
+
+        played.set(el, getPlayed(el) + 1);
+        play(el);
+    }
+}
+
+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/connect.js

@@ -0,0 +1,57 @@
+import { children, hasClass, isTag, queryAll, toArray } from 'uikit-util';
+import { lazyload } from '../api/observables';
+import Togglable from '../mixin/togglable';
+
+export default {
+    mixins: [Togglable],
+
+    props: {
+        connect: String,
+    },
+
+    data: {
+        connect: '',
+        cls: 'uk-active',
+    },
+
+    computed: {
+        connects: {
+            get: ({ connect }, $el) => (connect ? queryAll(connect, $el) : []),
+            observe: ({ connect }) => connect,
+        },
+
+        connectChildren() {
+            return this.connects.flatMap((el) => children(el));
+        },
+    },
+
+    watch: {
+        connects(connects) {
+            for (const el of connects) {
+                if (isTag(el, 'ul')) {
+                    el.role = 'presentation';
+                }
+            }
+        },
+    },
+
+    observe: lazyload({ targets: ({ connectChildren }) => connectChildren }),
+
+    methods: {
+        showConnects(index, animate) {
+            const toggle = async ({ children }) => {
+                const actives = toArray(children).filter(
+                    (child, i) => i !== index && hasClass(child, this.cls),
+                );
+
+                if (await this.toggleElement(actives, false, animate)) {
+                    if (!hasClass(children[index], this.cls)) {
+                        await this.toggleElement(children[index], true, animate);
+                    }
+                }
+            };
+
+            return Promise.all(this.connects.map(toggle));
+        },
+    },
+};

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

@@ -2,20 +2,12 @@ import { css } from 'uikit-util';
 
 export default {
     slide: {
-        show(dir) {
-            return [{ transform: translate(dir * -100) }, { transform: translate() }];
-        },
+        percent: translated,
 
-        percent(current) {
-            return translated(current);
-        },
-
-        translate(percent, dir) {
-            return [
-                { transform: translate(dir * -100 * percent) },
-                { transform: translate(dir * 100 * (1 - percent)) },
-            ];
-        },
+        translate: (percent, dir) => [
+            { 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, show = noop } = animation;
-    const props = show(dir);
+    const { percent, translate } = animation;
+    const props = translate(1, dir);
 
     const { promise, resolve } = withResolvers();
 

package/src/js/mixin/modal.js

@@ -229,11 +229,12 @@ export default {
     },
 };
 
+const rejectKey = Symbol();
 function animate(el, show, { transitionElement, _toggle }) {
     return new Promise((resolve, reject) =>
         once(el, 'show hide', () => {
-            el._reject?.();
-            el._reject = reject;
+            el[rejectKey]?.();
+            el[rejectKey] = reject;
 
             _toggle(el, show);
 
@@ -257,7 +258,7 @@ function animate(el, show, { transitionElement, _toggle }) {
                 toMs(css(transitionElement, 'transitionDuration')),
             );
         }),
-    ).then(() => delete el._reject);
+    ).then(() => delete el[rejectKey]);
 }
 
 function toMs(time) {

package/src/js/mixin/parallax.js

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

package/src/js/mixin/position.js

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

package/src/js/mixin/scroll-driven.js

@@ -0,0 +1,57 @@
+import { query, scrolledOver, toPx } from 'uikit-util';
+import { resize, scroll } from '../api/observables';
+import { ease } from './parallax';
+
+export default {
+    props: {
+        parallaxTarget: Boolean,
+        parallaxStart: String,
+        parallaxEnd: String,
+        parallaxEasing: Number,
+    },
+
+    data: {
+        parallaxTarget: false,
+        parallaxStart: 0,
+        parallaxEnd: 0,
+        parallaxEasing: 0,
+    },
+
+    observe: [
+        resize({
+            target: ({ $el, parallaxTarget }) => [$el, parallaxTarget],
+            filter: ({ parallax }) => parallax,
+        }),
+        scroll({ filter: ({ parallax }) => parallax }),
+    ],
+
+    computed: {
+        parallaxTargetFallback: ($props, $el) => $el,
+
+        parallaxTarget({ parallaxTarget }, $el) {
+            return (parallaxTarget && query(parallaxTarget, $el)) || this.parallaxTargetFallback;
+        },
+    },
+
+    update: {
+        read() {
+            if (!this.parallax) {
+                return;
+            }
+
+            const target = this.parallaxTarget;
+
+            if (!target) {
+                return;
+            }
+
+            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 { percent };
+        },
+
+        events: ['scroll', 'resize'],
+    },
+};

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

@@ -35,7 +35,7 @@ export default {
         nav: ({ selNav }, $el) => $$(selNav, $el),
 
         navChildren() {
-            return this.nav.map((nav) => children(nav)).flat();
+            return this.nav.flatMap((nav) => children(nav));
         },
 
         selNavItem: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,

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

@@ -1,59 +1,30 @@
-import { hasClass, includes, query, scrolledOver, toPx, trigger } from 'uikit-util';
-import { resize, scroll } from '../api/observables';
-import { ease } from './parallax';
+import { hasClass, includes, trigger } from 'uikit-util';
+import ScrollDriven from './scroll-driven';
 
 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: {
-        parallaxTarget({ parallaxTarget }, $el) {
-            return (parallaxTarget && query(parallaxTarget, $el)) || this.list;
+        parallaxTargetFallback() {
+            return this.list;
         },
     },
 
     update: {
-        read() {
+        write({ percent }) {
             if (!this.parallax) {
-                return false;
-            }
-
-            const target = this.parallaxTarget;
-
-            if (!target) {
-                return false;
+                return;
             }
 
-            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 [prevIndex, slidePercent] = this.getIndexAt(percent);
 
             const nextIndex = this.getValidIndex(prevIndex + Math.ceil(slidePercent));
 

package/src/js/mixin/togglable.js

@@ -9,6 +9,7 @@ import {
     isBoolean,
     isFunction,
     isVisible,
+    pick,
     removeClass,
     startsWith,
     toFloat,
@@ -163,20 +164,18 @@ async function toggleTransition(el, show, { animation, duration, velocity, trans
         _toggle(el, true);
     }
 
-    const prevProps = Object.fromEntries(
-        [
-            'padding',
-            'border',
-            'width',
-            'height',
-            'minWidth',
-            'minHeight',
-            'overflowY',
-            'overflowX',
-            marginProp,
-            marginStartProp,
-        ].map((key) => [key, el.style[key]]),
-    );
+    const prevProps = pick(el.style, [
+        'padding',
+        'border',
+        'width',
+        'height',
+        'minWidth',
+        'minHeight',
+        'overflowY',
+        'overflowX',
+        marginProp,
+        marginStartProp,
+    ]);
 
     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);
-    } else {
-        for (const el of toNodes(element)) {
-            if (value === null) {
-                removeAttr(el, name);
-            } else {
-                el.setAttribute(name, value);
-            }
+    }
+
+    for (const el of toNodes(element)) {
+        if (value === null) {
+            removeAttr(el, name);
+        } else {
+            el.setAttribute(name, value);
         }
     }
 }

package/src/js/util/class.js

@@ -47,7 +47,7 @@ export function toggleClass(element, cls, force) {
 function toClasses(str) {
     return str
         ? isArray(str)
-            ? str.map(toClasses).flat()
+            ? str.flatMap(toClasses)
             : String(str).split(' ').filter(Boolean)
         : [];
 }

package/src/js/util/dom.js

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

package/src/js/util/lang.js

@@ -177,7 +177,7 @@ export function uniqueBy(array, prop) {
 }
 
 export function pick(obj, props) {
-    return props.reduce((res, prop) => ({ ...res, [prop]: obj[prop] }), {});
+    return Object.fromEntries(props.map((key) => [key, obj[key]]));
 }
 
 export function clamp(number, min = 0, max = 1) {

package/src/js/util/player.js

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