uikit 3.9.5-dev.4be822584 → 3.9.5-dev.59737a9b5

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.4be822584",
+  "version": "3.9.5-dev.59737a9b5",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -41,8 +41,8 @@
     "camelcase": "^6.2.1",
     "clean-css": "^5.2.2",
     "dateformat": "^5.0.2",
-    "esbuild": "^0.13.14",
-    "eslint": "^8.2.0",
+    "esbuild": "^0.14.6",
+    "eslint": "^8.5.0",
     "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
@@ -50,10 +50,8 @@
     "minimist": "^1.2.5",
     "number-precision": "^1.5.1",
     "p-limit": "^4.0.0",
-    "postcss": "^8.3.11",
-    "prettier": "^2.4.1",
-    "rollup": "^2.60.0",
-    "rollup-plugin-esbuild": "^4.7.1",
+    "rollup": "^2.61.1",
+    "rollup-plugin-esbuild": "^4.7.2",
     "rollup-plugin-html": "^0.2.1",
     "rollup-plugin-modify": "^3.0.0",
     "rtlcss": "^3.5.0",

package/src/js/components/sortable.js

@@ -300,7 +300,7 @@ function trackScroll(pos) {
         const dist = (Date.now() - last) * .3;
         last = Date.now();
 
-        scrollParents(document.elementFromPoint(x, pos.y)).reverse().some(scrollEl => {
+        scrollParents(document.elementFromPoint(x, pos.y), /auto|scroll/).reverse().some(scrollEl => {
 
             let {scrollTop: scroll, scrollHeight} = scrollEl;
 

package/src/js/core/img.js

@@ -1,4 +1,4 @@
-import {attr, children, createEvent, css, data, escape, includes, isUndefined, parent, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+import {createEvent, css, Dimensions, escape, getImage, includes, isUndefined, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
 
 export default {
 
@@ -6,6 +6,10 @@ export default {
 
     props: {
         dataSrc: String,
+        dataSrcset: Boolean,
+        sizes: String,
+        width: Number,
+        height: Number,
         offsetTop: String,
         offsetLeft: String,
         target: String
@@ -13,6 +17,10 @@ export default {
 
     data: {
         dataSrc: '',
+        dataSrcset: false,
+        sizes: false,
+        width: false,
+        height: false,
         offsetTop: '50vh',
         offsetLeft: '50vw',
         target: false
@@ -20,6 +28,26 @@ export default {
 
     computed: {
 
+        cacheKey({dataSrc}) {
+            return `${this.$name}.${dataSrc}`;
+        },
+
+        width({width, dataWidth}) {
+            return width || dataWidth;
+        },
+
+        height({height, dataHeight}) {
+            return height || dataHeight;
+        },
+
+        sizes({sizes, dataSizes}) {
+            return sizes || dataSizes;
+        },
+
+        isImg(_, $el) {
+            return isImg($el);
+        },
+
         target: {
 
             get({target}) {
@@ -30,6 +58,14 @@ export default {
                 this.observe();
             }
 
+        },
+
+        offsetTop({offsetTop}) {
+            return toPx(offsetTop, 'height');
+        },
+
+        offsetLeft({offsetLeft}) {
+            return toPx(offsetLeft, 'width');
         }
 
     },
@@ -37,13 +73,21 @@ export default {
     connected() {
 
         if (!window.IntersectionObserver) {
-            setSrcAttrs(this.$el, this.dataSrc);
+            setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
             return;
         }
 
-        const rootMargin = `${toPx(this.offsetTop, 'height')}px ${toPx(this.offsetLeft, 'width')}px`;
-        this.observer = new IntersectionObserver(this.load, {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);
 
     },
 
@@ -55,23 +99,30 @@ export default {
 
         read({image}) {
 
-            if (!this.observer || isImg(this.$el)) {
+            if (!this.observer) {
+                return false;
+            }
+
+            if (!image && document.readyState === 'complete') {
+                this.load(this.observer.takeRecords());
+            }
+
+            if (this.isImg) {
                 return false;
             }
 
-            setSrcAttrs(this.$el, image && image.currentSrc);
+            image && image.then(img => img && img.currentSrc !== '' && setSrcAttrs(this.$el, currentSrc(img)));
 
         },
 
-        write(store) {
+        write(data) {
 
-            const srcset = data(this.$el, 'data-srcset');
-            if (srcset && window.devicePixelRatio !== 1) {
+            if (this.dataSrcset && window.devicePixelRatio !== 1) {
 
                 const 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`);
                 }
 
             }
@@ -91,13 +142,13 @@ export default {
                 return;
             }
 
-            if (this._data.image) {
-                return this._data.image;
-            }
+            this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(img => {
+
+                setSrcAttrs(this.$el, currentSrc(img), img.srcset, img.sizes);
+                storage[this.cacheKey] = currentSrc(img);
+                return img;
 
-            const image = isImg(this.$el) ? this.$el : getImageFromElement(this.$el, this.dataSrc);
-            this._data.image = image;
-            setSrcAttrs(this.$el, image.currentSrc || this.dataSrc);
+            }, e => trigger(this.$el, new e.constructor(e.type, e)));
 
             this.observer.disconnect();
         },
@@ -112,15 +163,13 @@ export default {
 
 };
 
-function setSrcAttrs(el, src) {
+function setSrcAttrs(el, src, srcset, sizes) {
 
     if (isImg(el)) {
-
-        const parentNode = parent(el);
-        const elements = isPicture(parentNode) ? children(parentNode) : [el];
-        elements.forEach(el => setSourceProps(el, el));
-        src && attr(el, 'src', src);
-
+        const set = (prop, val) => val && val !== el[prop] && (el[prop] = val);
+        set('sizes', sizes);
+        set('srcset', srcset);
+        set('src', src);
     } else if (src) {
 
         const change = !includes(el.style.backgroundImage, src);
@@ -133,26 +182,13 @@ function setSrcAttrs(el, src) {
 
 }
 
-const srcProps = ['data-src', 'data-srcset', 'sizes'];
-function setSourceProps(sourceEl, targetEl) {
-    srcProps.forEach(prop => {
-        const value = data(sourceEl, prop);
-        if (value) {
-            attr(targetEl, prop.replace(/^(data-)+/, ''), value);
-        }
-    });
-}
-
-function getImageFromElement(el, src) {
+function getPlaceholderImage(width, height, sizes) {
 
-    if (!src) {
-        return false;
+    if (sizes) {
+        ({width, height} = Dimensions.ratio({width, height}, 'width', toPx(sizesToPixel(sizes))));
     }
 
-    const img = new Image();
-    setSourceProps(el, img);
-    attr(img, 'src', src);
-    return img;
+    return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
 }
 
 const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -192,14 +228,22 @@ function getSourceSize(srcset, sizes) {
     return descriptors.filter(size => 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;
+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/src/js/util/dom.js

@@ -1,4 +1,4 @@
-import {on} from './event';
+import {once} from './event';
 import {parent} from './filter';
 import {find, findAll} from './selector';
 import {isElement, isString, isUndefined, toNode, toNodes} from './lang';
@@ -10,10 +10,7 @@ export function ready(fn) {
         return;
     }
 
-    const unbind = on(document, 'DOMContentLoaded', function () {
-        unbind();
-        fn();
-    });
+    once(document, 'DOMContentLoaded', fn);
 }
 
 export function empty(element) {

package/src/less/components/list.less

@@ -95,7 +95,7 @@
 .uk-list-decimal > * { counter-increment: decimal; }
 
 [class*='uk-list'] > ::before {
-    content: '';
+    content: "";
     position: relative;
     left: -@list-padding-left;
     width: @list-padding-left;

package/src/less/components/utility.less

@@ -303,7 +303,7 @@
     }
 
     .uk-box-shadow-bottom::after {
-        content: '';
+        content: "";
         /* 1 */
         position: absolute;
         bottom: -@box-shadow-bottom-height;

package/src/scss/components/list.scss

@@ -95,7 +95,7 @@ $internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D
 .uk-list-decimal > * { counter-increment: decimal; }
 
 [class*='uk-list'] > ::before {
-    content: '';
+    content: "";
     position: relative;
     left: (-$list-padding-left);
     width: $list-padding-left;

package/src/scss/components/utility.scss

@@ -303,7 +303,7 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
     }
 
     .uk-box-shadow-bottom::after {
-        content: '';
+        content: "";
         /* 1 */
         position: absolute;
         bottom: (-$box-shadow-bottom-height);

package/tests/image.html

@@ -14,6 +14,8 @@
 
             <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>
@@ -253,28 +255,28 @@
 
                         <ul class="uk-slideshow-items">
                             <li>
-                                <img data-src="images/photo.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
+                                <img data-src="images/photo.jpg" alt="" uk-cover data-width="1800" data-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 width="1800" height="1200" uk-img="target: !* -*, !* +*">
+                                <img data-src="images/dark.jpg" alt="" uk-cover data-width="1800" data-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 width="1800" height="1200" uk-img="target: !* -*, !* +*">
+                                <img data-src="images/light.jpg" alt="" uk-cover data-width="1800" data-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 width="1800" height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
+                                <img data-src="images/photo2.jpg" alt="" uk-cover data-width="1800" data-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>
@@ -294,43 +296,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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider1.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider2.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider3.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider4.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider5.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider1.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider2.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider3.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider4.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider5.jpg" alt="" data-width="400" data-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>
@@ -362,6 +364,30 @@
                             <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>