uikit 3.15.15-dev.cc41b76e3 → 3.15.15-dev.f41a7c271

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.15.15-dev.cc41b76e3",
+    "version": "3.15.15-dev.f41a7c271",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/components/navbar-toggle-icon.svg

@@ -3,7 +3,7 @@
 
         .uk-navbar-toggle-animate svg > [class*='line-'] {
             transition: 0.2s ease-in-out;
-            transition-property: transform, opacity,;
+            transition-property: transform, opacity;
             transform-origin: center;
             opacity: 1;
         }

package/src/js/components/parallax.js

@@ -1,7 +1,7 @@
 import Resize from '../mixin/resize';
 import Scroll from '../mixin/scroll';
 import Parallax from '../mixin/parallax';
-import { css, parent, query, scrolledOver, toPx } from 'uikit-util';
+import { css, isVisible, parent, query, scrolledOver, toPx } from 'uikit-util';
 
 export default {
     mixins: [Parallax, Resize, Scroll],
@@ -41,12 +41,20 @@ export default {
         },
     },
 
+    resizeTargets() {
+        return [this.$el, this.target];
+    },
+
     update: {
         read({ percent }, types) {
             if (!types.has('scroll')) {
                 percent = false;
             }
 
+            if (!isVisible(this.$el)) {
+                return false;
+            }
+
             if (!this.matchMedia) {
                 return;
             }

package/src/js/core/drop.js

@@ -1,7 +1,6 @@
 import Container from '../mixin/container';
 import Lazyload from '../mixin/lazyload';
 import Position from '../mixin/position';
-import Style from '../mixin/style';
 import Togglable from '../mixin/togglable';
 import {
     addClass,
@@ -35,7 +34,7 @@ import { isSameSiteAnchor, preventBackgroundScroll, preventOverscroll } from '..
 export let active;
 
 export default {
-    mixins: [Container, Lazyload, Position, Style, Togglable],
+    mixins: [Container, Lazyload, Position, Togglable],
 
     args: 'pos',
 
@@ -116,6 +115,8 @@ export default {
             attr(this.targetEl, 'aria-haspopup', true);
             this.lazyload(this.targetEl);
         }
+
+        this._style = (({ width, height }) => ({ width, height }))(this.$el.style);
     },
 
     disconnected() {
@@ -123,6 +124,7 @@ export default {
             this.hide(false);
             active = null;
         }
+        css(this.$el, this._style);
     },
 
     events: [
@@ -424,7 +426,7 @@ export default {
 
         position() {
             removeClass(this.$el, `${this.clsDrop}-stack`);
-            attr(this.$el, 'style', this._style);
+            css(this.$el, this._style);
 
             // Ensure none positioned element does not generate scrollbars
             this.$el.hidden = true;

package/src/js/core/img.js

@@ -19,7 +19,6 @@ import {
     queryAll,
     removeAttr,
     startsWith,
-    toPx,
     trigger,
 } from 'uikit-util';
 
@@ -31,8 +30,7 @@ export default {
     props: {
         dataSrc: String,
         sources: String,
-        offsetTop: String,
-        offsetLeft: String,
+        margin: String,
         target: String,
         loading: String,
     },
@@ -40,8 +38,7 @@ export default {
     data: {
         dataSrc: '',
         sources: false,
-        offsetTop: '50vh',
-        offsetLeft: '50vw',
+        margin: '50%',
         target: false,
         loading: 'lazy',
     },
@@ -72,12 +69,7 @@ export default {
                     this.load();
                     observer.disconnect();
                 },
-                {
-                    rootMargin: `${toPx(this.offsetTop, 'height')}px ${toPx(
-                        this.offsetLeft,
-                        'width'
-                    )}px`,
-                }
+                { rootMargin: this.margin }
             )
         );
     },

package/src/js/core/scrollspy.js

@@ -10,7 +10,6 @@ import {
     removeClass,
     removeClasses,
     toggleClass,
-    toPx,
     trigger,
 } from 'uikit-util';
 
@@ -23,8 +22,7 @@ export default {
         cls: String,
         target: String,
         hidden: Boolean,
-        offsetTop: Number,
-        offsetLeft: Number,
+        margin: String,
         repeat: Boolean,
         delay: Number,
     },
@@ -33,8 +31,7 @@ export default {
         cls: '',
         target: false,
         hidden: true,
-        offsetTop: 0,
-        offsetLeft: 0,
+        margin: '-1px',
         repeat: false,
         delay: 0,
         inViewClass: 'uk-scrollspy-inview',
@@ -85,11 +82,7 @@ export default {
 
                     this.$emit();
                 },
-                {
-                    rootMargin: `${toPx(this.offsetTop, 'height') - 1}px ${
-                        toPx(this.offsetLeft, 'width') - 1
-                    }px`,
-                },
+                { rootMargin: this.margin },
                 false
             )
         );

package/src/js/core/sticky.js

@@ -7,6 +7,7 @@ import {
     addClass,
     after,
     Animation,
+    before,
     clamp,
     css,
     height as getHeight,
@@ -94,6 +95,7 @@ export default {
             this.hide();
             removeClass(this.selTarget, this.clsInactive);
         }
+        css(this.$el, { position: '', top: '' });
 
         remove(this.placeholder);
         this.placeholder = null;
@@ -147,7 +149,7 @@ export default {
 
     update: [
         {
-            read({ height, width, margin }, types) {
+            read({ height, width, margin, sticky }, types) {
                 this.inactive = !this.matchMedia || !isVisible(this.$el);
 
                 if (this.inactive) {
@@ -171,6 +173,7 @@ export default {
                 }
 
                 const windowHeight = getHeight(window);
+                const maxScrollHeight = document.scrollingElement.scrollHeight - windowHeight;
 
                 let position = this.position;
                 if (this.overflowFlip && height > windowHeight) {
@@ -178,7 +181,7 @@ export default {
                 }
 
                 const referenceElement = this.isFixed ? this.placeholder : this.$el;
-                let offset = toPx(this.offset, 'height', referenceElement);
+                let offset = toPx(this.offset, 'height', sticky ? this.$el : referenceElement);
                 if (position === 'bottom' && (height < windowHeight || this.overflowFlip)) {
                     offset += windowHeight - height;
                 }
@@ -187,6 +190,7 @@ export default {
                     ? 0
                     : Math.max(0, height + offset - windowHeight);
                 const topOffset = getOffset(referenceElement).top;
+                const elHeight = getOffset(this.$el).height;
 
                 const start =
                     (this.start === false
@@ -194,11 +198,23 @@ export default {
                         : parseProp(this.start, this.$el, topOffset)) - offset;
                 const end =
                     this.end === false
-                        ? document.scrollingElement.scrollHeight - windowHeight
-                        : parseProp(this.end, this.$el, topOffset + height, true) -
-                          getOffset(this.$el).height +
-                          overflow -
-                          offset;
+                        ? maxScrollHeight
+                        : Math.min(
+                              maxScrollHeight,
+                              parseProp(this.end, this.$el, topOffset + height, true) -
+                                  elHeight -
+                                  offset +
+                                  overflow
+                          );
+
+                sticky =
+                    !this.showOnUp &&
+                    start + offset === topOffset &&
+                    end ===
+                        Math.min(
+                            maxScrollHeight,
+                            parseProp('!*', this.$el, 0, true) - elHeight - offset + overflow
+                        );
 
                 return {
                     start,
@@ -210,18 +226,23 @@ export default {
                     width,
                     margin,
                     top: offsetPosition(referenceElement)[0],
+                    sticky,
                 };
             },
 
-            write({ height, width, margin }) {
+            write({ height, width, margin, offset, sticky }) {
+                if (sticky) {
+                    height = width = margin = 0;
+                    css(this.$el, { position: 'sticky', top: offset });
+                }
                 const { placeholder } = this;
 
                 css(placeholder, { height, width, margin });
 
                 if (!within(placeholder, document)) {
-                    after(this.$el, placeholder);
                     placeholder.hidden = true;
                 }
+                (sticky ? before : after)(this.$el, placeholder);
             },
 
             events: ['resize'],
@@ -338,9 +359,19 @@ export default {
         },
 
         hide() {
+            const { offset, sticky } = this._data;
             this.setActive(false);
             removeClass(this.$el, this.clsFixed, this.clsBelow);
-            css(this.$el, { position: '', top: '', width: '' });
+            if (sticky) {
+                css(this.$el, 'top', offset);
+            } else {
+                css(this.$el, {
+                    position: '',
+                    top: '',
+                    width: '',
+                    marginTop: '',
+                });
+            }
             this.placeholder.hidden = true;
             this.isFixed = false;
         },
@@ -357,24 +388,30 @@ export default {
                 topOffset,
                 height,
                 offsetParentTop,
+                sticky,
             } = this._data;
             const active = start !== 0 || scroll > start;
-            let position = 'fixed';
 
-            if (scroll > end) {
-                offset += end - offsetParentTop;
-                position = 'absolute';
+            if (!sticky) {
+                let position = 'fixed';
+
+                if (scroll > end) {
+                    offset += end - offsetParentTop;
+                    position = 'absolute';
+                }
+
+                css(this.$el, {
+                    position,
+                    width,
+                });
+                css(this.$el, 'marginTop', 0, 'important');
             }
 
             if (overflow) {
                 offset -= overflowScroll;
             }
 
-            css(this.$el, {
-                position,
-                top: `${offset}px`,
-                width,
-            });
+            css(this.$el, 'top', offset);
 
             this.setActive(active);
             toggleClass(this.$el, this.clsBelow, scroll > topOffset + height);

package/src/js/mixin/modal.js

@@ -304,7 +304,10 @@ function toMs(time) {
 
 export function preventOverscroll(el) {
     if (CSS.supports('overscroll-behavior', 'contain')) {
-        const elements = filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow')));
+        const elements = [
+            el,
+            ...filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow'))),
+        ];
         css(elements, 'overscrollBehavior', 'contain');
         return () => css(elements, 'overscrollBehavior', '');
     }

package/src/js/util/dimensions.js

@@ -1,4 +1,6 @@
+import { on } from './event';
 import { css } from './style';
+import { $, append, remove } from './dom';
 import {
     each,
     isDocument,
@@ -180,7 +182,7 @@ export function toPx(value, property = 'width', element = window, offsetDim = fa
         if (unit) {
             value = percent(
                 unit === 'vh'
-                    ? height(toWindow(element))
+                    ? getViewportHeight()
                     : unit === 'vw'
                     ? width(toWindow(element))
                     : offsetDim
@@ -202,3 +204,25 @@ const parseUnit = memoize((str) => (str.match(unitRe) || [])[0]);
 function percent(base, value) {
     return (base * toFloat(value)) / 100;
 }
+
+let vh;
+let vhEl;
+
+function getViewportHeight() {
+    if (vh) {
+        return vh;
+    }
+    if (!vhEl) {
+        vhEl = $('<div>');
+        css(vhEl, {
+            height: '100vh',
+            position: 'fixed',
+        });
+        on(window, 'resize', () => (vh = null));
+    }
+
+    append(document.body, vhEl);
+    vh = vhEl.clientHeight;
+    remove(vhEl);
+    return vh;
+}

package/tests/image.html

@@ -17,7 +17,7 @@
             <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1495321308589-43affb814eee?fit=crop&w=1200&h=450&q=80" uk-img="loading: eager">
                 <h1>Background Image Loading Eager</h1>
             </div>
-            
+
             <h2>Loading Lazy Attribute</h2>
 
             <div class="uk-child-width-1-2@m" uk-grid>
@@ -265,7 +265,7 @@
                  sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
                 <h1>Background Picture with Srcset</h1>
             </div>
-                
+
             <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
                  sources="[{&quot;srcset&quot;: &quot;images/image-type.avif&quot;,
                             &quot;type&quot;: &quot;image\/avif&quot;
@@ -491,7 +491,7 @@
                          width="746" height="498" alt="" uk-img>
                 </div>
             </div>
-            
+
             <div class="uk-child-width-1-2@m" uk-grid>
                 <div>
 
@@ -621,16 +621,10 @@
                             <td>Enable lazy/eager loading. Set to `eager` for images within the first visible viewport.</td>
                         </tr>
                         <tr>
-                            <td><code>offsetTop</code></td>
-                            <td>String</td>
-                            <td>'50vh'</td>
-                            <td>The offset increases the viewport's bounding box vertically, before computing an intersection with the image.</td>
-                        </tr>
-                        <tr>
-                            <td><code>offsetLeft</code></td>
+                            <td><code>margin</code></td>
                             <td>String</td>
-                            <td>0</td>
-                            <td>The offset increases the viewport's bounding box horizontally, before computing an intersection with the image.</td>
+                            <td>'50%'</td>
+                            <td>The margin increases the viewport's bounding box, before computing an intersection with the image. (Must be px or % units)</td>
                         </tr>
                         <tr>
                             <td><code>target</code></td>

package/tests/scrollspy.html

@@ -513,16 +513,10 @@
                             <td>Hides the element while out of view.</td>
                         </tr>
                         <tr>
-                            <td><code>offset-top</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>Top offset before triggering in view.</td>
-                        </tr>
-                        <tr>
-                            <td><code>offset-left</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>Left offset before triggering in view.</td>
+                            <td><code>margin</code></td>
+                            <td>String</td>
+                            <td>'-1px'</td>
+                            <td>The margin is added to the viewport's bounding box, before computing an intersection with the element. (Must be px or % units)</td>
                         </tr>
                         <tr>
                             <td><code>repeat</code></td>

package/src/js/mixin/style.js

@@ -1,11 +0,0 @@
-import { attr } from 'uikit-util';
-
-export default {
-    beforeConnect() {
-        this._style = attr(this.$el, 'style');
-    },
-
-    disconnected() {
-        attr(this.$el, 'style', this._style);
-    },
-};