uikit 3.10.2-dev.c8aa7eda2 → 3.11.1

package/dist/js/components/parallax.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.10.2-dev.c8aa7eda2 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.11.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
@@ -71,357 +71,315 @@
         }) )));
     }
 
-    var props = ['x', 'y', 'bgx', 'bgy', 'rotate', 'scale', 'color', 'backgroundColor', 'borderColor', 'opacity', 'blur', 'hue', 'grayscale', 'invert', 'saturate', 'sepia', 'fopacity', 'stroke'];
+    var props = {
+        x: transformFn,
+        y: transformFn,
+        rotate: transformFn,
+        scale: transformFn,
+        color: colorFn,
+        backgroundColor: colorFn,
+        borderColor: colorFn,
+        blur: filterFn,
+        hue: filterFn,
+        fopacity: filterFn,
+        grayscale: filterFn,
+        invert: filterFn,
+        saturate: filterFn,
+        sepia: filterFn,
+        opacity: cssPropFn,
+        stroke: strokeFn,
+        bgx: backgroundFn,
+        bgy: backgroundFn
+    };
+
+    var keys = Object.keys;
 
     var Parallax = {
 
         mixins: [Media],
 
-        props: props.reduce(function (props, prop) {
-            props[prop] = 'list';
-            return props;
-        }, {}),
+        props: fillObject(keys(props), 'list'),
 
-        data: props.reduce(function (data, prop) {
-            data[prop] = undefined;
-            return data;
-        }, {}),
+        data: fillObject(keys(props), undefined),
 
         computed: {
 
             props: function(properties, $el) {
                 var this$1$1 = this;
 
-
-                return props.reduce(function (props, prop) {
-
-                    if (uikitUtil.isUndefined(properties[prop])) {
-                        return props;
+                return keys(props).reduce(function (result, prop) {
+                    if (!uikitUtil.isUndefined(properties[prop])) {
+                        result[prop] = props[prop].call(this$1$1, prop, $el, properties[prop].slice());
                     }
+                    return result;
+                }, {});
+            }
 
-                    var isColor = prop.match(/color/i);
-                    var isCssProp = isColor || prop === 'opacity';
-
-                    var pos, bgPos, diff;
-                    var steps = properties[prop].slice();
-
-                    if (isCssProp) {
-                        uikitUtil.css($el, prop, '');
-                    }
-
-                    if (steps.length < 2) {
-                        steps.unshift((prop === 'scale'
-                            ? 1
-                            : isCssProp
-                                ? uikitUtil.css($el, prop)
-                                : 0) || 0);
-                    }
-
-                    var unit = getUnit(steps);
-
-                    if (isColor) {
-
-                        var ref = $el.style;
-                        var color = ref.color;
-                        steps = steps.map(function (step) { return parseColor($el, step); });
-                        $el.style.color = color;
-
-                    } else if (uikitUtil.startsWith(prop, 'bg')) {
+        },
 
-                        var attr = prop === 'bgy' ? 'height' : 'width';
-                        steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, $el); });
+        methods: {
 
-                        uikitUtil.css($el, ("background-position-" + (prop[2])), '');
-                        bgPos = uikitUtil.css($el, 'backgroundPosition').split(' ')[prop[2] === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
+            reset: function() {
+                var this$1$1 = this;
 
-                        if (this$1$1.covers) {
+                uikitUtil.each(this.getCss(0), function (_, prop) { return uikitUtil.css(this$1$1.$el, prop, ''); });
+            },
 
-                            var min = Math.min.apply(Math, steps);
-                            var max = Math.max.apply(Math, steps);
-                            var down = steps.indexOf(min) < steps.indexOf(max);
+            getCss: function(percent) {
+                var this$1$1 = this;
 
-                            diff = max - min;
+                return keys(this.props).reduce(function (css, prop) {
+                    this$1$1.props[prop](css, percent);
+                    return css;
+                }, {transform: '', filter: ''});
+            }
 
-                            steps = steps.map(function (step) { return step - (down ? min : max); });
-                            pos = (down ? -diff : 0) + "px";
+        }
 
-                        } else {
+    };
 
-                            pos = bgPos;
+    function transformFn(prop, el, steps) {
 
-                        }
+        var unit = getUnit(steps) || {x: 'px', y: 'px', rotate: 'deg'}[prop] || '';
 
-                    } else {
+        if (prop === 'x' || prop === 'y') {
+            prop = "translate" + (uikitUtil.ucfirst(prop));
+        }
 
-                        steps = steps.map(uikitUtil.toFloat);
+        steps = steps.map(uikitUtil.toFloat);
 
-                    }
+        if (steps.length === 1) {
+            steps.unshift(prop === 'scale' ? 1 : 0);
+        }
 
-                    if (prop === 'stroke') {
+        return function (css, percent) {
+            var value = getValue(steps, percent);
 
-                        if (!steps.some(function (step) { return step; })) {
-                            return props;
-                        }
+            if (uikitUtil.startsWith(prop, 'translate')) {
+                value = uikitUtil.toFloat(value).toFixed(unit === 'px' ? 0 : 6);
+            }
 
-                        var length = getMaxPathLength($el);
-                        uikitUtil.css($el, 'strokeDasharray', length);
+            css.transform += " " + prop + "(" + value + unit + ")";
+        };
+    }
 
-                        if (unit === '%') {
-                            steps = steps.map(function (step) { return step * length / 100; });
-                        }
+    function colorFn(prop, el, steps) {
 
-                        steps = steps.reverse();
+        if (steps.length === 1) {
+            steps.unshift(getCssValue(el, prop, ''));
+        }
 
-                        prop = 'strokeDashoffset';
-                    }
+        steps = steps.map(function (step) { return parseColor(el, step); });
 
-                    props[prop] = {steps: steps, unit: unit, pos: pos, bgPos: bgPos, diff: diff};
+        return function (css, percent) {
 
-                    return props;
+            var ref = getStep(steps, percent);
+            var start = ref[0];
+            var end = ref[1];
+            var p = ref[2];
+            var value = start.map(function (value, i) {
+                value += p * (end[i] - value);
+                return i === 3 ? uikitUtil.toFloat(value) : parseInt(value, 10);
+            }).join(',');
+            css[prop] = "rgba(" + value + ")";
+        };
+    }
 
-                }, {});
+    function parseColor(el, color) {
+        return getCssValue(el, 'color', color)
+            .split(/[(),]/g)
+            .slice(1, -1)
+            .concat(1)
+            .slice(0, 4)
+            .map(uikitUtil.toFloat);
+    }
 
