uikit 3.11.2-dev.4c11be04b → 3.11.2-dev.54d67da03

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;
 
     }
 }

package/src/js/util/dimensions.js

@@ -1,5 +1,5 @@
 import {css} from './style';
-import {each, endsWith, isDocument, isElement, isNumeric, isUndefined, isWindow, toFloat, toNode, toWindow, ucfirst} from './lang';
+import {each, isDocument, isElement, isString, isUndefined, isWindow, memoize, toFloat, toNode, toWindow, ucfirst} from './lang';
 
 const dirs = {
     width: ['left', 'right'],
@@ -157,19 +157,35 @@ export function flipPosition(pos) {
 }
 
 export function toPx(value, property = 'width', element = window, offsetDim = false) {
-    return isNumeric(value)
-        ? +value
-        : endsWith(value, 'vh')
-            ? percent(height(toWindow(element)), value)
-            : endsWith(value, 'vw')
-                ? percent(width(toWindow(element)), value)
-                : endsWith(value, '%')
-                    ? percent(offsetDim
-                        ? element[`offset${ucfirst(property)}`]
-                        : dimensions(element)[property], value)
-                    : toFloat(value);
+
+    if (!isString(value)) {
+        return toFloat(value);
+    }
+
+    return parseCalc(value).reduce((result, value) => {
+        const unit = parseUnit(value);
+        if (unit) {
+            value = percent(
+                unit === 'vh'
+                    ? height(toWindow(element))
+                    : unit === 'vw'
+                        ? width(toWindow(element))
+                        : offsetDim
+                            ? element[`offset${ucfirst(property)}`]
+                            : dimensions(element)[property],
+                value
+            );
+        }
+
+        return result + toFloat(value);
+    }, 0);
 }
 
+const calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
+const parseCalc = memoize(calc => calc.toString().replace(/\s/g, '').match(calcRe) || []);
+const unitRe = /(?:v[hw]|%)$/;
+const parseUnit = memoize(str => (str.match(unitRe) || [])[0]);
+
 function percent(base, value) {
     return base * toFloat(value) / 100;
 }

package/src/js/util/fastdom.js

@@ -31,7 +31,7 @@ export const fastdom = {
 
 };
 
-function flush(recursion = 1) {
+function flush(recursion) {
     runTasks(fastdom.reads);
     runTasks(fastdom.writes.splice(0));
 
@@ -53,7 +53,7 @@ function scheduleFlush(recursion) {
     if (recursion && recursion < RECURSION_LIMIT) {
         Promise.resolve().then(() => flush(recursion));
     } else {
-        requestAnimationFrame(() => flush());
+        requestAnimationFrame(() => flush(1));
     }
 
 }

package/src/js/util/options.js

@@ -134,9 +134,8 @@ export function parseOptions(options, args = []) {
 
     try {
 
-        return !options
-            ? {}
-            : startsWith(options, '{')
+        return options
+            ? startsWith(options, '{')
                 ? JSON.parse(options)
                 : args.length && !includes(options, ':')
                     ? ({[args[0]]: options})
@@ -146,7 +145,8 @@ export function parseOptions(options, args = []) {
                             options[key.trim()] = value.trim();
                         }
                         return options;
-                    }, {});
+                    }, {})
+            : {};
 
     } catch (e) {
         return {};

package/src/js/util/viewport.js

@@ -2,7 +2,7 @@ import {css} from './style';
 import {Promise} from './promise';
 import {isVisible, parents} from './filter';
 import {offset, offsetPosition} from './dimensions';
-import {clamp, findIndex, intersectRect, isDocument, isWindow, toNode, toWindow} from './lang';
+import {clamp, findIndex, intersectRect, isDocument, isUndefined, isWindow, toNode, toWindow} from './lang';
 
 export function isInView(element, offsetTop = 0, offsetLeft = 0) {
 
@@ -31,7 +31,11 @@ export function scrollTop(element, top) {
         element = toNode(element);
     }
 
-    element.scrollTop = top;
+    if (isUndefined(top)) {
+        return element.scrollTop;
+    } else {
+        element.scrollTop = top;
+    }
 }
 
 export function scrollIntoView(element, {offset: offsetBy = 0} = {}) {
@@ -145,7 +149,7 @@ export function getViewportClientHeight(scrollElement) {
     return (scrollElement === getScrollingElement(scrollElement) ? document.documentElement : scrollElement).clientHeight;
 }
 
-function getScrollingElement(element) {
+export function getScrollingElement(element) {
     const {document} = toWindow(element);
     return document.scrollingElement || document.documentElement;
 }

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>
@@ -25,7 +23,17 @@
                 </div>
             </div>
 
-            <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" uk-img>
+            <div>
+                <picture>
+                    <source type="image/webp" sizes="(min-width: 780px) 780px" data-srcset="http://localhost/site/image?src=WyJzaXRlXC9pbWFnZXNcL2hvbWVcL3lvb3RoZW1lLXByby5qcGciLFtbInR5cGUiLFsid2VicCIsIjg1Il1dLFsiZG9SZXNpemUiLFs3ODEsNDg4LDc4MSw0ODhdXSxbImRvQ3JvcCIsWzc4MCw0ODgsMCwwXV1dXQ%3D%3D&amp;hash=9a3c6f9c 780w, /site/cache/images/yootheme-pro-5db7acab.webp 1560w">
+                    <img data-src="/site/cache/images/yootheme-pro-0d67d545.jpeg" width="780" height="488" alt="Introduction Video on using the YOOtheme Pro Page Builder for WordPress and Joomla" uk-img>
+                </picture>
+            </div>
+            <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" data-sources="srcset: images/test.avif; type: image/avif" uk-img>
+                <h1>Background Image</h1>
+            </div>
+
+            <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" data-sources="[{&quot;srcset&quot;: &quot;images/test.avif&quot;, &quot;type&quot;: &quot;image/avif&quot;},{&quot;srcset&quot;: &quot;images/test.webp&quot;, &quot;type&quot;: &quot;image/webp&quot;}]" uk-img>
                 <h1>Background Image</h1>
             </div>
 
@@ -255,28 +263,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 +304,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>
@@ -365,28 +373,10 @@
                             <td>The image's `src` attribute.</td>
                         </tr>
                         <tr>
-                            <td><code>dataSrcset</code></td>
+                            <td><code>dataSources</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>
+                            <td>''</td>
+                            <td>The image's sources. This option is used for background images only. The sources attributes be passed in `key: value;` format for a single source. For multiple sources in JSON format.</td>
                         </tr>
                         <tr>
                             <td><code>offsetTop</code></td>