uikit 3.17.12-dev.f1425d280 → 3.18.1-dev.edde0251f

package/src/js/core/sticky.js

@@ -9,6 +9,7 @@ import {
     height as getHeight,
     offset as getOffset,
     hasClass,
+    index,
     intersectRect,
     isNumeric,
     isString,
@@ -70,7 +71,7 @@ export default {
     },
 
     computed: {
-        selTarget: ({ selTarget }, $el) => (selTarget && $(selTarget, $el)) || $el,
+        target: ({ selTarget }, $el) => (selTarget && $(selTarget, $el)) || $el,
     },
 
     connected() {
@@ -87,7 +88,7 @@ export default {
     beforeDisconnect() {
         if (this.isFixed) {
             this.hide();
-            removeClass(this.selTarget, this.clsInactive);
+            removeClass(this.target, this.clsInactive);
         }
         reset(this.$el);
 
@@ -96,9 +97,19 @@ export default {
     },
 
     observe: [
-        viewport(),
+        viewport({
+            handler() {
+                if (toPx('100vh', 'height') !== this._data.viewport) {
+                    this.$emit('resize');
+                }
+            },
+        }),
         scroll({ target: () => document.scrollingElement }),
-        resize({ target: ({ $el }) => [$el, document.scrollingElement] }),
+        resize({
+            target: () => document.scrollingElement,
+            options: { box: 'content-box' },
+        }),
+        resize({ target: ({ $el }) => $el }),
     ],
 
     events: [
@@ -158,7 +169,7 @@ export default {
 
                 const hide = this.isFixed && !this.transitionInProgress;
                 if (hide) {
-                    preventTransition(this.$el);
+                    preventTransition(this.target);
                     this.hide();
                 }
 
@@ -215,7 +226,7 @@ export default {
                     end ===
                         Math.min(
                             maxScrollHeight,
-                            parseProp('!*', this.$el, 0, true) - elHeight - offset + overflow,
+                            parseProp(true, this.$el, 0, true) - elHeight - offset + overflow,
                         ) &&
                     css(parent(this.$el), 'overflowY') === 'visible';
 
@@ -224,13 +235,13 @@ export default {
                     end,
                     offset,
                     overflow,
-                    topOffset,
                     height,
                     elHeight,
                     width,
                     margin,
                     top: offsetPosition(referenceElement)[0],
                     sticky,
+                    viewport,
                 };
             },
 
@@ -252,10 +263,13 @@ export default {
 
                 css(placeholder, { height, width, margin });
 
-                if (!document.contains(placeholder)) {
+                if (
+                    parent(placeholder) !== parent(this.$el) ||
+                    sticky ^ (index(placeholder) < index(this.$el))
+                ) {
+                    (sticky ? before : after)(this.$el, placeholder);
                     placeholder.hidden = true;
                 }
-                (sticky ? before : after)(this.$el, placeholder);
             },
 
             events: ['resize'],
@@ -269,18 +283,24 @@ export default {
                 overflowScroll = 0,
                 start,
                 end,
+                elHeight,
+                height,
+                sticky,
             }) {
                 const scroll = document.scrollingElement.scrollTop;
                 const dir = prevScroll <= scroll ? 'down' : 'up';
+                const referenceElement = this.isFixed ? this.placeholder : this.$el;
 
                 return {
                     dir,
                     prevDir,
                     scroll,
                     prevScroll,
-                    offsetParentTop: getOffset(
-                        (this.isFixed ? this.placeholder : this.$el).offsetParent,
-                    ).top,
+                    below:
+                        scroll >
+                        getOffset(referenceElement).top +
+                            (sticky ? Math.min(height, elHeight) : height),
+                    offsetParentTop: getOffset(referenceElement.offsetParent).top,
                     overflowScroll: clamp(
                         overflowScroll + clamp(scroll, start, end) - clamp(prevScroll, start, end),
                         0,
@@ -299,8 +319,7 @@ export default {
                     prevScroll = 0,
                     top,
                     start,
-                    topOffset,
-                    height,
+                    below,
                 } = data;
 
                 if (
@@ -332,7 +351,7 @@ export default {
                     (this.showOnUp &&
                         (scroll <= start ||
                             (dir === 'down' && isScrollUpdate) ||
-                            (dir === 'up' && !this.isFixed && scroll <= topOffset + height)))
+                            (dir === 'up' && !this.isFixed && !below)))
                 ) {
                     if (!this.isFixed) {
                         if (Animation.inProgress(this.$el) && top > scroll) {
@@ -343,7 +362,7 @@ export default {
                         return;
                     }
 
-                    if (this.animation && scroll > topOffset) {
+                    if (this.animation && below) {
                         if (hasClass(this.$el, 'uk-animation-leave')) {
                             return;
                         }
@@ -353,11 +372,11 @@ export default {
                     }
                 } else if (this.isFixed) {
                     this.update();
-                } else if (this.animation && scroll > topOffset) {
+                } else if (this.animation && below) {
                     this.show();
                     Animation.in(this.$el, this.animation).catch(noop);
                 } else {
-                    preventTransition(this.selTarget);
+                    preventTransition(this.target);
                     this.show();
                 }
             },
@@ -400,11 +419,9 @@ export default {
                 start,
                 end,
                 offset,
-                topOffset,
-                height,
-                elHeight,
                 offsetParentTop,
                 sticky,
+                below,
             } = this._data;
             const active = start !== 0 || scroll > start;
 
@@ -422,11 +439,7 @@ export default {
             css(this.$el, 'top', offset - overflowScroll);
 
             this.setActive(active);
-            toggleClass(
-                this.$el,
-                this.clsBelow,
-                scroll > topOffset + (sticky ? Math.min(height, elHeight) : height),
-            );
+            toggleClass(this.$el, this.clsBelow, below);
             addClass(this.$el, this.clsFixed);
         },
 
@@ -434,11 +447,14 @@ export default {
             const prev = this.active;
             this.active = active;
             if (active) {
-                replaceClass(this.selTarget, this.clsInactive, this.clsActive);
+                replaceClass(this.target, this.clsInactive, this.clsActive);
                 prev !== active && trigger(this.$el, 'active');
             } else {
-                replaceClass(this.selTarget, this.clsActive, this.clsInactive);
-                prev !== active && trigger(this.$el, 'inactive');
+                replaceClass(this.target, this.clsActive, this.clsInactive);
+                if (prev !== active) {
+                    preventTransition(this.target);
+                    trigger(this.$el, 'inactive');
+                }
             }
         },
     },

package/src/js/mixin/modal.js

@@ -19,9 +19,9 @@ import {
     removeClass,
     toFloat,
 } from 'uikit-util';
+import { preventBackgroundScroll } from '../util/scroll';
 import Class from './class';
 import Container from './container';
-import { preventBackgroundScroll } from './internal/scroll';
 import Togglable from './togglable';
 
 const active = [];

package/src/js/mixin/parallax.js

@@ -384,3 +384,22 @@ function fillObject(keys, value) {
         return data;
     }, {});
 }
+
+/*
+ * Inspired by https://gist.github.com/gre/1650294?permalink_comment_id=3477425#gistcomment-3477425
+ *
+ * linear: 0
+ * easeInSine: 0.5
+ * easeOutSine: -0.5
+ * easeInQuad: 1
+ * easeOutQuad: -1
+ * easeInCubic: 2
+ * easeOutCubic: -2
+ * easeInQuart: 3
+ * easeOutQuart: -3
+ * easeInQuint: 4
+ * easeOutQuint: -4
+ */
+export function ease(percent, easing) {
+    return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, 1 - easing);
+}

package/src/js/mixin/slider-autoplay.js

@@ -30,9 +30,7 @@ export default {
         {
             name: 'visibilitychange',
 
-            el() {
-                return document;
-            },
+            el: () => document,
 
             filter() {
                 return this.autoplay;

package/src/js/mixin/slider-drag.js

@@ -17,7 +17,7 @@ const pointerUpOptions = { passive: true, capture: true };
 const pointerDown = 'touchstart mousedown';
 const pointerMove = 'touchmove mousemove';
 const pointerUp = 'touchend touchcancel mouseup click input scroll';
-
+const preventClick = (e) => e.preventDefault();
 export default {
     props: {
         draggable: Boolean,
@@ -55,6 +55,7 @@ export default {
             handler(e) {
                 if (
                     !this.draggable ||
+                    this.parallax ||
                     (!isTouch(e) && hasSelectableText(e.target)) ||
                     e.target.closest(selInput) ||
                     e.button > 0 ||
@@ -123,8 +124,9 @@ export default {
                 return;
             }
 
-            // prevent click event
-            css(this.list, 'pointerEvents', 'none');
+            if (!this.dragging) {
+                on(this.list, 'click', preventClick, pointerOptions);
+            }
 
             e.cancelable && e.preventDefault();
 
@@ -134,7 +136,7 @@ export default {
             let { slides, prevIndex } = this;
             let dis = Math.abs(distance);
             let nextIndex = this.getIndex(prevIndex + this.dir);
-            let width = this._getDistance(prevIndex, nextIndex);
+            let width = getDistance.call(this, prevIndex, nextIndex);
 
             while (nextIndex !== prevIndex && dis > width) {
                 this.drag -= width * this.dir;
@@ -142,7 +144,7 @@ export default {
                 prevIndex = nextIndex;
                 dis -= width;
                 nextIndex = this.getIndex(prevIndex + this.dir);
-                width = this._getDistance(prevIndex, nextIndex);
+                width = getDistance.call(this, prevIndex, nextIndex);
             }
 
             this.percent = dis / width;
@@ -173,16 +175,16 @@ export default {
                 this.prevIndex = prevIndex;
                 this.index = nextIndex;
 
-                !edge && trigger(prev, 'beforeitemhide', [this]);
+                if (!edge) {
+                    trigger(prev, 'beforeitemhide', [this]);
+                    trigger(prev, 'itemhide', [this]);
+                }
+
                 trigger(next, 'beforeitemshow', [this]);
+                trigger(next, 'itemshow', [this]);
             }
 
             this._transitioner = this._translate(Math.abs(this.percent), prev, !edge && next);
-
-            if (changed) {
-                !edge && trigger(prev, 'itemhide', [this]);
-                trigger(next, 'itemshow', [this]);
-            }
         },
 
         end() {
@@ -216,20 +218,21 @@ export default {
                 }
             }
 
-            css(this.list, { userSelect: '', pointerEvents: '' });
+            setTimeout(() => off(this.list, 'click', preventClick, pointerOptions));
+            css(this.list, { userSelect: '' });
 
             this.drag = this.percent = null;
         },
-
-        _getDistance(prev, next) {
-            return (
-                this._getTransitioner(prev, prev !== next && next).getDistance() ||
-                this.slides[prev].offsetWidth
-            );
-        },
     },
 };
 
+function getDistance(prev, next) {
+    return (
+        this._getTransitioner(prev, prev !== next && next).getDistance() ||
+        this.slides[prev].offsetWidth
+    );
+}
+
 function hasSelectableText(el) {
     return (
         css(el, 'userSelect') !== 'none' &&

package/src/js/mixin/slider-nav.js

@@ -148,6 +148,10 @@ export default {
                 return this.selNavItem;
             },
 
+            filter() {
+                return !this.parallax;
+            },
+
             handler(e) {
                 if (
                     e.target.closest('a,button') &&
@@ -171,6 +175,10 @@ export default {
                 return this.selNavItem;
             },
 
+            filter() {
+                return !this.parallax;
+            },
+
             handler(e) {
                 const { current, keyCode } = e;
                 const cmd = data(current, this.attrItem);
@@ -211,10 +219,11 @@ export default {
                     const active = item === index;
 
                     toggleClass(el, this.clsActive, active);
+                    toggleClass(button, 'uk-disabled', this.parallax);
 
                     attr(button, {
                         'aria-selected': active,
-                        tabindex: active ? null : -1,
+                        tabindex: active && !this.parallax ? null : -1,
                     });
 
                     if (active && button && matches(parent(el), ':focus-within')) {

package/src/js/mixin/slider-parallax.js

@@ -0,0 +1,138 @@
+import { hasClass, includes, query, scrolledOver, toPx, trigger } from 'uikit-util';
+import { resize, scroll } from '../api/observables';
+import { ease } from './parallax';
+
+export default {
+    props: {
+        parallax: Boolean,
+        parallaxTarget: Boolean,
+        parallaxStart: String,
+        parallaxEnd: String,
+        parallaxEasing: Number,
+    },
+
+    data: {
+        parallax: false,
+        parallaxTarget: false,
+        parallaxStart: 0,
+        parallaxEnd: 0,
+        parallaxEasing: 0,
+    },
+
+    observe: [
+        resize({
+            target: ({ $el, parallaxTarget }) => [$el, parallaxTarget],
+            filter: ({ parallax }) => parallax,
+        }),
+        scroll({ filter: ({ parallax }) => parallax }),
+    ],
+
+    computed: {
+        parallaxTarget({ parallaxTarget }, $el) {
+            return (parallaxTarget && query(parallaxTarget, $el)) || this.list;
+        },
+    },
+
+    update: {
+        write() {
+            if (!this.parallax) {
+                return;
+            }
+
+            const target = this.parallaxTarget;
+            const start = toPx(this.parallaxStart, 'height', target, true);
+            const end = toPx(this.parallaxEnd, 'height', target, true);
+            const percent = ease(scrolledOver(target, start, end), this.parallaxEasing);
+
+            const [prevIndex, slidePercent] = this.getIndexAt(percent);
+
+            const nextIndex = this.getValidIndex(prevIndex + Math.ceil(slidePercent));
+
+            const prev = this.slides[prevIndex];
+            const next = this.slides[nextIndex];
+
+            const { triggerShow, triggerShown, triggerHide, triggerHidden } = useTriggers(this);
+
+            if (~this.prevIndex) {
+                for (const i of new Set([this.index, this.prevIndex])) {
+                    if (!includes([nextIndex, prevIndex], i)) {
+                        triggerHide(this.slides[i]);
+                        triggerHidden(this.slides[i]);
+                    }
+                }
+            }
+
+            const changed = this.prevIndex !== prevIndex || this.index !== nextIndex;
+
+            this.dir = 1;
+            this.prevIndex = prevIndex;
+            this.index = nextIndex;
+
+            if (prev !== next) {
+                triggerHide(prev);
+            }
+
+            triggerShow(next);
+
+            if (changed) {
+                triggerShown(prev);
+            }
+
+            this._translate(prev === next ? 1 : slidePercent, prev, next);
+        },
+
+        events: ['scroll', 'resize'],
+    },
+
+    methods: {
+        getIndexAt(percent) {
+            const index = percent * (this.length - 1);
+            return [Math.floor(index), index % 1];
+        },
+    },
+};
+
+function useTriggers(cmp) {
+    const { clsSlideActive, clsEnter, clsLeave } = cmp;
+
+    return { triggerShow, triggerShown, triggerHide, triggerHidden };
+
+    function triggerShow(el) {
+        if (hasClass(el, clsLeave)) {
+            triggerHide(el);
+            triggerHidden(el);
+        }
+
+        if (!hasClass(el, clsSlideActive)) {
+            trigger(el, 'beforeitemshow', [cmp]);
+            trigger(el, 'itemshow', [cmp]);
+        }
+    }
+
+    function triggerShown(el) {
+        if (hasClass(el, clsEnter)) {
+            trigger(el, 'itemshown', [cmp]);
+        }
+    }
+
+    function triggerHide(el) {
+        if (!hasClass(el, clsSlideActive)) {
+            triggerShow(el);
+        }
+
+        if (hasClass(el, clsEnter)) {
+            triggerShown(el);
+        }
+
+        if (!hasClass(el, clsLeave)) {
+            trigger(el, 'beforeitemhide', [cmp]);
+            trigger(el, 'itemhide', [cmp]);
+        }
+    }
+
+    function triggerHidden(el) {
+        if (hasClass(el, clsLeave)) {
+            trigger(el, 'itemhidden', [cmp]);
+        }
+    }
+}

package/src/js/mixin/slider-reactive.js

@@ -1,7 +1,7 @@
 export default {
     update: {
         write() {
-            if (this.stack.length || this.dragging) {
+            if (this.stack.length || this.dragging || this.parallax) {
                 return;
             }
 

package/src/js/mixin/slider.js

@@ -1,5 +1,6 @@
 import {
     $,
+    addClass,
     children,
     clamp,
     getIndex,
@@ -19,7 +20,7 @@ export default {
     mixins: [SliderAutoplay, SliderDrag, SliderNav, I18n],
 
     props: {
-        clsActivated: Boolean,
+        clsActivated: String,
         easing: String,
         index: Number,
         finite: Boolean,
@@ -35,7 +36,10 @@ export default {
         stack: [],
         percent: 0,
         clsActive: 'uk-active',
-        clsActivated: false,
+        clsActivated: '',
+        clsEnter: 'uk-slide-enter',
+        clsLeave: 'uk-slide-leave',
+        clsSlideActive: 'uk-slide-active',
         Transitioner: false,
         transitionOptions: {},
     }),
@@ -78,9 +82,27 @@ export default {
 
     observe: resize(),
 
+    events: {
+        itemshow({ target }) {
+            addClass(target, this.clsEnter, this.clsSlideActive);
+        },
+
+        itemshown({ target }) {
+            removeClass(target, this.clsEnter);
+        },
+
+        itemhide({ target }) {
+            addClass(target, this.clsLeave);
+        },
+
+        itemhidden({ target }) {
+            removeClass(target, this.clsLeave, this.clsSlideActive);
+        },
+    },
+
     methods: {
         show(index, force = false) {
-            if (this.dragging || !this.length) {
+            if (this.dragging || !this.length || this.parallax) {
                 return;
             }
 

package/src/js/util/animation.js

@@ -5,8 +5,8 @@ import { startsWith, toNodes } from './lang';
 import { css, propName } from './style';
 
 const clsTransition = 'uk-transition';
-const clsTransitionEnd = 'transitionend';
-const clsTransitionCanceled = 'transitioncanceled';
+const transitionEnd = 'transitionend';
+const transitionCanceled = 'transitioncanceled';
 
 function transition(element, props, duration = 400, timing = 'linear') {
     duration = Math.round(duration);
@@ -21,11 +21,11 @@ function transition(element, props, duration = 400, timing = 'linear') {
                         }
                     }
 
-                    const timer = setTimeout(() => trigger(element, clsTransitionEnd), duration);
+                    const timer = setTimeout(() => trigger(element, transitionEnd), duration);
 
                     once(
                         element,
-                        [clsTransitionEnd, clsTransitionCanceled],
+                        [transitionEnd, transitionCanceled],
                         ({ type }) => {
                             clearTimeout(timer);
                             removeClass(element, clsTransition);
@@ -34,7 +34,7 @@ function transition(element, props, duration = 400, timing = 'linear') {
                                 transitionDuration: '',
                                 transitionTimingFunction: '',
                             });
-                            type === clsTransitionCanceled ? reject() : resolve(element);
+                            type === transitionCanceled ? reject() : resolve(element);
                         },
                         { self: true },
                     );
@@ -55,12 +55,12 @@ export const Transition = {
     start: transition,
 
     async stop(element) {
-        trigger(element, clsTransitionEnd);
+        trigger(element, transitionEnd);
         await Promise.resolve();
     },
 
     async cancel(element) {
-        trigger(element, clsTransitionCanceled);
+        trigger(element, transitionCanceled);
         await Promise.resolve();
     },
 
@@ -70,24 +70,24 @@ export const Transition = {
 };
 
 const animationPrefix = 'uk-animation-';
-const clsAnimationEnd = 'animationend';
-const clsAnimationCanceled = 'animationcanceled';
+const animationEnd = 'animationend';
+const animationCanceled = 'animationcanceled';
 
 function animate(element, animation, duration = 200, origin, out) {
     return Promise.all(
         toNodes(element).map(
             (element) =>
                 new Promise((resolve, reject) => {
-                    trigger(element, clsAnimationCanceled);
-                    const timer = setTimeout(() => trigger(element, clsAnimationEnd), duration);
+                    trigger(element, animationCanceled);
+                    const timer = setTimeout(() => trigger(element, animationEnd), duration);
 
                     once(
                         element,
-                        [clsAnimationEnd, clsAnimationCanceled],
+                        [animationEnd, animationCanceled],
                         ({ type }) => {
                             clearTimeout(timer);
 
-                            type === clsAnimationCanceled ? reject() : resolve(element);
+                            type === animationCanceled ? reject() : resolve(element);
 
                             css(element, 'animationDuration', '');
                             removeClasses(element, `${animationPrefix}\\S*`);
@@ -121,6 +121,6 @@ export const Animation = {
     },
 
     cancel(element) {
-        trigger(element, clsAnimationCanceled);
+        trigger(element, animationCanceled);
     },
 };

package/src/js/util/dom.js

@@ -46,8 +46,8 @@ export function remove(element) {
 export function wrapAll(element, structure) {
     structure = toNode(before(element, structure));
 
-    while (structure.firstChild) {
-        structure = structure.firstChild;
+    while (structure.firstElementChild) {
+        structure = structure.firstElementChild;
     }
 
     append(structure, element);