uikit 3.15.24 → 3.15.25-dev.ef4c64c1a

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.15.24",
+    "version": "3.15.25-dev.ef4c64c1a",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/countdown.js

@@ -89,13 +89,13 @@ export default {
 };
 
 function getTimeSpan(date) {
-    const total = date - Date.now();
+    const total = (date - Date.now()) / 1000;
 
     return {
         total,
-        seconds: (total / 1000) % 60,
-        minutes: (total / 1000 / 60) % 60,
-        hours: (total / 1000 / 60 / 60) % 24,
-        days: total / 1000 / 60 / 60 / 24,
+        seconds: total % 60,
+        minutes: (total / 60) % 60,
+        hours: (total / 60 / 60) % 24,
+        days: total / 60 / 60 / 24,
     };
 }

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

@@ -7,7 +7,6 @@ import {
     append,
     attr,
     fragment,
-    getImage,
     getIndex,
     html,
     on,
@@ -213,12 +212,9 @@ export default {
                     type === 'image' ||
                     src.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i)
                 ) {
-                    try {
-                        const { width, height } = await getImage(src, attrs.srcset, attrs.size);
-                        this.setItem(item, createEl('img', { src, width, height, alt, ...attrs }));
-                    } catch (e) {
-                        this.setError(item);
-                    }
+                    const img = createEl('img', { src, alt, ...attrs });
+                    on(img, 'load', () => this.setItem(item, img));
+                    on(img, 'error', () => this.setError(item));
 
                     // Video
                 } else if (type === 'video' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
@@ -228,16 +224,10 @@ export default {
                         controls: '',
                         playsinline: '',
                         'uk-video': `${this.videoAutoplay}`,
+                        ...attrs,
                     });
 
-                    on(video, 'loadedmetadata', () => {
-                        attr(video, {
-                            width: video.videoWidth,
-                            height: video.videoHeight,
-                            ...attrs,
-                        });
-                        this.setItem(item, video);
-                    });
+                    on(video, 'loadedmetadata', () => this.setItem(item, video));
                     on(video, 'error', () => this.setError(item));
 
                     // Iframe
@@ -279,9 +269,7 @@ export default {
                                 `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURI(
                                     src
                                 )}`,
-                                {
-                                    credentials: 'omit',
-                                }
+                                { credentials: 'omit' }
                             )
                         ).json();
 

package/src/js/components/sortable.js

@@ -398,10 +398,9 @@ function findInsertTarget(list, target, placeholder, x, y, sameList) {
         [placeholderRect.top, placeholderRect.bottom]
     );
 
-    const pointerPos = sameRow ? x : y;
-    const lengthProp = sameRow ? 'width' : 'height';
-    const startProp = sameRow ? 'left' : 'top';
-    const endProp = sameRow ? 'right' : 'bottom';
+    const [pointerPos, lengthProp, startProp, endProp] = sameRow
+        ? [x, 'width', 'left', 'right']
+        : [y, 'height', 'top', 'bottom'];
 
     const diff =
         placeholderRect[lengthProp] < rect[lengthProp]

package/src/js/components/tooltip.js

@@ -121,14 +121,9 @@ export default {
                         passive: true,
                     }),
                 ];
-                once(
-                    this.tooltip,
-                    'hide',
-                    () => handlers.forEach((handler) => handler && handler()),
-                    {
-                        self: true,
-                    }
-                );
+                once(this.tooltip, 'hide', () => handlers.forEach((handler) => handler()), {
+                    self: true,
+                });
             });
 
             this.toggleElement(this.tooltip, true);

package/src/js/components/upload.js

