uikit 3.18.1-dev.edde0251f → 3.18.2-dev.ce74de00c

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.18.1-dev.edde0251f",
+  "version": "3.18.2-dev.ce74de00c",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/components/sortable.js

@@ -11,7 +11,6 @@ import {
     dimensions,
     findIndex,
     getEventPos,
-    hasTouch,
     height,
     index,
     isInput,
@@ -105,7 +104,7 @@ export default {
 
         handles(handles, prev) {
             css(prev, { touchAction: '', userSelect: '' });
-            css(handles, { touchAction: hasTouch ? 'none' : '', userSelect: 'none' }); // touchAction set to 'none' causes a performance drop in Chrome 80
+            css(handles, { touchAction: 'none', userSelect: 'none' });
         },
     },
 

package/src/js/core/dropnav.js

@@ -19,7 +19,6 @@ import {
     remove,
     selFocusable,
     toFloat,
-    toPx,
     Transition,
 } from 'uikit-util';
 import Class from '../mixin/class';
@@ -76,15 +75,6 @@ export default {
             return dropbar ? dropbar : (this._dropbar = $('<div></div>'));
         },
 
-        dropbarOffset({ target, targetY }, $el) {
-            const { offsetTop, offsetHeight } = query(targetY || target || $el, $el);
-            return offsetTop + offsetHeight + this.dropbarPositionOffset;
-        },
-
-        dropbarPositionOffset(_, $el) {
-            return toPx(css($el, '--uk-position-offset'));
-        },
-
         dropContainer(_, $el) {
             return this.container || $el;
         },
@@ -299,7 +289,7 @@ export default {
                             .map((el) => offset(el).bottom),
                     );
 
-                    css(this.dropbar, 'top', this.dropbarOffset);
+                    css(this.dropbar, 'top', this.getDropbarOffset(drop.$el));
                     this.transitionTo(
                         maxBottom - offset(this.dropbar).top + toFloat(css(target, 'marginBottom')),
                         target,
@@ -404,6 +394,12 @@ export default {
             return this.getDropdown(el) && hasClass(el, this.clsDrop);
         },
 
+        getDropbarOffset(el) {
+            const { $el, target, targetY } = this;
+            const { offsetTop, offsetHeight } = query(targetY || target || $el, $el);
+            return offsetTop + offsetHeight + this.getDropdown(el)?.getPositionOffset(el);
+        },
+
         initializeDropdowns() {
             this.$create(
                 'drop',

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

@@ -66,7 +66,7 @@ function getHeight(element) {
         css(element, 'display', 'block', 'important');
     }
     css(element, 'minHeight', '');
-    const height = element.offsetHeight;
+    const height = element.offsetHeight ?? element.clientHeight;
     css(element, style);
     return height;
 }

package/src/js/core/navbar.js

@@ -19,16 +19,6 @@ export default {
 
     computed: {
         navbarContainer: (_, $el) => $el.closest('.uk-navbar-container'),
-
-        dropbarOffset({ dropbarTransparentMode }) {
-            const { offsetTop, offsetHeight } = this.navbarContainer;
-            return (
-                offsetTop +
-                (dropbarTransparentMode === 'behind'
-                    ? 0
-                    : offsetHeight + this.dropbarPositionOffset)
-            );
-        },
     },
 
     watch: {
@@ -97,6 +87,16 @@ export default {
                 return drop.inset ? 'behind' : 'remove';
             }
         },
+
+        getDropbarOffset(el) {
+            const { offsetTop, offsetHeight } = this.navbarContainer;
+            return (
+                offsetTop +
+                (this.dropbarTransparentMode === 'behind'
+                    ? 0
+                    : offsetHeight + this.getDropdown(el)?.getPositionOffset(el))
+            );
+        },
     },
 };
 

package/src/js/core/video.js

@@ -32,7 +32,11 @@ export default {
         intersection({
             filter: ({ $el, autoplay }) => autoplay && isVideo($el),
             handler([{ isIntersecting }]) {
-                if (isIntersecting) {
+                if (
+                    isIntersecting ||
+                    this.$el.webkitDisplayingFullscreen ||
+                    document.fullscreenElement === this.$el
+                ) {
                     play(this.$el);
                 } else {
                     pause(this.$el);

package/src/js/util/scroll.js

@@ -1,24 +1,43 @@
-import { css, matches, on, scrollParent, width } from 'uikit-util';
+import { css, getEventPos, matches, on, once, scrollParents, width } from 'uikit-util';
 
 let prevented;
 export function preventBackgroundScroll(el) {
     // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)
-    const off = on(
-        el,
-        'touchmove',
-        (e) => {
-            if (e.targetTouches.length !== 1 || matches(e.target, 'input[type="range"')) {
-                return;
-            }
-
-            let { scrollHeight, clientHeight } = scrollParent(e.target);
-
-            if (clientHeight >= scrollHeight && e.cancelable) {
-                e.preventDefault();
-            }
-        },
-        { passive: false },
-    );
+    const off = on(el, 'touchstart', (e) => {
+        if (e.targetTouches.length !== 1 || matches(e.target, 'input[type="range"')) {
+            return;
+        }
+
+        let prev = getEventPos(e).y;
+
+        const offMove = on(
+            el,
+            'touchmove',
+            (e) => {
+                const pos = getEventPos(e).y;
+                if (pos === prev) {
+                    return;
+                }
+                prev = pos;
+
+                if (
+                    !scrollParents(e.target).some((scrollParent) => {
+                        if (!el.contains(scrollParent)) {
+                            return false;
+                        }
+
+                        let { scrollHeight, clientHeight } = scrollParent;
+                        return clientHeight < scrollHeight;
+                    })
+                ) {
+                    e.preventDefault();
+                }
+            },
+            { passive: false },
+        );
+
+        once(el, 'scroll touchend touchcanel', offMove, { capture: true });
+    });
 
     if (prevented) {
         return off;