uikit 3.20.8 → 3.20.9-dev.2cb573699

package/src/js/core/switcher.js

@@ -104,9 +104,7 @@ export default {
         {
             name: 'click keydown',
 
-            delegate() {
-                return this.toggle;
-            },
+            delegate: ({ toggle }) => toggle,
 
             handler(e) {
                 if (
@@ -122,9 +120,7 @@ export default {
         {
             name: 'keydown',
 
-            delegate() {
-                return this.toggle;
-            },
+            delegate: ({ toggle }) => toggle,
 
             handler(e) {
                 const { current, keyCode } = e;
@@ -158,13 +154,10 @@ export default {
         {
             name: 'click',
 
-            el() {
-                return this.connects.concat(this.itemNav ? queryAll(this.itemNav, this.$el) : []);
-            },
+            el: ({ $el, connects, itemNav }) =>
+                connects.concat(itemNav ? queryAll(itemNav, $el) : []),
 
-            delegate() {
-                return `[${this.attrItem}],[data-${this.attrItem}]`;
-            },
+            delegate: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
 
             handler(e) {
                 if (e.target.closest('a,button')) {
@@ -177,13 +170,9 @@ export default {
         {
             name: 'swipeRight swipeLeft',
 
-            filter() {
-                return this.swiping;
-            },
+            filter: ({ swiping }) => swiping,
 
-            el() {
-                return this.connects;
-            },
+            el: ({ connects }) => connects,
 
             handler({ type }) {
                 this.show(endsWith(type, 'Left') ? 'next' : 'previous');

package/src/js/core/toggle.js

@@ -67,9 +67,7 @@ export default {
         {
             name: pointerDown,
 
-            filter() {
-                return includes(this.mode, 'hover');
-            },
+            filter: ({ mode }) => includes(mode, 'hover'),
 
             handler(e) {
                 this._preventClick = null;
@@ -101,9 +99,7 @@ export default {
             // where pointerleave is triggered immediately after pointerenter on scroll
             name: `mouseenter mouseleave ${pointerEnter} ${pointerLeave} focus blur`,
 
-            filter() {
-                return includes(this.mode, 'hover');
-            },
+            filter: ({ mode }) => includes(mode, 'hover'),
 
             handler(e) {
                 if (isTouch(e) || this.$el.disabled) {
@@ -141,9 +137,7 @@ export default {
         {
             name: 'keydown',
 
-            filter() {
-                return includes(this.mode, 'click') && !isTag(this.$el, 'input');
-            },
+            filter: ({ $el, mode }) => includes(mode, 'click') && !isTag($el, 'input'),
 
             handler(e) {
                 if (e.keyCode === KEY_SPACE) {
@@ -156,9 +150,7 @@ export default {
         {
             name: 'click',
 
-            filter() {
-                return ['click', 'hover'].some((mode) => includes(this.mode, mode));
-            },
+            filter: ({ mode }) => ['click', 'hover'].some((m) => includes(mode, m)),
 
             handler(e) {
                 let link;
@@ -181,13 +173,9 @@ export default {
         {
             name: 'mediachange',
 
-            filter() {
-                return includes(this.mode, 'media');
-            },
+            filter: ({ mode }) => includes(mode, 'media'),
 
-            el() {
-                return this.target;
-            },
+            el: ({ target }) => target,
 
             handler(e, mediaObj) {
                 if (mediaObj.matches ^ this.isToggled(this.target)) {

package/src/js/core/video.js

@@ -51,9 +51,9 @@ export default {
     events: [
         {
             name: `${pointerEnter} focusin`,
-            filter() {
-                return includes(this.autoplay, 'hover');
-            },
+
+            filter: ({ autoplay }) => includes(autoplay, 'hover'),
+
             handler(e) {
                 if (!isTouch(e) || !isPlaying(this.$el)) {
                     play(this.$el);
@@ -65,9 +65,9 @@ export default {
 
         {
             name: `${pointerLeave} focusout`,
-            filter() {
-                return includes(this.autoplay, 'hover');
-            },
+
+            filter: ({ autoplay }) => includes(autoplay, 'hover'),
+
             handler(e) {
                 if (!isTouch(e)) {
                     pause(this.$el);

package/src/js/mixin/internal/animate-slide.js

@@ -38,7 +38,7 @@ export default async function (action, target, duration) {
     // Wait for update to propagate
     await Promise.resolve();
 
-    // Possibly reset the forced transition property
+    // Reset the forced transition property
     css(targets, 'transitionProperty', '');
 
     // Get new state

package/src/js/mixin/internal/slideshow-transitioner.js

@@ -46,6 +46,10 @@ export default function Transitioner(prev, next, dir, { animation, easing }) {
         },
 
         translate(percent) {
+            if (percent === this.percent()) {
+                return;
+            }
+
             this.reset();
 
             const props = translate(percent, dir);

package/src/js/mixin/modal.js

@@ -77,9 +77,7 @@ export default {
         {
             name: 'click',
 
-            delegate() {
-                return `${this.selClose},a[href*="#"]`;
-            },
+            delegate: ({ selClose }) => `${selClose},a[href*="#"]`,
 
             handler(e) {
                 const { current, defaultPrevented } = e;

package/src/js/mixin/slider-autoplay.js

@@ -32,9 +32,7 @@ export default {
 
             el: () => document,
 
-            filter() {
-                return this.autoplay;
-            },
+            filter: ({ autoplay }) => autoplay,
 
             handler() {
                 if (document.hidden) {

package/src/js/mixin/slider-drag.js

@@ -48,9 +48,7 @@ export default {
 
             passive: true,
 
-            delegate() {
-                return `${this.selList} > *`;
-            },
+            delegate: ({ selList }) => `${selList} > *`,
 
             handler(e) {
                 if (
@@ -79,9 +77,7 @@ export default {
         {
             // iOS workaround for slider stopping if swiping fast
             name: pointerMove,
-            el() {
-                return this.list;
-            },
+            el: ({ list }) => list,
             handler: noop,
             ...pointerOptions,
         },

package/src/js/mixin/slider-nav.js

@@ -147,13 +147,9 @@ export default {
         {
             name: 'click keydown',
 
-            delegate() {
-                return this.selNavItem;
-            },
+            delegate: ({ selNavItem }) => selNavItem,
 
-            filter() {
-                return !this.parallax;
-            },
+            filter: ({ parallax }) => !parallax,
 
             handler(e) {
                 if (
@@ -174,13 +170,9 @@ export default {
         {
             name: 'keydown',
 
-            delegate() {
-                return this.selNavItem;
-            },
+            delegate: ({ selNavItem }) => selNavItem,
 
-            filter() {
-                return !this.parallax;
-            },
+            filter: ({ parallax }) => !parallax,
 
             handler(e) {
                 const { current, keyCode } = e;

package/src/js/mixin/slider-parallax.js

@@ -34,9 +34,9 @@ export default {
     },
 
     update: {
-        write() {
+        read() {
             if (!this.parallax) {
-                return;
+                return false;
             }
 
             const target = this.parallaxTarget;
@@ -44,7 +44,11 @@ export default {
             const end = toPx(this.parallaxEnd, 'height', target, true);
             const percent = ease(scrolledOver(target, start, end), this.parallaxEasing);
 
-            const [prevIndex, slidePercent] = this.getIndexAt(percent);
+            return { parallax: this.getIndexAt(percent) };
+        },
+
+        write({ parallax }) {
+            const [prevIndex, slidePercent] = parallax;
 
             const nextIndex = this.getValidIndex(prevIndex + Math.ceil(slidePercent));
 

package/src/js/mixin/slider.js

@@ -153,7 +153,9 @@ export default {
                 stack.shift();
                 this._transitioner = null;
 
-                requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
+                if (stack.length) {
+                    requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
+                }
             });
 
             prev && trigger(prev, 'itemhide', [this]);

package/src/js/util/viewport.js

@@ -184,7 +184,7 @@ export function offsetViewport(scrollElement) {
     ]) {
         if (isWindow(viewportElement)) {
             // iOS 12 returns <body> as scrollingElement
-            viewportElement = scrollElement.ownerDocument;
+            viewportElement = viewportElement.document;
         } else {
             rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
         }
@@ -199,9 +199,9 @@ export function offsetViewport(scrollElement) {
 
 export function getCoveringElement(target) {
     const { left, width, top } = dimensions(target);
-    for (const topPosition of [0, top]) {
-        const coverEl = target.ownerDocument.elementsFromPoint(left + width / 2, topPosition).find(
-            (el) =>
+    for (const position of top ? [0, top] : [0]) {
+        for (const el of toWindow(target).document.elementsFromPoint(left + width / 2, position)) {
+            if (
                 !el.contains(target) &&
                 // If e.g. Offcanvas is not yet closed
                 !hasClass(el, 'uk-togglable-leave') &&
@@ -213,10 +213,10 @@ export function getCoveringElement(target) {
                                 (parent) => !parent.contains(el) && !hasPosition(parent, 'static'),
                             ),
                     ) < zIndex(el)) ||
-                    (hasPosition(el, 'sticky') && parent(el).contains(target))),
-        );
-        if (coverEl) {
-            return coverEl;
+                    (hasPosition(el, 'sticky') && parent(el).contains(target)))
+            ) {
+                return el;
+            }
         }
     }
 }

package/src/less/components/card.less

@@ -238,6 +238,7 @@
  */
 
 .uk-card-default {
+    --uk-inverse: @card-default-color-mode;
     background-color: @card-default-background;
     color: @card-default-color;
     .hook-card-default();
@@ -272,6 +273,7 @@
  */
 
 .uk-card-primary {
+    --uk-inverse: @card-primary-color-mode;
     background-color: @card-primary-background;
     color: @card-primary-color;
     .hook-card-primary();
@@ -298,6 +300,7 @@
  */
 
 .uk-card-secondary {
+    --uk-inverse: @card-secondary-color-mode;
     background-color: @card-secondary-background;
     color: @card-secondary-color;
     .hook-card-secondary();

package/src/less/components/dropbar.less

@@ -44,6 +44,7 @@
     --uk-position-offset: @dropbar-margin;
     --uk-position-shift-offset: 0;
     --uk-position-viewport-offset: 0;
+    --uk-inverse: @dropbar-color-mode;
     /* 1 */
     width: auto;
     /* 2 */

package/src/less/components/dropdown.less

@@ -59,6 +59,7 @@
 .uk-dropdown {
     --uk-position-offset: @dropdown-margin;
     --uk-position-viewport-offset: @dropdown-viewport-margin;
+    --uk-inverse: @dropdown-color-mode;
     /* 1 */
     width: auto;
     /* 2 */

package/src/less/components/navbar.less

@@ -383,6 +383,7 @@
     --uk-position-offset: @navbar-dropdown-margin;
     --uk-position-shift-offset: @navbar-dropdown-shift-margin;
     --uk-position-viewport-offset: @navbar-dropdown-viewport-margin;
+    --uk-inverse: @navbar-dropdown-color-mode;
     /* 1 */
     width: @navbar-dropdown-width;
     /* 2 */

package/src/less/components/offcanvas.less

@@ -83,6 +83,7 @@
  */
 
 .uk-offcanvas-bar {
+    --uk-inverse: @offcanvas-bar-color-mode;
     /* 1 */
     position: absolute;
     top: 0;

package/src/less/components/overlay.less

@@ -56,6 +56,7 @@
  */
 
 .uk-overlay-default {
+    --uk-inverse: @overlay-default-color-mode;
     background: @overlay-default-background;
     .hook-overlay-default();
 }
@@ -69,6 +70,7 @@
  */
 
 .uk-overlay-primary {
+    --uk-inverse: @overlay-primary-color-mode;
     background: @overlay-primary-background;
     .hook-overlay-primary();
 }

package/src/less/components/section.less

@@ -148,6 +148,7 @@
  */
 
 .uk-section-default {
+    --uk-inverse: @section-default-color-mode;
     background: @section-default-background;
     .hook-section-default();
 }
@@ -160,6 +161,7 @@
  */
 
 .uk-section-muted {
+    --uk-inverse: @section-muted-color-mode;
     background: @section-muted-background;
     .hook-section-muted();
 }
@@ -167,11 +169,13 @@
 .uk-section-muted:not(.uk-preserve-color):extend(.uk-light all) when (@section-muted-color-mode = light) {}
 .uk-section-muted:not(.uk-preserve-color):extend(.uk-dark all) when (@section-muted-color-mode = dark) {}
 
+
 /*
  * Primary
  */
 
 .uk-section-primary {
+    --uk-inverse: @section-primary-color-mode;
     background: @section-primary-background;
     .hook-section-primary();
 }
@@ -184,6 +188,7 @@
  */
 
 .uk-section-secondary {
+    --uk-inverse: @section-secondary-color-mode;
     background: @section-secondary-background;
     .hook-section-secondary();
 }

package/src/less/components/tile.less

@@ -162,6 +162,7 @@
  */
 
 .uk-tile-default {
+    --uk-inverse: @tile-default-color-mode;
     background-color: @tile-default-background;
     .hook-tile-default();
 }
@@ -179,6 +180,7 @@
  */
 
 .uk-tile-muted {
+    --uk-inverse: @tile-muted-color-mode;
     background-color: @tile-muted-background;
     .hook-tile-muted();
 }
@@ -196,6 +198,7 @@
  */
 
 .uk-tile-primary {
+    --uk-inverse: @tile-primary-color-mode;
     background-color: @tile-primary-background;
     .hook-tile-primary();
 }
@@ -213,6 +216,7 @@
  */
 
 .uk-tile-secondary {
+    --uk-inverse: @tile-secondary-color-mode;
     background-color: @tile-secondary-background;
     .hook-tile-secondary();
 }

package/src/scss/components/card.scss

@@ -189,6 +189,7 @@
  */
 
 .uk-card-default {
+    --uk-inverse: #{$card-default-color-mode};
     background-color: $card-default-background;
     color: $card-default-color;
     @if(mixin-exists(hook-card-default)) {@include hook-card-default();}
@@ -223,6 +224,7 @@
  */
 
 .uk-card-primary {
+    --uk-inverse: #{$card-primary-color-mode};
     background-color: $card-primary-background;
     color: $card-primary-color;
     @if(mixin-exists(hook-card-primary)) {@include hook-card-primary();}
@@ -249,6 +251,7 @@
  */
 
 .uk-card-secondary {
+    --uk-inverse: #{$card-secondary-color-mode};
     background-color: $card-secondary-background;
     color: $card-secondary-color;
     @if(mixin-exists(hook-card-secondary)) {@include hook-card-secondary();}

package/src/scss/components/dropbar.scss

@@ -32,6 +32,7 @@
     --uk-position-offset: #{$dropbar-margin};
     --uk-position-shift-offset: 0;
     --uk-position-viewport-offset: 0;
+    --uk-inverse: #{$dropbar-color-mode};
     /* 1 */
     width: auto;
     /* 2 */

package/src/scss/components/dropdown.scss

@@ -35,6 +35,7 @@
 .uk-dropdown {
     --uk-position-offset: #{$dropdown-margin};
     --uk-position-viewport-offset: #{$dropdown-viewport-margin};
+    --uk-inverse: #{$dropdown-color-mode};
     /* 1 */
     width: auto;
     /* 2 */

package/src/scss/components/navbar.scss

@@ -334,6 +334,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
     --uk-position-offset: #{$navbar-dropdown-margin};
     --uk-position-shift-offset: #{$navbar-dropdown-shift-margin};
     --uk-position-viewport-offset: #{$navbar-dropdown-viewport-margin};
+    --uk-inverse: #{$navbar-dropdown-color-mode};
     /* 1 */
     width: $navbar-dropdown-width;
     /* 2 */

package/src/scss/components/offcanvas.scss

@@ -70,6 +70,7 @@
  */
 
 .uk-offcanvas-bar {
+    --uk-inverse: #{$offcanvas-bar-color-mode};
     /* 1 */
     position: absolute;
     top: 0;

package/src/scss/components/overlay.scss

@@ -50,6 +50,7 @@
  */
 
 .uk-overlay-default {
+    --uk-inverse: #{$overlay-default-color-mode};
     background: $overlay-default-background;
     @if(mixin-exists(hook-overlay-default)) {@include hook-overlay-default();}
 }
@@ -63,6 +64,7 @@
  */
 
 .uk-overlay-primary {
+    --uk-inverse: #{$overlay-primary-color-mode};
     background: $overlay-primary-background;
     @if(mixin-exists(hook-overlay-primary)) {@include hook-overlay-primary();}
 }

package/src/scss/components/section.scss

@@ -132,6 +132,7 @@
  */
 
 .uk-section-default {
+    --uk-inverse: #{$section-default-color-mode};
     background: $section-default-background;
     @if(mixin-exists(hook-section-default)) {@include hook-section-default();}
 }
@@ -144,6 +145,7 @@
  */
 
 .uk-section-muted {
+    --uk-inverse: #{$section-muted-color-mode};
     background: $section-muted-background;
     @if(mixin-exists(hook-section-muted)) {@include hook-section-muted();}
 }
@@ -151,11 +153,13 @@
 @if ( $section-muted-color-mode == light ) { .uk-section-muted:not(.uk-preserve-color) { @extend .uk-light !optional;} }
 @if ( $section-muted-color-mode == dark ) { .uk-section-muted:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
 
+
 /*
  * Primary
  */
 
 .uk-section-primary {
+    --uk-inverse: #{$section-primary-color-mode};
     background: $section-primary-background;
     @if(mixin-exists(hook-section-primary)) {@include hook-section-primary();}
 }
@@ -168,6 +172,7 @@
  */
 
 .uk-section-secondary {
+    --uk-inverse: #{$section-secondary-color-mode};
     background: $section-secondary-background;
     @if(mixin-exists(hook-section-secondary)) {@include hook-section-secondary();}
 }

package/src/scss/components/tile.scss

@@ -143,6 +143,7 @@
  */
 
 .uk-tile-default {
+    --uk-inverse: #{$tile-default-color-mode};
     background-color: $tile-default-background;
     @if(mixin-exists(hook-tile-default)) {@include hook-tile-default();}
 }
@@ -160,6 +161,7 @@
  */
 
 .uk-tile-muted {
+    --uk-inverse: #{$tile-muted-color-mode};
     background-color: $tile-muted-background;
     @if(mixin-exists(hook-tile-muted)) {@include hook-tile-muted();}
 }
@@ -177,6 +179,7 @@
  */
 
 .uk-tile-primary {
+    --uk-inverse: #{$tile-primary-color-mode};
     background-color: $tile-primary-background;
     @if(mixin-exists(hook-tile-primary)) {@include hook-tile-primary();}
 }
@@ -194,6 +197,7 @@
  */
 
 .uk-tile-secondary {
+    --uk-inverse: #{$tile-secondary-color-mode};
     background-color: $tile-secondary-background;
     @if(mixin-exists(hook-tile-secondary)) {@include hook-tile-secondary();}
 }