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

package/src/js/core/cover.js

@@ -1,10 +1,9 @@
 import Video from './video';
-import Class from '../mixin/class';
 import {css, Dimensions, parent} from 'uikit-util';
 
 export default {
 
-    mixins: [Class, Video],
+    mixins: [Video],
 
     props: {
         width: Number,

package/src/js/core/drop.js

@@ -1,7 +1,7 @@
 import Container from '../mixin/container';
 import Position from '../mixin/position';
 import Togglable from '../mixin/togglable';
-import {addClass, append, apply, css, hasClass, includes, isTouch, matches, MouseTracker, offset, on, once, parent, pointerCancel, pointerDown, pointerEnter, pointerLeave, pointerUp, query, removeClass, toggleClass, within} from 'uikit-util';
+import {addClass, append, apply, attr, css, hasClass, includes, isTouch, matches, MouseTracker, offset, on, once, parent, pointerCancel, pointerDown, pointerEnter, pointerLeave, pointerUp, query, removeClass, toggleClass, within} from 'uikit-util';
 
 export let active;
 
@@ -62,7 +62,8 @@ export default {
             this.target = this.$create('toggle', query(this.toggle, this.$el), {
                 target: this.$el,
                 mode: this.mode
-            });
+            }).$el;
+            attr(this.target, 'aria-haspopup', true);
         }
 
     },

package/src/js/core/img.js

@@ -1,18 +1,18 @@
-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 {
 
+    args: 'dataSrc',
+
     props: {
-        width: Number,
-        height: Number,
+        dataSrc: String,
         offsetTop: String,
         offsetLeft: String,
         target: String
     },
 
     data: {
-        width: false,
-        height: false,
+        dataSrc: '',
         offsetTop: '50vh',
         offsetLeft: '50vw',
         target: false
@@ -20,18 +20,6 @@ export default {
 
     computed: {
 
-        cacheKey() {
-            return `${this.$name}.${data(this.$el, 'data-src')}`;
-        },
-
-        width({width, dataWidth}) {
-            return width || dataWidth;
-        },
-
-        height({height, dataHeight}) {
-            return height || dataHeight;
-        },
-
         target: {
 
             get({target}) {
@@ -42,14 +30,6 @@ export default {
                 this.observe();
             }
 
-        },
-
-        offsetTop({offsetTop}) {
-            return toPx(offsetTop, 'height');
-        },
-
-        offsetLeft({offsetLeft}) {
-            return toPx(offsetLeft, 'width');
         }
 
     },
@@ -57,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();
 
     },
 
@@ -83,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);
 
         },
 
@@ -127,13 +91,13 @@ export default {
                 return;
             }
 
-            this._data.image = getImageFromElement(this.$el).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();
         },
