uikit 3.21.14-dev.028df7be8 → 3.21.14-dev.2e8a07c7e

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

@@ -1,64 +1,123 @@
 import {
     $,
+    $$,
+    Transition,
     addClass,
     append,
     attr,
     fragment,
     getIndex,
     html,
+    isTag,
+    matches,
     on,
+    parent,
+    pick,
     pointerDown,
     pointerMove,
+    remove,
     removeClass,
-    Transition,
+    toggleClass,
     trigger,
+    wrapAll,
 } from 'uikit-util';
+import { wrapInPicture } from '../core/img';
 import Modal from '../mixin/modal';
 import Slideshow from '../mixin/slideshow';
 import { keyMap } from '../util/keys';
 import Animations from './internal/lightbox-animations';
 
 export default {
+    i18n: {
+        counter: '%s / %s',
+    },
+
     mixins: [Modal, Slideshow],
 
     functional: true,
 
     props: {
-        delayControls: Number,
+        counter: Boolean,
         preload: Number,
+        nav: Boolean,
+        slidenav: Boolean,
+        delayControls: Number,
         videoAutoplay: Boolean,
         template: String,
     },
 
     data: () => ({
+        counter: false,
         preload: 1,
-        videoAutoplay: false,
+        nav: false,
+        slidenav: true,
         delayControls: 3000,
+        videoAutoplay: false,
         items: [],
         cls: 'uk-open',
         clsPage: 'uk-lightbox-page',
-        selList: '.uk-lightbox-items',
+        clsFit: 'uk-lightbox-items-fit',
+        clsZoom: 'uk-lightbox-zoom',
         attrItem: 'uk-lightbox-item',
+        selList: '.uk-lightbox-items',
         selClose: '.uk-close-large',
+        selNav: '.uk-lightbox-thumbnav, .uk-lightbox-dotnav',
         selCaption: '.uk-lightbox-caption',
+        selCounter: '.uk-lightbox-counter',
         pauseOnHover: false,
         velocity: 2,
         Animations,
         template: `<div class="uk-lightbox uk-overflow-hidden">
                         <div class="uk-lightbox-items"></div>
-                        <div class="uk-lightbox-toolbar uk-position-top uk-text-right uk-transition-slide-top uk-transition-opaque">
-                            <button class="uk-lightbox-toolbar-icon uk-close-large" type="button" uk-close></button>
-                         </div>
-                        <a class="uk-lightbox-button uk-position-center-left uk-position-medium uk-transition-fade" href uk-slidenav-previous uk-lightbox-item="previous"></a>
-                        <a class="uk-lightbox-button uk-position-center-right uk-position-medium uk-transition-fade" href uk-slidenav-next uk-lightbox-item="next"></a>
-                        <div class="uk-lightbox-toolbar uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque"></div>
+                        <div class="uk-position-top-right uk-position-small uk-transition-fade" uk-inverse>
+                            <button class="uk-lightbox-close uk-close-large" type="button" uk-close></button>
+                        </div>
+                        <div class="uk-lightbox-slidenav uk-position-center-left uk-position-medium uk-transition-fade" uk-inverse>
+                            <a href uk-slidenav-previous uk-lightbox-item="previous"></a>
+                        </div>
+                        <div class="uk-lightbox-slidenav uk-position-center-right uk-position-medium uk-transition-fade" uk-inverse>
+                            <a href uk-slidenav-next uk-lightbox-item="next"></a>
+                        </div>
+                        <div class="uk-position-center-right uk-position-medium uk-transition-fade" uk-inverse style="max-height: 90vh; overflow: auto;">
+                            <ul class="uk-lightbox-thumbnav uk-lightbox-thumbnav-vertical uk-thumbnav uk-thumbnav-vertical"></ul>
+                            <ul class="uk-lightbox-dotnav uk-dotnav uk-dotnav-vertical"></ul>
+                        </div>
+                        <div class="uk-lightbox-counter uk-text-large uk-position-top-left uk-position-small uk-transition-fade" uk-inverse></div>
+                        <div class="uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque"></div>
                     </div>`,
     }),
 
     created() {
-        const $el = $(this.template);
+        let $el = $(this.template);
+
+        if (isTag($el, 'template')) {
+            $el = fragment(html($el));
+        }
+
         const list = $(this.selList, $el);
-        this.items.forEach(() => append(list, '<div>'));
+        const navType = this.$props.nav;
+
+        remove($$(this.selNav, $el).filter((el) => !matches(el, `.uk-${navType}`)));
+
+        for (const [i, item] of this.items.entries()) {
+            append(list, '<div>');
+            if (navType === 'thumbnav') {
+                wrapAll(
+                    toThumbnavItem(item, this.videoAutoplay),
+                    append($(this.selNav, $el), `<li uk-lightbox-item="${i}"><a href></a></li>`),
+                );
+            }
+        }
+
+        if (!this.slidenav) {
+            remove($$('.uk-lightbox-slidenav', $el));
+        }
+
+        if (!this.counter) {
+            remove($(this.selCounter, $el));
+        }
+
+        addClass(list, this.clsFit);
 
         const close = $('[uk-close]', $el);
         const closeLabel = this.t('close');
@@ -71,10 +130,18 @@ export default {
 
     events: [
         {
-            name: `${pointerMove} ${pointerDown} keydown`,
+            name: 'click',
 
-            handler() {
-                this.showControls();
+            self: true,
+
+            filter: ({ bgClose }) => bgClose,
+
+            delegate: ({ selList }) => `${selList} > *`,
+
+            handler(e) {
+                if (!e.defaultPrevented) {
+                    this.hide();
+                }
             },
         },
 
@@ -83,15 +150,25 @@ export default {
 
             self: true,
 
-            delegate: ({ selList }) => `${selList} > *`,
+            delegate: ({ clsZoom }) => `.${clsZoom}`,
 
             handler(e) {
                 if (!e.defaultPrevented) {
-                    this.hide();
+                    toggleClass(this.list, this.clsFit);
                 }
             },
         },
 
+        {
+            name: `${pointerMove} ${pointerDown} keydown`,
+
+            filter: ({ delayControls }) => delayControls,
+
+            handler() {
+                this.showControls();
+            },
+        },
+
         {
             name: 'shown',
 
@@ -157,6 +234,16 @@ export default {
             name: 'beforeitemshow',
 
             handler(e) {
+                html($(this.selCaption, this.$el), this.getItem().caption || '');
+                html(
+                    $(this.selCounter, this.$el),
+                    this.t('counter', this.index + 1, this.slides.length),
+                );
+
+                for (let j = -this.preload; j <= this.preload; j++) {
+                    this.loadItem(this.index + j);
+                }
+
                 if (this.isToggled()) {
                     return;
                 }
@@ -167,24 +254,12 @@ export default {
 
                 this.toggleElement(this.$el, true, false);
 
-                this.animation = Animations['scale'];
+                this.animation = Animations.scale;
                 removeClass(e.target, this.clsActive);
                 this.stack.splice(1, 0, this.index);
             },
         },
 
-        {
-            name: 'itemshow',
-
-            handler() {
-                html($(this.selCaption, this.$el), this.getItem().caption || '');
-
-                for (let j = -this.preload; j <= this.preload; j++) {
-                    this.loadItem(this.index + j);
-                }
-            },
-        },
-
         {
             name: 'itemshown',
 
@@ -197,9 +272,9 @@ export default {
             name: 'itemload',
 
             async handler(_, item) {
-                const { source: src, type, alt = '', poster, attrs = {} } = item;
+                const { source: src, type, attrs = {} } = item;
 
-                this.setItem(item, '<span uk-spinner></span>');
+                this.setItem(item, '<span uk-spinner uk-inverse></span>');
 
                 if (!src) {
                     return;
@@ -210,26 +285,32 @@ export default {
                     allowfullscreen: '',
                     style: 'max-width: 100%; box-sizing: border-box;',
                     'uk-responsive': '',
-                    'uk-video': `${this.videoAutoplay}`,
+                    'uk-video': `${Boolean(this.videoAutoplay)}`,
                 };
 
                 // Image
-                if (
-                    type === 'image' ||
-                    src.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i)
-                ) {
-                    const img = createEl('img', { src, alt, ...attrs });
-                    on(img, 'load', () => this.setItem(item, img));
+                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' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
+                } else if (type === 'video' || isVideo(src)) {
+                    const inline = this.videoAutoplay === 'inline';
                     const video = createEl('video', {
                         src,
-                        poster,
-                        controls: '',
                         playsinline: '',
-                        'uk-video': `${this.videoAutoplay}`,
+                        controls: inline ? null : '',
+                        poster: this.videoAutoplay ? null : item.poster,
+                        'uk-video': inline ? 'automute: true' : Boolean(this.videoAutoplay),
                         ...attrs,
                     });
 
@@ -297,8 +378,33 @@ export default {
                 }
             },
         },
+
+        {
+            name: 'itemloaded',
+            handler() {
+                this.$emit('resize');
+            },
+        },
     ],
 
+    update: {
+        read() {
+            for (const media of $$(`${this.selList} :not([controls]):is(img,video)`, this.$el)) {
+                toggleClass(
+                    media,
+                    this.clsZoom,
+                    (media.naturalHeight || media.videoHeight) - this.$el.offsetHeight >
+                        Math.max(
+                            0,
+                            (media.naturalWidth || media.videoWidth) - this.$el.offsetWidth,
+                        ),
+                );
+            }
+        },
+
+        events: ['resize'],
+    },
+
     methods: {
         loadItem(index = this.index) {
             const item = this.getItem(index);
@@ -321,12 +427,13 @@ export default {
         },
 
         setError(item) {
-            this.setItem(item, '<span uk-icon="icon: bolt; ratio: 2"></span>');
+            this.setItem(item, '<span uk-icon="icon: bolt; ratio: 2" uk-inverse></span>');
         },
 
         showControls() {
             clearTimeout(this.controlsTimer);
-            this.controlsTimer = setTimeout(this.hideControls, this.delayControls);
+            this.controlsTimer =
+                this.delayControls && setTimeout(this.hideControls, this.delayControls);
 
             addClass(this.$el, 'uk-active', 'uk-transition-active');
         },
@@ -342,3 +449,31 @@ function createEl(tag, attrs) {
     attr(el, attrs);
     return el;
 }
+
+function toThumbnavItem(item, videoAutoplay) {
+    const el =
+        item.poster || (item.thumb && (item.type === 'image' || isImage(item.thumb)))
+            ? createEl('img', { src: item.poster || item.thumb, alt: '' })
+            : item.thumb && (item.type === 'video' || isVideo(item.thumb))
+              ? createEl('video', {
+                    src: item.thumb,
+                    loop: '',
+                    playsinline: '',
+                    'uk-video': `autoplay: ${Boolean(videoAutoplay)}; automute: true`,
+                })
+              : createEl('canvas');
+
+    if (item.thumbRatio) {
+        el.style.aspectRatio = item.thumbRatio;
+    }
+
+    return el;
+}
+
+function isImage(src) {
+    return src?.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i);
+}
+
+function isVideo(src) {
+    return src?.match(/\.(mp4|webm|ogv)($|\?)/i);
+}

package/src/js/components/lightbox.js

@@ -1,7 +1,21 @@
-import { $$, assign, attr, data, findIndex, isElement, isTag, on, uniqueBy } from 'uikit-util';
+import {
+    $,
+    $$,
+    assign,
+    attr,
+    findIndex,
+    isElement,
+    isTag,
+    matches,
+    on,
+    parents,
+    uniqueBy,
+} from 'uikit-util';
 import { parseOptions } from '../api/options';
 import LightboxPanel from './lightbox-panel';
 
+const selDisabled = '.uk-disabled *, .uk-disabled, [disabled]';
+
 export default {
     install,
 
@@ -31,19 +45,27 @@ export default {
     events: {
         name: 'click',
 
-        delegate: ({ toggle }) => `${toggle}:not(.uk-disabled)`,
+        delegate: ({ toggle }) => toggle,
 
         handler(e) {
             if (!e.defaultPrevented) {
                 e.preventDefault();
-                this.show(e.current);
+                if (!matches(e.current, selDisabled)) {
+                    this.show(e.current);
+                }
             }
         },
     },
 
     methods: {
         show(index) {
-            const items = uniqueBy(this.toggles.map(toItem), 'source');
+            let items = this.toggles.map(toItem);
+
+            if (this.nav === 'thumbnav') {
+                ensureThumb.call(this, this.toggles, items);
+            }
+
+            items = uniqueBy(items, 'source');
 
             if (isElement(index)) {
                 const { source } = toItem(index);
@@ -71,11 +93,42 @@ function install(UIkit, Lightbox) {
     assign(Lightbox.props, UIkit.component('lightboxPanel').options.props);
 }
 
+function ensureThumb(toggles, items) {
+    for (const [i, toggle] of Object.entries(toggles)) {
+        if (items[i].thumb) {
+            continue;
+        }
+
+        const parent = parents(toggle)
+            .reverse()
+            .concat(toggle)
+            .find(
+                (parent) =>
+                    this.$el.contains(parent) &&
+                    (parent === toggle || $$(this.toggle, parent).length === 1),
+            );
+
+        if (!parent) {
+            continue;
+        }
+
+        const media = $('img,video', parent);
+
+        if (media) {
+            items[i].thumb = media.currentSrc || media.poster || media.src;
+            items[i].thumbRatio =
+                (media.naturalWidth || media.videoWidth) /
+                (media.naturalHeight || media.videoHeight);
+        }
+    }
+}
+
 function toItem(el) {
     const item = {};
 
-    for (const attr of ['href', 'caption', 'type', 'poster', 'alt', 'attrs']) {
-        item[attr === 'href' ? 'source' : attr] = data(el, attr);
+    for (const attribute of el.getAttributeNames()) {
+        const key = attribute.replace(/^data-/, '');
+        item[key === 'href' ? 'source' : key] = el.getAttribute(attribute);
     }
 
     item.attrs = parseOptions(item.attrs);

package/src/js/components/slideshow.js

@@ -31,8 +31,7 @@ export default {
                 aspectRatio: this.ratio ? this.ratio.replace(':', '/') : undefined,
                 minHeight: this.minHeight,
                 maxHeight: this.maxHeight,
-                minWidth: '100%',
-                maxWidth: '100%',
+                width: '100%',
             });
         },
     },

package/src/js/components/sortable.js

@@ -68,8 +68,8 @@ export default {
     events: {
         name: pointerDown,
         passive: false,
-        handler() {
-            this.init();
+        handler(e) {
+            this.init(e);
         },
     },
 

package/src/js/core/grid.js

@@ -165,7 +165,7 @@ function applyMasonry(rows, gutter, next) {
     let rowHeights = 0;
     for (let row of rows) {
         if (isRtl) {
-            row = row.reverse();
+            row.reverse();
         }
 
         let height = 0;

package/src/js/core/icon.js

@@ -5,6 +5,7 @@ import {
     attr,
     css,
     each,
+    fragment,
     hasAttr,
     hasClass,
     hyphenate,
@@ -35,7 +36,6 @@ import spinner from '../../images/components/spinner.svg';
 import totop from '../../images/components/totop.svg';
 import I18n from '../mixin/i18n';
 import Svg from '../mixin/svg';
-import { stringToSvg } from './svg';
 
 const icons = {
     spinner,
@@ -262,7 +262,7 @@ function getIcon(icon) {
     }
 
     if (!parsed[icon]) {
-        parsed[icon] = stringToSvg(icons[applyRtl(icon)] || icons[icon]);
+        parsed[icon] = fragment(icons[applyRtl(icon)] || icons[icon]);
     }
 
     return parsed[icon].cloneNode(true);

package/src/js/core/img.js

@@ -101,7 +101,7 @@ function setSourceProps(sourceEl, targetEl) {
     for (const prop of srcProps) {
         const value = data(sourceEl, prop);
         if (value) {
-            attr(targetEl, prop.replace(/^(data-)+/, ''), value);
+            attr(targetEl, prop.replace(/data-/g, ''), value);
         }
     }
 }
@@ -111,14 +111,12 @@ function getImageFromElement(el, src, sources) {
 
     wrapInPicture(img, sources);
     setSourceProps(el, img);
-    img.onload = () => {
-        setSrcAttrs(el, img.currentSrc);
-    };
+    img.onload = () => setSrcAttrs(el, img.currentSrc);
     attr(img, 'src', src);
     return img;
 }
 
-function wrapInPicture(img, sources) {
+export function wrapInPicture(img, sources) {
     sources = parseSources(sources);
 
     if (sources.length) {

package/src/js/core/navbar.js

@@ -1,4 +1,4 @@
-import { $$, addClass, css, hasClass, offset, removeClass } from 'uikit-util';
+import { $$, addClass, css, hasClass, offset, parent, removeClass } from 'uikit-util';
 import Dropnav from './dropnav';
 
 const clsNavbarTransparent = 'uk-navbar-transparent';
@@ -56,7 +56,11 @@ export default {
 
             el: ({ dropContainer }) => dropContainer,
 
-            async handler() {
+            async handler(e) {
+                if (parent(e.target) !== this.dropContainer) {
+                    return;
+                }
+
                 await awaitMacroTask();
 
                 if (!this.getActive() && this._transparent) {

package/src/js/core/scrollspy-nav.js

@@ -52,7 +52,7 @@ export default {
     update: [
         {
             read() {
-                const targets = this.links.map((el) => getTargetedElement(el) || el.ownerDocument);
+                const targets = this.links.map((el) => getTargetedElement(el)).filter(Boolean);
 
                 const { length } = targets;
 

package/src/js/core/svg.js

@@ -2,6 +2,7 @@ import {
     addClass,
     attr,
     css,
+    fragment,
     includes,
     isTag,
     memoize,
@@ -94,11 +95,14 @@ const loadSVG = memoize(async (src) => {
         if (startsWith(src, 'data:')) {
             return decodeURIComponent(src.split(',')[1]);
         } else {
-            return (await fetch(src)).text();
+            const response = await fetch(src);
+            if (response.headers.get('Content-Type') === 'image/svg+xml') {
+                return response.text();
+            }
         }
-    } else {
-        return Promise.reject();
     }
+
+    return Promise.reject();
 });
 
 function parseSVG(svg, icon) {
@@ -106,7 +110,7 @@ function parseSVG(svg, icon) {
         svg = parseSymbols(svg)[icon] || svg;
     }
 
-    return stringToSvg(svg);
+    return fragment(svg);
 }
 
 const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
@@ -131,9 +135,3 @@ function applyAnimation(el) {
         css(el, '--uk-animation-stroke', length);
     }
 }
-
-export function stringToSvg(string) {
-    const container = document.createElement('template');
-    container.innerHTML = string;
-    return container.content.firstElementChild;
-}

package/src/js/core/video.js

@@ -3,7 +3,6 @@ import {
     includes,
     isTag,
     isTouch,
-    isVideo,
     mute,
     parent,
     pause,
@@ -78,7 +77,7 @@ export default {
 
     observe: [
         intersection({
-            filter: ({ $el, autoplay }) => autoplay !== 'hover' && isVideo($el),
+            filter: ({ autoplay }) => autoplay !== 'hover',
             handler([{ isIntersecting }]) {
                 if (!document.fullscreenElement) {
                     if (isIntersecting) {
@@ -91,7 +90,9 @@ export default {
                 }
             },
             args: { intersecting: false },
-            options: ({ $el, autoplay }) => ({ root: autoplay === 'inview' ? null : parent($el) }),
+            options: ({ $el, autoplay }) => ({
+                root: autoplay === 'inview' ? null : parent($el).closest(':not(a)'),
+            }),
         }),
     ],
 };

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

@@ -24,10 +24,5 @@ export function translated(el) {
 }
 
 export function translate(value = 0, unit = '%') {
-    value += value ? unit : '';
-    return `translate3d(${value}, 0, 0)`;
-}
-
-export function scale3d(value) {
-    return `scale3d(${value}, ${value}, 1)`;
+    return value ? `translate3d(${value + unit}, 0, 0)` : '';
 }

package/src/js/mixin/modal.js

@@ -53,10 +53,6 @@ export default {
         transitionElement() {
             return this.panel;
         },
-
-        bgClose({ bgClose }) {
-            return bgClose && this.panel;
-        },
     },
 
     connected() {
@@ -266,6 +262,7 @@ function listenForBackgroundClose(modal) {
         if (
             last(active) !== modal ||
             (modal.overlay && !modal.$el.contains(target)) ||
+            !modal.panel ||
             modal.panel.contains(target)
         ) {
             return;