uikit 3.11.2-dev.57792c7e7 → 3.11.2-dev.76734f785

package/src/js/mixin/parallax.js

@@ -1,6 +1,19 @@
 import Media from '../mixin/media';
-import {getMaxPathLength} from '../core/svg';
-import {css, Dimensions, each, isNumber, isString, isUndefined, noop, startsWith, toFloat, toPx, ucfirst} from 'uikit-util';
+import { getMaxPathLength } from '../core/svg';
+import {
+    css,
+    Dimensions,
+    each,
+    findIndex,
+    isNumber,
+    isString,
+    isUndefined,
+    noop,
+    toFloat,
+    toPx,
+    trigger,
+    ucfirst,
+} from 'uikit-util';
 
 const props = {
     x: transformFn,
@@ -20,13 +33,12 @@ const props = {
     opacity: cssPropFn,
     stroke: strokeFn,
     bgx: backgroundFn,
-    bgy: backgroundFn
+    bgy: backgroundFn,
 };
 
-const {keys} = Object;
+const { keys } = Object;
 
 export default {
-
     mixins: [Media],
 
     props: fillObject(keys(props), 'list'),
@@ -34,75 +46,72 @@ export default {
     data: fillObject(keys(props), undefined),
 
     computed: {
-
         props(properties, $el) {
             return keys(props).reduce((result, prop) => {
                 if (!isUndefined(properties[prop])) {
-                    result[prop] = props[prop].call(this, prop, $el, properties[prop].slice());
+                    result[prop] = props[prop](prop, $el, properties[prop].slice());
                 }
                 return result;
             }, {});
-        }
+        },
+    },
 
+    events: {
+        bgimageload() {
+            this.$emit();
+        },
     },
 
     methods: {
-
         reset() {
             each(this.getCss(0), (_, prop) => css(this.$el, prop, ''));
         },
 
         getCss(percent) {
-            return keys(this.props).reduce((css, prop) => {
+            const css = { transform: '', filter: '' };
+            for (const prop in this.props) {
                 this.props[prop](css, percent);
-                return css;
-            }, {transform: '', filter: ''});
-        }
-
-    }
-
+            }
+            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 value = start.map((value, i) => {
-            value += p * (end[i] - value);
-            return i === 3 ? toFloat(value) : parseInt(value, 10);
-        }).join(',');
+        const [start, end, p] = getStop(stops, percent);
+        const value = start
+            .map((value, i) => {
+                value += p * (end[i] - value);
+                return i === 3 ? toFloat(value) : parseInt(value, 10);
+            })
+            .join(',');
         css[prop] = `rgba(${value})`;
     };
 }
@@ -116,103 +125,90 @@ 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] || '%';
-    prop = {fopacity: 'opacity', hue: 'hue-rotate'}[prop] || prop;
-    steps = steps.map(toFloat);
+    const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
+    prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
+    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));
 
-    css(el, `background-position-${prop}`, '');
-    const bgPos = css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
+    const bgPos = getCssValue(el, `background-position-${prop}`, '');
 
     return getCssValue(el, 'backgroundSize', '') === 'cover'
-        ? backgroundCoverFn.call(this, 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);
 
-    const image = getBackgroundImage.call(this, el);
-
-    if (!image.naturalWidth) {
+    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);
 
     const dimEl = {
         width: el.offsetWidth,
-        height: el.offsetHeight
-    };
-
-    const dimImage = {
-        width: image.naturalWidth,
-        height: image.naturalHeight
+        height: el.offsetHeight,
     };
 
     const baseDim = Dimensions.cover(dimImage, dimEl);
@@ -221,7 +217,6 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
     if (span < diff) {
         dimEl[attr] = baseDim[attr] + diff - span;
     } else if (span > diff) {
-
         const posPercentage = dimEl[attr] / toPx(bgPos, attr, el, true);
 
         if (posPercentage) {
@@ -231,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`;
@@ -239,50 +234,108 @@ 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)`;
     };
 }
 
-function getBackgroundImage(el) {
+const dimensions = {};
+function getBackgroundImageDimensions(el) {
     const src = css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
 
-    const data = this._data;
-
-    if (data[src]) {
-        return data[src];
+    if (dimensions[src]) {
+        return dimensions[src];
     }
 
+    const image = new Image();
     if (src) {
-        const img = new Image();
-        img.src = src;
-        if (!img.naturalWidth) {
-            img.onload = () => this.$update();
+        image.src = src;
+
+        if (!image.naturalWidth) {
+            image.onload = () => {
+                dimensions[src] = toDimensions(image);
+                trigger(el, 'bgimageload');
+            };
+            return toDimensions(image);
         }
-
-        return data[src] = img;
     }
+
+    return (dimensions[src] = toDimensions(image));
+}
+
+function toDimensions(image) {
+    return {
+        width: image.naturalWidth,
+        height: image.naturalHeight,
+    };
 }
 
-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;
+            }
+        }
 
-    return steps
-        .slice(index, index + 2)
-        .concat(percent === 1 ? 1 : percent % (1 / count) * count);
+        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;
+}
+
+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);
-    return isNumber(start)
-        ? start + Math.abs(start - end) * p * (start < end ? 1 : -1)
-        : +end;
+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/mixin/position.js

