uikit 3.11.2-dev.3dfa2c50b → 3.11.2-dev.45194f70c

package/src/js/core/sticky.js

@@ -10,13 +10,12 @@ import {
     dimensions,
     fastdom,
     height as getHeight,
+    offset as getOffset,
     getScrollingElement,
     hasClass,
-    isNumeric,
     isString,
     isVisible,
     noop,
-    offset,
     offsetPosition,
     parent,
     query,
@@ -29,6 +28,7 @@ import {
     toPx,
     trigger,
     within,
+    intersectRect,
 } from 'uikit-util';
 
 export default {
@@ -67,21 +67,6 @@ export default {
     },
 
     computed: {
-        position({ position }, $el) {
-            return position === 'auto'
-                ? (this.isFixed ? this.placeholder : $el).offsetHeight > getHeight(window)
-                    ? 'bottom'
-                    : 'top'
-                : position;
-        },
-
-        offset({ offset }, $el) {
-            if (this.position === 'bottom') {
-                offset += '+100vh-100%';
-            }
-            return toPx(offset, 'height', $el);
-        },
-
         selTarget({ selTarget }, $el) {
             return (selTarget && $(selTarget, $el)) || $el;
         },
@@ -134,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 } = offset(target);
-                        const elTop = offset(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.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,35 +157,49 @@ export default {
 
                 const hide = this.isActive && types.has('resize');
                 if (hide) {
+                    css(this.selTarget, 'transition', '0s');
                     this.hide();
                 }
 
                 if (!this.isActive) {
-                    height = this.$el.offsetHeight;
+                    height = getOffset(this.$el).height;
                     margin = css(this.$el, 'margin');
                 }
 
                 if (hide) {
                     this.show();
+                    fastdom.write(() => css(this.selTarget, 'transition', ''));
                 }
 
-                const overflow = Math.max(0, height + this.offset - getHeight(window));
-
                 const referenceElement = this.isFixed ? this.placeholder : this.$el;
-                const topOffset = offset(referenceElement).top;
-                const offsetParentTop = offset(referenceElement.offsetParent).top;
+                const windowHeight = getHeight(window);
+
+                let position = this.position;
+                if (position === 'auto' && height > windowHeight) {
+                    position = 'bottom';
+                }
+
+                let offset = toPx(this.offset, 'height', referenceElement);
+                if (position === 'bottom') {
+                    offset += windowHeight - height;
+                }
+
+                const overflow = Math.max(0, height + offset - windowHeight);
+                const topOffset = getOffset(referenceElement).top;
+                const offsetParentTop = getOffset(referenceElement.offsetParent).top;
 
                 const top = parseProp(this.top, this.$el, topOffset);
                 const bottom = parseProp(this.bottom, this.$el, topOffset + height, true);
 
-                const start = Math.max(top, topOffset) - this.offset;
+                const start = Math.max(top, topOffset) - offset;
                 const end = bottom
-                    ? bottom - this.$el.offsetHeight + overflow - this.offset
-                    : getScrollingElement(this.$el).scrollHeight - getHeight(window);
+                    ? bottom - getOffset(this.$el).height + overflow - offset
+                    : getScrollingElement(this.$el).scrollHeight - windowHeight;
 
                 return {
                     start,
                     end,
+                    offset,
                     overflow,
                     topOffset,
                     offsetParentTop,
@@ -213,7 +207,7 @@ export default {
                     margin,
                     width: dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el)
                         .width,
-                    top: offsetPosition(this.placeholder)[0],
+                    top: offsetPosition(referenceElement)[0],
                 };
             },
 
@@ -322,7 +316,7 @@ export default {
                     }
                 } else if (this.isFixed) {
                     this.update();
-                } else if (this.animation) {
+                } else if (this.animation && scroll > topOffset) {
                     Animation.cancel(this.$el);
                     this.show();
                     Animation.in(this.$el, this.animation).catch(noop);
@@ -350,33 +344,33 @@ export default {
         },
 
         update() {
-            const {
+            let {
                 width,
                 scroll = 0,
                 overflow,
                 overflowScroll = 0,
                 start,
                 end,
+                offset,
                 topOffset,
                 height,
                 offsetParentTop,
             } = this._data;
             const active = start !== 0 || scroll > start;
-            let top = this.offset;
             let position = 'fixed';
 
             if (scroll > end) {
-                top = end + this.offset - offsetParentTop;
+                offset += end - offsetParentTop;
                 position = 'absolute';
             }
 
             if (overflow) {
-                top -= overflowScroll;
+                offset -= overflowScroll;
             }
 
             css(this.$el, {
                 position,
-                top: `${top}px`,
+                top: `${offset}px`,
                 width,
             });
 
@@ -397,7 +391,7 @@ function parseProp(value, el, propOffset, padding) {
     } else {
         const refElement = value === true ? parent(el) : query(value, el);
         return (
-            offset(refElement).bottom -
+            getOffset(refElement).bottom -
             (padding && refElement && within(el, refElement)
                 ? toFloat(css(refElement, 'paddingBottom'))
                 : 0)

package/src/js/core/svg.js

@@ -5,10 +5,12 @@ import {
     append,
     attr,
     includes,
+    isTag,
     isVisible,
     isVoidElement,
     memoize,
     noop,
+    once,
     remove,
     removeAttr,
     startsWith,
@@ -94,6 +96,12 @@ export default {
 
     methods: {
         async getSvg() {
+            if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {
+                return new Promise((resolve) =>
+                    once(this.$el, 'load', () => resolve(this.getSvg()))
+                );
+            }
+
             return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject('SVG not found.');
         },
 
@@ -193,7 +201,7 @@ export function getMaxPathLength(el) {
 }
 
 function insertSVG(el, root) {
-    if (isVoidElement(root) || root.tagName === 'CANVAS') {
+    if (isVoidElement(root) || isTag(root, 'canvas')) {
         root.hidden = true;
 
         const next = root.nextElementSibling;
@@ -205,11 +213,7 @@ function insertSVG(el, root) {
 }
 
 function equals(el, other) {
-    return isSVG(el) && isSVG(other) && innerHTML(el) === innerHTML(other);
-}
-
-function isSVG(el) {
-    return el?.tagName === 'svg';
+    return isTag(el, 'svg') && isTag(other, 'svg') && innerHTML(el) === innerHTML(other);
 }
 
 function innerHTML(el) {

package/src/js/core/switcher.js

@@ -1,3 +1,4 @@
+import Lazyload from '../mixin/lazyload';
 import Togglable from '../mixin/togglable';
 import {
     $$,
@@ -17,7 +18,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Togglable],
+    mixins: [Lazyload, Togglable],
 
     args: 'connect',
 
@@ -81,6 +82,10 @@ export default {
         },
     },
 
+    connected() {
+        this.lazyload(this.$el, this.connects);
+    },
+
     events: [
         {
             name: 'click',

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 {
@@ -7,6 +8,7 @@ import {
     includes,
     isBoolean,
     isFocusable,
+    isTag,
     isTouch,
     matches,
     once,
@@ -21,7 +23,7 @@ import {
 const KEY_SPACE = 32;
 
 export default {
-    mixins: [Media, Togglable],
+    mixins: [Lazyload, Media, Togglable],
 
     args: 'target',
 
@@ -43,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: {
@@ -134,7 +137,7 @@ export default {
             name: 'keydown',
 
             filter() {
-                return includes(this.mode, 'click') && this.$el.tagName !== 'INPUT';
+                return includes(this.mode, 'click') && !isTag(this.$el, 'input');
             },
 
             handler(e) {

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/internal/animate-slide.js

@@ -1,5 +1,4 @@
 import {
-    assign,
     children,
     css,
     fastdom,
@@ -44,7 +43,7 @@ export default function (action, target, duration) {
 
                 // Reset to previous state
                 nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
-                css(target, assign({ display: 'block' }, targetProps));
+                css(target, { display: 'block', ...targetProps });
 
                 // Start transitions on next frame
                 requestAnimationFrame(() => {
@@ -76,16 +75,14 @@ function getProps(el, opacity) {
     const zIndex = css(el, 'zIndex');
 
     return isVisible(el)
-        ? assign(
-              {
-                  display: '',
-                  opacity: opacity ? css(el, 'opacity') : '0',
-                  pointerEvents: 'none',
-                  position: 'absolute',
-                  zIndex: zIndex === 'auto' ? index(el) : zIndex,
-              },
-              getPositionWithMargin(el)
-          )
+        ? {
+              display: '',
+              opacity: opacity ? css(el, 'opacity') : '0',
+              pointerEvents: 'none',
+              position: 'absolute',
+              zIndex: zIndex === 'auto' ? index(el) : zIndex,
+              ...getPositionWithMargin(el),
+          }
         : false;
 }
 

package/src/js/mixin/lazyload.js

@@ -0,0 +1,16 @@
+import { $$, isArray, observeIntersection, removeAttr } from 'uikit-util';
+
+export default {
+    methods: {
+        lazyload(observeTargets = this.$el, targets = this.$el) {
+            this.registerObserver(
+                observeIntersection(observeTargets, (entries, observer) => {
+                    for (const el of isArray(targets) ? targets : [targets]) {
+                        $$('img[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+                    }
+                    observer.disconnect();
+                })
+            );
+        },
+    },
+};