-            },
+    function filterFn(prop, el, steps) {
 
-            bgProps: function() {
-                var this$1$1 = this;
+        if (steps.length === 1) {
+            steps.unshift(0);
+        }
 
-                return ['bgx', 'bgy'].filter(function (bg) { return bg in this$1$1.props; });
-            },
+        var unit = getUnit(steps) || {blur: 'px', hue: 'deg'}[prop] || '%';
+        prop = {fopacity: 'opacity', hue: 'hue-rotate'}[prop] || prop;
+        steps = steps.map(uikitUtil.toFloat);
 
-            covers: function(_, $el) {
-                return covers($el);
-            }
+        return function (css, percent) {
+            var value = getValue(steps, percent);
+            css.filter += " " + prop + "(" + (value + unit) + ")";
+        };
+    }
 
-        },
+    function cssPropFn(prop, el, steps) {
 
-        disconnected: function() {
-            delete this._image;
-        },
+        if (steps.length === 1) {
+            steps.unshift(getCssValue(el, prop, ''));
+        }
 
-        update: {
+        steps = steps.map(uikitUtil.toFloat);
 
-            read: function(data) {
-                var this$1$1 = this;
+        return function (css, percent) {
+            css[prop] = getValue(steps, percent);
+        };
+    }
 
+    function strokeFn(prop, el, steps) {
 
-                if (!this.matchMedia) {
-                    return;
-                }
+        if (steps.length === 1) {
+            steps.unshift(0);
+        }
 
-                if (!data.image && this.covers && this.bgProps.length) {
-                    var src = uikitUtil.css(this.$el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
+        var unit = getUnit(steps);
+        steps = steps.map(uikitUtil.toFloat);
 
-                    if (src) {
-                        var img = new Image();
-                        img.src = src;
-                        data.image = img;
+        if (!steps.some(function (step) { return step; })) {
+            return uikitUtil.noop;
+        }
 
-                        if (!img.naturalWidth) {
-                            img.onload = function () { return this$1$1.$update(); };
-                        }
-                    }
+        var length = getMaxPathLength(el);
+        uikitUtil.css(el, 'strokeDasharray', length);
 
-                }
+        if (unit === '%') {
+            steps = steps.map(function (step) { return step * length / 100; });
+        }
 
-                var image = data.image;
+        steps = steps.reverse();
 
-                if (!image || !image.naturalWidth) {
-                    return;
-                }
+        return function (css, percent) {
+            css.strokeDashoffset = getValue(steps, percent);
+        };
+    }
 
-                var dimEl = {
-                    width: this.$el.offsetWidth,
-                    height: this.$el.offsetHeight
-                };
-                var dimImage = {
-                    width: image.naturalWidth,
-                    height: image.naturalHeight
-                };
+    function backgroundFn(prop, el, steps) {
 
-                var dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
+        if (steps.length === 1) {
+            steps.unshift(0);
+        }
 
-                this.bgProps.forEach(function (prop) {
+        prop = prop.substr(-1);
+        var attr = prop === 'y' ? 'height' : 'width';
+        steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, el); });
 
-                    var ref = this$1$1.props[prop];
-                    var diff = ref.diff;
-                    var bgPos = ref.bgPos;
-                    var steps = ref.steps;
-                    var attr = prop === 'bgy' ? 'height' : 'width';
-                    var span = dim[attr] - dimEl[attr];
+        uikitUtil.css(el, ("background-position-" + prop), '');
+        var bgPos = uikitUtil.css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
 
-                    if (span < diff) {
-                        dimEl[attr] = dim[attr] + diff - span;
-                    } else if (span > diff) {
+        return getCssValue(el, 'backgroundSize', '') === 'cover'
+            ? backgroundCoverFn.call(this, prop, el, steps, bgPos, attr)
+            : setBackgroundPosFn(prop, steps, bgPos);
+    }
 
-                        var posPercentage = dimEl[attr] / uikitUtil.toPx(bgPos, attr, this$1$1.$el);
+    function backgroundCoverFn(prop, el, steps, bgPos, attr) {
 
-                        if (posPercentage) {
-                            this$1$1.props[prop].steps = steps.map(function (step) { return step - (span - diff) / posPercentage; });
-                        }
-                    }
+        var image = getBackgroundImage.call(this, el);
 
-                    dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
-                });
+        if (!image.naturalWidth) {
+            return uikitUtil.noop;
+        }
 
-                data.dim = dim;
-            },
+        var min = Math.min.apply(Math, steps);
+        var max = Math.max.apply(Math, steps);
+        var down = steps.indexOf(min) < steps.indexOf(max);
 