@@ -1,24 +1,31 @@
-import {$, flipPosition, offset as getOffset, isNumeric, isRtl, positionAt, removeClasses, toggleClass} from 'uikit-util';
+import {
+    $,
+    flipPosition,
+    offset as getOffset,
+    isNumeric,
+    isRtl,
+    positionAt,
+    removeClasses,
+    toggleClass,
+} from 'uikit-util';
 
 export default {
-
     props: {
         pos: String,
         offset: null,
         flip: Boolean,
-        clsPos: String
+        clsPos: String,
     },
 
     data: {
         pos: `bottom-${isRtl ? 'right' : 'left'}`,
         flip: true,
         offset: false,
-        clsPos: ''
+        clsPos: '',
     },
 
     computed: {
-
-        pos({pos}) {
+        pos({ pos }) {
             return pos.split('-').concat('center').slice(0, 2);
         },
 
@@ -28,32 +35,34 @@ export default {
 
         align() {
             return this.pos[1];
-        }
-
+        },
     },
 
     methods: {
-
         positionAt(element, target, boundary) {
-
             removeClasses(element, `${this.clsPos}-(top|bottom|left|right)(-[a-z]+)?`);
 
-            let {offset} = this;
+            let { offset } = this;
             const axis = this.getAxis();
 
             if (!isNumeric(offset)) {
                 const node = $(offset);
                 offset = node
-                    ? getOffset(node)[axis === 'x' ? 'left' : 'top'] - getOffset(target)[axis === 'x' ? 'right' : 'bottom']
+                    ? getOffset(node)[axis === 'x' ? 'left' : 'top'] -
+                      getOffset(target)[axis === 'x' ? 'right' : 'bottom']
                     : 0;
             }
 
-            const {x, y} = positionAt(
+            const { x, y } = positionAt(
                 element,
                 target,
-                axis === 'x' ? `${flipPosition(this.dir)} ${this.align}` : `${this.align} ${flipPosition(this.dir)}`,
+                axis === 'x'
+                    ? `${flipPosition(this.dir)} ${this.align}`
+                    : `${this.align} ${flipPosition(this.dir)}`,
                 axis === 'x' ? `${this.dir} ${this.align}` : `${this.align} ${this.dir}`,
-                axis === 'x' ? `${this.dir === 'left' ? -offset : offset}` : ` ${this.dir === 'top' ? -offset : offset}`,
+                axis === 'x'
+                    ? `${this.dir === 'left' ? -offset : offset}`
+                    : ` ${this.dir === 'top' ? -offset : offset}`,
                 null,
                 this.flip,
                 boundary
@@ -63,13 +72,10 @@ export default {
             this.align = axis === 'x' ? y : x;
 
             toggleClass(element, `${this.clsPos}-${this.dir}-${this.align}`, this.offset === false);
-
         },
 
         getAxis() {
             return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
-        }
-
-    }
-
+        },
+    },
 };

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

@@ -1,17 +1,16 @@
-import {$, attr, matches} from 'uikit-util';
+import { $, attr, matches } from 'uikit-util';
 
 export default {
-
     props: {
         autoplay: Boolean,
         autoplayInterval: Number,
-        pauseOnHover: Boolean
+        pauseOnHover: Boolean,
     },
 
     data: {
         autoplay: false,
         autoplayInterval: 7000,
-        pauseOnHover: true
+        pauseOnHover: true,
     },
 
     connected() {
@@ -27,9 +26,7 @@ export default {
     },
 
     events: [
-
         {
-
             name: 'visibilitychange',
 
             el() {
@@ -46,32 +43,26 @@ export default {
                 } else {
                     this.startAutoplay();
                 }
-            }
-
-        }
-
+            },
+        },
     ],
 
     methods: {
-
         startAutoplay() {
-
             this.stopAutoplay();
 
             this.interval = setInterval(
-                () => (!this.draggable || !$(':focus', this.$el))
-                    && (!this.pauseOnHover || !matches(this.$el, ':hover'))
-                    && !this.stack.length
-                    && this.show('next'),
+                () =>
+                    (!this.draggable || !$(':focus', this.$el)) &&
+                    (!this.pauseOnHover || !matches(this.$el, ':hover')) &&
+                    !this.stack.length &&
+                    this.show('next'),
                 this.autoplayInterval
             );
-
         },
 
         stopAutoplay() {
             this.interval && clearInterval(this.interval);
-        }
-
-    }
-
+        },
+    },
 };