uikit 3.17.5-dev.563196f5e → 3.17.5-dev.e5ca8bbdc

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.17.5-dev.563196f5e",
+  "version": "3.17.5-dev.e5ca8bbdc",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/video.js

@@ -1,5 +1,5 @@
-import { hasAttr, isInView, isTag, isVideo, isVisible, mute, pause, play } from 'uikit-util';
-import { intersection, resize } from '../api/observables';
+import { hasAttr, isTag, isVideo, mute, parent, pause, play } from 'uikit-util';
+import { intersection } from '../api/observables';
 
 export default {
     args: 'autoplay',
@@ -14,9 +14,11 @@ export default {
         autoplay: true,
     },
 
-    connected() {
+    beforeConnect() {
         this.inView = this.autoplay === 'inview';
+    },
 
+    connected() {
         if (this.inView && !hasAttr(this.$el, 'preload')) {
             this.$el.preload = 'none';
         }
@@ -30,29 +32,18 @@ export default {
         }
     },
 
-    observe: [intersection({ args: { intersecting: false } }), resize()],
-
-    update: {
-        read({ visible }) {
-            if (!isVideo(this.$el)) {
-                return false;
-            }
-
-            return {
-                prev: visible,
-                visible: isVisible(this.$el),
-                inView: this.inView && isInView(this.$el),
-            };
-        },
-
-        write({ prev, visible, inView }) {
-            if (!visible || (this.inView && !inView)) {
-                pause(this.$el);
-            } else if ((this.autoplay === true && !prev) || inView) {
-                play(this.$el);
-            }
-        },
-
-        events: ['resize'],
-    },
+    observe: [
+        intersection({
+            filter: ({ $el }) => isVideo($el),
+            handler([{ isIntersecting }]) {
+                if (isIntersecting) {
+                    play(this.$el);
+                } else {
+                    pause(this.$el);
+                }
+            },
+            args: { intersecting: false },
+            options: ({ $el, inView }) => ({ root: inView ? null : parent($el) }),
+        }),
+    ],
 };

package/src/js/util/viewport.js

@@ -1,5 +1,5 @@
 import { offset, offsetPosition } from './dimensions';
-import { isVisible, parents, within } from './filter';
+import { isVisible, parent, parents, within } from './filter';
 import {
     clamp,
     findIndex,
@@ -204,11 +204,18 @@ export function getCoveringElement(target) {
         .find(
             (el) =>
                 !el.contains(target) &&
-                (css(el, 'position') === 'fixed' ||
+                ((css(el, 'position') === 'fixed' && !hasHigherZIndex(target, el)) ||
                     (css(el, 'position') === 'sticky' && within(target, el.parentElement))),
         );
 }
 
+function hasHigherZIndex(element1, element2) {
+    return (
+        parent(element1) === parent(element2) &&
+        toFloat(css(element1, 'zIndex')) > toFloat(css(element2, 'zIndex'))
+    );
+}
+
 function scrollingElement(element) {
     return toWindow(element).document.scrollingElement;
 }

package/src/less/components/cover.less

@@ -41,7 +41,6 @@ video[data-uk-cover] {
 /* 1 */
 :not(img,video)[uk-cover],
 :not(img,video)[data-uk-cover] {
-    pointer-events: none;
     /* 2 */
     max-width: none;
     /* 3 */

package/src/scss/components/cover.scss

@@ -41,7 +41,6 @@ video[data-uk-cover] {
 /* 1 */
 :not(img,video)[uk-cover],
 :not(img,video)[data-uk-cover] {
-    pointer-events: none;
     /* 2 */
     max-width: none;
     /* 3 */

package/tests/cover.html

@@ -63,7 +63,7 @@
                     <h3>Iframe (Vimeo)</h3>
 
                     <div class="test-height uk-cover-container uk-light">
-                        <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;autoplay=1&amp;loop=1&amp;setVolume=0" width="500" height="281" allowfullscreen uk-cover></iframe>
+                        <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen uk-cover></iframe>
                         <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                             <h1>Heading</h1>
                         </div>

package/tests/slideshow.html

@@ -112,7 +112,7 @@
                                     </div>
                                 </li>
                                 <li>
-                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;autoplay=1&amp;loop=1&amp;setVolume=0" width="500" height="281" allowfullscreen uk-cover></iframe>
+                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen uk-cover></iframe>
                                     <div class="uk-position-center uk-position-small uk-text-center">
                                         <h2 uk-slideshow-parallax="x: 100,-100">Vimeo</h2>
                                         <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>