uikit 3.11.2-dev.28b7953b9 → 3.11.2-dev.29f2881ed

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,
+    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: {
@@ -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,9 +112,7 @@ export default {
     },
 
     events: [
-
         {
-
             name: 'load hashchange popstate',
 
             el() {
@@ -112,7 +120,6 @@ export default {
             },
 
             handler() {
-
                 if (!(this.targetOffset !== false && location.hash && scrollTop(window) > 0)) {
                     return;
                 }
@@ -121,30 +128,32 @@ 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) -
+                                    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 +162,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 +227,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 +250,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 +285,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 +319,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)
+        );
     }
 }