uikit 3.16.26 → 3.16.27-dev.6592ba2c5

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.16.26",
+  "version": "3.16.27-dev.6592ba2c5",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/observables.js

@@ -52,8 +52,8 @@ export function lazyload(options = {}) {
     });
 }
 
-export function viewport() {
-    return observe((target, handler) => observeViewportResize(handler));
+export function viewport(options) {
+    return observe((target, handler) => observeViewportResize(handler), options);
 }
 
 export function scroll(options) {

package/src/js/core/height-viewport.js

@@ -13,7 +13,7 @@ import {
     scrollParents,
     toFloat,
 } from 'uikit-util';
-import { resize } from '../api/observables';
+import { resize, viewport } from '../api/observables';
 
 export default {
     props: {
@@ -31,9 +31,10 @@ export default {
     },
 
     // check for offsetTop change
-    observe: resize({
-        target: ({ $el }) => [$el, ...scrollParents($el)],
-    }),
+    observe: [
+        viewport({ filter: ({ expand }) => expand }),
+        resize({ target: ({ $el }) => scrollParents($el) }),
+    ],
 
     update: {
         read() {
@@ -50,19 +51,15 @@ export default {
                 scrollElement === body ? scrollingElement : scrollElement,
             );
 
-            if (this.expand) {
-                minHeight = `${
-                    viewportHeight -
-                    (dimensions(scrollElement).height - dimensions(this.$el).height) -
-                    box
-                }px`;
-            } else {
-                const isScrollingElement =
-                    scrollingElement === scrollElement || body === scrollElement;
+            const isScrollingElement = scrollingElement === scrollElement || body === scrollElement;
 
-                // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-                minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;
+            // on mobile devices (iOS and Android) window.innerHeight !== 100vh
+            minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;
 
+            if (this.expand) {
+                const diff = dimensions(scrollElement).height - dimensions(this.$el).height;
+                minHeight += ` - ${diff}px`;
+            } else {
                 if (this.offsetTop) {
                     if (isScrollingElement) {
                         const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
@@ -81,10 +78,10 @@ export default {
                 } else if (isString(this.offsetBottom)) {
                     minHeight += ` - ${dimensions(query(this.offsetBottom, this.$el)).height}px`;
                 }
-
-                minHeight += `${box ? ` - ${box}px` : ''})`;
             }
 
+            minHeight += `${box ? ` - ${box}px` : ''})`;
+
             return { minHeight };
         },