uikit 3.12.3-dev.ebebb4f57 → 3.13.0

package/src/js/mixin/slider.js

@@ -1,3 +1,4 @@
+import Resize from './resize';
 import SliderAutoplay from './slider-autoplay';
 import SliderDrag from './slider-drag';
 import SliderNav from './slider-nav';
@@ -15,7 +16,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [SliderAutoplay, SliderDrag, SliderNav],
+    mixins: [SliderAutoplay, SliderDrag, SliderNav, Resize],
 
     props: {
         clsActivated: Boolean,

package/src/js/util/class.js

@@ -20,12 +20,7 @@ export function replaceClass(element, ...args) {
 
 export function hasClass(element, cls) {
     [cls] = getClasses(cls);
-    for (const node of toNodes(element)) {
-        if (cls && node.classList.contains(cls)) {
-            return true;
-        }
-    }
-    return false;
+    return !!cls && toNodes(element).some((node) => node.classList.contains(cls));
 }
 
 export function toggleClass(element, cls, force) {

package/src/js/util/mouse.js

@@ -25,7 +25,7 @@ MouseTracker.prototype = {
     },
 
     cancel() {
-        this.unbind && this.unbind();
+        this.unbind?.();
         this.interval && clearInterval(this.interval);
     },
 

package/src/js/util/observer.js

@@ -1,33 +1,70 @@
+import { on } from './event';
 import { toNodes } from './lang';
+import { fastdom } from './fastdom';
 
-// Old chromium based browsers (UC Browser) did not implement `isIntersecting`
-export const hasIntersectionObserver =
-    window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype;
 export function observeIntersection(targets, cb, options, intersecting = true) {
-    if (!hasIntersectionObserver) {
-        return;
-    }
-
-    const observer = new IntersectionObserver((entries, observer) => {
-        if (!intersecting || entries.some((entry) => entry.isIntersecting)) {
-            cb(entries, observer);
-        }
-    }, options);
-    for (const el of toNodes(targets)) {
-        observer.observe(el);
-    }
-    return observer;
+    return observe(
+        IntersectionObserver,
+        targets,
+        intersecting
+            ? (entries, observer) => {
+                  if (entries.some((entry) => entry.isIntersecting)) {
+                      cb(entries, observer);
+                  }
+              }
+            : cb,
+        options
+    );
 }
 
 const hasResizeObserver = window.ResizeObserver;
 export function observeResize(targets, cb, options = { box: 'border-box' }) {
-    if (!hasResizeObserver) {
+    if (hasResizeObserver) {
+        return observe(ResizeObserver, targets, cb, options);
+    }
+
+    // Fallback Safari < 13.1
+    initResizeListener();
+    listeners.add(cb);
+
+    return {
+        disconnect() {
+            listeners.delete(cb);
+        },
+    };
+}
+
+let listeners;
+function initResizeListener() {
+    if (listeners) {
         return;
     }
 
-    const observer = new ResizeObserver((entries, observer) => {
-        cb(entries, observer);
-    });
+    listeners = new Set();
+
+    // throttle 'resize'
+    let pendingResize;
+    const handleResize = () => {
+        if (pendingResize) {
+            return;
+        }
+        pendingResize = true;
+        fastdom.read(() => (pendingResize = false));
+        for (const listener of listeners) {
+            listener();
+        }
+    };
+
+    on(window, 'load resize', handleResize);
+    on(document, 'loadedmetadata load', handleResize, true);
+}
+
+export function observeMutation(targets, cb, options) {
+    return observe(MutationObserver, targets, cb, options);
+}
+
+function observe(Observer, targets, cb, options) {
+    const observer = new Observer(cb);
     for (const el of toNodes(targets)) {
         observer.observe(el, options);
     }

package/src/js/util/selector.js

@@ -28,40 +28,41 @@ function getContext(selector, context = document) {
 }
 
 const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
+const sanatize = memoize((selector) => selector.replace(contextSanitizeRe, '$1 *'));
 
 function _query(selector, context = document, queryFn) {
     if (!selector || !isString(selector)) {
         return selector;
     }
 
-    selector = selector.replace(contextSanitizeRe, '$1 *');
+    selector = sanatize(selector);
 
     if (isContextSelector(selector)) {
-        selector = splitSelector(selector)
-            .map((selector) => {
-                let ctx = context;
-
-                if (selector[0] === '!') {
-                    const selectors = selector.substr(1).trim().split(' ');
-                    ctx = closest(parent(context), selectors[0]);
-                    selector = selectors.slice(1).join(' ').trim();
-                }
-
-                if (selector[0] === '-') {
-                    const selectors = selector.substr(1).trim().split(' ');
-                    const prev = (ctx || context).previousElementSibling;
-                    ctx = matches(prev, selector.substr(1)) ? prev : null;
-                    selector = selectors.slice(1).join(' ');
+        const split = splitSelector(selector);
+        selector = '';
+        for (let sel of split) {
+            let ctx = context;
+
+            if (sel[0] === '!') {
+                const selectors = sel.substr(1).trim().split(' ');
+                ctx = closest(parent(context), selectors[0]);
+                sel = selectors.slice(1).join(' ').trim();
+                if (!sel.length && split.length === 1) {
+                    return ctx;
                 }
+            }
 
-                if (!ctx) {
-                    return null;
-                }
+            if (sel[0] === '-') {
+                const selectors = sel.substr(1).trim().split(' ');
+                const prev = (ctx || context).previousElementSibling;
+                ctx = matches(prev, sel.substr(1)) ? prev : null;
+                sel = selectors.slice(1).join(' ');
+            }
 
-                return `${domPath(ctx)} ${selector}`;
-            })
-            .filter(Boolean)
-            .join(',');
+            if (ctx) {
+                selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
+            }
+        }
 
         context = document;
     }

package/src/less/components/modal.less

@@ -139,8 +139,9 @@
 /*
  * 1. Create position context for spinner and close button
  * 2. Dimensions
- * 3. Style
- * 4. Slide-in transition
+ * 3. `!important` is needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
+ * 4. Style
+ * 5. Slide-in transition
  */
 
 .uk-modal-dialog {
@@ -151,8 +152,10 @@
     margin: 0 auto;
     width: @modal-dialog-width;
     /* 3 */
-    background: @modal-dialog-background;
+    max-width: 100% !important;
     /* 4 */
+    background: @modal-dialog-background;
+    /* 5 */
     opacity: 0;
     transform: translateY(-100px);
     transition: 0.3s linear;

package/src/scss/components/modal.scss

@@ -139,8 +139,9 @@ $modal-close-outside-hover-color:                $global-inverse-color !default;
 /*
  * 1. Create position context for spinner and close button
  * 2. Dimensions
- * 3. Style
- * 4. Slide-in transition
+ * 3. `!important` is needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
+ * 4. Style
+ * 5. Slide-in transition
  */
 
 .uk-modal-dialog {
@@ -151,8 +152,10 @@ $modal-close-outside-hover-color:                $global-inverse-color !default;
     margin: 0 auto;
     width: $modal-dialog-width;
     /* 3 */
-    background: $modal-dialog-background;
+    max-width: 100% !important;
     /* 4 */
+    background: $modal-dialog-background;
+    /* 5 */
     opacity: 0;
     transform: translateY(-100px);
     transition: 0.3s linear;

package/tests/grid.html

@@ -508,15 +508,15 @@
             <h3>Medium / Small</h3>
 
             <div class="uk-grid-divider uk-grid-column-medium uk-grid-row-small uk-child-width-1-4@m" uk-grid>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                    <div><div class="uk-panel">1-4-M</div></div>
-                </div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+                <div><div class="uk-panel">1-4-M</div></div>
+            </div>
 
             <h2>Divider</h2>
 

package/tests/js/index.js

@@ -1,4 +1,4 @@
-/* global UIkit, TESTS */
+/* global TESTS */
 import { addClass, css, fastdom, on, prepend, removeClass, ucfirst } from 'uikit-util';
 
 const tests = TESTS;

package/tests/slider.html

@@ -470,7 +470,7 @@
 
         <div class="uk-container">
 
-            <h3>JavaScript Options</h3>
+            <h2>JavaScript Options</h2>
 
             <div class="uk-overflow-auto">
                 <table class="uk-table uk-table-striped">

package/tests/slideshow.html

@@ -356,7 +356,7 @@
 
         <div class="uk-container">
 
-            <h3>JavaScript Options</h3>
+            <h2>JavaScript Options</h2>
 
             <div class="uk-overflow-auto">
                 <table class="uk-table uk-table-striped">

package/tests/sticky.html

@@ -143,12 +143,6 @@
                             <td>self</td>
                             <td>The target element to apply active and inactive classes to. Defaults to the element itself.</td>
                         </tr>
-                        <tr>
-                            <td><code>width-element</code></td>
-                            <td>CSS Selector</td>
-                            <td>false</td>
-                            <td>The element the Sticky should get its width from in active mode.</td>
-                        </tr>
                         <tr>
                             <td><code>show-on-up</code></td>
                             <td>Boolean</td>

package/src/js/core/gif.js

@@ -1,22 +0,0 @@
-import { isInView } from 'uikit-util';
-
-// Deprecated
-export default {
-    update: {
-        read(data) {
-            const inview = isInView(this.$el);
-
-            if (!inview || data.isInView === inview) {
-                return false;
-            }
-
-            data.isInView = inview;
-        },
-
-        write() {
-            this.$el.src = '' + this.$el.src; // force self-assign
-        },
-
-        events: ['scroll', 'resize'],
-    },
-};