@@ -140,7 +140,7 @@ export default {
                         responseType: this.type,
                         beforeSend: (env) => {
                             const { xhr } = env;
-                            xhr.upload && on(xhr.upload, 'progress', this.progress);
+                            on(xhr.upload, 'progress', this.progress);
                             for (const type of ['loadStart', 'load', 'loadEnd', 'abort']) {
                                 on(xhr, type.toLowerCase(), this[type]);
                             }

package/src/js/core/drop.js

@@ -108,12 +108,7 @@ export default {
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.targetEl) {
-            this.targetEl = this.$create('toggle', query(this.toggle, this.$el), {
-                target: this.$el,
-                mode: this.mode,
-            }).$el;
-            attr(this.targetEl, 'aria-haspopup', true);
-            this.lazyload(this.targetEl);
+            this.targetEl = createToggleComponent(this);
         }
 
         this._style = (({ width, height }) => ({ width, height }))(this.$el.style);
@@ -262,51 +257,11 @@ export default {
 
                 this.tracker.init();
 
-                const update = () => this.$emit();
                 const handlers = [
-                    on(
-                        document,
-                        pointerDown,
-                        ({ target }) =>
-                            !within(target, this.$el) &&
-                            once(
-                                document,
-                                `${pointerUp} ${pointerCancel} scroll`,
-                                ({ defaultPrevented, type, target: newTarget }) => {
-                                    if (
-                                        !defaultPrevented &&
-                                        type === pointerUp &&
-                                        target === newTarget &&
-                                        !(this.targetEl && within(target, this.targetEl))
-                                    ) {
-                                        this.hide(false);
-                                    }
-                                },
-                                true
-                            )
-                    ),
-
-                    on(document, 'keydown', (e) => {
-                        if (e.keyCode === 27) {
-                            this.hide(false);
-                        }
-                    }),
-
-                    on(window, 'resize', update),
-
-                    (() => {
-                        const observer = observeResize(
-                            overflowParents(this.$el).concat(this.target),
-                            update
-                        );
-                        return () => observer.disconnect();
-                    })(),
-
-                    this.autoUpdate &&
-                        on([document, ...overflowParents(this.$el)], 'scroll', update, {
-                            passive: true,
-                        }),
-
+                    listenForBackgroundClick(this),
+                    listenForEscClose(this),
+                    listenForResize(this),
+                    this.autoUpdate && listenForScroll(this),
                     !this.bgScroll && preventBackgroundScroll(this.$el),
                 ];
 
@@ -495,3 +450,60 @@ function getPositionedElements(el) {
 function getViewport(el, target) {
     return offsetViewport(overflowParents(target).find((parent) => within(el, parent)));
 }
+
+function createToggleComponent(drop) {
+    const { $el } = drop.$create('toggle', query(drop.toggle, drop.$el), {
+        target: drop.$el,
+        mode: drop.mode,
+    });
+    attr($el, 'aria-haspopup', true);
+    drop.lazyload($el);
+
+    return $el;
+}
+
+function listenForResize(drop) {
+    const update = () => drop.$emit();
+    const off = on(window, 'resize', update);
+    const observer = observeResize(overflowParents(drop.$el).concat(drop.target), update);
+    return () => {
+        observer.disconnect();
+        off();
+    };
+}
+
+function listenForScroll(drop) {
+    return on([document, ...overflowParents(drop.$el)], 'scroll', () => drop.$emit(), {
+        passive: true,
+    });
+}
+
+function listenForEscClose(drop) {
+    return on(document, 'keydown', (e) => {
+        if (e.keyCode === 27) {
+            drop.hide(false);
+        }
+    });
+}
+
+function listenForBackgroundClick(drop) {
+    return on(document, pointerDown, ({ target }) => {
+        if (!within(target, drop.$el)) {
+            once(
+                document,
+                `${pointerUp} ${pointerCancel} scroll`,
+                ({ defaultPrevented, type, target: newTarget }) => {
+                    if (
+                        !defaultPrevented &&
+                        type === pointerUp &&
+                        target === newTarget &&
+                        !(drop.targetEl && within(target, drop.targetEl))
+                    ) {
+                        drop.hide(false);
+                    }
+                },
+                true
+            );
+        }
+    });
+}

package/src/js/mixin/modal.js

@@ -135,70 +135,25 @@ export default {
             self: true,
 
             handler() {
-                once(
-                    this.$el,
-                    'hide',
-                    on(document, 'focusin', (e) => {
-                        if (last(active) === this && !within(e.target, this.$el)) {
-                            this.$el.focus();
-                        }
-                    })
-                );
-
-                if (this.overlay) {
-                    once(this.$el, 'hidden', preventBackgroundScroll(this.$el), { self: true });
-                }
-
                 if (this.stack) {
                     css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active.length);
                 }
 
-                addClass(document.documentElement, this.clsPage);
+                const handlers = [
+                    this.overlay && preventBackgroundFocus(this),
+                    this.overlay && preventBackgroundScroll(this.$el),
+                    this.bgClose && listenForBackgroundClose(this),
+                    this.escClose && listenForEscClose(this),
+                ];
 
-                if (this.bgClose) {
-                    once(
-                        this.$el,
-                        'hide',
-                        on(document, pointerDown, ({ target }) => {
-                            if (
-                                last(active) !== this ||
-                                (this.overlay && !within(target, this.$el)) ||
-                                within(target, this.panel)
-                            ) {
-                                return;
-                            }
-
-                            once(
-                                document,
-                                `${pointerUp} ${pointerCancel} scroll`,
-                                ({ defaultPrevented, type, target: newTarget }) => {
-                                    if (
-                                        !defaultPrevented &&
-                                        type === pointerUp &&
-                                        target === newTarget
-                                    ) {
-                                        this.hide();
-                                    }
-                                },
-                                true
-                            );
-                        }),
-                        { self: true }
-                    );
-                }
+                once(
+                    this.$el,
+                    'hidden',
+                    () => handlers.forEach((handler) => handler && handler()),
+                    { self: true }
+                );
 
-                if (this.escClose) {
-                    once(
-                        this.$el,
-                        'hide',
-                        on(document, 'keydown', (e) => {
-                            if (e.keyCode === 27 && last(active) === this) {
-                                this.hide();
-                            }
-                        }),
-                        { self: true }
-                    );
-                }
+                addClass(document.documentElement, this.clsPage);
             },
         },
 
@@ -291,6 +246,45 @@ function toMs(time) {
     return time ? (endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000) : 0;
 }
 
+function preventBackgroundFocus(modal) {
+    return on(document, 'focusin', (e) => {
+        if (last(active) === modal && !within(e.target, modal.$el)) {
+            modal.$el.focus();
+        }
+    });
+}
+
+function listenForBackgroundClose(modal) {
+    return on(document, pointerDown, ({ target }) => {
+        if (
+            last(active) !== modal ||
+            (modal.overlay && !within(target, modal.$el)) ||
+            within(target, modal.panel)
+        ) {
+            return;
+        }
+
+        once(
+            document,
+            `${pointerUp} ${pointerCancel} scroll`,
+            ({ defaultPrevented, type, target: newTarget }) => {
+                if (!defaultPrevented && type === pointerUp && target === newTarget) {
+                    modal.hide();
+                }
+            },
+            true
+        );
+    });
+}
+
+function listenForEscClose(modal) {
+    return on(document, 'keydown', (e) => {
+        if (e.keyCode === 27 && last(active) === modal) {
+            modal.hide();
+        }
+    });
+}
+
 let prevented;
 export function preventBackgroundScroll(el) {
     // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)

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

@@ -62,7 +62,7 @@ export default {
         },
 
         stopAutoplay() {
-            this.interval && clearInterval(this.interval);
+            clearInterval(this.interval);
         },
     },
 };

package/src/js/util/mouse.js

@@ -26,7 +26,7 @@ MouseTracker.prototype = {
 
     cancel() {
         this.unbind?.();
-        this.interval && clearInterval(this.interval);
+        clearInterval(this.interval);
     },
 
     movesTo(target) {