uikit 3.11.1 → 3.11.2-dev.03e47c2ff

package/src/js/core/scrollspy.js

@@ -1,8 +1,18 @@
-import {$$, css, filter, data as getData, isInView, once, Promise, removeClass, removeClasses, toggleClass, trigger} from 'uikit-util';
+import {
+    $$,
+    css,
+    filter,
+    data as getData,
+    isInView,
+    once,
+    removeClass,
+    removeClasses,
+    toggleClass,
+    trigger,
+} from 'uikit-util';
 
 const stateKey = '_ukScrollspy';
 export default {
-
     args: 'cls',
 
     props: {
@@ -12,7 +22,7 @@ export default {
         offsetTop: Number,
         offsetLeft: Number,
         repeat: Boolean,
-        delay: Number
+        delay: Number,
     },
 
     data: () => ({
@@ -23,14 +33,12 @@ export default {
         offsetLeft: 0,
         repeat: false,
         delay: 0,
-        inViewClass: 'uk-scrollspy-inview'
+        inViewClass: 'uk-scrollspy-inview',
     }),
 
     computed: {
-
         elements: {
-
-            get({target}, $el) {
+            get({ target }, $el) {
                 return target ? $$(target, $el) : [$el];
             },
 
@@ -40,25 +48,20 @@ export default {
                 }
             },
 
-            immediate: true
-
-        }
-
+            immediate: true,
+        },
     },
 
     disconnected() {
-        this.elements.forEach(el => {
+        for (const el of this.elements) {
             removeClass(el, this.inViewClass, el[stateKey] ? el[stateKey].cls : '');
             delete el[stateKey];
-        });
+        }
     },
 
     update: [
-
         {
-
             read(data) {
-
                 // Let child components be applied at least once first
                 if (!data.update) {
                     Promise.resolve().then(() => {
@@ -68,60 +71,43 @@ export default {
                     return false;
                 }
 
-                this.elements.forEach(el => {
-
+                for (const el of this.elements) {
                     if (!el[stateKey]) {
-                        el[stateKey] = {cls: getData(el, 'uk-scrollspy-class') || this.cls};
+                        el[stateKey] = { cls: getData(el, 'uk-scrollspy-class') || this.cls };
                     }
 
                     el[stateKey].show = isInView(el, this.offsetTop, this.offsetLeft);
-
-                });
-
+                }
             },
 
             write(data) {
-
-                this.elements.forEach(el => {
-
+                for (const el of this.elements) {
                     const state = el[stateKey];
 
                     if (state.show && !state.inview && !state.queued) {
-
                         state.queued = true;
 
-                        data.promise = (data.promise || Promise.resolve()).then(() =>
-                            new Promise(resolve =>
-                                setTimeout(resolve, this.delay)
-                            )
-                        ).then(() => {
-                            this.toggle(el, true);
-                            setTimeout(() => {
-                                state.queued = false;
-                                this.$emit();
-                            }, 300);
-                        });
-
+                        data.promise = (data.promise || Promise.resolve())
+                            .then(() => new Promise((resolve) => setTimeout(resolve, this.delay)))
+                            .then(() => {
+                                this.toggle(el, true);
+                                setTimeout(() => {
+                                    state.queued = false;
+                                    this.$emit();
+                                }, 300);
+                            });
                     } else if (!state.show && state.inview && !state.queued && this.repeat) {
-
                         this.toggle(el, false);
-
                     }
-
-                });
-
+                }
             },
 
-            events: ['scroll', 'resize']
-
-        }
-
+            events: ['scroll', 'resize'],
+        },
     ],
 
     methods: {
-
         toggle(el, inview) {
-
             const state = el[stateKey];
 
             state.off && state.off();
@@ -142,9 +128,6 @@ export default {
             state.inview = inview;
 
             this.$update(el);
-        }
-
-    }
-
+        },
+    },
 };
-

package/src/js/core/sticky.js

@@ -1,12 +1,41 @@
 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,
+    offset as getOffset,
+    getScrollingElement,
+    hasClass,
+    isNumeric,
+    isString,
+    isVisible,
+    noop,
+    offsetPosition,
+    parent,
+    query,
+    remove,
+    removeClass,
+    replaceClass,
+    scrollTop,
+    toFloat,
+    toggleClass,
+    toPx,
+    trigger,
+    within,
+} from 'uikit-util';
 
 export default {
-
     mixins: [Class, Media],
 
     props: {
+        position: String,
         top: null,
         bottom: Boolean,
         offset: String,
@@ -18,10 +47,11 @@ export default {
         selTarget: String,
         widthElement: Boolean,
         showOnUp: Boolean,
-        targetOffset: Number
+        targetOffset: Number,
     },
 
     data: {
+        position: 'top',
         top: 0,
         bottom: false,
         offset: 0,
@@ -33,25 +63,19 @@ export default {
         selTarget: '',
         widthElement: false,
         showOnUp: false,
-        targetOffset: false
+        targetOffset: false,
     },
 
     computed: {
-
-        offset({offset}) {
-            return toPx(offset);
-        },
-
-        selTarget({selTarget}, $el) {
-            return selTarget && $(selTarget, $el) || $el;
+        selTarget({ selTarget }, $el) {
+            return (selTarget && $(selTarget, $el)) || $el;
         },
 
-        widthElement({widthElement}, $el) {
+        widthElement({ widthElement }, $el) {
             return query(widthElement, $el) || this.placeholder;
         },
 
         isActive: {
-
             get() {
                 return hasClass(this.selTarget, this.clsActive);
             },
@@ -64,20 +88,19 @@ export default {
                     replaceClass(this.selTarget, this.clsActive, this.clsInactive);
                     trigger(this.$el, 'inactive');
                 }
-            }
-
-        }
-
+            },
+        },
     },
 
     connected() {
-        this.placeholder = $('+ .uk-sticky-placeholder', this.$el) || $('<div class="uk-sticky-placeholder"></div>');
+        this.placeholder =
+            $('+ .uk-sticky-placeholder', this.$el) ||
+            $('<div class="uk-sticky-placeholder"></div>');
         this.isFixed = false;
         this.isActive = false;
     },
 
     disconnected() {
-
         if (this.isFixed) {
             this.hide();
             removeClass(this.selTarget, this.clsInactive);
@@ -89,9 +112,7 @@ export default {
     },
 
     events: [
-
         {
-
             name: 'load hashchange popstate',
 
             el() {
@@ -99,8 +120,7 @@ export default {
             },
 
             handler() {
-
-                if (!(this.targetOffset !== false && location.hash && window.pageYOffset > 0)) {
+                if (!(this.targetOffset !== false && location.hash && scrollTop(window) > 0)) {
                     return;
                 }
 
@@ -108,72 +128,99 @@ export default {
 
                 if (target) {
                     fastdom.read(() => {
-
-                        const {top} = offset(target);
-                        const elTop = offset(this.$el).top;
+                        const { top } = getOffset(target);
+                        const elTop = getOffset(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);
+                        if (
+                            this.isFixed &&
+                            elTop + elHeight >= top &&
+                            elTop <= top + target.offsetHeight
+                        ) {
+                            scrollTop(
+                                window,
+                                top -
+                                    elHeight -
+                                    (isNumeric(this.targetOffset) ? this.targetOffset : 0) -
+                                    this._data.offset
+                            );
                         }
-
                     });
                 }
-
-            }
-
-        }
-
+            },
+        },
     ],
 
     update: [
-
         {
-
-            read({height}, types) {
-
+            read({ height, margin }, types) {
                 this.inactive = !this.matchMedia || !isVisible(this.$el);
 
                 if (this.inactive) {
                     return false;
                 }
 
-                if (this.isActive && types.has('resize')) {
+                const hide = this.isActive && types.has('resize');
+                if (hide) {
+                    css(this.selTarget, 'transition', '0s');
                     this.hide();
-                    height = this.$el.offsetHeight;
-                    this.show();
                 }
 
-                height = this.isActive ? height : this.$el.offsetHeight;
+                if (!this.isActive) {
+                    height = getOffset(this.$el).height;
+                    margin = css(this.$el, 'margin');
+                }
 
-                if (height + this.offset > getHeight(window)) {
-                    this.inactive = true;
-                    return false;
+                if (hide) {
+                    this.show();
+                    fastdom.write(() => css(this.selTarget, 'transition', ''));
                 }
 
                 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 bottom = parseProp('bottom', this);
+                let position = this.position;
 
-                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;
+                if (position === 'auto') {
+                    position = height > getHeight(window) ? 'bottom' : 'top';
+                }
+
+                let offset = this.offset;
+                if (position === 'bottom') {
+                    offset += '+100vh-100%';
+                }
+                offset = toPx(offset, 'height', referenceElement);
+
+                const overflow = Math.max(0, height + offset - getHeight(window));
+                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) - offset;
+                const end = bottom
+                    ? bottom - getOffset(this.$el).height + overflow - offset
+                    : getScrollingElement(this.$el).scrollHeight - getHeight(window);
 
                 return {
+                    start,
+                    end,
+                    offset,
+                    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(referenceElement)[0],
                 };
             },
 
-            write({height, margins}) {
+            write({ height, margin }) {
+                const { placeholder } = this;
 
-                const {placeholder} = this;
-
-                css(placeholder, assign({height}, margins));
+                css(placeholder, { height, margin });
 
                 if (!within(placeholder, document)) {
                     after(this.$el, placeholder);
@@ -181,55 +228,82 @@ export default {
                 }
 
                 this.isActive = !!this.isActive; // force self-assign
-
             },
 
-            events: ['resize']
-
+            events: ['resize'],
         },
 
         {
-
-            read({scroll = 0}) {
-
-                this.scroll = window.pageYOffset;
+            read({
+                scroll: prevScroll = 0,
+                dir: prevDir = 'down',
+                overflow,
+                overflowScroll = 0,
+                start,
+                end,
+            }) {
+                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;
-
-                data.lastScroll = scroll;
+                const {
+                    initTimestamp = 0,
+                    dir,
+                    prevDir,
+                    scroll,
+                    prevScroll = 0,
+                    top,
+                    start,
+                    topOffset,
+                    height,
+                } = data;
 
-                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)
+                if (
+                    this.inactive ||
+                    scroll < start ||
+                    (this.showOnUp &&
+                        (scroll <= start ||
+                            (dir === 'down' && isScrollUpdate) ||
+                            (dir === 'up' && !this.isFixed && scroll <= topOffset + height)))
                 ) {
-
                     if (!this.isFixed) {
-
                         if (Animation.inProgress(this.$el) && top > scroll) {
                             Animation.cancel(this.$el);
                             this.hide();
@@ -240,96 +314,93 @@ 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 {
                         this.hide();
                     }
-
                 } 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);
-
                 } else {
                     this.show();
                 }
-
             },
 
-            events: ['resize', 'scroll']
-
-        }
-
+            events: ['resize', 'scroll'],
+        },
     ],
 
     methods: {
-
         show() {
-
             this.isFixed = true;
             this.update();
             this.placeholder.hidden = false;
-
         },
 
         hide() {
-
             this.isActive = false;
             removeClass(this.$el, this.clsFixed, this.clsBelow);
-            css(this.$el, {position: '', top: '', width: ''});
+            css(this.$el, { position: '', top: '', width: '' });
             this.placeholder.hidden = true;
-
         },
 
         update() {
-
-            const active = this.top !== 0 || this.scroll > this.top;
-            let top = Math.max(0, this.offset);
+            let {
+                width,
+                scroll = 0,
+                overflow,
+                overflowScroll = 0,
+                start,
+                end,
+                offset,
+                topOffset,
+                height,
+                offsetParentTop,
+            } = this._data;
+            const active = start !== 0 || scroll > start;
             let position = 'fixed';
 
-            if (isNumeric(this.bottom) && this.scroll > this.bottom - this.offset) {
-                top = this.bottom - this.offsetParentTop;
+            if (scroll > end) {
+                offset += end - offsetParentTop;
                 position = 'absolute';
             }
 
+            if (overflow) {
+                offset -= overflowScroll;
+            }
+
             css(this.$el, {
                 position,
-                top: `${top}px`,
-                width: this.width
+                top: `${offset}px`,
+                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);
-
-        }
-
-    }
-
+        },
+    },
 };
 
-function parseProp(prop, {$props, $el, [`${prop}Offset`]: propOffset}) {
-
-    const value = $props[prop];
-
+function parseProp(value, el, propOffset, padding) {
     if (!value) {
-        return;
+        return 0;
     }
 
     if (isString(value) && value.match(/^-?\d/)) {
-
         return propOffset + toPx(value);
-
     } else {
-
-        return offset(value === true ? parent($el) : query(value, $el)).bottom;
-
+        const refElement = value === true ? parent(el) : query(value, el);
+        return (
+            getOffset(refElement).bottom -
+            (padding && refElement && within(el, refElement)
+                ? toFloat(css(refElement, 'paddingBottom'))
+                : 0)
+        );
     }
 }