@@ -148,19 +112,13 @@ 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) {
 
         const change = !includes(el.style.backgroundImage, src);
@@ -173,13 +131,26 @@ function setSrcAttrs(el, src) {
 
 }
 
-function getPlaceholderImage(width, height, sizes) {
+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,19 +169,6 @@ function sizesToPixel(sizes) {
     return matches || '100vw';
 }
 
-function getImageFromElement(el) {
-    const parentNode = parent(el);
-    if (!isPicture(parentNode)) {
-        return getImage(...srcProps.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(el);
-    });
-}
-
 const sizeRe = /\d+(?:\w+|%)/g;
 const additionRe = /[+-]?(\d+)/g;
 function evaluateSize(size) {
@@ -243,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/src/js/core/sticky.js

@@ -1,6 +1,6 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
-import {$, addClass, after, Animation, assign, css, dimensions, fastdom, hasClass, isNumeric, isString, isVisible, noop, offset, offsetPosition, parent, query, remove, removeClass, replaceClass, scrollTop, toFloat, toggleClass, toPx, trigger, within} from 'uikit-util';
+import {$, addClass, after, Animation, assign, css, dimensions, fastdom, height as getHeight, hasClass, isNumeric, isString, isVisible, noop, offset, offsetPosition, parent, query, remove, removeClass, replaceClass, scrollTop, toFloat, toggleClass, toPx, trigger, within} from 'uikit-util';
 
 export default {
 
@@ -146,6 +146,11 @@ export default {
 
                 height = !this.isActive ? this.$el.offsetHeight : height;
 
+                if (height + this.offset > getHeight(window)) {
+                    this.inactive = true;
+                    return false;
+                }
+
                 const referenceElement = this.isFixed ? this.placeholder : this.$el;
                 this.topOffset = offset(referenceElement).top;
                 this.bottomOffset = this.topOffset + height;

package/src/less/components/cover.less

@@ -14,14 +14,13 @@
 
 /*
  * Works with iframes and embedded content
- * 1. Apply transform instantly. Needed if transform is transitioned.
+ * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
  * 2. Reset responsiveness for embedded content
  * 3. Center object
  * Note: Percent values on the `top` property only works if this element
  *       is absolute positioned or if the container has a height
  */
 
-.uk-cover,
 /* 1 */
 [uk-cover] {
     /* 2 */

package/src/less/components/link.less

@@ -32,7 +32,8 @@
  ========================================================================== */
 
 a.uk-link-muted,
-.uk-link-muted a {
+.uk-link-muted a,
+.uk-link-toggle .uk-link-muted {
     color: @link-muted-color;
     .hook-link-muted();
 }
@@ -49,7 +50,8 @@ a.uk-link-muted:hover,
  ========================================================================== */
 
 a.uk-link-text,
-.uk-link-text a {
+.uk-link-text a,
+.uk-link-toggle .uk-link-text {
     color: inherit;
     .hook-link-text();
 }
@@ -66,7 +68,8 @@ a.uk-link-text:hover,
  ========================================================================== */
 
 a.uk-link-heading,
-.uk-link-heading a {
+.uk-link-heading a,
+.uk-link-toggle .uk-link-heading {
     color: inherit;
     .hook-link-heading();
 }

package/src/less/components/search.less

@@ -225,6 +225,11 @@
     .hook-search-navbar-input();
 }
 
+/* Focus */
+.uk-search-navbar .uk-search-input:focus {
+    .hook-search-navbar-input-focus();
+}
+
 /*
  * Icon
  */
@@ -251,6 +256,11 @@
     .hook-search-large-input();
 }
 
+/* Focus */
+.uk-search-large .uk-search-input:focus {
+    .hook-search-large-input-focus();
+}
+
 /*
  * Icon
  */
@@ -285,7 +295,9 @@
 .hook-search-default-input() {}
 .hook-search-default-input-focus() {}
 .hook-search-navbar-input() {}
+.hook-search-navbar-input-focus() {}
 .hook-search-large-input() {}
+.hook-search-large-input-focus() {}
 
 .hook-search-toggle() {}
 .hook-search-toggle-hover() {}
@@ -349,11 +361,19 @@
         .hook-inverse-search-navbar-input();
     }
 
+    .uk-search-navbar .uk-search-input:focus {
+        .hook-inverse-search-navbar-input-focus();
+    }
+
     .uk-search-large .uk-search-input {
         background-color: @inverse-search-large-background;
         .hook-inverse-search-large-input();
     }
 
+    .uk-search-large .uk-search-input:focus {
+        .hook-inverse-search-large-input-focus();
+    }
+
     //
     // Toggle
     //
@@ -373,6 +393,8 @@
 .hook-inverse-search-default-input() {}
 .hook-inverse-search-default-input-focus() {}
 .hook-inverse-search-navbar-input() {}
+.hook-inverse-search-navbar-input-focus() {}
 .hook-inverse-search-large-input() {}
+.hook-inverse-search-large-input-focus() {}
 .hook-inverse-search-toggle() {}
 .hook-inverse-search-toggle-hover() {}

package/src/less/components/utility.less

@@ -242,6 +242,12 @@
     max-width: none;
 }
 
+/*
+ * Fix initial iframe width. Without the viewport is expanded on iOS devices
+ */
+
+[uk-responsive] { max-width: 100%; }
+
 
 /* Border
  ========================================================================== */

package/src/less/theme/search.less

@@ -38,12 +38,16 @@
 
 .hook-search-navbar-input() {}
 
+.hook-search-navbar-input-focus() {}
+
 
 // Large modifiers
 // ========================================================================
 
 .hook-search-large-input() {}
 
+.hook-search-large-input-focus() {}
+
 
 // Toggle
 // ========================================================================
@@ -68,8 +72,10 @@
 .hook-inverse-search-default-input-focus() {}
 
 .hook-inverse-search-navbar-input() {}
+.hook-inverse-search-navbar-input-focus() {}
 
 .hook-inverse-search-large-input() {}
+.hook-inverse-search-large-input-focus() {}
 
 .hook-inverse-search-toggle() {}
 .hook-inverse-search-toggle-hover() {}

package/src/scss/components/cover.scss

@@ -14,14 +14,13 @@
 
 /*
  * Works with iframes and embedded content
- * 1. Apply transform instantly. Needed if transform is transitioned.
+ * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
  * 2. Reset responsiveness for embedded content
  * 3. Center object
  * Note: Percent values on the `top` property only works if this element
  *       is absolute positioned or if the container has a height
  */
 
-.uk-cover,
 /* 1 */
 [uk-cover] {
     /* 2 */

package/src/scss/components/link.scss

@@ -32,7 +32,8 @@ $link-heading-hover-text-decoration:             none !default;
  ========================================================================== */
 
 a.uk-link-muted,
-.uk-link-muted a {
+.uk-link-muted a,
+.uk-link-toggle .uk-link-muted {
     color: $link-muted-color;
     @if(mixin-exists(hook-link-muted)) {@include hook-link-muted();}
 }
@@ -49,7 +50,8 @@ a.uk-link-muted:hover,
  ========================================================================== */
 
 a.uk-link-text,
-.uk-link-text a {
+.uk-link-text a,
+.uk-link-toggle .uk-link-text {
     color: inherit;
     @if(mixin-exists(hook-link-text)) {@include hook-link-text();}
 }
@@ -66,7 +68,8 @@ a.uk-link-text:hover,
  ========================================================================== */
 
 a.uk-link-heading,
-.uk-link-heading a {
+.uk-link-heading a,
+.uk-link-toggle .uk-link-heading {
     color: inherit;
     @if(mixin-exists(hook-link-heading)) {@include hook-link-heading();}
 }

package/src/scss/components/search.scss

@@ -225,6 +225,11 @@ $search-toggle-hover-color:                          $global-color !default;
     @if(mixin-exists(hook-search-navbar-input)) {@include hook-search-navbar-input();}
 }
 
+/* Focus */
+.uk-search-navbar .uk-search-input:focus {
+    @if(mixin-exists(hook-search-navbar-input-focus)) {@include hook-search-navbar-input-focus();}
+}
+
 /*
  * Icon
  */
@@ -251,6 +256,11 @@ $search-toggle-hover-color:                          $global-color !default;
     @if(mixin-exists(hook-search-large-input)) {@include hook-search-large-input();}
 }
 
+/* Focus */
+.uk-search-large .uk-search-input:focus {
+    @if(mixin-exists(hook-search-large-input-focus)) {@include hook-search-large-input-focus();}
+}
+
 /*
  * Icon
  */
@@ -285,7 +295,9 @@ $search-toggle-hover-color:                          $global-color !default;
 // @mixin hook-search-default-input(){}
 // @mixin hook-search-default-input-focus(){}
 // @mixin hook-search-navbar-input(){}
+// @mixin hook-search-navbar-input-focus(){}
 // @mixin hook-search-large-input(){}
+// @mixin hook-search-large-input-focus(){}
 
 // @mixin hook-search-toggle(){}
 // @mixin hook-search-toggle-hover(){}
@@ -316,6 +328,8 @@ $inverse-search-toggle-hover-color:             $inverse-global-color !default;
 // @mixin hook-inverse-search-default-input(){}
 // @mixin hook-inverse-search-default-input-focus(){}
 // @mixin hook-inverse-search-navbar-input(){}
+// @mixin hook-inverse-search-navbar-input-focus(){}
 // @mixin hook-inverse-search-large-input(){}
+// @mixin hook-inverse-search-large-input-focus(){}
 // @mixin hook-inverse-search-toggle(){}
 // @mixin hook-inverse-search-toggle-hover(){}

package/src/scss/components/utility.scss

@@ -242,6 +242,12 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
     max-width: none;
 }
 
+/*
+ * Fix initial iframe width. Without the viewport is expanded on iOS devices
+ */
+
+[uk-responsive] { max-width: 100%; }
+
 
 /* Border
  ========================================================================== */

package/src/scss/mixins-theme.scss

@@ -1238,11 +1238,19 @@
         @if(mixin-exists(hook-inverse-search-navbar-input)) {@include hook-inverse-search-navbar-input();}
     }
 
+    .uk-search-navbar .uk-search-input:focus {
+        @if(mixin-exists(hook-inverse-search-navbar-input-focus)) {@include hook-inverse-search-navbar-input-focus();}
+    }
+
     .uk-search-large .uk-search-input {
         background-color: $inverse-search-large-background;
         @if(mixin-exists(hook-inverse-search-large-input)) {@include hook-inverse-search-large-input();}
     }
 
+    .uk-search-large .uk-search-input:focus {
+        @if(mixin-exists(hook-inverse-search-large-input-focus)) {@include hook-inverse-search-large-input-focus();}
+    }
+
     //
     // Toggle
     //
@@ -1839,14 +1847,18 @@
 @mixin hook-search-default-input(){ border: $search-default-border-width solid $search-default-border; }
 @mixin hook-search-default-input-focus(){ border-color: $search-default-focus-border; }
 @mixin hook-search-navbar-input(){}
+@mixin hook-search-navbar-input-focus(){}
 @mixin hook-search-large-input(){}
+@mixin hook-search-large-input-focus(){}
 @mixin hook-search-toggle(){}
 @mixin hook-search-toggle-hover(){}
 @mixin hook-search-misc(){}
 @mixin hook-inverse-search-default-input(){ border-color: $inverse-global-border; }
 @mixin hook-inverse-search-default-input-focus(){}
 @mixin hook-inverse-search-navbar-input(){}
+@mixin hook-inverse-search-navbar-input-focus(){}
 @mixin hook-inverse-search-large-input(){}
+@mixin hook-inverse-search-large-input-focus(){}
 @mixin hook-inverse-search-toggle(){}
 @mixin hook-inverse-search-toggle-hover(){}
 @mixin hook-section(){}

package/src/scss/mixins.scss

@@ -992,11 +992,19 @@
         @if(mixin-exists(hook-inverse-search-navbar-input)) {@include hook-inverse-search-navbar-input();}
     }
 
+    .uk-search-navbar .uk-search-input:focus {
+        @if(mixin-exists(hook-inverse-search-navbar-input-focus)) {@include hook-inverse-search-navbar-input-focus();}
+    }
+
     .uk-search-large .uk-search-input {
         background-color: $inverse-search-large-background;
         @if(mixin-exists(hook-inverse-search-large-input)) {@include hook-inverse-search-large-input();}
     }
 
+    .uk-search-large .uk-search-input:focus {
+        @if(mixin-exists(hook-inverse-search-large-input-focus)) {@include hook-inverse-search-large-input-focus();}
+    }
+
     //
     // Toggle
     //
@@ -1525,14 +1533,18 @@
 @mixin hook-search-default-input(){}
 @mixin hook-search-default-input-focus(){}
 @mixin hook-search-navbar-input(){}
+@mixin hook-search-navbar-input-focus(){}
 @mixin hook-search-large-input(){}
+@mixin hook-search-large-input-focus(){}
 @mixin hook-search-toggle(){}
 @mixin hook-search-toggle-hover(){}
 @mixin hook-search-misc(){}
 @mixin hook-inverse-search-default-input(){}
 @mixin hook-inverse-search-default-input-focus(){}
 @mixin hook-inverse-search-navbar-input(){}
+@mixin hook-inverse-search-navbar-input-focus(){}
 @mixin hook-inverse-search-large-input(){}
+@mixin hook-inverse-search-large-input-focus(){}
 @mixin hook-inverse-search-toggle(){}
 @mixin hook-inverse-search-toggle-hover(){}
 @mixin hook-section(){}

package/src/scss/theme/search.scss

@@ -38,12 +38,16 @@ $search-default-focus-border:                        $global-primary-background
 
 // @mixin hook-search-navbar-input(){}
 
+// @mixin hook-search-navbar-input-focus(){}
+
 
 // Large modifiers
 // ========================================================================
 
 // @mixin hook-search-large-input(){}
 
+// @mixin hook-search-large-input-focus(){}
+
 
 // Toggle
 // ========================================================================
@@ -68,8 +72,10 @@ $inverse-search-default-background:             transparent !default;
 // @mixin hook-inverse-search-default-input-focus(){}
 
 // @mixin hook-inverse-search-navbar-input(){}
+// @mixin hook-inverse-search-navbar-input-focus(){}
 
 // @mixin hook-inverse-search-large-input(){}
+// @mixin hook-inverse-search-large-input-focus(){}
 
 // @mixin hook-inverse-search-toggle(){}
 // @mixin hook-inverse-search-toggle-hover(){}