uikit 3.11.2-dev.31cd2ba38 → 3.11.2-dev.9433cd5fd

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.31cd2ba38",
+  "version": "3.11.2-dev.9433cd5fd",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/img.js

@@ -1,4 +1,4 @@
-import {append, attr, children, createEvent, css, data, escape, fragment, includes, isArray, isObject, isUndefined, parent, parseOptions, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+import {append, attr, children, createEvent, css, data, escape, fragment, includes, isArray, isEmpty, isUndefined, parent, parseOptions, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
 
 export default {
 
@@ -55,18 +55,10 @@ export default {
 
     update: {
 
-        read({image}) {
-
+        write(store) {
             if (!this.observer || isImg(this.$el)) {
                 return false;
             }
-
-            setSrcAttrs(this.$el, image && image.currentSrc);
-
-        },
-
-        write(store) {
-
             const srcset = data(this.$el, 'data-srcset');
             if (srcset && window.devicePixelRatio !== 1) {
 
@@ -99,10 +91,14 @@ export default {
 
             const image = isImg(this.$el)
                 ? this.$el
-                : getImageFromElement(this.$el, this.dataSrc, parseOptions(this.dataSources));
+                : getImageFromElement(
+                    this.$el,
+                    this.dataSrc,
+                    this.dataSources
+                );
 
             this._data.image = image;
-            setSrcAttrs(this.$el, image.currentSrc || this.dataSrc);
+            setSrcAttrs(this.$el, image.currentSrc);
 
             this.observer.disconnect();
         },
@@ -148,7 +144,7 @@ function setSourceProps(sourceEl, targetEl) {
     });
 }
 
-function getImageFromElement(el, src, sources = []) {
+function getImageFromElement(el, src, sources) {
 
     if (!src) {
         return false;
@@ -156,9 +152,16 @@ function getImageFromElement(el, src, sources = []) {
 
     const img = new Image();
 
-    if (!isArray(sources) && isObject(sources)) {
-        sources = [sources];
-    }
+    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>');
@@ -169,10 +172,28 @@ function getImageFromElement(el, src, sources = []) {
         });
         append(picture, img);
     }
+}
 
-    setSourceProps(el, img);
-    attr(img, 'src', src);
-    return img;
+function parseSources(sources) {
+    if (!sources) {
+        return [];
+    }
+
+    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));
 }
 
 const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;

package/src/js/util/options.js

@@ -1,4 +1,4 @@
-import {assign, hasOwn, includes, isArray, isFunction, isUndefined, sortBy} from './lang';
+import {assign, hasOwn, includes, isArray, isFunction, isUndefined, sortBy, startsWith} from './lang';
 
 const strats = {};
 
@@ -135,7 +135,7 @@ export function parseOptions(options, args = []) {
     try {
 
         return options
-            ? options.match(/^[{[]/)
+            ? startsWith(options, '{')
                 ? JSON.parse(options)
                 : args.length && !includes(options, ':')
                     ? ({[args[0]]: options})