uikit 3.11.2-dev.92f357b93 → 3.11.2-dev.946d2efea

package/src/js/mixin/parallax.js

@@ -57,7 +57,7 @@ export default {
     },
 
     events: {
-        bgimageload() {
+        load() {
             this.$emit();
         },
     },
@@ -68,13 +68,11 @@ export default {
         },
 
         getCss(percent) {
-            return keys(this.props).reduce(
-                (css, prop) => {
-                    this.props[prop](css, percent);
-                    return css;
-                },
-                { transform: '', filter: '' }
-            );
+            const css = { transform: '', filter: '' };
+            for (const prop in this.props) {
+                this.props[prop](css, percent);
+            }
+            return css;
         },
     },
 };
@@ -257,8 +255,9 @@ function getBackgroundImageDimensions(el) {
         if (!image.naturalWidth) {
             image.onload = () => {
                 dimensions[src] = toDimensions(image);
-                trigger(el, 'bgimageload');
+                trigger(el, 'load');
             };
+            return toDimensions(image);
         }
     }
 
@@ -328,7 +327,7 @@ function getValue(stops, percent) {
     return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
 }
 
-const unitRe = /^[\d-]+([^\s]+)/;
+const unitRe = /^-?\d+([^\s]*)/;
 function getUnit(stops, defaultUnit) {
     for (const stop of stops) {
         const match = stop.match?.(unitRe);

package/src/js/mixin/slider.js

@@ -82,12 +82,6 @@ export default {
         },
     },
 
-    events: {
-        itemshown() {
-            this.$update(this.list);
-        },
-    },
-
     methods: {
         show(index, force = false) {
             if (this.dragging || !this.length) {

package/src/js/mixin/slideshow.js

@@ -28,10 +28,6 @@ export default {
     },
 
     events: {
-        'itemshow itemhide itemshown itemhidden'({ target }) {
-            this.$update(target);
-        },
-
         beforeitemshow({ target }) {
             addClass(target, this.clsActive);
         },

package/src/js/mixin/swipe.js

@@ -0,0 +1,72 @@
+import {
+    getEventPos,
+    isTouch,
+    once,
+    parent,
+    pointerCancel,
+    pointerDown,
+    pointerUp,
+    trigger,
+} from 'uikit-util';
+import { registerEvent } from '../api/state';
+
+export default {
+    props: {
+        swiping: Boolean,
+    },
+
+    data: {
+        swiping: true,
+    },
+
+    computed: {
+        swipeTarget(props, $el) {
+            return $el;
+        },
+    },
+
+    connected() {
+        if (!this.swiping) {
+            return;
+        }
+
+        registerEvent(this, {
+            el: this.swipeTarget,
+            name: pointerDown,
+            passive: true,
+            handler(e) {
+                if (!isTouch(e)) {
+                    return;
+                }
+
+                // Handle Swipe Gesture
+                const pos = getEventPos(e);
+                const target = 'tagName' in e.target ? e.target : parent(e.target);
+                once(document, `${pointerUp} ${pointerCancel} scroll`, (e) => {
+                    const { x, y } = getEventPos(e);
+
+                    // swipe
+                    if (
+                        (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100) ||
+                        (y && Math.abs(pos.y - y) > 100)
+                    ) {
+                        setTimeout(() => {
+                            trigger(target, 'swipe');
+                            trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);
+                        });
+                    }
+                });
+            },
+        });
+    },
+};
+
+function swipeDirection(x1, y1, x2, y2) {
+    return Math.abs(x1 - x2) >= Math.abs(y1 - y2)
+        ? x1 - x2 > 0
+            ? 'Left'
+            : 'Right'
+        : y1 - y2 > 0
+        ? 'Up'
+        : 'Down';
+}

package/src/js/mixin/togglable.js

@@ -150,7 +150,7 @@ export default {
 export function toggleHeight({ isToggled, duration, initProps, hideProps, transition, _toggle }) {
     return (el, show) => {
         const inProgress = Transition.inProgress(el);
-        const inner = el.hasChildNodes
+        const inner = el.hasChildNodes()
             ? toFloat(css(el.firstElementChild, 'marginTop')) +
               toFloat(css(el.lastElementChild, 'marginBottom'))
             : 0;

package/src/js/util/ajax.js

@@ -60,8 +60,12 @@ export function getImage(src, srcset, sizes) {
     return new Promise((resolve, reject) => {
         const img = new Image();
 
-        img.onerror = (e) => reject(e);
-        img.onload = () => resolve(img);
+        img.onerror = (e) => {
+            reject(e);
+        };
+        img.onload = () => {
+            resolve(img);
+        };
 
         sizes && (img.sizes = sizes);
         srcset && (img.srcset = srcset);

package/src/js/util/dimensions.js

@@ -37,8 +37,8 @@ export function offset(element, coordinates) {
     const currentOffset = dimensions(element);
 
     if (element) {
-        const { pageYOffset, pageXOffset } = toWindow(element);
-        const offsetBy = { height: pageYOffset, width: pageXOffset };
+        const { scrollY, scrollX } = toWindow(element);
+        const offsetBy = { height: scrollY, width: scrollX };
 
         for (const dir in dirs) {
             for (const i in dirs[dir]) {
@@ -104,8 +104,8 @@ export function offsetPosition(element) {
 
         if (css(element, 'position') === 'fixed') {
             const win = toWindow(element);
-            offset[0] += win.pageYOffset;
-            offset[1] += win.pageXOffset;
+            offset[0] += win.scrollY;
+            offset[1] += win.scrollX;
             return offset;
         }
     } while ((element = element.offsetParent));

package/src/js/util/dom.js

@@ -59,7 +59,7 @@ export function wrapAll(element, structure) {
 export function wrapInner(element, structure) {
     return toNodes(
         toNodes(element).map((element) =>
-            element.hasChildNodes
+            element.hasChildNodes()
                 ? wrapAll(toNodes(element.childNodes), structure)
                 : append(element, structure)
         )
@@ -73,14 +73,23 @@ export function unwrap(element) {
         .forEach((parent) => parent.replaceWith(...parent.childNodes));
 }
 
+const fragmentRe = /^\s*<(\w+|!)[^>]*>/;
+const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
+
 export function fragment(html) {
-    const template = document.createElement('template');
-    template.innerHTML = html.trim();
-    const nodes = toNodes(template.content.childNodes);
-    for (const node of nodes) {
-        document.adoptNode(node);
+    const matches = singleTagRe.exec(html);
+    if (matches) {
+        return document.createElement(matches[1]);
+    }
+
+    const container = document.createElement('div');
+    if (fragmentRe.test(html)) {
+        container.insertAdjacentHTML('beforeend', html.trim());
+    } else {
+        container.textContent = html;
     }
-    return unwrapSingle(nodes);
+
+    return unwrapSingle(container.childNodes);
 }
 
 function unwrapSingle(nodes) {

package/src/js/util/index.js

@@ -10,6 +10,7 @@ export * from './fastdom';
 export * from './filter';
 export * from './lang';
 export * from './mouse';
+export * from './observer';
 export * from './options';
 export * from './player';
 export * from './position';

package/src/js/util/observer.js

@@ -0,0 +1,36 @@
+import { toNodes } from './lang';
+
+// 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;
+}
+
+const hasResizeObserver = window.ResizeObserver;
+export function observeResize(targets, cb, options = { box: 'border-box' }) {
+    if (!hasResizeObserver) {
+        return;
+    }
+
+    const observer = new ResizeObserver((entries, observer) => {
+        cb(entries, observer);
+    });
+    for (const el of toNodes(targets)) {
+        observer.observe(el, options);
+    }
+
+    return observer;
+}

package/src/less/components/form-range.less

@@ -65,22 +65,18 @@
 
 /*
  * Track
- * 1. Center thumb vertically in Webkit
- * 2. Safari doesn't have a focus state. Using active instead.
+ * 1. Safari doesn't have a focus state. Using active instead.
  */
 
 /* Webkit */
 .uk-range::-webkit-slider-runnable-track {
     height: @form-range-track-height;
     background: @form-range-track-background;
-    /* 1 */
-    display: flex;
-    align-items: center;
     .hook-form-range-track();
 }
 
 .uk-range:focus::-webkit-slider-runnable-track,
-/* 2 */
+/* 1 */
 .uk-range:active::-webkit-slider-runnable-track {
     background: @form-range-track-focus-background;
     .hook-form-range-track-focus();
@@ -108,6 +104,7 @@
 .uk-range::-webkit-slider-thumb {
     /* 1 */
     -webkit-appearance: none;
+    margin-top: (floor((@form-range-thumb-height / 2)) * -1);
     /* 2 */
     height: @form-range-thumb-height;
     width: @form-range-thumb-width;
@@ -123,6 +120,7 @@
     /* 2 */
     height: @form-range-thumb-height;
     width: @form-range-thumb-width;
+    margin-top: (floor((@form-range-thumb-height / 2)) * -1);
     border-radius: @form-range-thumb-border-radius;
     background: @form-range-thumb-background;
     .hook-form-range-thumb();

package/src/less/components/height.less

@@ -31,6 +31,9 @@
  */
 
 .uk-height-viewport { min-height: 100vh; }
+.uk-height-viewport-2 { min-height: 200vh; }
+.uk-height-viewport-3 { min-height: 300vh; }
+.uk-height-viewport-4 { min-height: 400vh; }
 
 /*
  * Pixel

package/src/less/components/utility.less

@@ -10,6 +10,7 @@
 //                  `uk-inline-*`
 //                  `uk-responsive-*`
 //                  `uk-preserve-width`
+//                  `uk-object-*`
 //                  `uk-border-*`
 //                  `uk-box-shadow-*`
 //                  `uk-box-shadow-bottom`
@@ -254,9 +255,11 @@
 /* Object
  ========================================================================== */
 
-.uk-object-fit-none { object-fit: none; }
-.uk-object-fit-cover { object-fit: cover; }
-.uk-object-fit-contain { object-fit: contain; }
+.uk-object-cover { object-fit: cover; }
+.uk-object-contain { object-fit: contain; }
+.uk-object-fill { object-fit: fill; }
+.uk-object-none { object-fit: none; }
+.uk-object-scale-down { object-fit: scale-down; }
 
 /* 
  * Position

package/src/scss/components/form-range.scss

@@ -65,22 +65,18 @@ $form-range-thumb-background:                    $global-color !default;
 
 /*
  * Track
- * 1. Center thumb vertically in Webkit
- * 2. Safari doesn't have a focus state. Using active instead.
+ * 1. Safari doesn't have a focus state. Using active instead.
  */
 
 /* Webkit */
 .uk-range::-webkit-slider-runnable-track {
     height: $form-range-track-height;
     background: $form-range-track-background;
-    /* 1 */
-    display: flex;
-    align-items: center;
     @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
 }
 
 .uk-range:focus::-webkit-slider-runnable-track,
-/* 2 */
+/* 1 */
 .uk-range:active::-webkit-slider-runnable-track {
     background: $form-range-track-focus-background;
     @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
@@ -108,6 +104,7 @@ $form-range-thumb-background:                    $global-color !default;
 .uk-range::-webkit-slider-thumb {
     /* 1 */
     -webkit-appearance: none;
+    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
     /* 2 */
     height: $form-range-thumb-height;
     width: $form-range-thumb-width;
@@ -123,6 +120,7 @@ $form-range-thumb-background:                    $global-color !default;
     /* 2 */
     height: $form-range-thumb-height;
     width: $form-range-thumb-width;
+    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
     border-radius: $form-range-thumb-border-radius;
     background: $form-range-thumb-background;
     @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}

package/src/scss/components/height.scss

@@ -31,6 +31,9 @@ $height-large-height:                            450px !default;
  */
 
 .uk-height-viewport { min-height: 100vh; }
+.uk-height-viewport-2 { min-height: 200vh; }
+.uk-height-viewport-3 { min-height: 300vh; }
+.uk-height-viewport-4 { min-height: 400vh; }
 
 /*
  * Pixel

package/src/scss/components/utility.scss

@@ -10,6 +10,7 @@
 //                  `uk-inline-*`
 //                  `uk-responsive-*`
 //                  `uk-preserve-width`
+//                  `uk-object-*`
 //                  `uk-border-*`
 //                  `uk-box-shadow-*`
 //                  `uk-box-shadow-bottom`
@@ -254,9 +255,11 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
 /* Object
  ========================================================================== */
 
-.uk-object-fit-none { object-fit: none; }
-.uk-object-fit-cover { object-fit: cover; }
-.uk-object-fit-contain { object-fit: contain; }
+.uk-object-cover { object-fit: cover; }
+.uk-object-contain { object-fit: contain; }
+.uk-object-fill { object-fit: fill; }
+.uk-object-none { object-fit: none; }
+.uk-object-scale-down { object-fit: scale-down; }
 
 /* 
  * Position

package/tests/parallax.html

@@ -55,10 +55,10 @@
 
                 <h2>Stop Positions</h2>
 
-                <div id="test-stop-positions" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
+                <div id="test-stop-positions" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,50 50%, 200">
                     <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
-                        <h1 uk-parallax="x: -200,200,-200,200; scale: 2,1 10%,2 90%,1;">Headline</h1>
-                        <p uk-parallax="x: 200,-200,200,-200; scale: 1,0 20%,1 50%,0 80%,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                        <h1 uk-parallax="x: -200,200 20%,-200 80%,200; scale: 1,1 50%,2;">Headline</h1>
+                        <p uk-parallax="x: 200,-200 20%,200 80%,-200; scale: 1,1 50%,2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     </div>
                 </div>
 
@@ -77,8 +77,8 @@
                     <div class="uk-grid uk-margin-auto uk-flex-inline">
                         <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; y: 396; easing: 0;">0 / 0</div></div>
                         <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100%; end: 100%; y: 396; easing: 0;">100% / 100%</div></div>
-                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 40vh; end: 40vh; y: 396; easing: 0;">40vh / 40vh</div></div>
-                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100% + 50; end: 100% + 50; y: 396; easing: 0;">100% + 50 / 100% + 50</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 30vh; end: 30vh; y: 396; easing: 0;">30vh / 30vh</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100% + 100; end: 100% + 100; y: 396; easing: 0;">100% + 100 / 100% + 100</div></div>
                     </div>
                 </div>
 

package/tests/sticky-parallax.html

@@ -13,7 +13,7 @@
         <div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="position: auto; bottom: +* +*" uk-height-viewport>
             <div class="uk-container">
 
-                <h1 class="uk-heading-2xlarge">Sticky Section</h1>
+                <h1 class="uk-heading-2xlarge" uk-parallax="target: !.uk-section +* +*; end: 100%; y: -400; easing: 0;">Sticky Section</h1>
 
             </div>
         </div>
@@ -21,8 +21,8 @@
         <div class="uk-section uk-section-default">
             <div class="uk-container">
 
-                <div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center" style="height: 300vh">
-                    <div class="uk-flex uk-flex-center uk-flex-middle" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-container">
+                <div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center uk-height-viewport-3">
+                    <div class="uk-flex uk-flex-center uk-flex-middle uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-container">
                         <div>
 
                             <img class="uk-position-relative uk-position-z-index" src="images/size-v.jpg" width="400" height="800" alt="" style="max-width: 50vw" uk-parallax="target: #js-sticky-parallax-container; y: 0,-250; easing: -1; start: 100vh; end: 100vh;">
@@ -118,7 +118,7 @@
                 </div>
                 <div>
 
-                    <div class="uk-background-muted uk-text-center" style="height: 100vh" uk-sticky="bottom: #js-sticky-parallax-viewport">
+                    <div class="uk-background-muted uk-text-center uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-viewport">
 
                         <div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y: 10vh, 80vh; easing: 0">
 
@@ -146,12 +146,12 @@
 
         <div class="uk-section uk-section-default">
 
-            <div id="js-sticky-parallax-images" style="height: 250vh" uk-grid>
+            <div id="js-sticky-parallax-images" style="min-height: 250vh" uk-grid>
                 <div class="uk-width-expand">
 
-                    <div class="uk-background-muted" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images">
+                    <div class="uk-background-muted uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images">
                         <div uk-parallax="target: #js-sticky-parallax-images; y: 55vh, 45vh;">
-                            <img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 185vh; opacity: 1,1 99%,0; easing:0">
+                            <img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 185vh; opacity: 1,1,0; easing:0">
                             <img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 175vh; end: 100% + 100vh - 235vh; opacity: 0,1 16.666%,1 99%,0; easing:0">
                             <img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 225vh; end: 100% + 100vh - 275vh; opacity: 0,1 20%,1; easing:0">
                         </div>
@@ -206,10 +206,10 @@
 
         <div class="uk-section uk-section-default">
 
-            <div id="js-sticky-parallax-images-all" style="height: 250vh" uk-grid>
+            <div id="js-sticky-parallax-images-all" style="min-height: 250vh" uk-grid>
                 <div class="uk-width-expand">
 
-                    <div class="uk-background-muted" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images-all">
+                    <div class="uk-background-muted uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images-all">
                         <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
                             <img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing:0">
                             <img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 16.666%,1 99%,0; easing:0">
@@ -226,7 +226,7 @@
                 </div>
                 <div class="uk-width-expand">
 
-                    <div style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images-all">
+                    <div class="uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images-all">
                         <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
 
                             <div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,0">

package/tests/utility.html

@@ -243,6 +243,23 @@
                 </div>
             </div>
 
+            <h2>Object Fit and Position</h2>
+
+            <div class="uk-child-width-1-3@s" uk-grid>
+                <div>
+                    <p>Object Fit Cover</p>
+                    <img class="uk-object-cover" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
+                </div>
+                <div>
+                    <p>Object Fit Contain</p>
+                    <img class="uk-object-contain" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
+                </div>
+                <div>
+                    <p>Object Fit Cover Left</p>
+                    <img class="uk-object-cover uk-object-top-left" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
+                </div>
+            </div>
+
             <h2>Box-shadows</h2>
 
             <div class="uk-child-width-1-5@m uk-grid-large" uk-grid>