uikit 3.25.26 → 3.25.27-dev.9e97c1f

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.25.26",
+    "version": "3.25.27-dev.9e97c1f",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/api/component.js

@@ -48,11 +48,10 @@ export function createComponent(name, element, data, ...args) {
         const instance = getComponent(element, name);
 
         if (instance) {
-            if (data) {
-                instance.$destroy();
-            } else {
+            if (!data) {
                 return instance;
             }
+            instance.$destroy();
         }
 
         return new Component({ el: element, data });

package/src/js/api/observables.js

@@ -36,11 +36,9 @@ export function mutation(options) {
 export function lazyload(options = {}) {
     return intersection({
         handler: function (entries, observer) {
-            const { targets = this.$el, preload = 5 } = options;
+            const { targets = this.$el, preload = 5, media = false } = options;
             for (const el of toNodes(isFunction(targets) ? targets(this) : targets)) {
-                $$('[loading="lazy"]', el)
-                    .slice(0, preload - 1)
-                    .forEach((el) => removeAttr(el, 'loading'));
+                (media ? preloadMedia : loadLazyElements)(el, preload);
             }
 
             for (const { isIntersecting, target } of entries) {
@@ -51,6 +49,20 @@ export function lazyload(options = {}) {
     });
 }
 
+export function preloadMedia(el, preload = 5) {
+    loadLazyElements(el, preload);
+
+    for (const video of $$('video[preload="none"]', el)) {
+        video.preload = '';
+    }
+}
+
+function loadLazyElements(el, preload) {
+    $$('[loading="lazy"]', el)
+        .slice(0, preload - 1)
+        .forEach((el) => removeAttr(el, 'loading'));
+}
+
 export function viewport(options) {
     return observe((target, handler) => observeViewportResize(handler), options, 'resize');
 }

package/src/js/api/options.js

@@ -153,11 +153,14 @@ export function parseOptions(options, args = []) {
 export function coerce(type, value) {
     if (type === Boolean) {
         return toBoolean(value);
-    } else if (type === Number) {
+    }
+    if (type === Number) {
         return toNumber(value);
-    } else if (type === 'list') {
+    }
+    if (type === 'list') {
         return toList(value);
-    } else if (type === Object && isString(value)) {
+    }
+    if (type === Object && isString(value)) {
         return parseOptions(value);
     }
 

package/src/js/api/props.js

@@ -67,9 +67,7 @@ function getProps(opts) {
 
 const getAttributes = memoize((id, props) => {
     const attributes = Object.keys(props);
-    const filter = attributes
-        .concat(id)
-        .flatMap((key) => [hyphenate(key), `data-${hyphenate(key)}`]);
+    const filter = [...attributes, id].flatMap((key) => [hyphenate(key), `data-${hyphenate(key)}`]);
     return { attributes, filter };
 });
 

package/src/js/api/state.js

@@ -43,14 +43,13 @@ function initMethods(instance) {
 
 function normalizeData({ data = {} }, { args = [], props = {} }) {
     if (isArray(data)) {
-        data = data.slice(0, args.length).reduce((data, value, index) => {
-            if (isPlainObject(value)) {
-                assign(data, value);
-            } else {
-                data[args[index]] = value;
-            }
-            return data;
-        }, {});
+        data = data
+            .slice(0, args.length)
+            .reduce(
+                (data, value, index) =>
+                    assign(data, isPlainObject(value) ? value : { [args[index]]: value }),
+                {},
+            );
     }
 
     for (const key in data) {

package/src/js/components/index.js

@@ -2,6 +2,7 @@ export { default as Countdown } from './countdown';
 export { default as Filter } from './filter';
 export { default as Lightbox } from './lightbox';
 export { default as LightboxPanel } from './lightbox-panel';
+export { default as Marquee } from './marquee';
 export { default as Notification } from './notification';
 export { default as Parallax } from './parallax';
 export { default as Slider } from './slider';

package/src/js/components/internal/lightbox-animations.js

@@ -5,36 +5,17 @@ import { scale3d } from './slideshow-animations';
 export default {
     ...Animations,
     fade: {
-        show() {
-            return [{ opacity: 0 }, { opacity: 1 }];
-        },
+        percent: (current) => 1 - css(current, 'opacity'),
 
-        percent(current) {
-            return 1 - css(current, 'opacity');
-        },
-
-        translate(percent) {
-            return [{ opacity: 1 - percent }, { opacity: percent }];
-        },
+        translate: (percent) => [{ opacity: 1 - percent }, { opacity: percent }],
     },
 
     scale: {
-        show() {
-            return [
-                { opacity: 0, transform: scale3d(1 - 0.2) },
-                { opacity: 1, transform: scale3d(1) },
-            ];
-        },
-
-        percent(current) {
-            return 1 - css(current, 'opacity');
-        },
+        percent: (current) => 1 - css(current, 'opacity'),
 
-        translate(percent) {
-            return [
-                { opacity: 1 - percent, transform: scale3d(1 - 0.2 * percent) },
-                { opacity: percent, transform: scale3d(1 - 0.2 + 0.2 * percent) },
-            ];
-        },
+        translate: (percent) => [
+            { opacity: 1 - percent, transform: scale3d(1 - 0.2 * percent) },
+            { opacity: percent, transform: scale3d(1 - 0.2 + 0.2 * percent) },
+        ],
     },
 };

package/src/js/components/internal/slider-preload.js

@@ -4,6 +4,7 @@ export default {
     observe: lazyload({
         target: ({ slides }) => slides,
         targets: (instance) => instance.getAdjacentSlides(),
+        media: true,
     }),
 
     methods: {

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

@@ -4,55 +4,24 @@ import Animations, { translate, translated } from '../../mixin/internal/slidesho
 export default {
     ...Animations,
     fade: {
-        show() {
-            return [{ opacity: 0, zIndex: 0 }, { zIndex: -1 }];
-        },
-
-        percent(current) {
-            return 1 - css(current, 'opacity');
-        },
-
-        translate(percent) {
-            return [{ opacity: 1 - percent, zIndex: 0 }, { zIndex: -1 }];
-        },
+        percent: (current) => 1 - css(current, 'opacity'),
+        translate: (percent) => [{ opacity: 1 - percent, zIndex: 0 }, { zIndex: -1 }],
     },
 
     scale: {
-        show() {
-            return [{ opacity: 0, transform: scale3d(1 + 0.5), zIndex: 0 }, { zIndex: -1 }];
-        },
-
-        percent(current) {
-            return 1 - css(current, 'opacity');
-        },
+        percent: (current) => 1 - css(current, 'opacity'),
 
-        translate(percent) {
-            return [
-                { opacity: 1 - percent, transform: scale3d(1 + 0.5 * percent), zIndex: 0 },
-                { zIndex: -1 },
-            ];
-        },
+        translate: (percent) => [
+            { opacity: 1 - percent, transform: scale3d(1 + 0.5 * percent), zIndex: 0 },
+            { zIndex: -1 },
+        ],
     },
 
     pull: {
-        show(dir) {
-            return dir < 0
-                ? [
-                      { transform: translate(30), zIndex: -1 },
-                      { transform: translate(), zIndex: 0 },
-                  ]
-                : [
-                      { transform: translate(-100), zIndex: 0 },
-                      { transform: translate(), zIndex: -1 },
-                  ];
-        },
+        percent: (current, next, dir) => (dir < 0 ? 1 - translated(next) : translated(current)),
 
-        percent(current, next, dir) {
-            return dir < 0 ? 1 - translated(next) : translated(current);
-        },
-
-        translate(percent, dir) {
-            return dir < 0
+        translate: (percent, dir) =>
+            dir < 0
                 ? [
                       { transform: translate(30 * percent), zIndex: -1 },
                       { transform: translate(-100 * (1 - percent)), zIndex: 0 },
@@ -60,29 +29,14 @@ export default {
                 : [
                       { transform: translate(-percent * 100), zIndex: 0 },
                       { transform: translate(30 * (1 - percent)), zIndex: -1 },
-                  ];
-        },
+                  ],
     },
 
     push: {
-        show(dir) {
-            return dir < 0
-                ? [
-                      { transform: translate(100), zIndex: 0 },
-                      { transform: translate(), zIndex: -1 },
-                  ]
-                : [
-                      { transform: translate(-30), zIndex: -1 },
-                      { transform: translate(), zIndex: 0 },
-                  ];
-        },
-
-        percent(current, next, dir) {
-            return dir > 0 ? 1 - translated(next) : translated(current);
-        },
+        percent: (current, next, dir) => (dir > 0 ? 1 - translated(next) : translated(current)),
 
-        translate(percent, dir) {
-            return dir < 0
+        translate: (percent, dir) =>
+            dir < 0
                 ? [
                       { transform: translate(percent * 100), zIndex: 0 },
                       { transform: translate(-30 * (1 - percent)), zIndex: -1 },
@@ -90,8 +44,7 @@ export default {
                 : [
                       { transform: translate(-30 * percent), zIndex: -1 },
                       { transform: translate(100 * (1 - percent)), zIndex: 0 },
-                  ];
-        },
+                  ],
     },
 };
 

package/src/js/components/lightbox-panel.js

@@ -24,7 +24,7 @@ import {
 import { wrapInPicture } from '../core/img';
 import Modal from '../mixin/modal';
 import Slideshow from '../mixin/slideshow';
-import { keyMap } from '../util/keys';
+import { getNavigationIndex } from '../util/keys';
 import Animations from './internal/lightbox-animations';
 
 export default {
@@ -212,18 +212,7 @@ export default {
                     return;
                 }
 
-                let i = -1;
-
-                if (keyCode === keyMap.LEFT) {
-                    i = 'previous';
-                } else if (keyCode === keyMap.RIGHT) {
-                    i = 'next';
-                } else if (keyCode === keyMap.HOME) {
-                    i = 0;
-                } else if (keyCode === keyMap.END) {
-                    i = 'last';
-                }
-
+                const i = getNavigationIndex(keyCode);
                 if (~i) {
                     this.show(i);
                 }
@@ -280,103 +269,23 @@ export default {
                     return;
                 }
 
-                let matches;
-                const iframeAttrs = {
-                    allowfullscreen: '',
-                    style: 'max-width: 100%; box-sizing: border-box;',
-                    'uk-responsive': '',
-                    'uk-video': Boolean(this.videoAutoplay),
-                };
-
-                // Image
-                if (type === 'image' || isImage(src)) {
-                    const img = createEl('img');
-
-                    wrapInPicture(img, item.sources);
-                    attr(img, {
-                        src,
-                        ...pick(item, ['alt', 'srcset', 'sizes']),
-                        ...attrs,
-                    });
-
-                    on(img, 'load', () => this.setItem(item, parent(img) || img));
-                    on(img, 'error', () => this.setError(item));
-
-                    // Video
-                } else if (type === 'video' || isVideo(src)) {
-                    const inline = this.videoAutoplay === 'inline';
-                    const video = createEl('video', {
-                        src,
-                        playsinline: '',
-                        controls: inline ? null : '',
-                        loop: inline ? '' : null,
-                        muted: inline ? '' : null,
-                        poster: this.videoAutoplay ? null : item.poster,
-                        'uk-video': Boolean(this.videoAutoplay),
-                        ...attrs,
-                    });
-
-                    on(video, 'loadedmetadata', () => this.setItem(item, video));
-                    on(video, 'error', () => this.setError(item));
-
-                    // Iframe
-                } else if (type === 'iframe' || src.match(/\.(html|php)($|\?)/i)) {
-                    this.setItem(
-                        item,
-                        createEl('iframe', {
-                            src,
-                            allowfullscreen: '',
-                            class: 'uk-lightbox-iframe',
-                            ...attrs,
-                        }),
-                    );
-
-                    // YouTube
-                } else if (
-                    (matches = src.match(
-                        /\/\/(?:.*?youtube(-nocookie)?\..*?(?:[?&]v=|\/shorts\/)|youtu\.be\/)([\w-]{11})[&?]?(.*)?/,
-                    ))
-                ) {
-                    this.setItem(
-                        item,
-                        createEl('iframe', {
-                            src: `https://www.youtube${matches[1] || ''}.com/embed/${matches[2]}${
-                                matches[3] ? `?${matches[3]}` : ''
-                            }`,
-                            width: 1920,
-                            height: 1080,
-                            ...iframeAttrs,
-                            ...attrs,
-                        }),
-                    );
-
-                    // Vimeo
-                } else if ((matches = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/))) {
-                    try {
-                        const { height, width } = await (
-                            await fetch(
-                                `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURI(
-                                    src,
-                                )}`,
-                                { credentials: 'omit' },
-                            )
-                        ).json();
-
-                        this.setItem(
-                            item,
-                            createEl('iframe', {
-                                src: `https://player.vimeo.com/video/${matches[1]}${
-                                    matches[2] ? `?${matches[2]}` : ''
-                                }`,
-                                width,
-                                height,
-                                ...iframeAttrs,
-                                ...attrs,
-                            }),
-                        );
-                    } catch {
-                        this.setError(item);
+                try {
+                    for (const loader of [
+                        loadImage,
+                        loadVideo,
+                        loadIframe,
+                        loadYouTube,
+                        loadVimeo,
+                    ]) {
+                        const content = await loader({ src, type, attrs, item, cmp: this });
+
+                        if (content) {
+                            this.setItem(item, content);
+                            return;
+                        }
                     }
+                } catch {
+                    this.setError(item);
                 }
             },
         },
@@ -452,6 +361,111 @@ function createEl(tag, attrs) {
     return el;
 }
 
+async function loadImage({ src, type, attrs, item }) {
+    if (type !== 'image' && !isImage(src)) {
+        return;
+    }
+
+    const img = createEl('img');
+
+    wrapInPicture(img, item.sources);
+    attr(img, {
+        src,
+        ...pick(item, ['alt', 'srcset', 'sizes']),
+        ...attrs,
+    });
+
+    await img.decode();
+
+    return parent(img) || img;
+}
+
+function loadVideo({ src, type, attrs, item, cmp }) {
+    if (type !== 'video' && !isVideo(src)) {
+        return;
+    }
+
+    const inline = cmp.videoAutoplay === 'inline';
+    const video = createEl('video', {
+        src,
+        playsinline: '',
+        controls: inline ? null : '',
+        loop: inline ? '' : null,
+        muted: inline ? '' : null,
+        poster: cmp.videoAutoplay ? null : item.poster,
+        'uk-video': Boolean(cmp.videoAutoplay),
+        ...attrs,
+    });
+
+    return new Promise((resolve, reject) => {
+        on(video, 'loadedmetadata', () => resolve(video));
+        on(video, 'error', reject);
+    });
+}
+
+function loadIframe({ src, type, attrs }) {
+    if (type !== 'iframe' && !/\.(html|php)($|\?)/i.test(src)) {
+        return;
+    }
+
+    return createEl('iframe', {
+        src,
+        allowfullscreen: '',
+        class: 'uk-lightbox-iframe',
+        ...attrs,
+    });
+}
+
+function loadYouTube({ src, attrs, cmp }) {
+    const matches = src.match(
+        /\/\/(?:.*?youtube(-nocookie)?\..*?(?:[?&]v=|\/shorts\/)|youtu\.be\/)([\w-]{11})[&?]?(.*)?/,
+    );
+
+    if (!matches) {
+        return;
+    }
+
+    return createEl('iframe', {
+        src: `https://www.youtube${matches[1] || ''}.com/embed/${matches[2]}${matches[3] ? `?${matches[3]}` : ''}`,
+        width: 1920,
+        height: 1080,
+        ...getIframeAttrs(cmp),
+        ...attrs,
+    });
+}
+
+async function loadVimeo({ src, attrs, cmp }) {
+    const matches = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/);
+
+    if (!matches) {
+        return;
+    }
+
+    const { height, width } = await (
+        await fetch(
+            `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURIComponent(src)}`,
+            { credentials: 'omit' },
+        )
+    ).json();
+
+    return createEl('iframe', {
+        src: `https://player.vimeo.com/video/${matches[1]}${matches[2] ? `?${matches[2]}` : ''}`,
+        width,
+        height,
+        ...getIframeAttrs(cmp),
+        ...attrs,
+    });
+}
+
+function getIframeAttrs(cmp) {
+    return {
+        allowfullscreen: '',
+        style: 'max-width: 100%; box-sizing: border-box;',
+        'uk-responsive': '',
+        'uk-video': Boolean(cmp.videoAutoplay),
+    };
+}
+
 function toThumbnavItem(item, videoAutoplay) {
     const el =
         item.poster || (item.thumb && (item.type === 'image' || isImage(item.thumb)))

package/src/js/components/lightbox.js

@@ -98,14 +98,11 @@ function ensureThumb(toggles, items) {
             continue;
         }
 
-        const parent = parents(toggle)
-            .reverse()
-            .concat(toggle)
-            .find(
-                (parent) =>
-                    this.$el.contains(parent) &&
-                    (parent === toggle || $$(this.toggle, parent).length === 1),
-            );
+        const parent = [...parents(toggle).reverse(), toggle].find(
+            (parent) =>
+                this.$el.contains(parent) &&
+                (parent === toggle || $$(this.toggle, parent).length === 1),
+        );
 
         if (!parent) {
             continue;