uikit 3.11.2-dev.fb043abc2 → 3.12.0

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,9 +1,37 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
-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';
+import {
+    $,
+    addClass,
+    after,
+    Animation,
+    clamp,
+    css,
+    dimensions,
+    fastdom,
+    height as getHeight,
+    offset as getOffset,
+    getScrollingElement,
+    hasClass,
+    isString,
+    isVisible,
+    noop,
+    offsetPosition,
+    parent,
+    query,
+    remove,
+    removeClass,
+    replaceClass,
+    scrollTop,
+    toFloat,
+    toggleClass,
+    toPx,
+    trigger,
+    within,
+    intersectRect,
+} from 'uikit-util';
 
 export default {
-
     mixins: [Class, Media],
 
     props: {
@@ -19,7 +47,7 @@ export default {
         selTarget: String,
         widthElement: Boolean,
         showOnUp: Boolean,
-        targetOffset: Number
+        targetOffset: Number,
     },
 
     data: {
@@ -35,36 +63,19 @@ export default {
         selTarget: '',
         widthElement: false,
         showOnUp: false,
-        targetOffset: false
+        targetOffset: false,
     },
 
     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;
         },
 
-        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);
             },
@@ -77,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);
@@ -102,49 +112,43 @@ export default {
     },
 
     events: [
-
         {
-
             name: 'load hashchange popstate',
 
             el() {
                 return window;
             },
 
-            handler() {
+            filter() {
+                return this.targetOffset !== false;
+            },
 
-                if (!(this.targetOffset !== false && location.hash && scrollTop(window) > 0)) {
+            handler() {
+                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')
+                        );
+                    }
+                });
+            },
+        },
     ],
 
     update: [
-
         {
-
-            read({height, margin}, types) {
-
+            read({ height, margin }, types) {
                 this.inactive = !this.matchMedia || !isVisible(this.$el);
 
                 if (this.inactive) {
@@ -153,50 +157,64 @@ 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);
+                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,
                     height,
                     margin,
-                    width: dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el).width,
-                    top: offsetPosition(this.placeholder)[0]
+                    width: dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el)
+                        .width,
+                    top: offsetPosition(referenceElement)[0],
                 };
             },
 
-            write({height, margin}) {
-
-                const {placeholder} = this;
+            write({ height, margin }) {
+                const { placeholder } = this;
 
-                css(placeholder, {height, margin});
+                css(placeholder, { height, margin });
 
                 if (!within(placeholder, document)) {
                     after(this.$el, placeholder);
@@ -204,17 +222,20 @@ export default {
                 }
 
                 this.isActive = !!this.isActive; // force self-assign
-
             },
 
-            events: ['resize']
-
+            events: ['resize'],
         },
 
         {
-
-            read({scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end}) {
-
+            read({
+                scroll: prevScroll = 0,
+                dir: prevDir = 'down',
+                overflow,
+                overflowScroll = 0,
+                start,
+                end,
+            }) {
                 const scroll = scrollTop(window);
                 const dir = prevScroll <= scroll ? 'down' : 'up';
 
@@ -224,21 +245,32 @@ export default {
                     scroll,
                     prevScroll,
                     overflowScroll: clamp(
-                        overflowScroll
-                        + clamp(scroll, start, end)
-                        - clamp(prevScroll, start, end),
+                        overflowScroll + clamp(scroll, start, end) - clamp(prevScroll, start, end),
                         0,
                         overflow
-                    )
+                    ),
                 };
             },
 
             write(data, types) {
-
                 const isScrollUpdate = types.has('scroll');
-                const {initTimestamp = 0, dir, prevDir, scroll, prevScroll = 0, top, start, topOffset, height} = data;
+                const {
+                    initTimestamp = 0,
+                    dir,
+                    prevDir,
+                    scroll,
+                    prevScroll = 0,
+                    top,
+                    start,
+                    topOffset,
+                    height,
+                } = data;
 
-                if (scroll < 0 || scroll === prevScroll && isScrollUpdate || this.showOnUp && !isScrollUpdate && !this.isFixed) {
+                if (
+                    scroll < 0 ||
+                    (scroll === prevScroll && isScrollUpdate) ||
+                    (this.showOnUp && !isScrollUpdate && !this.isFixed)
+                ) {
                     return;
                 }
 
@@ -248,17 +280,24 @@ export default {
                     data.initTimestamp = now;
                 }
 
-                if (this.showOnUp && !this.isFixed && Math.abs(data.initScroll - scroll) <= 30 && Math.abs(prevScroll - scroll) <= 10) {
+                if (
+                    this.showOnUp &&
+                    !this.isFixed &&
+                    Math.abs(data.initScroll - scroll) <= 30 &&
+                    Math.abs(prevScroll - scroll) <= 10
+                ) {
                     return;
                 }
 
-                if (this.inactive
-                    || scroll < start
-                    || this.showOnUp && (scroll <= start || dir === 'down' && isScrollUpdate || dir === 'up' && !this.isFixed && scroll <= topOffset + height)
+                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();
@@ -275,93 +314,87 @@ export default {
                     } 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 {width, scroll = 0, overflow, overflowScroll = 0, start, end, topOffset, height, offsetParentTop} = this._data;
+            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`,
-                width
+                top: `${offset}px`,
+                width,
             });
 
             this.isActive = active;
             toggleClass(this.$el, this.clsBelow, scroll > topOffset + height);
             addClass(this.$el, this.clsFixed);
-
-        }
-
-    }
-
+        },
+    },
 };
 
-function parseProp(value, el, propOffset) {
-
+function parseProp(value, el, propOffset, padding) {
     if (!value) {
         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)
+        );
     }
 }