uikit 3.11.2-dev.72dbb9a19 → 3.11.2-dev.76734f785

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.11.2-dev.72dbb9a19",
+    "version": "3.11.2-dev.76734f785",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/internal/slider-preload.js

@@ -0,0 +1,37 @@
+import { $$, isVisible, removeAttr } from 'uikit-util';
+
+export default {
+    connected() {
+        if (window.IntersectionObserver) {
+            this.observer = new IntersectionObserver(
+                (entries) => {
+                    if (entries.some((entry) => entry.isIntersecting)) {
+                        removeLazyLoad(this.getAdjacentSlides());
+                    }
+                },
+                { rootMargin: '50% 50%' }
+            );
+            this.observer.observe(this.$el);
+        }
+    },
+
+    disconnected() {
+        this.observer && this.observer.disconnect();
+    },
+
+    update: {
+        read() {
+            if (isVisible(this.$el)) {
+                removeLazyLoad(this.getAdjacentSlides());
+            }
+        },
+
+        events: ['resize'],
+    },
+};
+
+export function removeLazyLoad(elements = []) {
+    for (const el of elements) {
+        el && $$('img[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+    }
+}

package/src/js/components/slider.js

@@ -1,6 +1,7 @@
 import Class from '../mixin/class';
 import Slider, { speedUp } from '../mixin/slider';
 import SliderReactive from '../mixin/slider-reactive';
+import SliderPreload from './internal/slider-preload';
 import Transitioner, { getMax, getWidth } from './internal/slider-transitioner';
 import {
     $,
@@ -11,16 +12,14 @@ import {
     dimensions,
     findIndex,
     includes,
-    isEmpty,
     last,
-    sortBy,
     toFloat,
     toggleClass,
     toNumber,
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Slider, SliderReactive],
+    mixins: [Class, Slider, SliderReactive, SliderPreload],
 
     props: {
         center: Boolean,
@@ -72,48 +71,39 @@ export default {
             return ~index ? index : this.length - 1;
         },
 
-        sets({ sets }) {
-            if (!sets) {
+        sets({ sets: enabled }) {
+            if (!enabled) {
                 return;
             }
 
-            const width = dimensions(this.list).width / (this.center ? 2 : 1);
-
             let left = 0;
-            let leftCenter = width;
-            let slideLeft = 0;
-
-            sets = sortBy(this.slides, 'offsetLeft').reduce((sets, slide, i) => {
-                const slideWidth = dimensions(slide).width;
-                const slideRight = slideLeft + slideWidth;
+            const sets = [];
+            const width = dimensions(this.list).width;
+            for (let i in this.slides) {
+                const slideWidth = dimensions(this.slides[i]).width;
 
-                if (slideRight > left) {
-                    if (!this.center && i > this.maxIndex) {
-                        i = this.maxIndex;
-                    }
+                if (left + slideWidth > width) {
+                    left = 0;
+                }
 
-                    if (!includes(sets, i)) {
-                        const cmp = this.slides[i + 1];
-                        if (
-                            this.center &&
-                            cmp &&
-                            slideWidth < leftCenter - dimensions(cmp).width / 2
-                        ) {
-                            leftCenter -= slideWidth;
-                        } else {
-                            leftCenter = width;
-                            sets.push(i);
-                            left = slideLeft + width + (this.center ? slideWidth / 2 : 0);
-                        }
+                if (this.center) {
+                    if (
+                        left < width / 2 &&
+                        left + slideWidth + dimensions(this.slides[+i + 1]).width / 2 > width / 2
+                    ) {
+                        sets.push(+i);
+                        left = width / 2 - slideWidth / 2;
                     }
+                } else if (left === 0) {
+                    sets.push(Math.min(+i, this.maxIndex));
                 }
 
-                slideLeft += slideWidth;
+                left += slideWidth;
+            }
 
+            if (sets.length) {
                 return sets;
-            }, []);
-
-            return !isEmpty(sets) && sets;
+            }
         },
 
         transitionOptions() {
@@ -258,6 +248,25 @@ export default {
 
             return index;
         },
+
+        getAdjacentSlides() {
+            const { width } = dimensions(this.list);
+            const left = -width;
+            const right = width * 2;
+            const slideWidth = dimensions(this.slides[this.index]).width;
+            const slideLeft = this.center ? width / 2 - slideWidth / 2 : 0;
+            const slides = new Set();
+            for (const i of [-1, 1]) {
+                let currentLeft = slideLeft + (i > 0 ? slideWidth : 0);
+                let j = 0;
+                do {
+                    const slide = this.slides[this.getIndex(this.index + i + j++ * i)];
+                    currentLeft += dimensions(slide).width * i;
+                    slides.add(slide);
+                } while (this.slides.length > j && currentLeft > left && currentLeft < right);
+            }
+            return Array.from(slides);
+        },
     },
 };
 

package/src/js/components/slideshow.js

@@ -2,10 +2,11 @@ import Class from '../mixin/class';
 import Slideshow from '../mixin/slideshow';
 import Animations from './internal/slideshow-animations';
 import SliderReactive from '../mixin/slider-reactive';
+import SliderPreload from './internal/slider-preload';
 import { boxModelAdjust, css } from 'uikit-util';
 
 export default {
-    mixins: [Class, Slideshow, SliderReactive],
+    mixins: [Class, Slideshow, SliderReactive, SliderPreload],
 
     props: {
         ratio: String,
@@ -50,4 +51,10 @@ export default {
 
         events: ['resize'],
     },
+
+    methods: {
+        getAdjacentSlides() {
+            return [1, -1].map((i) => this.slides[this.getIndex(this.index + i)]);
+        },
+    },
 };

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/icon.js

@@ -68,14 +68,14 @@ const Icon = {
     },
 
     methods: {
-        getSvg() {
+        async getSvg() {
             const icon = getIcon(this.icon);
 
             if (!icon) {
-                return Promise.reject('Icon not found.');
+                throw 'Icon not found.';
             }
 
-            return Promise.resolve(icon);
+            return icon;
         },
     },
 };
@@ -137,9 +137,16 @@ export const Close = {
 export const Spinner = {
     extends: IconComponent,
 
-    async connected() {
-        const svg = await this.svg;
-        svg && this.ratio !== 1 && css($('circle', svg), 'strokeWidth', 1 / this.ratio);
+    methods: {
+        async getSvg() {
+            const icon = await Icon.methods.getSvg.call(this);
+
+            if (this.ratio !== 1) {
+                css($('circle', icon), 'strokeWidth', 1 / this.ratio);
+            }
+
+            return icon;
+        },
     },
 };
 

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) {
+        write(store) {
+            if (!this.observer || isImg(this.$el)) {
                 return false;
             }
 
-            if (!image && document.readyState === 'complete') {
-                this.load(this.observer.takeRecords());
-            }
-
-            if (this.isImg) {
-                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,24 +119,18 @@ 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() {
@@ -165,12 +143,11 @@ export default {
     },
 };
 
-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) {
@@ -180,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;
@@ -229,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');
 }