-            write: function(ref) {
-                var dim = ref.dim;
+        var diff = max - min;
+        var pos = (down ? -diff : 0) - (down ? min : max);
 
+        var dimEl = {
+            width: el.offsetWidth,
+            height: el.offsetHeight
+        };
 
-                if (!this.matchMedia) {
-                    uikitUtil.css(this.$el, {backgroundSize: '', backgroundRepeat: ''});
-                    return;
-                }
+        var dimImage = {
+            width: image.naturalWidth,
+            height: image.naturalHeight
+        };
 
-                dim && uikitUtil.css(this.$el, {
-                    backgroundSize: ((dim.width) + "px " + (dim.height) + "px"),
-                    backgroundRepeat: 'no-repeat'
-                });
+        var baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
+        var span = baseDim[attr] - dimEl[attr];
 
-            },
+        if (span < diff) {
+            dimEl[attr] = baseDim[attr] + diff - span;
+        } else if (span > diff) {
 
-            events: ['resize']
+            var posPercentage = dimEl[attr] / uikitUtil.toPx(bgPos, attr, el, true);
 
-        },
+            if (posPercentage) {
+                pos -= (span - diff) / posPercentage;
+            }
+        }
 
-        methods: {
+        var dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
 
-            reset: function() {
-                var this$1$1 = this;
+        var fn = setBackgroundPosFn(prop, steps, (pos + "px"));
+        return function (css, percent) {
+            fn(css, percent);
+            css.backgroundSize = (dim.width) + "px " + (dim.height) + "px";
+            css.backgroundRepeat = 'no-repeat';
+        };
+    }
 
-                uikitUtil.each(this.getCss(0), function (_, prop) { return uikitUtil.css(this$1$1.$el, prop, ''); });
-            },
+    function setBackgroundPosFn(prop, steps, pos) {
+        return function (css, percent) {
+            css[("background-position-" + prop)] = "calc(" + pos + " + " + (getValue(steps, percent)) + "px)";
+        };
+    }
 
