uikit 3.11.2-dev.44c622843 → 3.11.2-dev.536e1a374

package/src/js/core/switcher.js

@@ -1,3 +1,5 @@
+import Lazyload from '../mixin/lazyload';
+import Swipe from '../mixin/swipe';
 import Togglable from '../mixin/togglable';
 import {
     $$,
@@ -17,7 +19,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Togglable],
+    mixins: [Lazyload, Swipe, Togglable],
 
     args: 'connect',
 
@@ -26,7 +28,6 @@ export default {
         toggle: String,
         itemNav: String,
         active: Number,
-        swiping: Boolean,
     },
 
     data: {
@@ -34,7 +35,6 @@ export default {
         toggle: '> * > :first-child',
         itemNav: false,
         active: 0,
-        swiping: true,
         cls: 'uk-active',
         attrItem: 'uk-switcher-item',
     },
@@ -79,6 +79,14 @@ export default {
                 this.toggles.some((toggle) => within(toggle, child))
             );
         },
+
+        swipeTarget() {
+            return this.connects;
+        },
+    },
+
+    connected() {
+        this.lazyload(this.$el, this.connects);
     },
 
     events: [

package/src/js/core/toggle.js

@@ -1,3 +1,4 @@
+import Lazyload from '../mixin/lazyload';
 import Media from '../mixin/media';
 import Togglable from '../mixin/togglable';
 import {
@@ -7,6 +8,7 @@ import {
     includes,
     isBoolean,
     isFocusable,
+    isTag,
     isTouch,
     matches,
     once,
@@ -21,7 +23,7 @@ import {
 const KEY_SPACE = 32;
 
 export default {
-    mixins: [Media, Togglable],
+    mixins: [Lazyload, Media, Togglable],
 
     args: 'target',
 
@@ -43,6 +45,7 @@ export default {
         if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
             attr(this.$el, 'tabindex', '0');
         }
+        this.lazyload(this.$el, this.target);
     },
 
     computed: {
@@ -134,7 +137,7 @@ export default {
             name: 'keydown',
 
             filter() {
-                return includes(this.mode, 'click') && this.$el.tagName !== 'INPUT';
+                return includes(this.mode, 'click') && !isTag(this.$el, 'input');
             },
 
             handler(e) {

package/src/js/core/video.js

@@ -1,4 +1,14 @@
-import { css, hasAttr, isInView, isVideo, isVisible, mute, pause, play } from 'uikit-util';
+import {
+    css,
+    hasAttr,
+    isInView,
+    isVideo,
+    isVisible,
+    mute,
+    observeIntersection,
+    pause,
+    play,
+} from 'uikit-util';
 
 export default {
     args: 'autoplay',
@@ -27,6 +37,8 @@ export default {
         if (this.automute) {
             mute(this.$el);
         }
+
+        this.registerObserver(observeIntersection(this.$el, () => this.$emit('scroll'), {}, false));
     },
 
     update: {

package/src/js/mixin/internal/animate-slide.js

@@ -1,5 +1,4 @@
 import {
-    assign,
     children,
     css,
     fastdom,
@@ -44,7 +43,7 @@ export default function (action, target, duration) {
 
                 // Reset to previous state
                 nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
-                css(target, assign({ display: 'block' }, targetProps));
+                css(target, { display: 'block', ...targetProps });
 
                 // Start transitions on next frame
                 requestAnimationFrame(() => {
@@ -76,16 +75,14 @@ function getProps(el, opacity) {
     const zIndex = css(el, 'zIndex');
 
     return isVisible(el)
-        ? assign(
-              {
-                  display: '',
-                  opacity: opacity ? css(el, 'opacity') : '0',
-                  pointerEvents: 'none',
-                  position: 'absolute',
-                  zIndex: zIndex === 'auto' ? index(el) : zIndex,
-              },
-              getPositionWithMargin(el)
-          )
+        ? {
+              display: '',
+              opacity: opacity ? css(el, 'opacity') : '0',
+              pointerEvents: 'none',
+              position: 'absolute',
+              zIndex: zIndex === 'auto' ? index(el) : zIndex,
+              ...getPositionWithMargin(el),
+          }
         : false;
 }
 

package/src/js/mixin/lazyload.js

@@ -0,0 +1,20 @@
+import { $$, isFunction, observeIntersection, removeAttr, toNodes } from 'uikit-util';
+
+export default {
+    methods: {
+        lazyload(observeTargets = this.$el, targets = this.$el) {
+            this.registerObserver(
+                observeIntersection(observeTargets, (entries, observer) => {
+                    for (const el of toNodes(isFunction(targets) ? targets() : targets)) {
+                        $$('[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+                    }
+                    for (const el of entries
+                        .filter(({ isIntersecting }) => isIntersecting)
+                        .map(({ target }) => target)) {
+                        observer.unobserve(el);
+                    }
+                })
+            );
+        },
+    },
+};

package/src/js/mixin/parallax.js

@@ -4,11 +4,11 @@ import {
     css,
     Dimensions,
     each,
+    findIndex,
     isNumber,
     isString,
     isUndefined,
     noop,
-    startsWith,
     toFloat,
     toPx,
     trigger,
@@ -57,7 +57,7 @@ export default {
     },
 
     events: {
-        bgimageload() {
+        load() {
             this.$emit();
         },
     },
@@ -68,50 +68,44 @@ 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;
         },
     },
 };
 
-function transformFn(prop, el, steps) {
-    const unit = getUnit(steps) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+function transformFn(prop, el, stops) {
+    const unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+    let transformFn;
 
     if (prop === 'x' || prop === 'y') {
         prop = `translate${ucfirst(prop)}`;
+        transformFn = (stop) => toFloat(toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
     }
 
-    steps = steps.map(toFloat);
-
-    if (steps.length === 1) {
-        steps.unshift(prop === 'scale' ? 1 : 0);
+    if (stops.length === 1) {
+        stops.unshift(prop === 'scale' ? 1 : 0);
     }
 
-    return (css, percent) => {
-        let value = getValue(steps, percent);
+    stops = parseStops(stops, transformFn);
 
-        if (startsWith(prop, 'translate')) {
-            value = toFloat(value).toFixed(unit === 'px' ? 0 : 6);
-        }
-
-        css.transform += ` ${prop}(${value}${unit})`;
+    return (css, percent) => {
+        css.transform += ` ${prop}(${getValue(stops, percent)}${unit})`;
     };
 }
 
-function colorFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(getCssValue(el, prop, ''));
+function colorFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ''));
     }
 
-    steps = steps.map((step) => parseColor(el, step));
+    stops = parseStops(stops, (stop) => parseColor(el, stop));
 
     return (css, percent) => {
-        const [start, end, p] = getStep(steps, percent);
+        const [start, end, p] = getStop(stops, percent);
         const value = start
             .map((value, i) => {
                 value += p * (end[i] - value);
@@ -131,85 +125,83 @@ function parseColor(el, color) {
         .map(toFloat);
 }
 
-function filterFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function filterFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
-    const unit = getUnit(steps) || { blur: 'px', hue: 'deg' }[prop] || '%';
+    const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
     prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
-    steps = steps.map(toFloat);
+    stops = parseStops(stops);
 
     return (css, percent) => {
-        const value = getValue(steps, percent);
+        const value = getValue(stops, percent);
         css.filter += ` ${prop}(${value + unit})`;
     };
 }
 
-function cssPropFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(getCssValue(el, prop, ''));
+function cssPropFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ''));
     }
 
-    steps = steps.map(toFloat);
+    stops = parseStops(stops);
 
     return (css, percent) => {
-        css[prop] = getValue(steps, percent);
+        css[prop] = getValue(stops, percent);
     };
 }
 
-function strokeFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function strokeFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
-    const unit = getUnit(steps);
-    steps = steps.map(toFloat);
+    const unit = getUnit(stops);
+    const length = getMaxPathLength(el);
+    stops = parseStops(stops.reverse(), (stop) => {
+        stop = toFloat(stop);
+        return unit === '%' ? (stop * length) / 100 : stop;
+    });
 
-    if (!steps.some((step) => step)) {
+    if (!stops.some(([value]) => value)) {
         return noop;
     }
 
-    const length = getMaxPathLength(el);
     css(el, 'strokeDasharray', length);
 
-    if (unit === '%') {
-        steps = steps.map((step) => (step * length) / 100);
-    }
-
-    steps = steps.reverse();
-
     return (css, percent) => {
-        css.strokeDashoffset = getValue(steps, percent);
+        css.strokeDashoffset = getValue(stops, percent);
     };
 }
 
-function backgroundFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function backgroundFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
     prop = prop.substr(-1);
     const attr = prop === 'y' ? 'height' : 'width';
-    steps = steps.map((step) => toPx(step, attr, el));
+    stops = parseStops(stops, (stop) => toPx(stop, attr, el));
 
     const bgPos = getCssValue(el, `background-position-${prop}`, '');
 
     return getCssValue(el, 'backgroundSize', '') === 'cover'
-        ? backgroundCoverFn(prop, el, steps, bgPos, attr)
-        : setBackgroundPosFn(prop, steps, bgPos);
+        ? backgroundCoverFn(prop, el, stops, bgPos, attr)
+        : setBackgroundPosFn(prop, stops, bgPos);
 }
 
-function backgroundCoverFn(prop, el, steps, bgPos, attr) {
+function backgroundCoverFn(prop, el, stops, bgPos, attr) {
     const dimImage = getBackgroundImageDimensions(el);
 
     if (!dimImage.width) {
         return noop;
     }
 
-    const min = Math.min(...steps);
-    const max = Math.max(...steps);
-    const down = steps.indexOf(min) < steps.indexOf(max);
+    const values = stops.map(([value]) => value);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const down = values.indexOf(min) < values.indexOf(max);
 
     const diff = max - min;
     let pos = (down ? -diff : 0) - (down ? min : max);
@@ -234,7 +226,7 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
 
     const dim = Dimensions.cover(dimImage, dimEl);
 
-    const fn = setBackgroundPosFn(prop, steps, `${pos}px`);
+    const fn = setBackgroundPosFn(prop, stops, `${pos}px`);
     return (css, percent) => {
         fn(css, percent);
         css.backgroundSize = `${dim.width}px ${dim.height}px`;
@@ -242,9 +234,9 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
     };
 }
 
-function setBackgroundPosFn(prop, steps, pos) {
+function setBackgroundPosFn(prop, stops, pos) {
     return function (css, percent) {
-        css[`background-position-${prop}`] = `calc(${pos} + ${getValue(steps, percent)}px)`;
+        css[`background-position-${prop}`] = `calc(${pos} + ${getValue(stops, percent)}px)`;
     };
 }
 
@@ -263,8 +255,9 @@ function getBackgroundImageDimensions(el) {
         if (!image.naturalWidth) {
             image.onload = () => {
                 dimensions[src] = toDimensions(image);
-                trigger(el, 'bgimageload');
+                trigger(el, 'load');
             };
+            return toDimensions(image);
         }
     }
 
@@ -278,27 +271,71 @@ function toDimensions(image) {
     };
 }
 
-function getStep(steps, percent) {
-    const count = steps.length - 1;
-    const index = Math.min(Math.floor(count * percent), count - 1);
+function parseStops(stops, fn = toFloat) {
+    const result = [];
+    const { length } = stops;
+    let nullIndex = 0;
+    for (let i = 0; i < length; i++) {
+        let [value, percent] = isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
+        value = fn(value);
+        percent = percent ? toFloat(percent) / 100 : null;
+
+        if (i === 0) {
+            if (percent === null) {
+                percent = 0;
+            } else if (percent) {
+                result.push([value, 0]);
+            }
+        } else if (i === length - 1) {
+            if (percent === null) {
+                percent = 1;
+            } else if (percent !== 1) {
+                result.push([value, percent]);
+                percent = 1;
+            }
+        }
+
+        result.push([value, percent]);
+
+        if (percent === null) {
+            nullIndex++;
+        } else if (nullIndex) {
+            const leftPercent = result[i - nullIndex - 1][1];
+            const p = (percent - leftPercent) / (nullIndex + 1);
+            for (let j = nullIndex; j > 0; j--) {
+                result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
+            }
+
+            nullIndex = 0;
+        }
+    }
+
+    return result;
+}
 
-    return steps
-        .slice(index, index + 2)
-        .concat(percent === 1 ? 1 : (percent % (1 / count)) * count);
+function getStop(stops, percent) {
+    const index = findIndex(stops.slice(1), ([, targetPercent]) => percent <= targetPercent) + 1;
+    return [
+        stops[index - 1][0],
+        stops[index][0],
+        (percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1]),
+    ];
 }
 
-function getValue(steps, percent) {
-    const [start, end, p] = getStep(steps, percent);
+function getValue(stops, percent) {
+    const [start, end, p] = getStop(stops, percent);
     return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
 }
 
-function getUnit(steps, defaultUnit) {
-    return (
-        steps.reduce(
-            (unit, step) => unit || (isString(step) && step.replace(/[\d-]/g, '').trim()),
-            ''
-        ) || defaultUnit
-    );
+const unitRe = /^-?\d+([^\s]*)/;
+function getUnit(stops, defaultUnit) {
+    for (const stop of stops) {
+        const match = stop.match?.(unitRe);
+        if (match) {
+            return match[1];
+        }
+    }
+    return defaultUnit;
 }
 
 function getCssValue(el, prop, value) {

package/src/js/mixin/slider.js

@@ -4,7 +4,6 @@ import SliderNav from './slider-nav';
 import {
     $,
     $$,
-    assign,
     clamp,
     fastdom,
     getIndex,
@@ -83,12 +82,6 @@ export default {
         },
     },
 
-    events: {
-        itemshown() {
-            this.$update(this.list);
-        },
-    },
-
     methods: {
         show(index, force = false) {
             if (this.dragging || !this.length) {
@@ -170,21 +163,14 @@ export default {
         },
 
         _show(prev, next, force) {
-            this._transitioner = this._getTransitioner(
-                prev,
-                next,
-                this.dir,
-                assign(
-                    {
-                        easing: force
-                            ? next.offsetWidth < 600
-                                ? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */
-                                : 'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */
-                            : this.easing,
-                    },
-                    this.transitionOptions
-                )
-            );
+            this._transitioner = this._getTransitioner(prev, next, this.dir, {
+                easing: force
+                    ? next.offsetWidth < 600
+                        ? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */
+                        : 'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */
+                    : this.easing,
+                ...this.transitionOptions,
+            });
 
             if (!force && !prev) {
                 this._translate(1);

package/src/js/mixin/slideshow.js

@@ -1,7 +1,7 @@
 import Animations from './internal/slideshow-animations';
 import Transitioner from './internal/slideshow-transitioner';
 import Slider from './slider.js';
-import { addClass, assign, removeClass } from 'uikit-util';
+import { addClass, removeClass } from 'uikit-util';
 
 export default {
     mixins: [Slider],
@@ -19,7 +19,7 @@ export default {
 
     computed: {
         animation({ animation, Animations }) {
-            return assign(Animations[animation] || Animations.slide, { name: animation });
+            return { ...(Animations[animation] || Animations.slide), name: animation };
         },
 
         transitionOptions() {
@@ -28,10 +28,6 @@ export default {
     },
 
     events: {
-        'itemshow itemhide itemshown itemhidden'({ target }) {
-            this.$update(target);
-        },
-
         beforeitemshow({ target }) {
             addClass(target, this.clsActive);
         },

package/src/js/mixin/swipe.js

@@ -0,0 +1,72 @@
+import {
+    getEventPos,
+    isTouch,
+    once,
+    parent,
+    pointerCancel,
+    pointerDown,
+    pointerUp,
+    trigger,
+} from 'uikit-util';
+import { registerEvent } from '../api/state';
+
+export default {
+    props: {
+        swiping: Boolean,
+    },
+
+    data: {
+        swiping: true,
+    },
+
+    computed: {
+        swipeTarget(props, $el) {
+            return $el;
+        },
+    },
+
+    connected() {
+        if (!this.swiping) {
+            return;
+        }
+
+        registerEvent(this, {
+            el: this.swipeTarget,
+            name: pointerDown,
+            passive: true,
+            handler(e) {
+                if (!isTouch(e)) {
+                    return;
+                }
+
+                // Handle Swipe Gesture
+                const pos = getEventPos(e);
+                const target = 'tagName' in e.target ? e.target : parent(e.target);
+                once(document, `${pointerUp} ${pointerCancel} scroll`, (e) => {
+                    const { x, y } = getEventPos(e);
+
+                    // swipe
+                    if (
+                        (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100) ||
+                        (y && Math.abs(pos.y - y) > 100)
+                    ) {
+                        setTimeout(() => {
+                            trigger(target, 'swipe');
+                            trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);
+                        });
+                    }
+                });
+            },
+        });
+    },
+};
+
+function swipeDirection(x1, y1, x2, y2) {
+    return Math.abs(x1 - x2) >= Math.abs(y1 - y2)
+        ? x1 - x2 > 0
+            ? 'Left'
+            : 'Right'
+        : y1 - y2 > 0
+        ? 'Up'
+        : 'Down';
+}

package/src/js/mixin/togglable.js

@@ -2,7 +2,6 @@ import {
     $$,
     addClass,
     Animation,
-    assign,
     css,
     fastdom,
     hasClass,
@@ -151,7 +150,7 @@ export default {
 export function toggleHeight({ isToggled, duration, initProps, hideProps, transition, _toggle }) {
     return (el, show) => {
         const inProgress = Transition.inProgress(el);
-        const inner = el.hasChildNodes
+        const inner = el.hasChildNodes()
             ? toFloat(css(el.firstElementChild, 'marginTop')) +
               toFloat(css(el.lastElementChild, 'marginBottom'))
             : 0;
@@ -175,7 +174,7 @@ export function toggleHeight({ isToggled, duration, initProps, hideProps, transi
             show
                 ? Transition.start(
                       el,
-                      assign({}, initProps, { overflow: 'hidden', height: endHeight }),
+                      { ...initProps, overflow: 'hidden', height: endHeight },
                       Math.round(duration * (1 - currentHeight / endHeight)),
                       transition
                   )