uikit 3.9.5-dev.ab814f7fb → 3.9.5-dev.ce77459c6

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.9.5-dev.ab814f7fb",
+  "version": "3.9.5-dev.ce77459c6",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/img.js

@@ -1,4 +1,4 @@
-import {$, attr, children, createEvent, css, data, Dimensions, escape, getImage, includes, isUndefined, once, parent, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+import {attr, children, createEvent, css, data, escape, includes, isUndefined, parent, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
 
 export default {
 
@@ -6,8 +6,6 @@ export default {
 
     props: {
         dataSrc: String,
-        width: Number,
-        height: Number,
         offsetTop: String,
         offsetLeft: String,
         target: String
@@ -15,8 +13,6 @@ export default {
 
     data: {
         dataSrc: '',
-        width: false,
-        height: false,
         offsetTop: '50vh',
         offsetLeft: '50vw',
         target: false
@@ -24,10 +20,6 @@ export default {
 
     computed: {
 
-        cacheKey({dataSrc}) {
-            return `${this.$name}.${dataSrc}`;
-        },
-
         target: {
 
             get({target}) {
@@ -38,14 +30,6 @@ export default {
                 this.observe();
             }
 
-        },
-
-        offsetTop({offsetTop}) {
-            return toPx(offsetTop, 'height');
-        },
-
-        offsetLeft({offsetLeft}) {
-            return toPx(offsetLeft, 'width');
         }
 
     },
@@ -53,21 +37,13 @@ export default {
     connected() {
 
         if (!window.IntersectionObserver) {
-            setSrcAttrs(this.$el);
+            setSrcAttrs(this.$el, this.dataSrc);
             return;
         }
 
-        if (storage[this.cacheKey]) {
-            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, {
-            rootMargin: `${this.offsetTop}px ${this.offsetLeft}px`
-        });
-
-        requestAnimationFrame(this.observe);
+        const rootMargin = `${toPx(this.offsetTop, 'height')}px ${toPx(this.offsetLeft, 'width')}px`;
+        this.observer = new IntersectionObserver(this.load, {rootMargin});
+        this.observe();
 
     },
 
@@ -79,19 +55,11 @@ export default {
 
         read({image}) {
 
-            if (!this.observer) {
-                return false;
-            }
-
-            if (!image && document.readyState === 'complete') {
-                this.load(this.observer.takeRecords());
-            }
-
-            if (isImg(this.$el)) {
+            if (!this.observer || isImg(this.$el)) {
                 return false;
             }
 
-            image && image.then(img => img && img.currentSrc !== '' && setSrcAttrs(this.$el, currentSrc(img)));
+            setSrcAttrs(this.$el, image && image.currentSrc);
 
         },
 
@@ -123,13 +91,13 @@ export default {
                 return;
             }
 
-            this._data.image = getImageFromElement(this.$el, this.dataSrc).then(img => {
-
-                setSrcAttrs(this.$el, currentSrc(img));
-                storage[this.cacheKey] = currentSrc(img);
-                return img;
+            if (this._data.image) {
+                return this._data.image;
+            }
 
-            }, e => trigger(this.$el, new e.constructor(e.type, e)));
+            const image = isImg(this.$el) ? this.$el : getImageFromElement(this.$el, this.dataSrc);
+            this._data.image = image;
+            setSrcAttrs(this.$el, image.currentSrc);
 
             this.observer.disconnect();
         },
@@ -144,19 +112,12 @@ export default {
 
 };
 
-const srcProps = ['data-src', 'data-srcset', 'sizes'];
 function setSrcAttrs(el, src) {
 
-    const parentNode = parent(el);
     if (isImg(el)) {
-        (isPicture(parentNode) ? children(parentNode) : [el]).forEach(el =>
-            srcProps.forEach(prop => {
-                const value = data(el, prop);
-                if (value) {
-                    attr(el, prop.replace(/^(data-)+/, ''), value);
-                }
-            })
-        );
+        const parentNode = parent(el);
+        const elements = isPicture(parentNode) ? children(parentNode) : [el];
+        elements.forEach(setSourceProps);
         src && attr(el, 'src', src);
     } else if (src) {
 
@@ -170,16 +131,26 @@ function setSrcAttrs(el, src) {
 
 }
 
-function getPlaceholderImage(el) {
-    const sizes = data(el, 'sizes');
-    let width = data(el, 'width');
-    let height = data(el, 'height');
+const srcProps = ['data-src', 'data-srcset', 'sizes'];
+function setSourceProps(sourceEl, targetEl) {
+    srcProps.forEach(prop => {
+        const value = data(sourceEl, prop);
+        if (value) {
+            attr(targetEl || sourceEl, prop.replace(/^(data-)+/, ''), value);
+        }
+    });
+}
+
+function getImageFromElement(el, src) {
 
-    if (sizes) {
-        ({width, height} = Dimensions.ratio({width, height}, 'width', toPx(sizesToPixel(sizes))));
+    if (!src) {
+        return false;
     }
 
-    return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
+    const img = new Image();
+    setSourceProps(el, img);
+    attr(img, 'src', src);
+    return img;
 }
 
 const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -198,24 +169,6 @@ function sizesToPixel(sizes) {
     return matches || '100vw';
 }
 
-function getImageFromElement(el, src) {
-    const parentNode = parent(el);
-
-    if (!src) {
-        return Promise.reject(createEvent('error', false));
-    }
-
-    if (!isPicture(parentNode)) {
-        return getImage(src, ...srcProps.slice(1).map(prop => data(el, prop)));
-    }
-
-    return new Promise((resolve, reject) => {
-        const picture = parentNode.cloneNode(true);
-        once(picture, 'load error', e => e.type === 'error' ? reject(e) : resolve(e.target), true);
-        setSrcAttrs($('img', picture));
-    });
-}
-
 const sizeRe = /\d+(?:\w+|%)/g;
 const additionRe = /[+-]?(\d+)/g;
 function evaluateSize(size) {
@@ -248,19 +201,3 @@ function isImg(el) {
 function isA(el, tagName) {
     return el && el.tagName === tagName;
 }
-
-function currentSrc(el) {
-    return el.currentSrc || el.src;
-}
-
-const key = '__test__';
-let 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 = {};
-}

package/tests/image.html

@@ -14,8 +14,6 @@
 
             <h1>Image</h1>
 
-            <p><button class="uk-button uk-button-default" onclick="sessionStorage.clear()">Clear Session Storage</button></p>
-
             <div class="uk-child-width-1-2@m" uk-grid>
                 <div>
                     <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
@@ -255,28 +253,28 @@
 
                         <ul class="uk-slideshow-items">
                             <li>
-                                <img data-src="images/photo.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
+                                <img data-src="images/photo.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                                     <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                                 </div>
                             </li>
                             <li>
-                                <img data-src="images/dark.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
+                                <img data-src="images/dark.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                                     <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                                 </div>
                             </li>
                             <li>
-                                <img data-src="images/light.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
+                                <img data-src="images/light.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
                                     <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
                                 </div>
                             </li>
                             <li>
-                                <img data-src="images/photo2.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
+                                <img data-src="images/photo2.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                                     <p uk-slideshow-parallax="x: 0,0,-200">Lorem ipsum dolor sit amet.</p>
@@ -296,43 +294,43 @@
 
                         <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m">
                             <li>
-                                <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
                             </li>
                         </ul>
@@ -364,30 +362,6 @@
                             <td>''</td>
                             <td>The image's `src` attribute.</td>
                         </tr>
-                        <tr>
-                            <td><code>dataSrcset</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The image's `srcset` attribute.</td>
-                        </tr>
-                        <tr>
-                            <td><code>sizes</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The image's `sizes` attribute.</td>
-                        </tr>
-                        <tr>
-                            <td><code>width</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The image's `width` attribute. It will be used to determine the placeholder's width and the images position in the document.</td>
-                        </tr>
-                        <tr>
-                            <td><code>height</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The image's `height` attribute. It will be used to determine the placeholder's height and the images position in the document.</td>
-                        </tr>
                         <tr>
                             <td><code>offsetTop</code></td>
                             <td>String</td>