-            getCss: function(percent) {
+    function getBackgroundImage(el) {
+        var this$1$1 = this;
 
-                var ref = this;
-                var props = ref.props;
-                return Object.keys(props).reduce(function (css, prop) {
-
-                    var ref = props[prop];
-                    var steps = ref.steps;
-                    var unit = ref.unit;
-                    var pos = ref.pos;
-                    var value = getValue(steps, percent);
-
-                    switch (prop) {
-
-                        // transforms
-                        case 'x':
-                        case 'y': {
-                            unit = unit || 'px';
-                            css.transform += " translate" + (uikitUtil.ucfirst(prop)) + "(" + (uikitUtil.toFloat(value).toFixed(unit === 'px' ? 0 : 2)) + unit + ")";
-                            break;
-                        }
-                        case 'rotate':
-                            unit = unit || 'deg';
-                            css.transform += " rotate(" + (value + unit) + ")";
-                            break;
-                        case 'scale':
-                            css.transform += " scale(" + value + ")";
-                            break;
-
-                        // bg image
-                        case 'bgy':
-                        case 'bgx':
-                            css[("background-position-" + (prop[2]))] = "calc(" + pos + " + " + value + "px)";
-                            break;
-
-                        // color
-                        case 'color':
-                        case 'backgroundColor':
-                        case 'borderColor': {
-
-                            var ref$1 = getStep(steps, percent);
-                            var start = ref$1[0];
-                            var end = ref$1[1];
-                            var p = ref$1[2];
-
-                            css[prop] = "rgba(" + (start.map(function (value, i) {
-                                    value += p * (end[i] - value);
-                                    return i === 3 ? uikitUtil.toFloat(value) : parseInt(value, 10);
-                                }).join(',')) + ")";
-                            break;
-                        }
-                        // CSS Filter
-                        case 'blur':
-                            unit = unit || 'px';
-                            css.filter += " blur(" + (value + unit) + ")";
-                            break;
-                        case 'hue':
-                            unit = unit || 'deg';
-                            css.filter += " hue-rotate(" + (value + unit) + ")";
-                            break;
-                        case 'fopacity':
-                            unit = unit || '%';
-                            css.filter += " opacity(" + (value + unit) + ")";
-                            break;
-                        case 'grayscale':
-                        case 'invert':
-                        case 'saturate':
-                        case 'sepia':
-                            unit = unit || '%';
-                            css.filter += " " + prop + "(" + (value + unit) + ")";
-                            break;
-                        default:
-                            css[prop] = value;
-                    }
+        var src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
 
-                    return css;
+        var data = this._data;
 
-                }, {transform: '', filter: ''});
+        if (data[src]) {
+            return data[src];
+        }
 
+        if (src) {
+            var img = new Image();
+            img.src = src;
+            if (!img.naturalWidth) {
+                img.onload = function () { return this$1$1.$update(); };
             }
 
+            return data[src] = img;
         }
-
-    };
-
-    function parseColor(el, color) {
-        return uikitUtil.css(uikitUtil.css(el, 'color', color), 'color')
-            .split(/[(),]/g)
-            .slice(1, -1)
-            .concat(1)
-            .slice(0, 4)
-            .map(uikitUtil.toFloat);
     }
 
     function getStep(steps, percent) {
         var count = steps.length - 1;
         var index = Math.min(Math.floor(count * percent), count - 1);
-        var step = steps.slice(index, index + 2);
-
-        step.push(percent === 1 ? 1 : percent % (1 / count) * count);
 
-        return step;
+        return steps
+            .slice(index, index + 2)
+            .concat(percent === 1 ? 1 : percent % (1 / count) * count);
     }
 
-    function getValue(steps, percent, digits) {
-        if ( digits === void 0 ) digits = 2;
-
+    function getValue(steps, percent) {
         var ref = getStep(steps, percent);
         var start = ref[0];
         var end = ref[1];
         var p = ref[2];
-        return (uikitUtil.isNumber(start)
+        return uikitUtil.isNumber(start)
             ? start + Math.abs(start - end) * p * (start < end ? 1 : -1)
-            : +end
-        ).toFixed(digits);
+            : +end;
+    }
+
+    function getUnit(steps, defaultUnit) {
+        return steps.reduce(function (unit, step) { return unit || uikitUtil.isString(step) && step.replace(/[\d-]/g, '').trim(); }, '') || defaultUnit;
     }
 
-    function getUnit(steps) {
-        return steps.reduce(function (unit, step) { return uikitUtil.isString(step) && step.replace(/-|\d/g, '').trim() || unit; }, '');
+    function getCssValue(el, prop, value) {
+        var prev = el.style[prop];
+        var val = uikitUtil.css(uikitUtil.css(el, prop, value), prop);
+        el.style[prop] = prev;
+        return val;
     }
 
-    function covers(el) {
-        var ref = el.style;
-        var backgroundSize = ref.backgroundSize;
-        var covers = uikitUtil.css(uikitUtil.css(el, 'backgroundSize', ''), 'backgroundSize') === 'cover';
-        el.style.backgroundSize = backgroundSize;
-        return covers;
+    function fillObject(keys, value) {
+        return keys.reduce(function (data, prop) {
+            data[prop] = value;
+            return data;
+        }, {});
     }
 
     var Component = {
@@ -430,14 +388,18 @@
 
         props: {
             target: String,
-            viewport: Number,
-            easing: Number
+            viewport: Number, // Deprecated
+            easing: Number,
+            start: String,
+            end: String
         },
 
         data: {
             target: false,
             viewport: 1,
-            easing: 1
+            easing: 1,
+            start: 0,
+            end: 0
         },
 
         computed: {
@@ -446,6 +408,22 @@
                 var target = ref.target;
 
                 return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
+            },
+
+            start: function(ref) {
+                var start = ref.start;
+
+                return parseCalc(start, this.target);
+            },
+
+            end: function(ref) {
+                var end = ref.end;
+                var viewport = ref.viewport;
+
+                return parseCalc(
+                    end || (viewport = (1 - viewport) * 100) && (viewport + "vh+" + viewport + "%"),
+                    this.target
+                );
             }
 
         },
@@ -465,11 +443,11 @@
                 }
 
                 var prev = percent;
-                percent = ease(uikitUtil.scrolledOver(this.target) / (this.viewport || 1), this.easing);
+                percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
 
                 return {
                     percent: percent,
-                    style: prev !== percent ? this.getCss(percent) : false
+                    style: prev === percent ? false : this.getCss(percent)
                 };
             },
 
@@ -491,8 +469,23 @@
 
     };
 
+    var calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
+    function parseCalc(calc, el) {
+        var match;
+        var result = 0;
+        calc = calc.toString().replace(/\s/g, '');
+        calcRe.lastIndex = 0;
+        while ((match = calcRe.exec(calc)) !== null) {
+            result += uikitUtil.toPx(match[0], 'height', el, true);
+        }
+
+        return result;
+    }
+
     function ease(percent, easing) {
-        return uikitUtil.clamp(percent * (1 - (easing - easing * percent)));
+        return easing >= 0
+            ? Math.pow(percent, easing + 1)
+            : 1 - Math.pow(1 - percent, -easing + 1);
     }
 
     // SVG elements do not inherit from HTMLElement
@@ -501,7 +494,7 @@
             ? 'offsetTop' in el
                 ? el
                 : getOffsetElement(uikitUtil.parent(el))
-            : document.body;
+            : document.documentElement;
     }
 
     if (typeof window !== 'undefined' && window.UIkit) {