uikit 3.11.1-dev.fbcf9eec9 → 3.11.2-dev.31cd2ba38

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

package/src/js/api/state.js

@@ -211,11 +211,11 @@ export default function (UIkit) {
             on(
                 el,
                 name,
-                !delegate
-                    ? null
-                    : isString(delegate)
+                delegate
+                    ? isString(delegate)
                         ? delegate
-                        : delegate.call(component),
+                        : delegate.call(component)
+                    : null,
                 isString(handler) ? component[handler] : handler.bind(component),
                 {passive, capture, self}
             )

package/src/js/components/parallax.js

@@ -28,13 +28,15 @@ export default {
         },
 
         start({start}) {
-            return parseCalc(start, this.target);
+            return toPx(start, 'height', this.target, true);
         },
 
         end({end, viewport}) {
-            return parseCalc(
+            return toPx(
                 end || (viewport = (1 - viewport) * 100) && `${viewport}vh+${viewport}%`,
-                this.target
+                'height',
+                this.target,
+                true
             );
         }
 
@@ -77,19 +79,6 @@ export default {
 
 };
 
-const calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
-function parseCalc(calc, el) {
-    let match;
-    let result = 0;
-    calc = calc.toString().replace(/\s/g, '');
-    calcRe.lastIndex = 0;
-    while ((match = calcRe.exec(calc)) !== null) {
-        result += toPx(match, 'height', el, true);
-    }
-
-    return result;
-}
-
 function ease(percent, easing) {
     return easing >= 0
         ? Math.pow(percent, easing + 1)

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/components/sortable.js

@@ -218,7 +218,6 @@ export default {
 
             off(document, pointerMove, this.move);
             off(document, pointerUp, this.end);
-            off(window, 'scroll', this.scroll);
 
             if (!this.drag) {
                 return;
@@ -295,7 +294,7 @@ function trackScroll(pos) {
     trackTimer = setInterval(() => {
 
         let {x, y} = pos;
-        y += window.pageYOffset;
+        y += scrollTop(window);
 
         const dist = (Date.now() - last) * .3;
         last = Date.now();

package/src/js/core/core.js

@@ -13,7 +13,7 @@ export default function (UIkit) {
             return;
         }
         pendingResize = true;
-        fastdom.write(() => pendingResize = false);
+        fastdom.read(() => pendingResize = false);
         UIkit.update(null, 'resize');
     };
 
@@ -32,7 +32,7 @@ export default function (UIkit) {
             return;
         }
         pending = true;
-        fastdom.write(() => pending = false);
+        fastdom.read(() => pending = false);
 
         UIkit.update(null, e.type);
 

package/src/js/core/drop.js

@@ -308,7 +308,7 @@ export default {
             if (active) {
 
                 if (delay && active.isDelaying) {
-                    this.showTimer = setTimeout(this.show, 10);
+                    this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
                     return;
                 }
 

package/src/js/core/height-viewport.js

@@ -1,5 +1,5 @@
 import FlexBug from '../mixin/flex-bug';
-import {boxModelAdjust, css, dimensions, endsWith, height, isNumeric, isString, isVisible, offset, query, toFloat} from 'uikit-util';
+import {boxModelAdjust, css, dimensions, endsWith, height, isNumeric, isString, isVisible, offset, query, toFloat, trigger} from 'uikit-util';
 
 export default {
 
@@ -76,7 +76,7 @@ export default {
             css(this.$el, {minHeight});
 
             if (minHeight !== prev) {
-                this.$update(this.$el, 'resize');
+                trigger(this.$el, 'resize');
             }
 
             if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {

package/src/js/core/img.js

@@ -1,4 +1,4 @@
-import {createEvent, css, Dimensions, escape, getImage, includes, isUndefined, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+import {append, attr, children, createEvent, css, data, escape, fragment, includes, isArray, isObject, isUndefined, parent, parseOptions, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
 
 export default {
 
@@ -6,10 +6,7 @@ export default {
 
     props: {
         dataSrc: String,
-        dataSrcset: Boolean,
-        sizes: String,
-        width: Number,
-        height: Number,
+        dataSources: String,
         offsetTop: String,
         offsetLeft: String,
         target: String
@@ -17,10 +14,7 @@ export default {
 
     data: {
         dataSrc: '',
-        dataSrcset: false,
-        sizes: false,
-        width: false,
-        height: false,
+        dataSources: [],
         offsetTop: '50vh',
         offsetLeft: '50vw',
         target: false
@@ -28,26 +22,6 @@ 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}) {
@@ -58,14 +32,6 @@ export default {
                 this.observe();
             }
 
-        },
-
-        offsetTop({offsetTop}) {
-            return toPx(offsetTop, 'height');
-        },
-
-        offsetLeft({offsetLeft}) {
-            return toPx(offsetLeft, 'width');
         }
 
     },
@@ -73,21 +39,13 @@ export default {
     connected() {
 
         if (!window.IntersectionObserver) {
-            setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
+            setSrcAttrs(this.$el, this.dataSrc);
             return;
         }
 
-        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);
+        const rootMargin = `${toPx(this.offsetTop, 'height')}px ${toPx(this.offsetLeft, 'width')}px`;
+        this.observer = new IntersectionObserver(this.load, {rootMargin});
+        this.observe();
 
     },
 
@@ -99,30 +57,23 @@ export default {
 
         read({image}) {
 
-            if (!this.observer) {
-                return false;
-            }
-
-            if (!image && document.readyState === 'complete') {
-                this.load(this.observer.takeRecords());
-            }
-
-            if (this.isImg) {
+            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);
 
         },
 
-        write(data) {
+        write(store) {
 
-            if (this.dataSrcset && window.devicePixelRatio !== 1) {
+            const srcset = data(this.$el, 'data-srcset');
+            if (srcset && window.devicePixelRatio !== 1) {
 
                 const bgSize = css(this.$el, 'backgroundSize');
-                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === data.bgSize) {
-                    data.bgSize = getSourceSize(this.dataSrcset, this.sizes);
-                    css(this.$el, 'backgroundSize', `${data.bgSize}px`);
+                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === store.bgSize) {
+                    store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
+                    css(this.$el, 'backgroundSize', `${store.bgSize}px`);
                 }
 
             }
@@ -142,13 +93,16 @@ export default {
                 return;
             }
 
-            this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(img => {
+            if (this._data.image) {
+                return this._data.image;
+            }
 
-                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, parseOptions(this.dataSources));
 
-            }, e => trigger(this.$el, new e.constructor(e.type, e)));
+            this._data.image = image;
+            setSrcAttrs(this.$el, image.currentSrc || this.dataSrc);
 
             this.observer.disconnect();
         },
@@ -163,13 +117,15 @@ export default {
 
 };
 
-function setSrcAttrs(el, src, srcset, sizes) {
+function setSrcAttrs(el, src) {
 
     if (isImg(el)) {
-        const set = (prop, val) => val && val !== el[prop] && (el[prop] = val);
-        set('sizes', sizes);
-        set('srcset', srcset);
-        set('src', src);
+
+        const parentNode = parent(el);
+        const elements = isPicture(parentNode) ? children(parentNode) : [el];
+        elements.forEach(el => setSourceProps(el, el));
+        src && attr(el, 'src', src);
+
     } else if (src) {
 
         const change = !includes(el.style.backgroundImage, src);
@@ -182,13 +138,41 @@ function setSrcAttrs(el, src, srcset, sizes) {
 
 }
 
-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, prop.replace(/^(data-)+/, ''), value);
+        }
+    });
+}
+
+function getImageFromElement(el, src, sources = []) {
 
-    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();
+
+    if (!isArray(sources) && isObject(sources)) {
+        sources = [sources];
+    }
+
+    if (sources.length) {
+        const picture = fragment('<picture>');
+        sources.forEach(attrs => {
+            const source = fragment('<source>');
+            attr(source, attrs);
+            append(picture, source);
+        });
+        append(picture, img);
+    }
+
+    setSourceProps(el, img);
+    attr(img, 'src', src);
+    return img;
 }
 
 const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -228,22 +212,14 @@ function getSourceSize(srcset, sizes) {
     return descriptors.filter(size => size >= srcSize)[0] || descriptors.pop() || '';
 }
 
-function isImg(el) {
-    return el.tagName === 'IMG';
+function isPicture(el) {
+    return isA(el, 'PICTURE');
 }
 
-function currentSrc(el) {
-    return el.currentSrc || el.src;
+function isImg(el) {
+    return isA(el, 'IMG');
 }
 
-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 = {};
+function isA(el, tagName) {
+    return el && el.tagName === tagName;
 }

package/src/js/core/navbar.js

@@ -137,7 +137,7 @@ export default {
 
             handler({current}) {
                 const active = this.getActive();
-                if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
+                if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.isDelaying) {
                     active.hide(false);
                 }
             }
@@ -301,7 +301,11 @@ export default {
 
                 const active = this.getActive();
 
-                if (matches(this.dropbar, ':hover') && active && active.$el === $el) {
+                if (matches(this.dropbar, ':hover')
+                    && active
+                    && active.$el === $el
+                    && !this.toggles.some(el => active.target !== el && matches(el, ':focus'))
+                ) {
                     e.preventDefault();
                 }
             }

package/src/js/core/sticky.js

@@ -1,12 +1,13 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
-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';
+import {$, addClass, after, Animation, clamp, css, dimensions, fastdom, height as getHeight, getScrollingElement, hasClass, isNumeric, isString, isVisible, noop, offset, offsetPosition, parent, query, remove, removeClass, replaceClass, scrollTop, toggleClass, toPx, trigger, within} from 'uikit-util';
 
 export default {
 
     mixins: [Class, Media],
 
     props: {
+        position: String,
         top: null,
         bottom: Boolean,
         offset: String,
@@ -22,6 +23,7 @@ export default {
     },
 
     data: {
+        position: 'top',
         top: 0,
         bottom: false,
         offset: 0,
@@ -38,8 +40,19 @@ export default {
 
     computed: {
 
-        offset({offset}) {
-            return toPx(offset);
+        position({position}, $el) {
+            return position === 'auto'
+                ? (this.isFixed ? this.placeholder : $el).offsetHeight > getHeight(window)
+                    ? 'bottom'
+                    : 'top'
+                : position;
+        },
+
+        offset({offset}, $el) {
+            if (this.position === 'bottom') {
+                offset += '+100vh-100%';
+            }
+            return toPx(offset, 'height', $el);
         },
 
         selTarget({selTarget}, $el) {
@@ -100,7 +113,7 @@ export default {
 
             handler() {
 
-                if (!(this.targetOffset !== false && location.hash && window.pageYOffset > 0)) {
+                if (!(this.targetOffset !== false && location.hash && scrollTop(window) > 0)) {
                     return;
                 }
 
@@ -130,7 +143,7 @@ export default {
 
         {
 
-            read({height}, types) {
+            read({height, margin}, types) {
 
                 this.inactive = !this.matchMedia || !isVisible(this.$el);
 
@@ -138,42 +151,52 @@ export default {
                     return false;
                 }
 
-                if (this.isActive && types.has('resize')) {
+                const hide = this.isActive && types.has('resize');
+                if (hide) {
                     this.hide();
-                    height = this.$el.offsetHeight;
-                    this.show();
                 }
 
-                height = this.isActive ? height : this.$el.offsetHeight;
+                if (!this.isActive) {
+                    height = this.$el.offsetHeight;
+                    margin = css(this.$el, 'margin');
+                }
 
-                if (height + this.offset > getHeight(window)) {
-                    this.inactive = true;
-                    return false;
+                if (hide) {
+                    this.show();
                 }
 
+                const overflow = Math.max(0, height + this.offset - getHeight(window));
+
                 const referenceElement = this.isFixed ? this.placeholder : this.$el;
-                this.topOffset = offset(referenceElement).top;
-                this.bottomOffset = this.topOffset + height;
-                this.offsetParentTop = offset(referenceElement.offsetParent).top;
+                const topOffset = offset(referenceElement).top;
+                const offsetParentTop = offset(referenceElement.offsetParent).top;
 
-                const bottom = parseProp('bottom', this);
+                const top = parseProp(this.top, this.$el, topOffset);
+                const bottom = parseProp(this.bottom, this.$el, topOffset + height);
 
-                this.top = Math.max(toFloat(parseProp('top', this)), this.topOffset) - this.offset;
-                this.bottom = bottom && bottom - this.$el.offsetHeight;
-                this.width = dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el).width;
+                const start = Math.max(top, topOffset) - this.offset;
+                const end = bottom
+                    ? bottom - this.$el.offsetHeight + overflow - this.offset
+                    : getScrollingElement(this.$el).scrollHeight - getHeight(window);
 
                 return {
+                    start,
+                    end,
+                    overflow,
+                    topOffset,
+                    offsetParentTop,
                     height,
-                    top: offsetPosition(this.placeholder)[0],
-                    margins: css(this.$el, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])
+                    margin,
+                    width: dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el).width,
+                    top: offsetPosition(this.placeholder)[0]
                 };
             },
 
-            write({height, margins}) {
+            write({height, margin}) {
 
                 const {placeholder} = this;
 
-                css(placeholder, assign({height}, margins));
+                css(placeholder, {height, margin});
 
                 if (!within(placeholder, document)) {
                     after(this.$el, placeholder);
@@ -190,42 +213,48 @@ export default {
 
         {
 
-            read({scroll = 0}) {
+            read({scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end}) {
 
-                this.scroll = window.pageYOffset;
+                const scroll = scrollTop(window);
+                const dir = prevScroll <= scroll ? 'down' : 'up';
 
                 return {
-                    dir: scroll <= this.scroll ? 'down' : 'up',
-                    scroll: this.scroll
+                    dir,
+                    prevDir,
+                    scroll,
+                    prevScroll,
+                    overflowScroll: clamp(
+                        overflowScroll
+                        + clamp(scroll, start, end)
+                        - clamp(prevScroll, start, end),
+                        0,
+                        overflow
+                    )
                 };
             },
 
             write(data, types) {
 
-                const now = Date.now();
                 const isScrollUpdate = types.has('scroll');
-                const {initTimestamp = 0, dir, lastDir, lastScroll, scroll, top} = data;
+                const {initTimestamp = 0, dir, prevDir, scroll, prevScroll = 0, top, start, topOffset, height} = data;
 
-                data.lastScroll = scroll;
-
-                if (scroll < 0 || scroll === lastScroll && isScrollUpdate || this.showOnUp && !isScrollUpdate && !this.isFixed) {
+                if (scroll < 0 || scroll === prevScroll && isScrollUpdate || this.showOnUp && !isScrollUpdate && !this.isFixed) {
                     return;
                 }
 
-                if (now - initTimestamp > 300 || dir !== lastDir) {
+                const now = Date.now();
+                if (now - initTimestamp > 300 || dir !== prevDir) {
                     data.initScroll = scroll;
                     data.initTimestamp = now;
                 }
 
-                data.lastDir = dir;
-
-                if (this.showOnUp && !this.isFixed && Math.abs(data.initScroll - scroll) <= 30 && Math.abs(lastScroll - scroll) <= 10) {
+                if (this.showOnUp && !this.isFixed && Math.abs(data.initScroll - scroll) <= 30 && Math.abs(prevScroll - scroll) <= 10) {
                     return;
                 }
 
                 if (this.inactive
-                    || scroll < this.top
-                    || this.showOnUp && (scroll <= this.top || dir === 'down' && isScrollUpdate || dir === 'up' && !this.isFixed && scroll <= this.bottomOffset)
+                    || scroll < start
+                    || this.showOnUp && (scroll <= start || dir === 'down' && isScrollUpdate || dir === 'up' && !this.isFixed && scroll <= topOffset + height)
                 ) {
 
                     if (!this.isFixed) {
@@ -240,7 +269,7 @@ export default {
 
                     this.isFixed = false;
 
-                    if (this.animation && scroll > this.topOffset) {
+                    if (this.animation && scroll > topOffset) {
                         Animation.cancel(this.$el);
                         Animation.out(this.$el, this.animation).then(() => this.hide(), noop);
                     } else {
@@ -290,23 +319,28 @@ export default {
 
         update() {
 
-            const active = this.top !== 0 || this.scroll > this.top;
-            let top = Math.max(0, this.offset);
+            const {width, scroll = 0, overflow, overflowScroll = 0, start, end, topOffset, height, offsetParentTop} = this._data;
+            const active = start !== 0 || scroll > start;
+            let top = this.offset;
             let position = 'fixed';
 
-            if (isNumeric(this.bottom) && this.scroll > this.bottom - this.offset) {
-                top = this.bottom - this.offsetParentTop;
+            if (scroll > end) {
+                top = end + this.offset - offsetParentTop;
                 position = 'absolute';
             }
 
+            if (overflow) {
+                top -= overflowScroll;
+            }
+
             css(this.$el, {
                 position,
                 top: `${top}px`,
-                width: this.width
+                width
             });
 
             this.isActive = active;
-            toggleClass(this.$el, this.clsBelow, this.scroll > this.bottomOffset);
+            toggleClass(this.$el, this.clsBelow, scroll > topOffset + height);
             addClass(this.$el, this.clsFixed);
 
         }
@@ -315,12 +349,10 @@ export default {
 
 };
 
-function parseProp(prop, {$props, $el, [`${prop}Offset`]: propOffset}) {
-
-    const value = $props[prop];
+function parseProp(value, el, propOffset) {
 
     if (!value) {
-        return;
+        return 0;
     }
 
     if (isString(value) && value.match(/^-?\d/)) {
@@ -329,7 +361,7 @@ function parseProp(prop, {$props, $el, [`${prop}Offset`]: propOffset}) {
 
     } else {
 
-        return offset(value === true ? parent($el) : query(value, $el)).bottom;
+        return offset(value === true ? parent(el) : query(value, el)).bottom;
 
     }
 }