uikit 3.9.3-dev.770c92c8a → 3.9.5-dev.13c625552

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.9.3-dev.770c92c8a | https://www.getuikit.com | (c) 2014 - 2021 YOOtheme | MIT License */
+/*! UIkit 3.9.5-dev.13c625552 | https://www.getuikit.com | (c) 2014 - 2021 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -3465,7 +3465,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.9.3-dev.770c92c8a';
+    UIkit.version = '3.9.5-dev.13c625552';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -5785,12 +5785,7 @@
 
     var img = {
 
-        args: 'dataSrc',
-
         props: {
-            dataSrc: String,
-            dataSrcset: Boolean,
-            sizes: String,
             width: Number,
             height: Number,
             offsetTop: String,
@@ -5799,9 +5794,6 @@
         },
 
         data: {
-            dataSrc: '',
-            dataSrcset: false,
-            sizes: false,
             width: false,
             height: false,
             offsetTop: '50vh',
@@ -5811,10 +5803,8 @@
 
         computed: {
 
-            cacheKey: function(ref) {
-                var dataSrc = ref.dataSrc;
-
-                return ((this.$name) + "." + dataSrc);
+            cacheKey: function() {
+                return ((this.$name) + "." + (data(this.$el, 'data-src')));
             },
 
             width: function(ref) {
@@ -5831,17 +5821,6 @@
                 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) {
@@ -5873,14 +5852,14 @@
         connected: function() {
 
             if (!window.IntersectionObserver) {
-                setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
+                setSrcAttrs(this.$el);
                 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));
+                setSrcAttrs(this.$el, storage[this.cacheKey]);
+            } else if (isImg(this.$el) && this.width && this.height) {
+                attr(this.$el, 'src', getPlaceholderImage(this.$el));
             }
 
             this.observer = new IntersectionObserver(this.load, {
@@ -5910,7 +5889,7 @@
                     this.load(this.observer.takeRecords());
                 }
 
-                if (this.isImg) {
+                if (isImg(this.$el)) {
                     return false;
                 }
 
@@ -5918,14 +5897,15 @@
 
             },
 
-            write: function(data) {
+            write: function(store) {
 
-                if (this.dataSrcset && window.devicePixelRatio !== 1) {
+                var srcset = data(this.$el, 'data-srcset');
+                if (srcset && window.devicePixelRatio !== 1) {
 
                     var 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"));
                     }
 
                 }
@@ -5947,9 +5927,9 @@
                     return;
                 }
 
-                this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(function (img) {
+                this._data.image = getImageFromElement(this.$el).then(function (img) {
 
-                    setSrcAttrs(this$1$1.$el, currentSrc(img), img.srcset, img.sizes);
+                    setSrcAttrs(this$1$1.$el, currentSrc(img));
                     storage[this$1$1.cacheKey] = currentSrc(img);
                     return img;
 
@@ -5970,13 +5950,18 @@
 
     };
 
-    function setSrcAttrs(el, src, srcset, sizes) {
+    var srcProps = ['data-src', 'data-srcset', 'sizes'];
+    function setSrcAttrs(el, src) {
 
+        var parentNode = parent(el);
         if (isImg(el)) {
-            var set = function (prop, val) { return val && val !== el[prop] && (el[prop] = val); };
-            set('sizes', sizes);
-            set('srcset', srcset);
-            set('src', src);
+            (isPicture(parentNode) ? children(parentNode) : [el]).forEach(function (el) { return srcProps.forEach(function (prop) {
+                    var value = data(el, prop);
+                    if (value) {
+                        attr(el, prop.replace(/^(data-)+/, ''), value);
+                    }
+                }); }
+            );
         } else if (src) {
 
             var change = !includes(el.style.backgroundImage, src);
@@ -5989,9 +5974,12 @@
 
     }
 
-    function getPlaceholderImage(width, height, sizes) {
+    function getPlaceholderImage(el) {
         var assign;
 
+        var sizes = data(el, 'sizes');
+        var width = data(el, 'width');
+        var height = data(el, 'height');
 
         if (sizes) {
             ((assign = Dimensions.ratio({width: width, height: height}, 'width', toPx(sizesToPixel(sizes))), width = assign.width, height = assign.height));
@@ -6016,6 +6004,19 @@
         return matches || '100vw';
     }
 
+    function getImageFromElement(el) {
+        var parentNode = parent(el);
+        if (!isPicture(parentNode)) {
+            return getImage.apply(void 0, srcProps.map(function (prop) { return data(el, prop); }));
+        }
+
+        return new Promise(function (resolve, reject) {
+            var picture = parentNode.cloneNode(true);
+            once(picture, 'load error', function (e) { return e.type === 'error' ? reject(e) : resolve(e.target); }, true);
+            setSrcAttrs(el);
+        });
+    }
+
     var sizeRe = /\d+(?:\w+|%)/g;
     var additionRe = /[+-]?(\d+)/g;
     function evaluateSize(size) {
@@ -6037,8 +6038,16 @@
         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';
+        return isA(el, 'IMG');
+    }
+
+    function isA(el, tagName) {
+        return el && el.tagName === tagName;
     }
 
     function currentSrc(el) {
@@ -7837,9 +7846,10 @@
 
                     height = !this.isActive ? this.$el.offsetHeight : height;
 
-                    this.topOffset = offset(this.isFixed ? this.placeholder : this.$el).top;
+                    var referenceElement = this.isFixed ? this.placeholder : this.$el;
+                    this.topOffset = offset(referenceElement).top;
                     this.bottomOffset = this.topOffset + height;
-                    this.offsetParentTop = offset(this.$el.offsetParent).top;
+                    this.offsetParentTop = offset(referenceElement.offsetParent).top;
 
                     var bottom = parseProp('bottom', this);