uikit 3.11.2-dev.07abf1392 → 3.11.2-dev.0a73abee2

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.2-dev.07abf1392",
+    "version": "3.11.2-dev.0a73abee2",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/slider.js

@@ -12,9 +12,7 @@ import {
     dimensions,
     findIndex,
     includes,
-    isEmpty,
     last,
-    sortBy,
     toFloat,
     toggleClass,
     toNumber,
@@ -73,48 +71,39 @@ export default {
             return ~index ? index : this.length - 1;
         },
 
-        sets({ sets }) {
-            if (!sets) {
+        sets({ sets: enabled }) {
+            if (!enabled) {
                 return;
             }
 
-            const width = dimensions(this.list).width / (this.center ? 2 : 1);
-
             let left = 0;
-            let leftCenter = width;
-            let slideLeft = 0;
-
-            sets = sortBy(this.slides, 'offsetLeft').reduce((sets, slide, i) => {
-                const slideWidth = dimensions(slide).width;
-                const slideRight = slideLeft + slideWidth;
+            const sets = [];
+            const width = dimensions(this.list).width;
+            for (let i in this.slides) {
+                const slideWidth = dimensions(this.slides[i]).width;
 
-                if (slideRight > left) {
-                    if (!this.center && i > this.maxIndex) {
-                        i = this.maxIndex;
-                    }
+                if (left + slideWidth > width) {
+                    left = 0;
+                }
 
-                    if (!includes(sets, i)) {
-                        const cmp = this.slides[i + 1];
-                        if (
-                            this.center &&
-                            cmp &&
-                            slideWidth < leftCenter - dimensions(cmp).width / 2
-                        ) {
-                            leftCenter -= slideWidth;
-                        } else {
-                            leftCenter = width;
-                            sets.push(i);
-                            left = slideLeft + width + (this.center ? slideWidth / 2 : 0);
-                        }
+                if (this.center) {
+                    if (
+                        left < width / 2 &&
+                        left + slideWidth + dimensions(this.slides[+i + 1]).width / 2 > width / 2
+                    ) {
+                        sets.push(+i);
+                        left = width / 2 - slideWidth / 2;
                     }
+                } else if (left === 0) {
+                    sets.push(Math.min(+i, this.maxIndex));
                 }
 
-                slideLeft += slideWidth;
+                left += slideWidth;
+            }
 
+            if (sets.length) {
                 return sets;
-            }, []);
-
-            return !isEmpty(sets) && sets;
+            }
         },
 
         transitionOptions() {

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

@@ -1,3 +1,4 @@
+import Class from '../mixin/class';
 import {
     boxModelAdjust,
     css,
@@ -14,6 +15,8 @@ import {
 } from 'uikit-util';
 
 export default {
+    mixins: [Class],
+
     props: {
         expand: Boolean,
         offsetTop: Boolean,

package/src/js/core/img.js

@@ -172,7 +172,9 @@ function getImageFromElement(el, src, sources) {
 
     wrapInPicture(img, sources);
     setSourceProps(el, img);
-    img.onload = () => setSrcAttrs(el, img.currentSrc);
+    img.onload = () => {
+        setSrcAttrs(el, img.currentSrc);
+    };
     attr(img, 'src', src);
     return img;
 }

package/src/js/core/sticky.js

@@ -10,13 +10,12 @@ import {
     dimensions,
     fastdom,
     height as getHeight,
+    offset as getOffset,
     getScrollingElement,
     hasClass,
-    isNumeric,
     isString,
     isVisible,
     noop,
-    offset,
     offsetPosition,
     parent,
     query,
@@ -29,6 +28,7 @@ import {
     toPx,
     trigger,
     within,
+    intersectRect,
 } from 'uikit-util';
 
 export default {
@@ -67,21 +67,6 @@ export default {
     },
 
     computed: {
-        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) {
             return (selTarget && $(selTarget, $el)) || $el;
         },
@@ -134,34 +119,29 @@ export default {
                 return window;
             },
 
+            filter() {
+                return this.targetOffset !== false;
+            },
+
             handler() {
-                if (!(this.targetOffset !== false && location.hash && scrollTop(window) > 0)) {
+                if (!location.hash || scrollTop(window) === 0) {
                     return;
                 }
 
-                const target = $(location.hash);
-
-                if (target) {
-                    fastdom.read(() => {
-                        const { top } = offset(target);
-                        const elTop = offset(this.$el).top;
-                        const elHeight = this.$el.offsetHeight;
-
-                        if (
-                            this.isFixed &&
-                            elTop + elHeight >= top &&
-                            elTop <= top + target.offsetHeight
-                        ) {
-                            scrollTop(
-                                window,
-                                top -
-                                    elHeight -
-                                    (isNumeric(this.targetOffset) ? this.targetOffset : 0) -
-                                    this.offset
-                            );
-                        }
-                    });
-                }
+                fastdom.read(() => {
+                    const targetOffset = getOffset($(location.hash));
+                    const elOffset = getOffset(this.$el);
+
+                    if (this.isFixed && intersectRect(targetOffset, elOffset)) {
+                        scrollTop(
+                            window,
+                            targetOffset.top -
+                                elOffset.height -
+                                toPx(this.targetOffset, 'height') -
+                                toPx(this.offset, 'height')
+                        );
+                    }
+                });
             },
         },
     ],
@@ -177,35 +157,49 @@ export default {
 
                 const hide = this.isActive && types.has('resize');
                 if (hide) {
+                    css(this.selTarget, 'transition', '0s');
                     this.hide();
                 }
 
                 if (!this.isActive) {
-                    height = this.$el.offsetHeight;
+                    height = getOffset(this.$el).height;
                     margin = css(this.$el, 'margin');
                 }
 
                 if (hide) {
                     this.show();
+                    fastdom.write(() => css(this.selTarget, 'transition', ''));
                 }
 
-                const overflow = Math.max(0, height + this.offset - getHeight(window));
-
                 const referenceElement = this.isFixed ? this.placeholder : this.$el;
-                const topOffset = offset(referenceElement).top;
-                const offsetParentTop = offset(referenceElement.offsetParent).top;
+                const windowHeight = getHeight(window);
+
+                let position = this.position;
+                if (position === 'auto' && height > windowHeight) {
+                    position = 'bottom';
+                }
+
+                let offset = toPx(this.offset, 'height', referenceElement);
+                if (position === 'bottom') {
+                    offset += windowHeight - height;
+                }
+
+                const overflow = Math.max(0, height + offset - windowHeight);
+                const topOffset = getOffset(referenceElement).top;
+                const offsetParentTop = getOffset(referenceElement.offsetParent).top;
 
                 const top = parseProp(this.top, this.$el, topOffset);
                 const bottom = parseProp(this.bottom, this.$el, topOffset + height, true);
 
-                const start = Math.max(top, topOffset) - this.offset;
+                const start = Math.max(top, topOffset) - offset;
                 const end = bottom
-                    ? bottom - this.$el.offsetHeight + overflow - this.offset
-                    : getScrollingElement(this.$el).scrollHeight - getHeight(window);
+                    ? bottom - getOffset(this.$el).height + overflow - offset
+                    : getScrollingElement(this.$el).scrollHeight - windowHeight;
 
                 return {
                     start,
                     end,
+                    offset,
                     overflow,
                     topOffset,
                     offsetParentTop,
@@ -322,7 +316,7 @@ export default {
                     }
                 } else if (this.isFixed) {
                     this.update();
-                } else if (this.animation) {
+                } else if (this.animation && scroll > topOffset) {
                     Animation.cancel(this.$el);
                     this.show();
                     Animation.in(this.$el, this.animation).catch(noop);
@@ -350,33 +344,33 @@ export default {
         },
 
         update() {
-            const {
+            let {
                 width,
                 scroll = 0,
                 overflow,
                 overflowScroll = 0,
                 start,
                 end,
+                offset,
                 topOffset,
                 height,
                 offsetParentTop,
             } = this._data;
             const active = start !== 0 || scroll > start;
-            let top = this.offset;
             let position = 'fixed';
 
             if (scroll > end) {
-                top = end + this.offset - offsetParentTop;
+                offset += end - offsetParentTop;
                 position = 'absolute';
             }
 
             if (overflow) {
-                top -= overflowScroll;
+                offset -= overflowScroll;
             }
 
             css(this.$el, {
                 position,
-                top: `${top}px`,
+                top: `${offset}px`,
                 width,
             });
 
@@ -397,7 +391,7 @@ function parseProp(value, el, propOffset, padding) {
     } else {
         const refElement = value === true ? parent(el) : query(value, el);
         return (
-            offset(refElement).bottom -
+            getOffset(refElement).bottom -
             (padding && refElement && within(el, refElement)
                 ? toFloat(css(refElement, 'paddingBottom'))
                 : 0)

package/src/js/core/toggle.js

@@ -135,7 +135,7 @@ export default {
             name: 'keydown',
 
             filter() {
-                return includes(this.mode, 'click') && isTag(this.$el, 'input');
+                return includes(this.mode, 'click') && !isTag(this.$el, 'input');
             },
 
             handler(e) {

package/src/js/mixin/parallax.js

@@ -68,13 +68,11 @@ export default {
         },
 
         getCss(percent) {
-            return keys(this.props).reduce(
-                (css, prop) => {
-                    this.props[prop](css, percent);
-                    return css;
-                },
-                { transform: '', filter: '' }
-            );
+            const css = { transform: '', filter: '' };
+            for (const prop in this.props) {
+                this.props[prop](css, percent);
+            }
+            return css;
         },
     },
 };
@@ -328,7 +326,7 @@ function getValue(stops, percent) {
     return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
 }
 
-const unitRe = /^[\d-]+([^\s]+)/;
+const unitRe = /^-?\d+([^\s]*)/;
 function getUnit(stops, defaultUnit) {
     for (const stop of stops) {
         const match = stop.match?.(unitRe);

package/src/js/util/ajax.js

@@ -60,8 +60,12 @@ export function getImage(src, srcset, sizes) {
     return new Promise((resolve, reject) => {
         const img = new Image();
 
-        img.onerror = (e) => reject(e);
-        img.onload = () => resolve(img);
+        img.onerror = (e) => {
+            reject(e);
+        };
+        img.onload = () => {
+            resolve(img);
+        };
 
         sizes && (img.sizes = sizes);
         srcset && (img.srcset = srcset);

package/src/js/util/dimensions.js

@@ -37,8 +37,8 @@ export function offset(element, coordinates) {
     const currentOffset = dimensions(element);
 
     if (element) {
-        const { pageYOffset, pageXOffset } = toWindow(element);
-        const offsetBy = { height: pageYOffset, width: pageXOffset };
+        const { scrollY, scrollX } = toWindow(element);
+        const offsetBy = { height: scrollY, width: scrollX };
 
         for (const dir in dirs) {
             for (const i in dirs[dir]) {
@@ -104,8 +104,8 @@ export function offsetPosition(element) {
 
         if (css(element, 'position') === 'fixed') {
             const win = toWindow(element);
-            offset[0] += win.pageYOffset;
-            offset[1] += win.pageXOffset;
+            offset[0] += win.scrollY;
+            offset[1] += win.scrollX;
             return offset;
         }
     } while ((element = element.offsetParent));

package/src/js/util/dom.js

@@ -73,14 +73,23 @@ export function unwrap(element) {
         .forEach((parent) => parent.replaceWith(...parent.childNodes));
 }
 
+const fragmentRe = /^\s*<(\w+|!)[^>]*>/;
+const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
+
 export function fragment(html) {
-    const template = document.createElement('template');
-    template.innerHTML = html.trim();
-    const nodes = toNodes(template.content.childNodes);
-    for (const node of nodes) {
-        document.adoptNode(node);
+    const matches = singleTagRe.exec(html);
+    if (matches) {
+        return document.createElement(matches[1]);
+    }
+
+    const container = document.createElement('div');
+    if (fragmentRe.test(html)) {
+        container.insertAdjacentHTML('beforeend', html.trim());
+    } else {
+        container.textContent = html;
     }
-    return unwrapSingle(nodes);
+
+    return unwrapSingle(container.childNodes);
 }
 
 function unwrapSingle(nodes) {

package/src/less/components/height.less

@@ -31,6 +31,9 @@
  */
 
 .uk-height-viewport { min-height: 100vh; }
+.uk-height-viewport-2 { min-height: 200vh; }
+.uk-height-viewport-3 { min-height: 300vh; }
+.uk-height-viewport-4 { min-height: 400vh; }
 
 /*
  * Pixel

package/src/scss/components/height.scss

@@ -31,6 +31,9 @@ $height-large-height:                            450px !default;
  */
 
 .uk-height-viewport { min-height: 100vh; }
+.uk-height-viewport-2 { min-height: 200vh; }
+.uk-height-viewport-3 { min-height: 300vh; }
+.uk-height-viewport-4 { min-height: 400vh; }
 
 /*
  * Pixel

package/tests/parallax.html

@@ -55,10 +55,10 @@
 
                 <h2>Stop Positions</h2>
 
-                <div id="test-stop-positions" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
+                <div id="test-stop-positions" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,50 50%, 200">
                     <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
-                        <h1 uk-parallax="x: -200,200,-200,200; scale: 2,1 10%,2 90%,1;">Headline</h1>
-                        <p uk-parallax="x: 200,-200,200,-200; scale: 1,0 20%,1 50%,0 80%,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                        <h1 uk-parallax="x: -200,200 20%,-200 80%,200; scale: 1,1 50%,2;">Headline</h1>
+                        <p uk-parallax="x: 200,-200 20%,200 80%,-200; scale: 1,1 50%,2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     </div>
                 </div>
 
@@ -77,8 +77,8 @@
                     <div class="uk-grid uk-margin-auto uk-flex-inline">
                         <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; y: 396; easing: 0;">0 / 0</div></div>
                         <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100%; end: 100%; y: 396; easing: 0;">100% / 100%</div></div>
-                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 40vh; end: 40vh; y: 396; easing: 0;">40vh / 40vh</div></div>
-                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100% + 50; end: 100% + 50; y: 396; easing: 0;">100% + 50 / 100% + 50</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 30vh; end: 30vh; y: 396; easing: 0;">30vh / 30vh</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100% + 100; end: 100% + 100; y: 396; easing: 0;">100% + 100 / 100% + 100</div></div>
                     </div>
                 </div>
 

package/tests/sticky-parallax.html

@@ -21,8 +21,8 @@
         <div class="uk-section uk-section-default">
             <div class="uk-container">
 
-                <div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center" style="height: 300vh">
-                    <div class="uk-flex uk-flex-center uk-flex-middle" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-container">
+                <div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center uk-height-viewport-3">
+                    <div class="uk-flex uk-flex-center uk-flex-middle uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-container">
                         <div>
 
                             <img class="uk-position-relative uk-position-z-index" src="images/size-v.jpg" width="400" height="800" alt="" style="max-width: 50vw" uk-parallax="target: #js-sticky-parallax-container; y: 0,-250; easing: -1; start: 100vh; end: 100vh;">
@@ -118,7 +118,7 @@
                 </div>
                 <div>
 
-                    <div class="uk-background-muted uk-text-center" style="height: 100vh" uk-sticky="bottom: #js-sticky-parallax-viewport">
+                    <div class="uk-background-muted uk-text-center uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-viewport">
 
                         <div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y: 10vh, 80vh; easing: 0">
 
@@ -146,12 +146,12 @@
 
         <div class="uk-section uk-section-default">
 
-            <div id="js-sticky-parallax-images" style="height: 250vh" uk-grid>
+            <div id="js-sticky-parallax-images" style="min-height: 250vh" uk-grid>
                 <div class="uk-width-expand">
 
-                    <div class="uk-background-muted" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images">
+                    <div class="uk-background-muted uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images">
                         <div uk-parallax="target: #js-sticky-parallax-images; y: 55vh, 45vh;">
-                            <img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 185vh; opacity: 1,1 99%,0; easing:0">
+                            <img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 185vh; opacity: 1,1,0; easing:0">
                             <img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 175vh; end: 100% + 100vh - 235vh; opacity: 0,1 16.666%,1 99%,0; easing:0">
                             <img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 225vh; end: 100% + 100vh - 275vh; opacity: 0,1 20%,1; easing:0">
                         </div>
@@ -206,10 +206,10 @@
 
         <div class="uk-section uk-section-default">
 
-            <div id="js-sticky-parallax-images-all" style="height: 250vh" uk-grid>
+            <div id="js-sticky-parallax-images-all" style="min-height: 250vh" uk-grid>
                 <div class="uk-width-expand">
 
-                    <div class="uk-background-muted" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images-all">
+                    <div class="uk-background-muted uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images-all">
                         <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
                             <img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing:0">
                             <img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 16.666%,1 99%,0; easing:0">
@@ -226,7 +226,7 @@
                 </div>
                 <div class="uk-width-expand">
 
-                    <div style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images-all">
+                    <div class="uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images-all">
                         <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
 
                             <div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,0">