uikit 3.25.26 → 3.25.27-dev.9e97c1f

package/src/js/core/switcher.js

@@ -9,27 +9,23 @@ import {
     getIndex,
     hasClass,
     isNumeric,
-    isTag,
     matches,
     queryAll,
-    toArray,
     toggleClass,
 } from 'uikit-util';
-import { generateId } from '../api/instance';
-import { lazyload, swipe } from '../api/observables';
+import { swipe } from '../api/observables';
+import Connect from '../mixin/connect';
 import { maybeDefaultPreventClick } from '../mixin/event';
-import Togglable from '../mixin/togglable';
-import { keyMap } from '../util/keys';
+import { getNavigationIndex, keyMap } from '../util/keys';
 
 const selDisabled = '.uk-disabled *, .uk-disabled, [disabled]';
 
 export default {
-    mixins: [Togglable],
+    mixins: [Connect],
 
     args: 'connect',
 
     props: {
-        connect: String,
         toggle: String,
         itemNav: String,
         active: Number,
@@ -42,7 +38,6 @@ export default {
         toggle: '> * > :first-child',
         itemNav: false,
         active: 0,
-        cls: 'uk-active',
         attrItem: 'uk-switcher-item',
         selVertical: '.uk-nav',
         followFocus: false,
@@ -50,15 +45,6 @@ export default {
     },
 
     computed: {
-        connects: {
-            get: ({ connect }, $el) => queryAll(connect, $el),
-            observe: ({ connect }) => connect,
-        },
-
-        connectChildren() {
-            return this.connects.flatMap((el) => children(el));
-        },
-
         toggles: ({ toggle }, $el) => $$(toggle, $el),
 
         children(_, $el) {
@@ -95,10 +81,7 @@ export default {
         this.$el.role = 'tablist';
     },
 
-    observe: [
-        lazyload({ targets: ({ connectChildren }) => connectChildren }),
-        swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping }),
-    ],
+    observe: swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping }),
 
     events: [
         {
@@ -126,18 +109,11 @@ export default {
                 const { current, keyCode } = e;
                 const isVertical = matches(this.$el, this.selVertical);
 
-                let i =
-                    keyCode === keyMap.HOME
-                        ? 0
-                        : keyCode === keyMap.END
-                          ? 'last'
-                          : (keyCode === keyMap.LEFT && !isVertical) ||
-                              (keyCode === keyMap.UP && isVertical)
-                            ? 'previous'
-                            : (keyCode === keyMap.RIGHT && !isVertical) ||
-                                (keyCode === keyMap.DOWN && isVertical)
-                              ? 'next'
-                              : -1;
+                const i = getNavigationIndex(
+                    keyCode,
+                    isVertical ? keyMap.UP : keyMap.LEFT,
+                    isVertical ? keyMap.DOWN : keyMap.RIGHT,
+                );
 
                 if (~i) {
                     e.preventDefault();
@@ -180,28 +156,17 @@ export default {
     ],
 
     update() {
-        for (const el of this.connects) {
-            if (isTag(el, 'ul')) {
-                el.role = 'presentation';
-            }
-        }
         attr(children(this.$el), 'role', 'presentation');
 
         for (const index in this.toggles) {
-            const toggle = this.toggles[index];
-            const item = this.connects[0]?.children[index];
+            const controls = this.connects
+                .map(({ children }) => children[index]?.id)
+                .filter(Boolean);
 
-            toggle.role = 'tab';
-
-            if (!item) {
-                continue;
-            }
-
-            toggle.id = generateId(this, toggle);
-            item.id = generateId(this, item);
-
-            attr(toggle, 'aria-controls', item.id);
-            attr(item, { role: 'tabpanel', 'aria-labelledby': toggle.id });
+            attr(this.toggles[index], {
+                role: 'tab',
+                'aria-controls': controls.join(' '),
+            });
         }
         attr(this.$el, 'aria-orientation', matches(this.$el, this.selVertical) ? 'vertical' : null);
     },
@@ -240,16 +205,7 @@ export default {
                 });
             });
 
-            const animate = prev >= 0 && prev !== next;
-            this.connects.forEach(async ({ children }) => {
-                const actives = toArray(children).filter(
-                    (child, i) => i !== next && hasClass(child, this.cls),
-                );
-
-                if (await this.toggleElement(actives, false, animate)) {
-                    await this.toggleElement(children[next], true, animate);
-                }
-            });
+            return this.showConnects(next, prev >= 0 && prev !== next);
         },
     },
 };

