uikit 3.11.1 → 3.11.2-dev.4c11be04b

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.1",
+  "version": "3.11.2-dev.4c11be04b",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/components/slider.js

@@ -30,7 +30,7 @@ export default {
         },
 
         finite({finite}) {
-            return finite || Math.ceil(getWidth(this.list)) < dimensions(this.list).width + getMaxElWidth(this.list) + this.center;
+            return finite || Math.ceil(getWidth(this.list)) < Math.floor(dimensions(this.list).width + getMaxElWidth(this.list) + this.center);
         },
 
         maxIndex() {

package/src/js/mixin/parallax.js

@@ -1,6 +1,6 @@
 import Media from '../mixin/media';
 import {getMaxPathLength} from '../core/svg';
-import {css, Dimensions, each, isNumber, isString, isUndefined, noop, startsWith, toFloat, toPx, ucfirst} from 'uikit-util';
+import {css, Dimensions, each, isNumber, isString, isUndefined, noop, startsWith, toFloat, toPx, trigger, ucfirst} from 'uikit-util';
 
 const props = {
     x: transformFn,
@@ -38,7 +38,7 @@ export default {
         props(properties, $el) {
             return keys(props).reduce((result, prop) => {
                 if (!isUndefined(properties[prop])) {
-                    result[prop] = props[prop].call(this, prop, $el, properties[prop].slice());
+                    result[prop] = props[prop](prop, $el, properties[prop].slice());
                 }
                 return result;
             }, {});
@@ -46,6 +46,12 @@ export default {
 
     },
 
+    events: {
+        bgimageload() {
+            this.$emit();
+        }
+    },
+
     methods: {
 
         reset() {
@@ -186,15 +192,15 @@ function backgroundFn(prop, el, steps) {
     const bgPos = css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
 
     return getCssValue(el, 'backgroundSize', '') === 'cover'
-        ? backgroundCoverFn.call(this, prop, el, steps, bgPos, attr)
+        ? backgroundCoverFn(prop, el, steps, bgPos, attr)
         : setBackgroundPosFn(prop, steps, bgPos);
 }
 
 function backgroundCoverFn(prop, el, steps, bgPos, attr) {
 
-    const image = getBackgroundImage.call(this, el);
+    const dimImage = getBackgroundImageDimensions(el);
 
-    if (!image.naturalWidth) {
+    if (!dimImage.width) {
         return noop;
     }
 
@@ -210,11 +216,6 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
         height: el.offsetHeight
     };
 
-    const dimImage = {
-        width: image.naturalWidth,
-        height: image.naturalHeight
-    };
-
     const baseDim = Dimensions.cover(dimImage, dimEl);
     const span = baseDim[attr] - dimEl[attr];
 
@@ -245,24 +246,34 @@ function setBackgroundPosFn(prop, steps, pos) {
     };
 }
 
-function getBackgroundImage(el) {
+const dimensions = {};
+function getBackgroundImageDimensions(el) {
     const src = css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
 
-    const data = this._data;
-
-    if (data[src]) {
-        return data[src];
+    if (dimensions[src]) {
+        return dimensions[src];
     }
 
+    const image = new Image();
     if (src) {
-        const img = new Image();
-        img.src = src;
-        if (!img.naturalWidth) {
-            img.onload = () => this.$update();
-        }
+        image.src = src;
 
-        return data[src] = img;
+        if (!image.naturalWidth) {
+            image.onload = () => {
+                dimensions[src] = toDimensions(image);
+                trigger(el, 'bgimageload');
+            };
+        }
     }
+
+    return dimensions[src] = toDimensions(image);
+}
+
+function toDimensions(image) {
+    return {
+        width: image.naturalWidth,
+        height: image.naturalHeight
+    };
 }
 
 function getStep(steps, percent) {