uikit 3.11.2-dev.28b7953b9 → 3.11.2-dev.2b60845fb

package/src/js/core/img.js

@@ -1,66 +1,100 @@
-import {append, attr, children, createEvent, css, data, escape, fragment, hasAttr, includes, isArray, isEmpty, parent, parseOptions, queryAll, 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`
+import {
+    createEvent,
+    css,
+    Dimensions,
+    escape,
+    getImage,
+    includes,
+    isUndefined,
+    queryAll,
+    startsWith,
+    toFloat,
+    toPx,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
     args: 'dataSrc',
 
     props: {
         dataSrc: String,
-        dataSources: String,
+        dataSrcset: Boolean,
+        sizes: String,
+        width: Number,
+        height: Number,
         offsetTop: String,
         offsetLeft: String,
-        target: String
+        target: String,
     },
 
     data: {
         dataSrc: '',
-        dataSources: [],
+        dataSrcset: false,
+        sizes: false,
+        width: false,
+        height: false,
         offsetTop: '50vh',
         offsetLeft: '50vw',
-        target: false
+        target: false,
     },
 
     computed: {
+        cacheKey({ dataSrc }) {
+            return `${this.$name}.${dataSrc}`;
+        },
 
-        target: {
+        width({ width, dataWidth }) {
+            return width || dataWidth;
+        },
+
+        height({ height, dataHeight }) {
+            return height || dataHeight;
+        },
+
+        sizes({ sizes, dataSizes }) {
+            return sizes || dataSizes;
+        },
+
+        isImg(_, $el) {
+            return isImg($el);
+        },
 
-            get({target}) {
+        target: {
+            get({ target }) {
                 return [this.$el, ...queryAll(target, this.$el)];
             },
 
             watch() {
                 this.observe();
-            }
+            },
+        },
 
-        }
+        offsetTop({ offsetTop }) {
+            return toPx(offsetTop, 'height');
+        },
 
+        offsetLeft({ offsetLeft }) {
+            return toPx(offsetLeft, 'width');
+        },
     },
 
     connected() {
-
-        if (!window.IntersectionObserver || !nativeIsIntersecting) {
-            setSrcAttrs(this.$el, this.dataSrc);
+        if (!window.IntersectionObserver) {
+            setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
             return;
         }
 
-        if (nativeLazyLoad && isImg(this.$el)) {
-            this.$el.loading = 'lazy';
-            setSrcAttrs(this.$el);
-
-            if (this.target.length === 1) {
-                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));
         }
 
-        ensureSrcAttribute(this.$el);
-
-        const rootMargin = `${toPx(this.offsetTop, 'height')}px ${toPx(this.offsetLeft, 'width')}px`;
-        this.observer = new IntersectionObserver(this.load, {rootMargin});
-        this.observe();
+        this.observer = new IntersectionObserver(this.load, {
+            rootMargin: `${this.offsetTop}px ${this.offsetLeft}px`,
+        });
 
+        requestAnimationFrame(this.observe);
     },
 
     disconnected() {
@@ -68,145 +102,94 @@ export default {
     },
 
     update: {
-
-        write(store) {
-            if (!this.observer || isImg(this.$el)) {
+        read({ image }) {
+            if (!this.observer) {
                 return false;
             }
-            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) === store.bgSize) {
-                    store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
-                    css(this.$el, 'backgroundSize', `${store.bgSize}px`);
-                }
+            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))
+                );
         },
 
-        events: ['resize']
+        write(data) {
+            if (this.dataSrcset && 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`);
+                }
+            }
+        },
 
+        events: ['resize'],
     },
 
     methods: {
-
         load(entries) {
-
-            if (!entries.some(entry => entry.isIntersecting)) {
+            // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
+            if (
+                !entries.some((entry) => isUndefined(entry.isIntersecting) || entry.isIntersecting)
+            ) {
                 return;
             }
 
-            if (this._data.image) {
-                return this._data.image;
-            }
-
-            const image = isImg(this.$el)
-                ? this.$el
-                : getImageFromElement(
-                    this.$el,
-                    this.dataSrc,
-                    this.dataSources
-                );
-
-            this._data.image = image;
-            image.loading = 'eager';
-            setSrcAttrs(this.$el, image.currentSrc);
+            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))
+            );
 
             this.observer.disconnect();
         },
 
         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) {
-
+function setSrcAttrs(el, src, srcset, sizes) {
     if (isImg(el)) {
-
-        const parentNode = parent(el);
-        const elements = isPicture(parentNode) ? children(parentNode) : [el];
-        elements.forEach(el => setSourceProps(el, el));
-
+        const set = (prop, val) => val && val !== el[prop] && (el[prop] = val);
+        set('sizes', sizes);
+        set('srcset', srcset);
+        set('src', src);
     } else if (src) {
-
         const change = !includes(el.style.backgroundImage, src);
         if (change) {
             css(el, 'backgroundImage', `url(${escape(src)})`);
             trigger(el, createEvent('load', false));
         }
-
-    }
-
-}
-
-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) {
-
-    if (!src) {
-        return false;
-    }
-
-    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>');
-        sources.forEach(attrs => {
-            const source = fragment('<source>');
-            attr(source, attrs);
-            append(picture, source);
-        });
-        append(picture, img);
     }
 }
 
