uikit 3.11.2-dev.03e47c2ff → 3.11.2-dev.06fe7f1d0

package/src/js/core/core.js

@@ -1,18 +1,4 @@
-import {
-    css,
-    fastdom,
-    getEventPos,
-    inBrowser,
-    isTouch,
-    on,
-    once,
-    parent,
-    pointerCancel,
-    pointerDown,
-    pointerUp,
-    toMs,
-    trigger,
-} from 'uikit-util';
+import { css, fastdom, inBrowser, observeResize, on, toMs } from 'uikit-util';
 
 export default function (UIkit) {
     if (!inBrowser) {
@@ -32,27 +18,7 @@ export default function (UIkit) {
 
     on(window, 'load resize', handleResize);
     on(document, 'loadedmetadata load', handleResize, true);
-
-    if ('ResizeObserver' in window) {
-        new ResizeObserver(handleResize).observe(document.documentElement);
-    }
-
-    // throttle `scroll` event (Safari triggers multiple `scroll` events per frame)
-    let pending;
-    on(
-        window,
-        'scroll',
-        (e) => {
-            if (pending) {
-                return;
-            }
-            pending = true;
-            fastdom.read(() => (pending = false));
-
-            UIkit.update(null, e.type);
-        },
-        { passive: true, capture: true }
-    );
+    observeResize(document.documentElement, handleResize);
 
     let started = 0;
     on(
@@ -71,43 +37,4 @@ export default function (UIkit) {
         },
         true
     );
-
-    on(
-        document,
-        pointerDown,
-        (e) => {
-            if (!isTouch(e)) {
-                return;
-            }
-
-            // Handle Swipe Gesture
-            const pos = getEventPos(e);
-            const target = 'tagName' in e.target ? e.target : parent(e.target);
-            once(document, `${pointerUp} ${pointerCancel} scroll`, (e) => {
-                const { x, y } = getEventPos(e);
-
-                // swipe
-                if (
-                    (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100) ||
-                    (y && Math.abs(pos.y - y) > 100)
-                ) {
-                    setTimeout(() => {
-                        trigger(target, 'swipe');
-                        trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);
-                    });
-                }
-            });
-        },
-        { passive: true }
-    );
-}
-
-function swipeDirection(x1, y1, x2, y2) {
-    return Math.abs(x1 - x2) >= Math.abs(y1 - y2)
-        ? x1 - x2 > 0
-            ? 'Left'
-            : 'Right'
-        : y1 - y2 > 0
-        ? 'Up'
-        : 'Down';
 }

package/src/js/core/cover.js

@@ -1,5 +1,5 @@
 import Video from './video';
-import { css, Dimensions, parent } from 'uikit-util';
+import { css, Dimensions, observeResize, parent } from 'uikit-util';
 
 export default {
     mixins: [Video],
@@ -13,6 +13,10 @@ export default {
         automute: true,
     },
 
+    connected() {
+        this.registerObserver(observeResize(this.$el, () => this.$emit('resize')));
+    },
+
     update: {
         read() {
             const el = this.$el;

package/src/js/core/drop.js

@@ -1,4 +1,5 @@
 import Container from '../mixin/container';
+import Lazyload from '../mixin/lazyload';
 import Position from '../mixin/position';
 import Togglable from '../mixin/togglable';
 import {
@@ -30,7 +31,7 @@ import {
 export let active;
 
 export default {
-    mixins: [Container, Position, Togglable],
+    mixins: [Container, Lazyload, Position, Togglable],
 
     args: 'pos',
 
@@ -84,6 +85,7 @@ export default {
                 mode: this.mode,
             }).$el;
             attr(this.target, 'aria-haspopup', true);
+            this.lazyload(this.target);
         }
     },
 

package/src/js/core/form-custom.js

@@ -60,7 +60,7 @@ export default {
             name: 'change',
 
             handler() {
-                this.$update();
+                this.$emit();
             },
         },
 
@@ -72,7 +72,7 @@ export default {
             },
 
             handler() {
-                this.$update();
+                this.$emit();
             },
         },
     ],

package/src/js/core/height-viewport.js

@@ -1,3 +1,4 @@
+import Class from '../mixin/class';
 import {
     boxModelAdjust,
     css,
@@ -14,6 +15,8 @@ import {
 } from 'uikit-util';
 
 export default {
+    mixins: [Class],
+
     props: {
         expand: Boolean,
         offsetTop: Boolean,

package/src/js/core/img.js

@@ -8,10 +8,12 @@ import {
     escape,
     fragment,
     hasAttr,
+    hasIntersectionObserver,
     includes,
     isArray,
     isEmpty,
     isTag,
+    observeIntersection,
     parent,
     parseOptions,
     queryAll,
@@ -23,7 +25,6 @@ import {
 } from 'uikit-util';
 
 const nativeLazyLoad = 'loading' in HTMLImageElement.prototype;
-const nativeIsIntersecting = 'isIntersecting' in IntersectionObserverEntry.prototype; // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
 
 export default {
     args: 'dataSrc',
@@ -53,13 +54,13 @@ export default {
             },
 
             watch() {
-                this.observe();
+                this.$reset();
             },
         },
     },
 
     connected() {
-        if (this.loading !== 'lazy' || !window.IntersectionObserver || !nativeIsIntersecting) {
+        if (this.loading !== 'lazy' || !hasIntersectionObserver) {
             this.load();
             return;
         }
@@ -75,28 +76,27 @@ export default {
 
         ensureSrcAttribute(this.$el);
 
-        const rootMargin = `${toPx(this.offsetTop, 'height')}px ${toPx(
-            this.offsetLeft,
-            'width'
-        )}px`;
-        this.observer = new IntersectionObserver(
-            (entries) => {
-                if (entries.some((entry) => entry.isIntersecting)) {
+        this.registerObserver(
+            observeIntersection(
+                this.target,
+                (entries, observer) => {
                     this.load();
-                    this.observer.disconnect();
+                    observer.disconnect();
+                },
+                {
+                    rootMargin: `${toPx(this.offsetTop, 'height')}px ${toPx(
+                        this.offsetLeft,
+                        'width'
+                    )}px`,
                 }
-            },
-            { rootMargin }
+            )
         );
-        this.observe();
     },
 
     disconnected() {
         if (this._data.image) {
             this._data.image.onload = '';
         }
-
-        this.observer?.disconnect();
     },
 
     update: {
@@ -132,14 +132,6 @@ export default {
             setSrcAttrs(this.$el, image.currentSrc);
             return (this._data.image = image);
         },
-
-        observe() {
-            if (this._connected && !this._data.image) {
-                for (const el of this.target) {
-                    this.observer.observe(el);
-                }
-            }
-        },
     },
 };
 

package/src/js/core/offcanvas.js

@@ -1,4 +1,5 @@
 import Modal from '../mixin/modal';
+import Swipe from '../mixin/swipe';
 import {
     $,
     addClass,
@@ -15,7 +16,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Modal],
+    mixins: [Modal, Swipe],
 
     args: 'mode',
 

package/src/js/core/sticky.js

@@ -13,7 +13,6 @@ import {
     offset as getOffset,
     getScrollingElement,
     hasClass,
-    isNumeric,
     isString,
     isVisible,
     noop,
@@ -29,6 +28,7 @@ import {
     toPx,
     trigger,
     within,
+    intersectRect,
 } from 'uikit-util';
 
 export default {
@@ -119,34 +119,29 @@ export default {
                 return window;
             },
 
+            filter() {
+                return this.targetOffset !== false;
+            },
+
             handler() {
-                if (!(this.targetOffset !== false && location.hash && scrollTop(window) > 0)) {
+                if (!location.hash || scrollTop(window) === 0) {
                     return;
                 }
 
-                const target = $(location.hash);
-
-                if (target) {
-                    fastdom.read(() => {
-                        const { top } = getOffset(target);
-                        const elTop = getOffset(this.$el).top;
-                        const elHeight = this.$el.offsetHeight;
-
-                        if (
-                            this.isFixed &&
-                            elTop + elHeight >= top &&
-                            elTop <= top + target.offsetHeight
-                        ) {
-                            scrollTop(
-                                window,
-                                top -
-                                    elHeight -
-                                    (isNumeric(this.targetOffset) ? this.targetOffset : 0) -
-                                    this._data.offset
-                            );
-                        }
-                    });
-                }
+                fastdom.read(() => {
+                    const targetOffset = getOffset($(location.hash));
+                    const elOffset = getOffset(this.$el);
+
+                    if (this.isFixed && intersectRect(targetOffset, elOffset)) {
+                        scrollTop(
+                            window,
+                            targetOffset.top -
+                                elOffset.height -
+                                toPx(this.targetOffset, 'height') -
+                                toPx(this.offset, 'height')
+                        );
+                    }
+                });
             },
         },
     ],
@@ -177,20 +172,19 @@ export default {
                 }
 
                 const referenceElement = this.isFixed ? this.placeholder : this.$el;
+                const windowHeight = getHeight(window);
 
                 let position = this.position;
-
-                if (position === 'auto') {
-                    position = height > getHeight(window) ? 'bottom' : 'top';
+                if (position === 'auto' && height > windowHeight) {
+                    position = 'bottom';
                 }
 
-                let offset = this.offset;
+                let offset = toPx(this.offset, 'height', referenceElement);
                 if (position === 'bottom') {
-                    offset += '+100vh-100%';
+                    offset += windowHeight - height;
                 }
-                offset = toPx(offset, 'height', referenceElement);
 
-                const overflow = Math.max(0, height + offset - getHeight(window));
+                const overflow = Math.max(0, height + offset - windowHeight);
                 const topOffset = getOffset(referenceElement).top;
                 const offsetParentTop = getOffset(referenceElement.offsetParent).top;
 
@@ -200,7 +194,7 @@ export default {
                 const start = Math.max(top, topOffset) - offset;
                 const end = bottom
                     ? bottom - getOffset(this.$el).height + overflow - offset
-                    : getScrollingElement(this.$el).scrollHeight - getHeight(window);
+                    : getScrollingElement(this.$el).scrollHeight - windowHeight;
 
                 return {
                     start,

package/src/js/core/switcher.js

@@ -1,3 +1,5 @@
+import Lazyload from '../mixin/lazyload';
+import Swipe from '../mixin/swipe';
 import Togglable from '../mixin/togglable';
 import {
     $$,
@@ -17,7 +19,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Togglable],
+    mixins: [Lazyload, Swipe, Togglable],
 
     args: 'connect',
 
@@ -26,7 +28,6 @@ export default {
         toggle: String,
         itemNav: String,
         active: Number,
-        swiping: Boolean,
     },
 
     data: {
@@ -34,7 +35,6 @@ export default {
         toggle: '> * > :first-child',
         itemNav: false,
         active: 0,
-        swiping: true,
         cls: 'uk-active',
         attrItem: 'uk-switcher-item',
     },
@@ -79,6 +79,14 @@ export default {
                 this.toggles.some((toggle) => within(toggle, child))
             );
         },
+
+        swipeTarget() {
+            return this.connects;
+        },
+    },
+
+    connected() {
+        this.lazyload(this.$el, this.connects);
     },
 
     events: [

package/src/js/core/toggle.js

@@ -1,3 +1,4 @@
+import Lazyload from '../mixin/lazyload';
 import Media from '../mixin/media';
 import Togglable from '../mixin/togglable';
 import {
@@ -22,7 +23,7 @@ import {
 const KEY_SPACE = 32;
 
 export default {
-    mixins: [Media, Togglable],
+    mixins: [Lazyload, Media, Togglable],
 
     args: 'target',
 
@@ -44,6 +45,7 @@ export default {
         if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
             attr(this.$el, 'tabindex', '0');
         }
+        this.lazyload(this.$el, this.target);
     },
 
     computed: {

package/src/js/core/video.js

@@ -1,4 +1,14 @@
-import { css, hasAttr, isInView, isVideo, isVisible, mute, pause, play } from 'uikit-util';
+import {
+    css,
+    hasAttr,
+    isInView,
+    isVideo,
+    isVisible,
+    mute,
+    observeIntersection,
+    pause,
+    play,
+} from 'uikit-util';
 
 export default {
     args: 'autoplay',
@@ -27,6 +37,8 @@ export default {
         if (this.automute) {
             mute(this.$el);
         }
+
+        this.registerObserver(observeIntersection(this.$el, () => this.$emit('resize')));
     },
 
     update: {

package/src/js/mixin/lazyload.js

@@ -0,0 +1,20 @@
+import { $$, isFunction, observeIntersection, removeAttr, toNodes } from 'uikit-util';
+
+export default {
+    methods: {
+        lazyload(observeTargets = this.$el, targets = this.$el) {
+            this.registerObserver(
+                observeIntersection(observeTargets, (entries, observer) => {
+                    for (const el of toNodes(isFunction(targets) ? targets() : targets)) {
+                        $$('[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+                    }
+                    for (const el of entries
+                        .filter(({ isIntersecting }) => isIntersecting)
+                        .map(({ target }) => target)) {
+                        observer.unobserve(el);
+                    }
+                })
+            );
+        },
+    },
+};

package/src/js/mixin/parallax.js

@@ -57,7 +57,7 @@ export default {
     },
 
     events: {
-        bgimageload() {
+        load() {
             this.$emit();
         },
     },
@@ -68,13 +68,11 @@ export default {
         },
 
         getCss(percent) {
-            return keys(this.props).reduce(
-                (css, prop) => {
-                    this.props[prop](css, percent);
-                    return css;
-                },
-                { transform: '', filter: '' }
-            );
+            const css = { transform: '', filter: '' };
+            for (const prop in this.props) {
+                this.props[prop](css, percent);
+            }
+            return css;
         },
     },
 };
@@ -257,8 +255,9 @@ function getBackgroundImageDimensions(el) {
         if (!image.naturalWidth) {
             image.onload = () => {
                 dimensions[src] = toDimensions(image);
-                trigger(el, 'bgimageload');
+                trigger(el, 'load');
             };
+            return toDimensions(image);
         }
     }
 

package/src/js/mixin/slider.js

@@ -82,12 +82,6 @@ export default {
         },
     },
 
-    events: {
-        itemshown() {
-            this.$update(this.list);
-        },
-    },
-
     methods: {
         show(index, force = false) {
             if (this.dragging || !this.length) {

package/src/js/mixin/slideshow.js

@@ -28,10 +28,6 @@ export default {
     },
 
     events: {
-        'itemshow itemhide itemshown itemhidden'({ target }) {
-            this.$update(target);
-        },
-
         beforeitemshow({ target }) {
             addClass(target, this.clsActive);
         },

package/src/js/mixin/swipe.js

@@ -0,0 +1,72 @@
+import {
+    getEventPos,
+    isTouch,
+    once,
+    parent,
+    pointerCancel,
+    pointerDown,
+    pointerUp,
+    trigger,
+} from 'uikit-util';
+import { registerEvent } from '../api/state';
+
+export default {
+    props: {
+        swiping: Boolean,
+    },
+
+    data: {
+        swiping: true,
+    },
+
+    computed: {
+        swipeTarget(props, $el) {
+            return $el;
+        },
+    },
+
+    connected() {
+        if (!this.swiping) {
+            return;
+        }
+
+        registerEvent(this, {
+            el: this.swipeTarget,
+            name: pointerDown,
+            passive: true,
+            handler(e) {
+                if (!isTouch(e)) {
+                    return;
+                }
+
+                // Handle Swipe Gesture
+                const pos = getEventPos(e);
+                const target = 'tagName' in e.target ? e.target : parent(e.target);
+                once(document, `${pointerUp} ${pointerCancel} scroll`, (e) => {
+                    const { x, y } = getEventPos(e);
+
+                    // swipe
+                    if (
+                        (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100) ||
+                        (y && Math.abs(pos.y - y) > 100)
+                    ) {
+                        setTimeout(() => {
+                            trigger(target, 'swipe');
+                            trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);
+                        });
+                    }
+                });
+            },
+        });
+    },
+};
+
+function swipeDirection(x1, y1, x2, y2) {
+    return Math.abs(x1 - x2) >= Math.abs(y1 - y2)
+        ? x1 - x2 > 0
+            ? 'Left'
+            : 'Right'
+        : y1 - y2 > 0
+        ? 'Up'
+        : 'Down';
+}

package/src/js/util/index.js

@@ -10,6 +10,7 @@ export * from './fastdom';
 export * from './filter';
 export * from './lang';
 export * from './mouse';
+export * from './observer';
 export * from './options';
 export * from './player';
 export * from './position';

package/src/js/util/observer.js

@@ -0,0 +1,36 @@
+import { toNodes } from './lang';
+
+// Old chromium based browsers (UC Browser) did not implement `isIntersecting`
+export const hasIntersectionObserver =
+    window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype;
+export function observeIntersection(targets, cb, options, intersecting = true) {
+    if (!hasIntersectionObserver) {
+        return;
+    }
+
+    const observer = new IntersectionObserver((entries, observer) => {
+        if (!intersecting || entries.some((entry) => entry.isIntersecting)) {
+            cb(entries, observer);
+        }
+    }, options);
+    for (const el of toNodes(targets)) {
+        observer.observe(el);
+    }
+    return observer;
+}
+
+const hasResizeObserver = window.ResizeObserver;
+export function observeResize(targets, cb, options = { box: 'border-box' }) {
+    if (!hasResizeObserver) {
+        return;
+    }
+
+    const observer = new ResizeObserver((entries, observer) => {
+        cb(entries, observer);
+    });
+    for (const el of toNodes(targets)) {
+        observer.observe(el, options);
+    }
+
+    return observer;
+}