uikit 3.11.2-dev.9433cd5fd → 3.11.2-dev.ae39176f2

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.11.2-dev.9433cd5fd | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.11.2-dev.ae39176f2 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2093,8 +2093,9 @@
 
         try {
 
-            return options
-                ? startsWith(options, '{')
+            return !options
+                ? {}
+                : startsWith(options, '{')
                     ? JSON.parse(options)
                     : args.length && !includes(options, ':')
                         ? (( obj = {}, obj[args[0]] = options, obj ))
@@ -2106,8 +2107,7 @@
                                 options[key.trim()] = value.trim();
                             }
                             return options;
-                        }, {})
-                : {};
+                        }, {});
 
         } catch (e) {
             return {};
@@ -3196,30 +3196,26 @@
         }
 
         function normalizeData(ref, ref$1) {
-            var data = ref.data;
-            var args = ref$1.args;
+            var data = ref.data; if ( data === void 0 ) data = {};
+            var args = ref$1.args; if ( args === void 0 ) args = [];
             var props = ref$1.props; if ( props === void 0 ) props = {};
 
-            data = isArray(data)
-                ? !isEmpty(args)
-                    ? data.slice(0, args.length).reduce(function (data, value, index) {
-                        if (isPlainObject(value)) {
-                            assign(data, value);
-                        } else {
-                            data[args[index]] = value;
-                        }
-                        return data;
-                    }, {})
-                    : undefined
-                : data;
-
-            if (data) {
-                for (var key in data) {
-                    if (isUndefined(data[key])) {
-                        delete data[key];
+            if (isArray(data)) {
+                data = data.slice(0, args.length).reduce(function (data, value, index) {
+                    if (isPlainObject(value)) {
+                        assign(data, value);
                     } else {
-                        data[key] = props[key] ? coerce(props[key], data[key]) : data[key];
+                        data[args[index]] = value;
                     }
+                    return data;
+                }, {});
+            }
+
+            for (var key in data) {
+                if (isUndefined(data[key])) {
+                    delete data[key];
+                } else if (props[key]) {
+                    data[key] = coerce(props[key], data[key]);
                 }
             }
 
@@ -3401,7 +3397,7 @@
 
                 return component.options.functional
                     ? new component({data: isPlainObject(element) ? element : [].concat( argsArray )})
-                    : !element ? init(element) : $$(element).map(init)[0];
+                    : element ? $$(element).map(init)[0] : init();
 
                 function init(element) {
 
@@ -3481,7 +3477,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.11.2-dev.9433cd5fd';
+    UIkit.version = '3.11.2-dev.ae39176f2';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -5808,7 +5804,10 @@
 
         props: {
             dataSrc: String,
-            dataSources: String,
+            dataSrcset: Boolean,
+            sizes: String,
+            width: Number,
+            height: Number,
             offsetTop: String,
             offsetLeft: String,
             target: String
@@ -5816,7 +5815,10 @@
 
         data: {
             dataSrc: '',
-            dataSources: [],
+            dataSrcset: false,
+            sizes: false,
+            width: false,
+            height: false,
             offsetTop: '50vh',
             offsetLeft: '50vw',
             target: false
@@ -5824,6 +5826,37 @@
 
         computed: {
 
+            cacheKey: function(ref) {
+                var dataSrc = ref.dataSrc;
+
+                return ((this.$name) + "." + dataSrc);
+            },
+
+            width: function(ref) {
+                var width = ref.width;
+                var dataWidth = ref.dataWidth;
+
+                return width || dataWidth;
+            },
+
+            height: function(ref) {
+                var height = ref.height;
+                var dataHeight = ref.dataHeight;
+
+                return height || dataHeight;
+            },
+
+            sizes: function(ref) {
+                var sizes = ref.sizes;
+                var dataSizes = ref.dataSizes;
+
+                return sizes || dataSizes;
+            },
+
+            isImg: function(_, $el) {
+                return isImg($el);
+            },
+
             target: {
 
                 get: function(ref) {
@@ -5836,6 +5869,18 @@
                     this.observe();
                 }
 
+            },
+
+            offsetTop: function(ref) {
+                var offsetTop = ref.offsetTop;
+
+                return toPx(offsetTop, 'height');
+            },
+
+            offsetLeft: function(ref) {
+                var offsetLeft = ref.offsetLeft;
+
+                return toPx(offsetLeft, 'width');
             }
 
         },
@@ -5843,13 +5888,21 @@
         connected: function() {
 
             if (!window.IntersectionObserver) {
-                setSrcAttrs(this.$el, this.dataSrc);
+                setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
                 return;
             }
 
-            var rootMargin = (toPx(this.offsetTop, 'height')) + "px " + (toPx(this.offsetLeft, 'width')) + "px";
-            this.observer = new IntersectionObserver(this.load, {rootMargin: rootMargin});
-            this.observe();
+            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));
+            }
+
+            this.observer = new IntersectionObserver(this.load, {
+                rootMargin: ((this.offsetTop) + "px " + (this.offsetLeft) + "px")
+            });
+
+            requestAnimationFrame(this.observe);
 
         },
 
@@ -5859,17 +5912,35 @@
 
         update: {
 
-            write: function(store) {
-                if (!this.observer || isImg(this.$el)) {
+            read: function(ref) {
+                var this$1$1 = this;
+                var image = ref.image;
+
+
+                if (!this.observer) {
+                    return false;
+                }
+
+                if (!image && document.readyState === 'complete') {
+                    this.load(this.observer.takeRecords());
+                }
+
+                if (this.isImg) {
                     return false;
                 }
-                var srcset = data(this.$el, 'data-srcset');
-                if (srcset && window.devicePixelRatio !== 1) {
+
+                image && image.then(function (img) { return img && img.currentSrc !== '' && setSrcAttrs(this$1$1.$el, currentSrc(img)); });
+
+            },
+
+            write: function(data) {
+
+                if (this.dataSrcset && window.devicePixelRatio !== 1) {
 
                     var 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 (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === data.bgSize) {
+                        data.bgSize = getSourceSize(this.dataSrcset, this.sizes);
+                        css(this.$el, 'backgroundSize', ((data.bgSize) + "px"));
                     }
 
                 }
@@ -5883,26 +5954,21 @@
         methods: {
 
             load: function(entries) {
+                var this$1$1 = this;
+
 
                 // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
                 if (!entries.some(function (entry) { return isUndefined(entry.isIntersecting) || entry.isIntersecting; })) {
                     return;
                 }
 
-                if (this._data.image) {
-                    return this._data.image;
-                }
+                this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(function (img) {
 
-                var image = isImg(this.$el)
-                    ? this.$el
-                    : getImageFromElement(
-                        this.$el,
-                        this.dataSrc,
-                        this.dataSources
-                    );
+                    setSrcAttrs(this$1$1.$el, currentSrc(img), img.srcset, img.sizes);
+                    storage[this$1$1.cacheKey] = currentSrc(img);
+                    return img;
 
-                this._data.image = image;
-                setSrcAttrs(this.$el, image.currentSrc);
+                }, function (e) { return trigger(this$1$1.$el, new e.constructor(e.type, e)); });
 
                 this.observer.disconnect();
             },
@@ -5919,15 +5985,13 @@
 
     };
 
-    function setSrcAttrs(el, src) {
+    function setSrcAttrs(el, src, srcset, sizes) {
 
         if (isImg(el)) {
-
-            var parentNode = parent(el);
-            var elements = isPicture(parentNode) ? children(parentNode) : [el];
-            elements.forEach(function (el) { return setSourceProps(el, el); });
-            src && attr(el, 'src', src);
-
+            var set = function (prop, val) { return val && val !== el[prop] && (el[prop] = val); };
+            set('sizes', sizes);
+            set('srcset', srcset);
+            set('src', src);
         } else if (src) {
 
             var change = !includes(el.style.backgroundImage, src);
@@ -5940,66 +6004,15 @@
 
     }
 
-    var srcProps = ['data-src', 'data-srcset', 'sizes'];
-    function setSourceProps(sourceEl, targetEl) {
-        srcProps.forEach(function (prop) {
-            var value = data(sourceEl, prop);
-            if (value) {
-                attr(targetEl, prop.replace(/^(data-)+/, ''), value);
-            }
-        });
-    }
-
-    function getImageFromElement(el, src, sources) {
-
-        if (!src) {
-            return false;
-        }
-
-        var img = new Image();
-
-        wrapInPicture(img, sources);
-        setSourceProps(el, img);
-        img.onload = function () { return setSrcAttrs(el, img.currentSrc); };
-        attr(img, 'src', src);
-        return img;
-    }
-
-    function wrapInPicture(img, sources) {
-
-        sources = parseSources(sources);
-
-        if (sources.length) {
-            var picture = fragment('<picture>');
-            sources.forEach(function (attrs) {
-                var source = fragment('<source>');
-                attr(source, attrs);
-                append(picture, source);
-            });
-            append(picture, img);
-        }
-    }
-
-    function parseSources(sources) {
-        if (!sources) {
-            return [];
-        }
+    function getPlaceholderImage(width, height, sizes) {
+        var assign;
 
-        if (startsWith(sources, '[')) {
-            try {
-                sources = JSON.parse(sources);
-            } catch (e) {
-                sources = [];
-            }
-        } else {
-            sources = parseOptions(sources);
-        }
 
-        if (!isArray(sources)) {
-            sources = [sources];
+        if (sizes) {
+            ((assign = Dimensions.ratio({width: width, height: height}, 'width', toPx(sizesToPixel(sizes))), width = assign.width, height = assign.height));
         }
 
-        return sources.filter(function (source) { return !isEmpty(source); });
+        return ("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>");
     }
 
     var sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -6039,16 +6052,24 @@
         return descriptors.filter(function (size) { return size >= srcSize; })[0] || descriptors.pop() || '';
     }
 
-    function isPicture(el) {
-        return isA(el, 'PICTURE');
+    function isImg(el) {
+        return el.tagName === 'IMG';
     }
 
-    function isImg(el) {
-        return isA(el, 'IMG');
+    function currentSrc(el) {
+        return el.currentSrc || el.src;
     }
 
-    function isA(el, tagName) {
-        return el && el.tagName === tagName;
+    var key = '__test__';
+    var 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 = {};
     }
 
     var Media = {
@@ -7864,7 +7885,7 @@
                     var offsetParentTop = offset(referenceElement.offsetParent).top;
 
                     var top = parseProp(this.top, this.$el, topOffset);
-                    var bottom = parseProp(this.bottom, this.$el, topOffset + height$1);
+                    var bottom = parseProp(this.bottom, this.$el, topOffset + height$1, true);
 
                     var start = Math.max(top, topOffset) - this.offset;
                     var end = bottom
@@ -8071,7 +8092,7 @@
 
     };
 
-    function parseProp(value, el, propOffset) {
+    function parseProp(value, el, propOffset, padding) {
 
         if (!value) {
             return 0;
@@ -8083,7 +8104,9 @@
 
         } else {
 
-            return offset(value === true ? parent(el) : query(value, el)).bottom;
+            var refElement = value === true ? parent(el) : query(value, el);
+            return offset(refElement).bottom
+                - (padding && refElement && within(el, refElement) ? toFloat(css(refElement, 'paddingBottom')) : 0);
 
         }
     }
@@ -12256,11 +12279,12 @@
         var clone = append(container, element.outerHTML.replace(/(^<)(?:li|tr)|(?:li|tr)(\/>$)/g, '$1div$2'));
 
         css(clone, 'margin', '0', 'important');
-        css(clone, assign({
+        css(clone, {
             boxSizing: 'border-box',
             width: element.offsetWidth,
-            height: element.offsetHeight
-        }, css(element, ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'])));
+            height: element.offsetHeight,
+            padding: css(element, 'padding')
+        });
 
         height(clone.firstElementChild, height(element.firstElementChild));