uikit 3.25.20-dev.e4f47fc → 3.25.20

package/src/js/core/video.js

@@ -1,6 +1,5 @@
 import {
     hasAttr,
-    isFocusable,
     isTag,
     isTouch,
     mute,
@@ -12,50 +11,26 @@ 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';
         }
@@ -66,11 +41,7 @@ export default {
 
         if (this.autoplay === 'hover') {
             if (isVideo) {
-                this.hoverTarget = query(this.hoverTarget, this.$el) || this.$el;
-
-                if (!isFocusable(this.hoverTarget)) {
-                    this.hoverTarget.tabIndex = 0;
-                }
+                this.$el.tabIndex = 0;
             } else {
                 this.autoplay = true;
             }
@@ -82,29 +53,19 @@ export default {
         }
     },
 
-    disconnected() {
-        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);
                 }
             },
         },
@@ -112,27 +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._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);
+                    pauseHover(this.$el, this.restart);
                 }
-
-                playNextQueued();
             },
         },
     ],
@@ -147,138 +95,33 @@ export default {
         }),
 
         intersection({
-            filter: ({ $el, manualControl }) => !manualControl && $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._autoplay();
+                            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) {
-                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;
 }
 
-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;
+function pauseHover(el, restart) {
+    pause(el);
+    if (restart && isTag(el, 'video')) {
+        el.currentTime = 0;
     }
-
-    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/modal.js

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

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-nav.js

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

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/class.js

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

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

@@ -177,7 +177,7 @@ export function uniqueBy(array, prop) {
 }
 
 export function pick(obj, props) {
-    return Object.fromEntries(props.map((key) => [key, obj[key]]));
+    return props.reduce((res, prop) => ({ ...res, [prop]: obj[prop] }), {});
 }
 
 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 /\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\/.*/.test(
-        el.src,
+    return !!el.src.match(
+        /\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\/.*/,
     );
 }
 
 function isVimeo(el) {
-    return /vimeo\.com\/video\/.*/.test(el.src);
+    return !!el.src.match(/vimeo\.com\/video\/.*/);
 }
 
 async function call(el, cmd) {
@@ -60,7 +60,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,18 +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)) {
-            return Object.fromEntries(property.map((prop) => [prop, css(element, prop)]));
+            const props = {};
+            for (const prop of property) {
+                props[prop] = css(element, prop);
+            }
+            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) {