uikit 3.11.2-dev.72dbb9a19 → 3.11.2-dev.76734f785

package/src/js/core/sticky.js

@@ -10,13 +10,12 @@ import {
     dimensions,
     fastdom,
     height as getHeight,
+    offset as getOffset,
     getScrollingElement,
     hasClass,
-    isNumeric,
     isString,
     isVisible,
     noop,
-    offset,
     offsetPosition,
     parent,
     query,
@@ -29,6 +28,7 @@ import {
     toPx,
     trigger,
     within,
+    intersectRect,
 } from 'uikit-util';
 
 export default {
@@ -67,21 +67,6 @@ export default {
     },
 
     computed: {
-        position({ position }, $el) {
-            return position === 'auto'
-                ? (this.isFixed ? this.placeholder : $el).offsetHeight > getHeight(window)
-                    ? 'bottom'
-                    : 'top'
-                : position;
-        },
-
-        offset({ offset }, $el) {
-            if (this.position === 'bottom') {
-                offset += '+100vh-100%';
-            }
-            return toPx(offset, 'height', $el);
-        },
-
         selTarget({ selTarget }, $el) {
             return (selTarget && $(selTarget, $el)) || $el;
         },
@@ -134,34 +119,29 @@ export default {
                 return window;
             },
 
+            filter() {
+                return this.targetOffset !== false;
+            },
+
             handler() {
-                if (!(this.targetOffset !== false && location.hash && scrollTop(window) > 0)) {
+                if (!location.hash || scrollTop(window) === 0) {
                     return;
                 }
 
-                const target = $(location.hash);
-
-                if (target) {
-                    fastdom.read(() => {
-                        const { top } = offset(target);
-                        const elTop = offset(this.$el).top;
-                        const elHeight = this.$el.offsetHeight;
-
-                        if (
-                            this.isFixed &&
-                            elTop + elHeight >= top &&
-                            elTop <= top + target.offsetHeight
-                        ) {
-                            scrollTop(
-                                window,
-                                top -
-                                    elHeight -
-                                    (isNumeric(this.targetOffset) ? this.targetOffset : 0) -
-                                    this.offset
-                            );
-                        }
-                    });
-                }
+                fastdom.read(() => {
+                    const targetOffset = getOffset($(location.hash));
+                    const elOffset = getOffset(this.$el);
+
+                    if (this.isFixed && intersectRect(targetOffset, elOffset)) {
+                        scrollTop(
+                            window,
+                            targetOffset.top -
+                                elOffset.height -
+                                toPx(this.targetOffset, 'height') -
+                                toPx(this.offset, 'height')
+                        );
+                    }
+                });
             },
         },
     ],
@@ -177,35 +157,49 @@ export default {
 
                 const hide = this.isActive && types.has('resize');
                 if (hide) {
+                    css(this.selTarget, 'transition', '0s');
                     this.hide();
                 }
 
                 if (!this.isActive) {
-                    height = this.$el.offsetHeight;
+                    height = getOffset(this.$el).height;
                     margin = css(this.$el, 'margin');
                 }
 
                 if (hide) {
                     this.show();
+                    fastdom.write(() => css(this.selTarget, 'transition', ''));
                 }
 
-                const overflow = Math.max(0, height + this.offset - getHeight(window));
-
                 const referenceElement = this.isFixed ? this.placeholder : this.$el;
-                const topOffset = offset(referenceElement).top;
-                const offsetParentTop = offset(referenceElement.offsetParent).top;
+                const windowHeight = getHeight(window);
+
+                let position = this.position;
+                if (position === 'auto' && height > windowHeight) {
+                    position = 'bottom';
+                }
+
+                let offset = toPx(this.offset, 'height', referenceElement);
+                if (position === 'bottom') {
+                    offset += windowHeight - height;
+                }
+
+                const overflow = Math.max(0, height + offset - windowHeight);
+                const topOffset = getOffset(referenceElement).top;
+                const offsetParentTop = getOffset(referenceElement.offsetParent).top;
 
                 const top = parseProp(this.top, this.$el, topOffset);
                 const bottom = parseProp(this.bottom, this.$el, topOffset + height, true);
 
-                const start = Math.max(top, topOffset) - this.offset;
+                const start = Math.max(top, topOffset) - offset;
                 const end = bottom
-                    ? bottom - this.$el.offsetHeight + overflow - this.offset
-                    : getScrollingElement(this.$el).scrollHeight - getHeight(window);
+                    ? bottom - getOffset(this.$el).height + overflow - offset
+                    : getScrollingElement(this.$el).scrollHeight - windowHeight;
 
                 return {
                     start,
                     end,
+                    offset,
                     overflow,
                     topOffset,
                     offsetParentTop,
@@ -213,7 +207,7 @@ export default {
                     margin,
                     width: dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el)
                         .width,
-                    top: offsetPosition(this.placeholder)[0],
+                    top: offsetPosition(referenceElement)[0],
                 };
             },
 
@@ -322,7 +316,7 @@ export default {
                     }
                 } else if (this.isFixed) {
                     this.update();
-                } else if (this.animation) {
+                } else if (this.animation && scroll > topOffset) {
                     Animation.cancel(this.$el);
                     this.show();
                     Animation.in(this.$el, this.animation).catch(noop);
@@ -350,33 +344,33 @@ export default {
         },
 
         update() {
-            const {
+            let {
                 width,
                 scroll = 0,
                 overflow,
                 overflowScroll = 0,
                 start,
                 end,
+                offset,
                 topOffset,
                 height,
                 offsetParentTop,
             } = this._data;
             const active = start !== 0 || scroll > start;
-            let top = this.offset;
             let position = 'fixed';
 
             if (scroll > end) {
-                top = end + this.offset - offsetParentTop;
+                offset += end - offsetParentTop;
                 position = 'absolute';
             }
 
             if (overflow) {
-                top -= overflowScroll;
+                offset -= overflowScroll;
             }
 
             css(this.$el, {
                 position,
-                top: `${top}px`,
+                top: `${offset}px`,
                 width,
             });
 
@@ -397,7 +391,7 @@ function parseProp(value, el, propOffset, padding) {
     } else {
         const refElement = value === true ? parent(el) : query(value, el);
         return (
-            offset(refElement).bottom -
+            getOffset(refElement).bottom -
             (padding && refElement && within(el, refElement)
                 ? toFloat(css(refElement, 'paddingBottom'))
                 : 0)

package/src/js/core/svg.js

@@ -5,10 +5,12 @@ import {
     append,
     attr,
     includes,
+    isTag,
     isVisible,
     isVoidElement,
     memoize,
     noop,
+    once,
     remove,
     removeAttr,
     startsWith,
@@ -94,6 +96,12 @@ export default {
 
     methods: {
         async getSvg() {
+            if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {
+                return new Promise((resolve) =>
+                    once(this.$el, 'load', () => resolve(this.getSvg()))
+                );
+            }
+
             return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject('SVG not found.');
         },
 
@@ -193,7 +201,7 @@ export function getMaxPathLength(el) {
 }
 
 function insertSVG(el, root) {
-    if (isVoidElement(root) || root.tagName === 'CANVAS') {
+    if (isVoidElement(root) || isTag(root, 'canvas')) {
         root.hidden = true;
 
         const next = root.nextElementSibling;
@@ -205,11 +213,7 @@ function insertSVG(el, root) {
 }
 
 function equals(el, other) {
-    return isSVG(el) && isSVG(other) && innerHTML(el) === innerHTML(other);
-}
-
-function isSVG(el) {
-    return el?.tagName === 'svg';
+    return isTag(el, 'svg') && isTag(other, 'svg') && innerHTML(el) === innerHTML(other);
 }
 
 function innerHTML(el) {

package/src/js/core/toggle.js

@@ -7,6 +7,7 @@ import {
     includes,
     isBoolean,
     isFocusable,
+    isTag,
     isTouch,
     matches,
     once,
@@ -134,7 +135,7 @@ export default {
             name: 'keydown',
 
             filter() {
-                return includes(this.mode, 'click') && this.$el.tagName !== 'INPUT';
+                return includes(this.mode, 'click') && !isTag(this.$el, 'input');
             },
 
             handler(e) {

package/src/js/mixin/parallax.js

@@ -4,11 +4,11 @@ import {
     css,
     Dimensions,
     each,
+    findIndex,
     isNumber,
     isString,
     isUndefined,
     noop,
-    startsWith,
     toFloat,
     toPx,
     trigger,
@@ -68,50 +68,44 @@ 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;
         },
     },
 };
 
-function transformFn(prop, el, steps) {
-    const unit = getUnit(steps) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+function transformFn(prop, el, stops) {
+    const unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+    let transformFn;
 
     if (prop === 'x' || prop === 'y') {
         prop = `translate${ucfirst(prop)}`;
+        transformFn = (stop) => toFloat(toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
     }
 
-    steps = steps.map(toFloat);
-
-    if (steps.length === 1) {
-        steps.unshift(prop === 'scale' ? 1 : 0);
+    if (stops.length === 1) {
+        stops.unshift(prop === 'scale' ? 1 : 0);
     }
 
-    return (css, percent) => {
-        let value = getValue(steps, percent);
+    stops = parseStops(stops, transformFn);
 
-        if (startsWith(prop, 'translate')) {
-            value = toFloat(value).toFixed(unit === 'px' ? 0 : 6);
-        }
-
-        css.transform += ` ${prop}(${value}${unit})`;
+    return (css, percent) => {
+        css.transform += ` ${prop}(${getValue(stops, percent)}${unit})`;
     };
 }
 
-function colorFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(getCssValue(el, prop, ''));
+function colorFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ''));
     }
 
-    steps = steps.map((step) => parseColor(el, step));
+    stops = parseStops(stops, (stop) => parseColor(el, stop));
 
     return (css, percent) => {
-        const [start, end, p] = getStep(steps, percent);
+        const [start, end, p] = getStop(stops, percent);
         const value = start
             .map((value, i) => {
                 value += p * (end[i] - value);
@@ -131,85 +125,83 @@ function parseColor(el, color) {
         .map(toFloat);
 }
 
-function filterFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function filterFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
-    const unit = getUnit(steps) || { blur: 'px', hue: 'deg' }[prop] || '%';
+    const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
     prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
-    steps = steps.map(toFloat);
+    stops = parseStops(stops);
 
     return (css, percent) => {
-        const value = getValue(steps, percent);
+        const value = getValue(stops, percent);
         css.filter += ` ${prop}(${value + unit})`;
     };
 }
 
-function cssPropFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(getCssValue(el, prop, ''));
+function cssPropFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ''));
     }
 
-    steps = steps.map(toFloat);
+    stops = parseStops(stops);
 
     return (css, percent) => {
-        css[prop] = getValue(steps, percent);
+        css[prop] = getValue(stops, percent);
     };
 }
 
-function strokeFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function strokeFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
-    const unit = getUnit(steps);
-    steps = steps.map(toFloat);
+    const unit = getUnit(stops);
+    const length = getMaxPathLength(el);
+    stops = parseStops(stops.reverse(), (stop) => {
+        stop = toFloat(stop);
+        return unit === '%' ? (stop * length) / 100 : stop;
+    });
 
-    if (!steps.some((step) => step)) {
+    if (!stops.some(([value]) => value)) {
         return noop;
     }
 
-    const length = getMaxPathLength(el);
     css(el, 'strokeDasharray', length);
 
-    if (unit === '%') {
-        steps = steps.map((step) => (step * length) / 100);
-    }
-
-    steps = steps.reverse();
-
     return (css, percent) => {
-        css.strokeDashoffset = getValue(steps, percent);
+        css.strokeDashoffset = getValue(stops, percent);
     };
 }
 
-function backgroundFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function backgroundFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
     prop = prop.substr(-1);
     const attr = prop === 'y' ? 'height' : 'width';
-    steps = steps.map((step) => toPx(step, attr, el));
+    stops = parseStops(stops, (stop) => toPx(stop, attr, el));
 
     const bgPos = getCssValue(el, `background-position-${prop}`, '');
 
     return getCssValue(el, 'backgroundSize', '') === 'cover'
-        ? backgroundCoverFn(prop, el, steps, bgPos, attr)
-        : setBackgroundPosFn(prop, steps, bgPos);
+        ? backgroundCoverFn(prop, el, stops, bgPos, attr)
+        : setBackgroundPosFn(prop, stops, bgPos);
 }
 
-function backgroundCoverFn(prop, el, steps, bgPos, attr) {
+function backgroundCoverFn(prop, el, stops, bgPos, attr) {
     const dimImage = getBackgroundImageDimensions(el);
 
     if (!dimImage.width) {
         return noop;
     }
 
-    const min = Math.min(...steps);
-    const max = Math.max(...steps);
-    const down = steps.indexOf(min) < steps.indexOf(max);
+    const values = stops.map(([value]) => value);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const down = values.indexOf(min) < values.indexOf(max);
 
     const diff = max - min;
     let pos = (down ? -diff : 0) - (down ? min : max);
@@ -234,7 +226,7 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
 
     const dim = Dimensions.cover(dimImage, dimEl);
 
-    const fn = setBackgroundPosFn(prop, steps, `${pos}px`);
+    const fn = setBackgroundPosFn(prop, stops, `${pos}px`);
     return (css, percent) => {
         fn(css, percent);
         css.backgroundSize = `${dim.width}px ${dim.height}px`;
@@ -242,9 +234,9 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
     };
 }
 
-function setBackgroundPosFn(prop, steps, pos) {
+function setBackgroundPosFn(prop, stops, pos) {
     return function (css, percent) {
-        css[`background-position-${prop}`] = `calc(${pos} + ${getValue(steps, percent)}px)`;
+        css[`background-position-${prop}`] = `calc(${pos} + ${getValue(stops, percent)}px)`;
     };
 }
 
@@ -265,6 +257,7 @@ function getBackgroundImageDimensions(el) {
                 dimensions[src] = toDimensions(image);
                 trigger(el, 'bgimageload');
             };
+            return toDimensions(image);
         }
     }
 
@@ -278,27 +271,71 @@ function toDimensions(image) {
     };
 }
 
-function getStep(steps, percent) {
-    const count = steps.length - 1;
-    const index = Math.min(Math.floor(count * percent), count - 1);
+function parseStops(stops, fn = toFloat) {
+    const result = [];
+    const { length } = stops;
+    let nullIndex = 0;
+    for (let i = 0; i < length; i++) {
+        let [value, percent] = isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
+        value = fn(value);
+        percent = percent ? toFloat(percent) / 100 : null;
+
+        if (i === 0) {
+            if (percent === null) {
+                percent = 0;
+            } else if (percent) {
+                result.push([value, 0]);
+            }
+        } else if (i === length - 1) {
+            if (percent === null) {
+                percent = 1;
+            } else if (percent !== 1) {
+                result.push([value, percent]);
+                percent = 1;
+            }
+        }
+
+        result.push([value, percent]);
+
+        if (percent === null) {
+            nullIndex++;
+        } else if (nullIndex) {
+            const leftPercent = result[i - nullIndex - 1][1];
+            const p = (percent - leftPercent) / (nullIndex + 1);
+            for (let j = nullIndex; j > 0; j--) {
+                result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
+            }
+
+            nullIndex = 0;
+        }
+    }
+
+    return result;
+}
 
-    return steps
-        .slice(index, index + 2)
-        .concat(percent === 1 ? 1 : (percent % (1 / count)) * count);
+function getStop(stops, percent) {
+    const index = findIndex(stops.slice(1), ([, targetPercent]) => percent <= targetPercent) + 1;
+    return [
+        stops[index - 1][0],
+        stops[index][0],
+        (percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1]),
+    ];
 }
 
-function getValue(steps, percent) {
-    const [start, end, p] = getStep(steps, percent);
+function getValue(stops, percent) {
+    const [start, end, p] = getStop(stops, percent);
     return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
 }
 
-function getUnit(steps, defaultUnit) {
-    return (
-        steps.reduce(
-            (unit, step) => unit || (isString(step) && step.replace(/[\d-]/g, '').trim()),
-            ''
-        ) || defaultUnit
-    );
+const unitRe = /^-?\d+([^\s]*)/;
+function getUnit(stops, defaultUnit) {
+    for (const stop of stops) {
+        const match = stop.match?.(unitRe);
+        if (match) {
+            return match[1];
+        }
+    }
+    return defaultUnit;
 }
 
 function getCssValue(el, prop, value) {

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));