-function parseSources(sources) {
-    if (!sources) {
-        return [];
+function getPlaceholderImage(width, height, sizes) {
+    if (sizes) {
+        ({ width, height } = Dimensions.ratio(
+            { width, height },
+            'width',
+            toPx(sizesToPixel(sizes))
+        ));
     }
 
-    if (startsWith(sources, '[')) {
-        try {
-            sources = JSON.parse(sources);
-        } catch (e) {
-            sources = [];
-        }
-    } else {
-        sources = parseOptions(sources);
-    }
-
-    if (!isArray(sources)) {
-        sources = [sources];
-    }
-
-    return sources.filter(source => !isEmpty(source));
+    return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
 }
 
 const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -230,11 +213,11 @@ const additionRe = /[+-]?(\d+)/g;
 function evaluateSize(size) {
     return startsWith(size, 'calc')
         ? size
-            .slice(5, -1)
-            .replace(sizeRe, size => toPx(size))
-            .replace(/ /g, '')
-            .match(additionRe)
-            .reduce((a, b) => a + +b, 0)
+              .slice(5, -1)
+              .replace(sizeRe, (size) => toPx(size))
+              .replace(/ /g, '')
+              .match(additionRe)
+              .reduce((a, b) => a + +b, 0)
         : size;
 }
 
@@ -243,23 +226,25 @@ function getSourceSize(srcset, sizes) {
     const srcSize = toPx(sizesToPixel(sizes));
     const descriptors = (srcset.match(srcSetRe) || []).map(toFloat).sort((a, b) => a - b);
 
-    return descriptors.filter(size => size >= srcSize)[0] || descriptors.pop() || '';
+    return descriptors.filter((size) => size >= srcSize)[0] || descriptors.pop() || '';
 }
 
-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 isImg(el) {
+    return el.tagName === 'IMG';
 }
 
-function isPicture(el) {
-    return isA(el, 'PICTURE');
+function currentSrc(el) {
+    return el.currentSrc || el.src;
 }
 
-function isImg(el) {
-    return isA(el, 'IMG');
-}
+const key = '__test__';
+let storage;
 
-function isA(el, tagName) {
-    return el && el.tagName === tagName;
+// 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 = {};
 }

package/src/js/core/index.js

@@ -1,41 +1,41 @@
-export {default as Accordion} from './accordion';
-export {default as Alert} from './alert';
-export {default as Cover} from './cover';
-export {default as Drop, default as Dropdown} from './drop';
-export {default as FormCustom} from './form-custom';
-export {default as Gif} from './gif';
-export {default as Grid} from './grid';
-export {default as HeightMatch} from './height-match';
-export {default as HeightViewport} from './height-viewport';
-export {default as Icon} from './icon';
-export {default as Img} from './img';
-export {default as Leader} from './leader';
-export {default as Margin} from './margin';
-export {default as Modal} from './modal';
-export {default as Nav} from './nav';
-export {default as Navbar} from './navbar';
-export {default as Offcanvas} from './offcanvas';
-export {default as OverflowAuto} from './overflow-auto';
-export {default as Responsive} from './responsive';
-export {default as Scroll} from './scroll';
-export {default as Scrollspy} from './scrollspy';
-export {default as ScrollspyNav} from './scrollspy-nav';
-export {default as Sticky} from './sticky';
-export {default as Svg} from './svg';
-export {default as Switcher} from './switcher';
-export {default as Tab} from './tab';
-export {default as Toggle} from './toggle';
-export {default as Video} from './video';
+export { default as Accordion } from './accordion';
+export { default as Alert } from './alert';
+export { default as Cover } from './cover';
+export { default as Drop, default as Dropdown } from './drop';
+export { default as FormCustom } from './form-custom';
+export { default as Gif } from './gif';
+export { default as Grid } from './grid';
+export { default as HeightMatch } from './height-match';
+export { default as HeightViewport } from './height-viewport';
+export { default as Icon } from './icon';
+export { default as Img } from './img';
+export { default as Leader } from './leader';
+export { default as Margin } from './margin';
+export { default as Modal } from './modal';
+export { default as Nav } from './nav';
+export { default as Navbar } from './navbar';
+export { default as Offcanvas } from './offcanvas';
+export { default as OverflowAuto } from './overflow-auto';
+export { default as Responsive } from './responsive';
+export { default as Scroll } from './scroll';
+export { default as Scrollspy } from './scrollspy';
+export { default as ScrollspyNav } from './scrollspy-nav';
+export { default as Sticky } from './sticky';
+export { default as Svg } from './svg';
+export { default as Switcher } from './switcher';
+export { default as Tab } from './tab';
+export { default as Toggle } from './toggle';
+export { default as Video } from './video';
 
 // Icon components
-export {Close} from './icon';
-export {Spinner} from './icon';
-export {Slidenav as SlidenavNext} from './icon';
-export {Slidenav as SlidenavPrevious} from './icon';
-export {Search as SearchIcon} from './icon';
-export {IconComponent as Marker} from './icon';
-export {IconComponent as NavbarToggleIcon} from './icon';
-export {IconComponent as OverlayIcon} from './icon';
-export {IconComponent as PaginationNext} from './icon';
-export {IconComponent as PaginationPrevious} from './icon';
-export {IconComponent as Totop} from './icon';
+export { Close } from './icon';
+export { Spinner } from './icon';
+export { Slidenav as SlidenavNext } from './icon';
+export { Slidenav as SlidenavPrevious } from './icon';
+export { Search as SearchIcon } from './icon';
+export { IconComponent as Marker } from './icon';
+export { IconComponent as NavbarToggleIcon } from './icon';
+export { IconComponent as OverlayIcon } from './icon';
+export { IconComponent as PaginationNext } from './icon';
+export { IconComponent as PaginationPrevious } from './icon';
+export { IconComponent as Totop } from './icon';

package/src/js/core/leader.js

@@ -1,28 +1,25 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
-import {attr, getCssVar, toggleClass, unwrap, wrapInner} from 'uikit-util';
+import { attr, getCssVar, toggleClass, unwrap, wrapInner } from 'uikit-util';
 
 export default {
-
     mixins: [Class, Media],
 
     props: {
-        fill: String
+        fill: String,
     },
 
     data: {
         fill: '',
         clsWrapper: 'uk-leader-fill',
         clsHide: 'uk-leader-hide',
-        attrFill: 'data-fill'
+        attrFill: 'data-fill',
     },
 
     computed: {
-
-        fill({fill}) {
+        fill({ fill }) {
             return fill || getCssVar('leader-fill-content');
-        }
-
+        },
     },
 
     connected() {
@@ -34,9 +31,7 @@ export default {
     },
 
     update: {
-
-        read({changed, width}) {
-
+        read({ changed, width }) {
             const prev = width;
 
             width = Math.floor(this.$el.offsetWidth / 2);
@@ -45,23 +40,19 @@ export default {
                 width,
                 fill: this.fill,
                 changed: changed || prev !== width,
-                hide: !this.matchMedia
+                hide: !this.matchMedia,
             };
         },
 
         write(data) {
-
             toggleClass(this.wrapper, this.clsHide, data.hide);
 
             if (data.changed) {
                 data.changed = false;
                 attr(this.wrapper, this.attrFill, new Array(data.width).join(data.fill));
             }
-
         },
 
-        events: ['resize']
-
-    }
-
+        events: ['resize'],
+    },
 };

package/src/js/core/margin.js

@@ -1,42 +1,37 @@
-import {isRtl, isVisible, offsetPosition, toggleClass} from 'uikit-util';
+import { isRtl, isVisible, offsetPosition, toggleClass } from 'uikit-util';
 
 export default {
-
     props: {
         margin: String,
-        firstColumn: Boolean
+        firstColumn: Boolean,
     },
 
     data: {
         margin: 'uk-margin-small-top',
-        firstColumn: 'uk-first-column'
+        firstColumn: 'uk-first-column',
     },
 
     update: {
-
         read() {
-
             const rows = getRows(this.$el.children);
 
             return {
                 rows,
-                columns: getColumns(rows)
+                columns: getColumns(rows),
             };
         },
 
-        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]));
+        write({ columns, rows }) {
+            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));
                 }
             }
         },
 
-        events: ['resize']
-
-    }
-
+        events: ['resize'],
+    },
 };
 
 export function getRows(items) {
@@ -44,38 +39,30 @@ 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];
         }
     }
 
-    return isRtl
-        ? columns.reverse()
-        : columns;
+    return isRtl ? columns.reverse() : columns;
 }
 
 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);
@@ -100,21 +87,18 @@ function sortBy(items, startProp, endProp) {
                 break;
             }
 
-            if (j === 0) {
+            if (i === 0) {
                 sorted.unshift([el]);
                 break;
             }
-
         }
-
     }
 
     return sorted;
 }
 
 function getOffset(element, offset = false) {
-
-    let {offsetTop, offsetLeft, offsetHeight, offsetWidth} = element;
+    let { offsetTop, offsetLeft, offsetHeight, offsetWidth } = element;
 
     if (offset) {
         [offsetTop, offsetLeft] = offsetPosition(element);
@@ -124,6 +108,6 @@ function getOffset(element, offset = false) {
         top: offsetTop,
         left: offsetLeft,
         bottom: offsetTop + offsetHeight,
-        right: offsetLeft + offsetWidth
+        right: offsetLeft + offsetWidth,
     };
 }