package/src/js/core/video.js

@@ -1,8 +1,10 @@
 import {
     hasAttr,
+    isFocusable,
     isTag,
     isTouch,
     mute,
+    observeIntersection,
     parent,
     pause,
     play,
@@ -11,27 +13,62 @@ 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 = isTag(this.$el, 'video');
-        if (this.autoplay === 'inview' && isVideo && !hasAttr(this.$el, 'preload')) {
+        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')
+        ) {
             this.$el.preload = 'none';
         }
 
@@ -40,10 +77,10 @@ export default {
         }
 
         if (this.autoplay === 'hover') {
-            if (isVideo) {
-                this.$el.tabIndex = 0;
-            } else {
-                this.autoplay = true;
+            this.hoverTarget = query(this.hoverTarget, this.$el) || this.$el;
+
+            if (!isFocusable(this.hoverTarget)) {
+                this.hoverTarget.tabIndex = 0;
             }
         }
 
@@ -53,19 +90,44 @@ 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, $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 +135,34 @@ 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);
+                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);
                 }
+
+                playNextQueued();
             },
         },
     ],
@@ -95,33 +177,166 @@ export default {
         }),
 
         intersection({
-            filter: ({ $el, autoplay }) => autoplay !== 'hover' && $el.preload !== 'none',
-            handler([{ isIntersecting, target }]) {
+            filter: ({ $el, interactionDriven }) => !interactionDriven && $el.preload !== 'none',
+            handler([{ isIntersecting }]) {
                 if (!document.fullscreenElement) {
                     if (isIntersecting) {
                         if (this.autoplay) {
-                            play(target);
+                            this.play();
                         }
                     } 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) {
+                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 pauseHover(el, restart) {
-    pause(el);
-    if (restart && isTag(el, 'video')) {
-        el.currentTime = 0;
+function preview($el) {
+    if (!$el.requestVideoFrameCallback) {
+        return;
     }
+
+    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/connect.js

@@ -0,0 +1,90 @@
+import { attr, children, data, hasClass, isTag, queryAll, toArray } from 'uikit-util';
+import App from '../api';
+import { generateId } from '../api/instance';
+import { lazyload } from '../api/observables';
+import Togglable from '../mixin/togglable';
+
+const TogglableComponent = App.extend(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 }),
+
+    update() {
+        for (const index in this.toggles) {
+            const toggle = this.toggles[index];
+            if (!toggle) {
+                continue;
+            }
+
+            toggle.id = generateId(this, toggle);
+
+            for (const { children } of this.connects) {
+                const item = children[index];
+
+                if (item) {
+                    attr(item, {
+                        id: generateId(this, item),
+                        role: 'tabpanel',
+                        'aria-labelledby': toggle.id,
+                    });
+                }
+            }
+        }
+    },
+
+    methods: {
+        showConnects(index, animate) {
+            const toggle = async (el) => {
+                const { children } = el;
+
+                const animation = data(el, 'uk-switcher-animation');
+
+                let togglable = animation
+                    ? new TogglableComponent({ data: { ...this.$props, animation } })
+                    : this;
+
+                const actives = toArray(children).filter(
+                    (child, i) => i !== index && hasClass(child, this.cls),
+                );
+
+                if (await togglable.toggleElement(actives, false, animate)) {
+                    await togglable.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/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'],
+    },
+};