uikit 3.15.0 → 3.15.1-dev.022704dc6

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.0",
+    "version": "3.15.1-dev.022704dc6",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/navbar.js

@@ -18,7 +18,6 @@ import {
     observeResize,
     offset,
     once,
-    parent,
     parents,
     query,
     remove,
@@ -74,7 +73,7 @@ export default {
         },
 
         dropbarAnchor({ dropbarAnchor }, $el) {
-            return query(dropbarAnchor, $el);
+            return query(dropbarAnchor, $el) || $el;
         },
 
         pos({ align }) {
@@ -295,8 +294,8 @@ export default {
                     return;
                 }
 
-                if (!parent(this.dropbar)) {
-                    after(this.dropbarAnchor || this.$el, this.dropbar);
+                if (this.dropbar.previousElementSibling !== this.dropbarAnchor) {
+                    after(this.dropbarAnchor, this.dropbar);
                 }
 
                 addClass(target, `${this.clsDrop}-dropbar`);

package/src/js/core/switcher.js

@@ -52,9 +52,10 @@ export default {
                 }
 
                 const index = this.index();
-                this.connects.forEach((el) =>
-                    children(el).forEach((child, i) => toggleClass(child, this.cls, i === index))
-                );
+                this.connects.forEach((el) => {
+                    children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
+                    this.lazyload(this.$el, children(el));
+                });
             },
 
             immediate: true,
@@ -87,8 +88,6 @@ export default {
     },
 
     connected() {
-        this.lazyload(this.$el, this.connects);
-
         // check for connects
         ready(() => this.$emit());
     },

package/src/js/core/toggle.js

@@ -51,6 +51,7 @@ export default {
 
             watch() {
                 this.updateAria();
+                this.lazyload(this.$el, this.target);
             },
 
             immediate: true,
@@ -62,8 +63,6 @@ export default {
             attr(this.$el, 'tabindex', '0');
         }
 
-        this.lazyload(this.$el, this.target);
-
         // check for target
         ready(() => this.$emit());
     },

package/src/js/mixin/lazyload.js

@@ -1,13 +1,20 @@
 import { $$, isFunction, observeIntersection, removeAttr, toNodes } from 'uikit-util';
 
 export default {
+    data: {
+        preload: 5,
+    },
+
     methods: {
         lazyload(observeTargets = this.$el, targets = this.$el) {
             this.registerObserver(
                 observeIntersection(observeTargets, (entries, observer) => {
                     for (const el of toNodes(isFunction(targets) ? targets() : targets)) {
-                        $$('[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+                        $$('[loading="lazy"]', el)
+                            .slice(0, this.preload - 1)
+                            .forEach((el) => removeAttr(el, 'loading'));
                     }
+
                     for (const el of entries
                         .filter(({ isIntersecting }) => isIntersecting)
                         .map(({ target }) => target)) {

package/tests/modal.html

@@ -383,14 +383,14 @@
         <div id="modal-media-youtube" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
-                <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA" width="1920" height="1080" uk-video></iframe>
+                <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA" width="1920" height="1080" uk-responsive uk-video></iframe>
             </div>
         </div>
 
         <div id="modal-media-vimeo" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
-                <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" uk-video></iframe>
+                <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" uk-responsive uk-video></iframe>
             </div>
         </div>