uikit 3.11.2-dev.21a5b7139 → 3.11.2-dev.29f2881ed

package/src/js/core/img.js

@@ -1,64 +1,52 @@
 import {
+    append,
+    attr,
+    children,
     createEvent,
     css,
-    Dimensions,
+    data,
     escape,
-    getImage,
+    fragment,
+    hasAttr,
     includes,
-    isUndefined,
+    isArray,
+    isEmpty,
+    isTag,
+    parent,
+    parseOptions,
     queryAll,
+    removeAttr,
     startsWith,
     toFloat,
     toPx,
     trigger,
 } 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',
 
     props: {
         dataSrc: String,
-        dataSrcset: Boolean,
-        sizes: String,
-        width: Number,
-        height: Number,
+        sources: String,
         offsetTop: String,
         offsetLeft: String,
         target: String,
+        loading: String,
     },
 
     data: {
         dataSrc: '',
-        dataSrcset: false,
-        sizes: false,
-        width: false,
-        height: false,
+        sources: false,
         offsetTop: '50vh',
         offsetLeft: '50vw',
         target: false,
+        loading: 'lazy',
     },
 
     computed: {
-        cacheKey({ dataSrc }) {
-            return `${this.$name}.${dataSrc}`;
-        },
-
-        width({ width, dataWidth }) {
-            return width || dataWidth;
-        },
-
-        height({ height, dataHeight }) {
-            return height || dataHeight;
-        },
-
-        sizes({ sizes, dataSizes }) {
-            return sizes || dataSizes;
-        },
-
-        isImg(_, $el) {
-            return isImg($el);
-        },
-
         target: {
             get({ target }) {
                 return [this.$el, ...queryAll(target, this.$el)];
@@ -68,65 +56,61 @@ export default {
                 this.observe();
             },
         },
-
-        offsetTop({ offsetTop }) {
-            return toPx(offsetTop, 'height');
-        },
-
-        offsetLeft({ offsetLeft }) {
-            return toPx(offsetLeft, 'width');
-        },
     },
 
     connected() {
-        if (!window.IntersectionObserver) {
-            setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
+        if (this.loading !== 'lazy' || !window.IntersectionObserver || !nativeIsIntersecting) {
+            this.load();
             return;
         }
 
-        if (storage[this.cacheKey]) {
-            setSrcAttrs(this.$el, storage[this.cacheKey], this.dataSrcset, this.sizes);
-        } else if (this.isImg && this.width && this.height) {
-            setSrcAttrs(this.$el, getPlaceholderImage(this.width, this.height, this.sizes));
-        }
+        if (nativeLazyLoad && isImg(this.$el)) {
+            this.$el.loading = 'lazy';
+            setSrcAttrs(this.$el);
 
-        this.observer = new IntersectionObserver(this.load, {
-            rootMargin: `${this.offsetTop}px ${this.offsetLeft}px`,
-        });
+            if (this.target.length === 1) {
+                return;
+            }
+        }
 
-        requestAnimationFrame(this.observe);
+        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.load();
+                    this.observer.disconnect();
+                }
+            },
+            { rootMargin }
+        );
+        this.observe();
     },
 
     disconnected() {
-        this.observer && this.observer.disconnect();
+        if (this._data.image) {
+            this._data.image.onload = '';
+        }
+
+        this.observer?.disconnect();
     },
 
     update: {
-        read({ image }) {
-            if (!this.observer) {
-                return false;
-            }
-
-            if (!image && document.readyState === 'complete') {
-                this.load(this.observer.takeRecords());
-            }
-
-            if (this.isImg) {
+        write(store) {
+            if (!this.observer || isImg(this.$el)) {
                 return false;
             }
 
-            image &&
-                image.then(
-                    (img) => img && img.currentSrc !== '' && setSrcAttrs(this.$el, currentSrc(img))
-                );
-        },
-
-        write(data) {
-            if (this.dataSrcset && window.devicePixelRatio !== 1) {
+            const srcset = data(this.$el, 'data-srcset');
+            if (srcset && window.devicePixelRatio !== 1) {
                 const bgSize = css(this.$el, 'backgroundSize');
-                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === data.bgSize) {
-                    data.bgSize = getSourceSize(this.dataSrcset, this.sizes);
-                    css(this.$el, 'backgroundSize', `${data.bgSize}px`);
+                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === store.bgSize) {
+                    store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
+                    css(this.$el, 'backgroundSize', `${store.bgSize}px`);
                 }
             }
         },
@@ -135,40 +119,35 @@ export default {
     },
 
     methods: {
-        load(entries) {
-            // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
-            if (
-                !entries.some((entry) => isUndefined(entry.isIntersecting) || entry.isIntersecting)
-            ) {
-                return;
+        load() {
+            if (this._data.image) {
+                return this._data.image;
             }
 
-            this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(
-                (img) => {
-                    setSrcAttrs(this.$el, currentSrc(img), img.srcset, img.sizes);
-                    storage[this.cacheKey] = currentSrc(img);
-                    return img;
-                },
-                (e) => trigger(this.$el, new e.constructor(e.type, e))
-            );
+            const image = isImg(this.$el)
+                ? this.$el
+                : getImageFromElement(this.$el, this.dataSrc, this.sources);
 
-            this.observer.disconnect();
+            removeAttr(image, 'loading');
+            setSrcAttrs(this.$el, image.currentSrc);
+            return (this._data.image = image);
         },
 
         observe() {
             if (this._connected && !this._data.image) {
-                this.target.forEach((el) => this.observer.observe(el));
+                for (const el of this.target) {
+                    this.observer.observe(el);
+                }
             }
         },
     },
 };
 
-function setSrcAttrs(el, src, srcset, sizes) {
+function setSrcAttrs(el, src) {
     if (isImg(el)) {
-        const set = (prop, val) => val && val !== el[prop] && (el[prop] = val);
-        set('sizes', sizes);
-        set('srcset', srcset);
-        set('src', src);
+        const parentNode = parent(el);
+        const elements = isPicture(parentNode) ? children(parentNode) : [el];
+        elements.forEach((el) => setSourceProps(el, el));
     } else if (src) {
         const change = !includes(el.style.backgroundImage, src);
         if (change) {
@@ -178,16 +157,62 @@ function setSrcAttrs(el, src, srcset, sizes) {
     }
 }
 
-function getPlaceholderImage(width, height, sizes) {
-    if (sizes) {
-        ({ width, height } = Dimensions.ratio(
-            { width, height },
-            'width',
-            toPx(sizesToPixel(sizes))
-        ));
+const srcProps = ['data-src', 'data-srcset', 'sizes'];
+function setSourceProps(sourceEl, targetEl) {
+    srcProps.forEach((prop) => {
+        const value = data(sourceEl, prop);
+        if (value) {
+            attr(targetEl, prop.replace(/^(data-)+/, ''), value);
+        }
+    });
+}
+
+function getImageFromElement(el, src, sources) {
+    const img = new Image();
+
+    wrapInPicture(img, sources);
+    setSourceProps(el, img);
+    img.onload = () => {
+        setSrcAttrs(el, img.currentSrc);
+    };
+    attr(img, 'src', src);
+    return img;
+}
+
+function wrapInPicture(img, sources) {
+    sources = parseSources(sources);
+
+    if (sources.length) {
+        const picture = fragment('<picture>');
+        for (const attrs of sources) {
+            const source = fragment('<source>');
+            attr(source, attrs);
+            append(picture, source);
+        }
+        append(picture, img);
+    }
+}
+
+function parseSources(sources) {
+    if (!sources) {
+        return [];
+    }
+
+    if (startsWith(sources, '[')) {
+        try {
+            sources = JSON.parse(sources);
+        } catch (e) {
+            sources = [];
+        }
+    } else {
+        sources = parseOptions(sources);
     }
 
-    return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
+    if (!isArray(sources)) {
+        sources = [sources];
+    }
+
+    return sources.filter((source) => !isEmpty(source));
 }
 
 const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -227,22 +252,16 @@ function getSourceSize(srcset, sizes) {
     return descriptors.filter((size) => size >= srcSize)[0] || descriptors.pop() || '';
 }
 
-function isImg(el) {
-    return el.tagName === 'IMG';
+function ensureSrcAttribute(el) {
+    if (isImg(el) && !hasAttr(el, 'src')) {
+        attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
+    }
 }
 
-function currentSrc(el) {
-    return el.currentSrc || el.src;
+function isPicture(el) {
+    return isTag(el, 'picture');
 }
 
-const key = '__test__';
-let storage;
-
-// workaround for Safari's private browsing mode and accessing sessionStorage in Blink
-try {
-    storage = window.sessionStorage || {};
-    storage[key] = 1;
-    delete storage[key];
-} catch (e) {
-    storage = {};
+function isImg(el) {
+    return isTag(el, 'img');
 }

package/src/js/core/margin.js

@@ -22,10 +22,10 @@ export default {
         },
 
         write({ columns, rows }) {
-            for (let i = 0; i < rows.length; i++) {
-                for (let j = 0; j < rows[i].length; j++) {
-                    toggleClass(rows[i][j], this.margin, i !== 0);
-                    toggleClass(rows[i][j], this.firstColumn, !!~columns[0].indexOf(rows[i][j]));
+            for (const row of rows) {
+                for (const column of row) {
+                    toggleClass(column, this.margin, rows[0] !== row);
+                    toggleClass(column, this.firstColumn, !!~columns[0].indexOf(column));
                 }
             }
         },
@@ -41,10 +41,10 @@ export function getRows(items) {
 function getColumns(rows) {
     const columns = [];
 
-    for (let i = 0; i < rows.length; i++) {
-        const sorted = sortBy(rows[i], 'left', 'right');
+    for (const row of rows) {
+        const sorted = sortBy(row, 'left', 'right');
         for (let j = 0; j < sorted.length; j++) {
-            columns[j] = !columns[j] ? sorted[j] : columns[j].concat(sorted[j]);
+            columns[j] = columns[j] ? columns[j].concat(sorted[j]) : sorted[j];
         }
     }
 
@@ -54,17 +54,15 @@ function getColumns(rows) {
 function sortBy(items, startProp, endProp) {
     const sorted = [[]];
 
-    for (let i = 0; i < items.length; i++) {
-        const el = items[i];
-
+    for (const el of items) {
         if (!isVisible(el)) {
             continue;
         }
 
         let dim = getOffset(el);
 
-        for (let j = sorted.length - 1; j >= 0; j--) {
-            const current = sorted[j];
+        for (let i = sorted.length - 1; i >= 0; i--) {
+            const current = sorted[i];
 
             if (!current[0]) {
                 current.push(el);
@@ -89,7 +87,7 @@ function sortBy(items, startProp, endProp) {
                 break;
             }
 
-            if (j === 0) {
+            if (i === 0) {
                 sorted.unshift([el]);
                 break;
             }

package/src/js/core/modal.js

@@ -2,7 +2,6 @@ import Modal from '../mixin/modal';
 import {
     $,
     addClass,
-    assign,
     css,
     Deferred,
     hasClass,
@@ -136,7 +135,7 @@ function install({ modal }) {
     };
 
     function openDialog(tmpl, options, hideFn, submitFn) {
-        options = assign({ bgClose: false, escClose: true, labels: modal.labels }, options);
+        options = { bgClose: false, escClose: true, labels: modal.labels, ...options };
 
         const dialog = modal.dialog(tmpl(options), options);
         const deferred = new Deferred();

package/src/js/core/navbar.js

@@ -6,7 +6,6 @@ import {
     $$,
     addClass,
     after,
-    assign,
     css,
     findIndex,
     hasAttr,
@@ -111,12 +110,12 @@ export default {
                 const dropdowns = $$(`.${clsDrop}`, $el);
 
                 if (this.dropContainer !== $el) {
-                    $$(`.${clsDrop}`, this.dropContainer).forEach((el) => {
+                    for (const el of $$(`.${clsDrop}`, this.dropContainer)) {
                         const target = this.getDropdown(el)?.target;
                         if (!includes(dropdowns, el) && target && within(target, this.$el)) {
                             dropdowns.push(el);
                         }
-                    });
+                    }
                 }
 
                 return dropdowns;
@@ -126,11 +125,12 @@ export default {
                 this.$create(
                     'drop',
                     dropdowns.filter((el) => !this.getDropdown(el)),
-                    assign({}, this.$props, {
+                    {
+                        ...this.$props,
                         boundary: this.boundary,
                         pos: this.pos,
                         offset: this.dropbar || this.offset,
-                    })
+                    }
                 );
             },
 

package/src/js/core/scrollspy.js

@@ -53,10 +53,10 @@ export default {
     },
 
     disconnected() {
-        this.elements.forEach((el) => {
+        for (const el of this.elements) {
             removeClass(el, this.inViewClass, el[stateKey] ? el[stateKey].cls : '');
             delete el[stateKey];
-        });
+        }
     },
 
     update: [
@@ -71,17 +71,17 @@ export default {
                     return false;
                 }
 
-                this.elements.forEach((el) => {
+                for (const el of this.elements) {
                     if (!el[stateKey]) {
                         el[stateKey] = { cls: getData(el, 'uk-scrollspy-class') || this.cls };
                     }
 
                     el[stateKey].show = isInView(el, this.offsetTop, this.offsetLeft);
-                });
+                }
             },
 
             write(data) {
-                this.elements.forEach((el) => {
+                for (const el of this.elements) {
                     const state = el[stateKey];
 
                     if (state.show && !state.inview && !state.queued) {
@@ -99,7 +99,7 @@ export default {
                     } else if (!state.show && state.inview && !state.queued && this.repeat) {
                         this.toggle(el, false);
                     }
-                });
+                }
             },
 
             events: ['scroll', 'resize'],

package/src/js/core/sticky.js

@@ -10,13 +10,13 @@ import {
     dimensions,
     fastdom,
     height as getHeight,
+    offset as getOffset,
     getScrollingElement,
     hasClass,
     isNumeric,
     isString,
     isVisible,
     noop,
-    offset,
     offsetPosition,
     parent,
     query,
@@ -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;
         },
@@ -143,8 +128,8 @@ export default {
 
                 if (target) {
                     fastdom.read(() => {
-                        const { top } = offset(target);
-                        const elTop = offset(this.$el).top;
+                        const { top } = getOffset(target);
+                        const elTop = getOffset(this.$el).top;
                         const elHeight = this.$el.offsetHeight;
 
                         if (
@@ -157,7 +142,7 @@ export default {
                                 top -
                                     elHeight -
                                     (isNumeric(this.targetOffset) ? this.targetOffset : 0) -
-                                    this.offset
+                                    toPx(this.offset, 'height')
                             );
                         }
                     });
@@ -177,35 +162,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 +212,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 +321,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 +349,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 +396,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)