uikit 3.10.1 → 3.11.1-dev.fbcf9eec9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +45 -17
- package/build/icons.js +4 -4
- package/build/scope.js +4 -6
- package/build/scss.js +4 -4
- package/dist/css/uikit-core-rtl.css +10 -1
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +10 -1
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +10 -1
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +10 -1
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +1 -1
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +1 -1
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +1 -1
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1 -1
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +1 -1
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +257 -264
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +215 -257
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +1 -1
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +215 -257
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +1 -1
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +1 -1
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +1 -1
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +1 -1
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +38 -37
- package/dist/js/uikit-core.min.js +1 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +294 -300
- package/dist/js/uikit.min.js +1 -1
- package/package.json +5 -5
- package/src/js/api/hooks.js +6 -10
- package/src/js/components/parallax.js +38 -8
- package/src/js/core/grid.js +2 -2
- package/src/js/core/scrollspy.js +1 -1
- package/src/js/core/svg.js +9 -7
- package/src/js/mixin/parallax.js +209 -242
- package/src/js/util/dimensions.js +4 -2
- package/src/js/util/lang.js +4 -0
- package/src/js/util/viewport.js +9 -13
- package/src/less/components/position.less +2 -0
- package/src/less/components/sticky.less +6 -0
- package/src/scss/components/position.scss +2 -0
- package/src/scss/components/sticky.scss +6 -0
- package/tests/index.html +1 -1
- package/tests/js/index.js +1 -1
- package/tests/notification.html +5 -5
- package/tests/parallax.html +66 -50
- package/tests/sticky-parallax.html +274 -0
- package/tests/sticky.html +2 -2
- package/tests/tab.html +1 -1
package/dist/js/uikit.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! UIkit 3.
|
|
1
|
+
/*! UIkit 3.11.1-dev.fbcf9eec9 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
|
|
2
2
|
|
|
3
3
|
(function (global, factory) {
|
|
4
4
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
@@ -343,6 +343,10 @@
|
|
|
343
343
|
|
|
344
344
|
var length = elements.length;
|
|
345
345
|
|
|
346
|
+
if (!length) {
|
|
347
|
+
return -1;
|
|
348
|
+
}
|
|
349
|
+
|
|
346
350
|
i = isNumeric(i)
|
|
347
351
|
? toNumber(i)
|
|
348
352
|
: i === 'next'
|
|
@@ -1741,9 +1745,10 @@
|
|
|
1741
1745
|
return pos;
|
|
1742
1746
|
}
|
|
1743
1747
|
|
|
1744
|
-
function toPx(value, property, element) {
|
|
1748
|
+
function toPx(value, property, element, offsetDim) {
|
|
1745
1749
|
if ( property === void 0 ) property = 'width';
|
|
1746
1750
|
if ( element === void 0 ) element = window;
|
|
1751
|
+
if ( offsetDim === void 0 ) offsetDim = false;
|
|
1747
1752
|
|
|
1748
1753
|
return isNumeric(value)
|
|
1749
1754
|
? +value
|
|
@@ -1752,7 +1757,9 @@
|
|
|
1752
1757
|
: endsWith(value, 'vw')
|
|
1753
1758
|
? percent(width(toWindow(element)), value)
|
|
1754
1759
|
: endsWith(value, '%')
|
|
1755
|
-
? percent(
|
|
1760
|
+
? percent(offsetDim
|
|
1761
|
+
? dimension(property)(element)
|
|
1762
|
+
: dimensions(element)[property], value)
|
|
1756
1763
|
: toFloat(value);
|
|
1757
1764
|
}
|
|
1758
1765
|
|
|
@@ -2312,8 +2319,9 @@
|
|
|
2312
2319
|
|
|
2313
2320
|
}
|
|
2314
2321
|
|
|
2315
|
-
function scrolledOver(element,
|
|
2316
|
-
if (
|
|
2322
|
+
function scrolledOver(element, startOffset, endOffset) {
|
|
2323
|
+
if ( startOffset === void 0 ) startOffset = 0;
|
|
2324
|
+
if ( endOffset === void 0 ) endOffset = 0;
|
|
2317
2325
|
|
|
2318
2326
|
|
|
2319
2327
|
if (!isVisible(element)) {
|
|
@@ -2324,18 +2332,14 @@
|
|
|
2324
2332
|
var scrollElement = ref[0];
|
|
2325
2333
|
var scrollHeight = scrollElement.scrollHeight;
|
|
2326
2334
|
var scrollTop = scrollElement.scrollTop;
|
|
2327
|
-
var
|
|
2328
|
-
var
|
|
2329
|
-
var
|
|
2330
|
-
|
|
2331
|
-
var top = viewportTop - viewportDist;
|
|
2332
|
-
var dist = Math.min(
|
|
2333
|
-
element.offsetHeight + heightOffset + viewportDist,
|
|
2334
|
-
scrollHeight - (viewportTop + scrollTop),
|
|
2335
|
-
scrollHeight - clientHeight
|
|
2336
|
-
);
|
|
2335
|
+
var viewportHeight = getViewportClientHeight(scrollElement);
|
|
2336
|
+
var maxScroll = scrollHeight - viewportHeight;
|
|
2337
|
+
var elementOffsetTop = offsetPosition(element)[0] - offsetPosition(scrollElement)[0];
|
|
2337
2338
|
|
|
2338
|
-
|
|
2339
|
+
var start = Math.max(0, elementOffsetTop - viewportHeight + startOffset);
|
|
2340
|
+
var end = Math.min(maxScroll, elementOffsetTop + element.offsetHeight - endOffset);
|
|
2341
|
+
|
|
2342
|
+
return clamp((scrollTop - start) / (end - start));
|
|
2339
2343
|
}
|
|
2340
2344
|
|
|
2341
2345
|
function scrollParents(element, overflowRe, scrollable) {
|
|
@@ -2888,26 +2892,21 @@
|
|
|
2888
2892
|
|
|
2889
2893
|
var ref = this;
|
|
2890
2894
|
var computed = ref.$options.computed;
|
|
2891
|
-
var
|
|
2895
|
+
var values = assign({}, this._computeds);
|
|
2896
|
+
this._computeds = {};
|
|
2892
2897
|
|
|
2893
2898
|
for (var key in computed) {
|
|
2894
|
-
|
|
2895
|
-
var hasPrev = hasOwn(_computeds, key);
|
|
2896
|
-
var prev = _computeds[key];
|
|
2897
|
-
|
|
2898
|
-
delete _computeds[key];
|
|
2899
|
-
|
|
2900
2899
|
var ref$1 = computed[key];
|
|
2901
2900
|
var watch = ref$1.watch;
|
|
2902
2901
|
var immediate = ref$1.immediate;
|
|
2903
2902
|
if (watch && (
|
|
2904
2903
|
initial && immediate
|
|
2905
|
-
||
|
|
2904
|
+
|| hasOwn(values, key) && !isEqual(values[key], this[key])
|
|
2906
2905
|
)) {
|
|
2907
|
-
watch.call(this, this[key],
|
|
2906
|
+
watch.call(this, this[key], values[key]);
|
|
2908
2907
|
}
|
|
2909
|
-
|
|
2910
2908
|
}
|
|
2909
|
+
|
|
2911
2910
|
}
|
|
2912
2911
|
}
|
|
2913
2912
|
|
|
@@ -3463,7 +3462,7 @@
|
|
|
3463
3462
|
UIkit.data = '__uikit__';
|
|
3464
3463
|
UIkit.prefix = 'uk-';
|
|
3465
3464
|
UIkit.options = {};
|
|
3466
|
-
UIkit.version = '3.
|
|
3465
|
+
UIkit.version = '3.11.1-dev.fbcf9eec9';
|
|
3467
3466
|
|
|
3468
3467
|
globalAPI(UIkit);
|
|
3469
3468
|
hooksAPI(UIkit);
|
|
@@ -5008,7 +5007,7 @@
|
|
|
5008
5007
|
{
|
|
5009
5008
|
|
|
5010
5009
|
read: function(ref) {
|
|
5011
|
-
|
|
5010
|
+
ref.height;
|
|
5012
5011
|
|
|
5013
5012
|
|
|
5014
5013
|
if (positionedAbsolute(this.$el)) {
|
|
@@ -5017,7 +5016,7 @@
|
|
|
5017
5016
|
|
|
5018
5017
|
return {
|
|
5019
5018
|
scrolled: this.parallax
|
|
5020
|
-
? scrolledOver(this.$el
|
|
5019
|
+
? scrolledOver(this.$el) * Math.abs(this.parallax)
|
|
5021
5020
|
: false
|
|
5022
5021
|
};
|
|
5023
5022
|
},
|
|
@@ -5390,15 +5389,17 @@
|
|
|
5390
5389
|
|
|
5391
5390
|
|
|
5392
5391
|
this.svg.then(function (svg) {
|
|
5393
|
-
if (
|
|
5394
|
-
|
|
5395
|
-
|
|
5396
|
-
this$1$1.$el.hidden = false;
|
|
5397
|
-
}
|
|
5392
|
+
if (this$1$1._connected) {
|
|
5393
|
+
return;
|
|
5394
|
+
}
|
|
5398
5395
|
|
|
5399
|
-
|
|
5400
|
-
this$1$1.
|
|
5396
|
+
if (isVoidElement(this$1$1.$el)) {
|
|
5397
|
+
this$1$1.$el.hidden = false;
|
|
5401
5398
|
}
|
|
5399
|
+
|
|
5400
|
+
remove$1(svg);
|
|
5401
|
+
this$1$1.svgEl = null;
|
|
5402
|
+
|
|
5402
5403
|
});
|
|
5403
5404
|
|
|
5404
5405
|
this.svg = null;
|
|
@@ -7432,7 +7433,7 @@
|
|
|
7432
7433
|
},
|
|
7433
7434
|
|
|
7434
7435
|
data: function () { return ({
|
|
7435
|
-
cls:
|
|
7436
|
+
cls: '',
|
|
7436
7437
|
target: false,
|
|
7437
7438
|
hidden: true,
|
|
7438
7439
|
offsetTop: 0,
|
|
@@ -10699,357 +10700,315 @@
|
|
|
10699
10700
|
};
|
|
10700
10701
|
}
|
|
10701
10702
|
|
|
10702
|
-
var props =
|
|
10703
|
+
var props = {
|
|
10704
|
+
x: transformFn,
|
|
10705
|
+
y: transformFn,
|
|
10706
|
+
rotate: transformFn,
|
|
10707
|
+
scale: transformFn,
|
|
10708
|
+
color: colorFn,
|
|
10709
|
+
backgroundColor: colorFn,
|
|
10710
|
+
borderColor: colorFn,
|
|
10711
|
+
blur: filterFn,
|
|
10712
|
+
hue: filterFn,
|
|
10713
|
+
fopacity: filterFn,
|
|
10714
|
+
grayscale: filterFn,
|
|
10715
|
+
invert: filterFn,
|
|
10716
|
+
saturate: filterFn,
|
|
10717
|
+
sepia: filterFn,
|
|
10718
|
+
opacity: cssPropFn,
|
|
10719
|
+
stroke: strokeFn,
|
|
10720
|
+
bgx: backgroundFn,
|
|
10721
|
+
bgy: backgroundFn
|
|
10722
|
+
};
|
|
10723
|
+
|
|
10724
|
+
var keys = Object.keys;
|
|
10703
10725
|
|
|
10704
10726
|
var Parallax = {
|
|
10705
10727
|
|
|
10706
10728
|
mixins: [Media],
|
|
10707
10729
|
|
|
10708
|
-
props:
|
|
10709
|
-
props[prop] = 'list';
|
|
10710
|
-
return props;
|
|
10711
|
-
}, {}),
|
|
10730
|
+
props: fillObject(keys(props), 'list'),
|
|
10712
10731
|
|
|
10713
|
-
data:
|
|
10714
|
-
data[prop] = undefined;
|
|
10715
|
-
return data;
|
|
10716
|
-
}, {}),
|
|
10732
|
+
data: fillObject(keys(props), undefined),
|
|
10717
10733
|
|
|
10718
10734
|
computed: {
|
|
10719
10735
|
|
|
10720
10736
|
props: function(properties, $el) {
|
|
10721
10737
|
var this$1$1 = this;
|
|
10722
10738
|
|
|
10723
|
-
|
|
10724
|
-
|
|
10725
|
-
|
|
10726
|
-
if (isUndefined(properties[prop])) {
|
|
10727
|
-
return props;
|
|
10728
|
-
}
|
|
10729
|
-
|
|
10730
|
-
var isColor = prop.match(/color/i);
|
|
10731
|
-
var isCssProp = isColor || prop === 'opacity';
|
|
10732
|
-
|
|
10733
|
-
var pos, bgPos, diff;
|
|
10734
|
-
var steps = properties[prop].slice();
|
|
10735
|
-
|
|
10736
|
-
if (isCssProp) {
|
|
10737
|
-
css($el, prop, '');
|
|
10738
|
-
}
|
|
10739
|
-
|
|
10740
|
-
if (steps.length < 2) {
|
|
10741
|
-
steps.unshift((prop === 'scale'
|
|
10742
|
-
? 1
|
|
10743
|
-
: isCssProp
|
|
10744
|
-
? css($el, prop)
|
|
10745
|
-
: 0) || 0);
|
|
10739
|
+
return keys(props).reduce(function (result, prop) {
|
|
10740
|
+
if (!isUndefined(properties[prop])) {
|
|
10741
|
+
result[prop] = props[prop].call(this$1$1, prop, $el, properties[prop].slice());
|
|
10746
10742
|
}
|
|
10743
|
+
return result;
|
|
10744
|
+
}, {});
|
|
10745
|
+
}
|
|
10747
10746
|
|
|
10748
|
-
|
|
10749
|
-
|
|
10750
|
-
if (isColor) {
|
|
10751
|
-
|
|
10752
|
-
var ref = $el.style;
|
|
10753
|
-
var color = ref.color;
|
|
10754
|
-
steps = steps.map(function (step) { return parseColor($el, step); });
|
|
10755
|
-
$el.style.color = color;
|
|
10756
|
-
|
|
10757
|
-
} else if (startsWith(prop, 'bg')) {
|
|
10758
|
-
|
|
10759
|
-
var attr = prop === 'bgy' ? 'height' : 'width';
|
|
10760
|
-
steps = steps.map(function (step) { return toPx(step, attr, this$1$1.$el); });
|
|
10761
|
-
|
|
10762
|
-
css($el, ("background-position-" + (prop[2])), '');
|
|
10763
|
-
bgPos = css($el, 'backgroundPosition').split(' ')[prop[2] === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
|
|
10764
|
-
|
|
10765
|
-
if (this$1$1.covers) {
|
|
10766
|
-
|
|
10767
|
-
var min = Math.min.apply(Math, steps);
|
|
10768
|
-
var max = Math.max.apply(Math, steps);
|
|
10769
|
-
var down = steps.indexOf(min) < steps.indexOf(max);
|
|
10747
|
+
},
|
|
10770
10748
|
|
|
10771
|
-
|
|
10749
|
+
methods: {
|
|
10772
10750
|
|
|
10773
|
-
|
|
10774
|
-
|
|
10751
|
+
reset: function() {
|
|
10752
|
+
var this$1$1 = this;
|
|
10775
10753
|
|
|
10776
|
-
|
|
10754
|
+
each(this.getCss(0), function (_, prop) { return css(this$1$1.$el, prop, ''); });
|
|
10755
|
+
},
|
|
10777
10756
|
|
|
10778
|
-
|
|
10757
|
+
getCss: function(percent) {
|
|
10758
|
+
var this$1$1 = this;
|
|
10779
10759
|
|
|
10780
|
-
|
|
10760
|
+
return keys(this.props).reduce(function (css, prop) {
|
|
10761
|
+
this$1$1.props[prop](css, percent);
|
|
10762
|
+
return css;
|
|
10763
|
+
}, {transform: '', filter: ''});
|
|
10764
|
+
}
|
|
10781
10765
|
|
|
10782
|
-
|
|
10766
|
+
}
|
|
10783
10767
|
|
|
10784
|
-
|
|
10768
|
+
};
|
|
10785
10769
|
|
|
10786
|
-
|
|
10770
|
+
function transformFn(prop, el, steps) {
|
|
10787
10771
|
|
|
10788
|
-
|
|
10772
|
+
var unit = getUnit(steps) || {x: 'px', y: 'px', rotate: 'deg'}[prop] || '';
|
|
10789
10773
|
|
|
10790
|
-
|
|
10791
|
-
|
|
10792
|
-
|
|
10774
|
+
if (prop === 'x' || prop === 'y') {
|
|
10775
|
+
prop = "translate" + (ucfirst(prop));
|
|
10776
|
+
}
|
|
10793
10777
|
|
|
10794
|
-
|
|
10795
|
-
css($el, 'strokeDasharray', length);
|
|
10778
|
+
steps = steps.map(toFloat);
|
|
10796
10779
|
|
|
10797
|
-
|
|
10798
|
-
|
|
10799
|
-
|
|
10780
|
+
if (steps.length === 1) {
|
|
10781
|
+
steps.unshift(prop === 'scale' ? 1 : 0);
|
|
10782
|
+
}
|
|
10800
10783
|
|
|
10801
|
-
|
|
10784
|
+
return function (css, percent) {
|
|
10785
|
+
var value = getValue(steps, percent);
|
|
10802
10786
|
|
|
10803
|
-
|
|
10804
|
-
|
|
10787
|
+
if (startsWith(prop, 'translate')) {
|
|
10788
|
+
value = toFloat(value).toFixed(unit === 'px' ? 0 : 6);
|
|
10789
|
+
}
|
|
10805
10790
|
|
|
10806
|
-
|
|
10791
|
+
css.transform += " " + prop + "(" + value + unit + ")";
|
|
10792
|
+
};
|
|
10793
|
+
}
|
|
10807
10794
|
|
|
10808
|
-
|
|
10795
|
+
function colorFn(prop, el, steps) {
|
|
10809
10796
|
|
|
10810
|
-
|
|
10797
|
+
if (steps.length === 1) {
|
|
10798
|
+
steps.unshift(getCssValue(el, prop, ''));
|
|
10799
|
+
}
|
|
10811
10800
|
|
|
10812
|
-
|
|
10801
|
+
steps = steps.map(function (step) { return parseColor(el, step); });
|
|
10813
10802
|
|
|
10814
|
-
|
|
10815
|
-
var this$1$1 = this;
|
|
10803
|
+
return function (css, percent) {
|
|
10816
10804
|
|
|
10817
|
-
|
|
10818
|
-
|
|
10805
|
+
var ref = getStep(steps, percent);
|
|
10806
|
+
var start = ref[0];
|
|
10807
|
+
var end = ref[1];
|
|
10808
|
+
var p = ref[2];
|
|
10809
|
+
var value = start.map(function (value, i) {
|
|
10810
|
+
value += p * (end[i] - value);
|
|
10811
|
+
return i === 3 ? toFloat(value) : parseInt(value, 10);
|
|
10812
|
+
}).join(',');
|
|
10813
|
+
css[prop] = "rgba(" + value + ")";
|
|
10814
|
+
};
|
|
10815
|
+
}
|
|
10819
10816
|
|
|
10820
|
-
|
|
10821
|
-
|
|
10822
|
-
|
|
10817
|
+
function parseColor(el, color) {
|
|
10818
|
+
return getCssValue(el, 'color', color)
|
|
10819
|
+
.split(/[(),]/g)
|
|
10820
|
+
.slice(1, -1)
|
|
10821
|
+
.concat(1)
|
|
10822
|
+
.slice(0, 4)
|
|
10823
|
+
.map(toFloat);
|
|
10824
|
+
}
|
|
10823
10825
|
|
|
10824
|
-
|
|
10826
|
+
function filterFn(prop, el, steps) {
|
|
10825
10827
|
|
|
10826
|
-
|
|
10827
|
-
|
|
10828
|
-
}
|
|
10828
|
+
if (steps.length === 1) {
|
|
10829
|
+
steps.unshift(0);
|
|
10830
|
+
}
|
|
10829
10831
|
|
|
10830
|
-
|
|
10832
|
+
var unit = getUnit(steps) || {blur: 'px', hue: 'deg'}[prop] || '%';
|
|
10833
|
+
prop = {fopacity: 'opacity', hue: 'hue-rotate'}[prop] || prop;
|
|
10834
|
+
steps = steps.map(toFloat);
|
|
10831
10835
|
|
|
10832
|
-
|
|
10833
|
-
|
|
10836
|
+
return function (css, percent) {
|
|
10837
|
+
var value = getValue(steps, percent);
|
|
10838
|
+
css.filter += " " + prop + "(" + (value + unit) + ")";
|
|
10839
|
+
};
|
|
10840
|
+
}
|
|
10834
10841
|
|
|
10842
|
+
function cssPropFn(prop, el, steps) {
|
|
10835
10843
|
|
|
10836
|
-
|
|
10837
|
-
|
|
10838
|
-
|
|
10844
|
+
if (steps.length === 1) {
|
|
10845
|
+
steps.unshift(getCssValue(el, prop, ''));
|
|
10846
|
+
}
|
|
10839
10847
|
|
|
10840
|
-
|
|
10841
|
-
var src = css(this.$el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
|
|
10848
|
+
steps = steps.map(toFloat);
|
|
10842
10849
|
|
|
10843
|
-
|
|
10844
|
-
|
|
10845
|
-
|
|
10846
|
-
|
|
10850
|
+
return function (css, percent) {
|
|
10851
|
+
css[prop] = getValue(steps, percent);
|
|
10852
|
+
};
|
|
10853
|
+
}
|
|
10847
10854
|
|
|
10848
|
-
|
|
10849
|
-
img.onload = function () { return this$1$1.$update(); };
|
|
10850
|
-
}
|
|
10851
|
-
}
|
|
10855
|
+
function strokeFn(prop, el, steps) {
|
|
10852
10856
|
|
|
10853
|
-
|
|
10857
|
+
if (steps.length === 1) {
|
|
10858
|
+
steps.unshift(0);
|
|
10859
|
+
}
|
|
10854
10860
|
|
|
10855
|
-
|
|
10861
|
+
var unit = getUnit(steps);
|
|
10862
|
+
steps = steps.map(toFloat);
|
|
10856
10863
|
|
|
10857
|
-
|
|
10858
|
-
|
|
10859
|
-
|
|
10864
|
+
if (!steps.some(function (step) { return step; })) {
|
|
10865
|
+
return noop;
|
|
10866
|
+
}
|
|
10860
10867
|
|
|
10861
|
-
|
|
10862
|
-
|
|
10863
|
-
height: this.$el.offsetHeight
|
|
10864
|
-
};
|
|
10865
|
-
var dimImage = {
|
|
10866
|
-
width: image.naturalWidth,
|
|
10867
|
-
height: image.naturalHeight
|
|
10868
|
-
};
|
|
10868
|
+
var length = getMaxPathLength(el);
|
|
10869
|
+
css(el, 'strokeDasharray', length);
|
|
10869
10870
|
|
|
10870
|
-
|
|
10871
|
+
if (unit === '%') {
|
|
10872
|
+
steps = steps.map(function (step) { return step * length / 100; });
|
|
10873
|
+
}
|
|
10871
10874
|
|
|
10872
|
-
|
|
10875
|
+
steps = steps.reverse();
|
|
10873
10876
|
|
|
10874
|
-
|
|
10875
|
-
|
|
10876
|
-
|
|
10877
|
-
|
|
10878
|
-
var attr = prop === 'bgy' ? 'height' : 'width';
|
|
10879
|
-
var span = dim[attr] - dimEl[attr];
|
|
10877
|
+
return function (css, percent) {
|
|
10878
|
+
css.strokeDashoffset = getValue(steps, percent);
|
|
10879
|
+
};
|
|
10880
|
+
}
|
|
10880
10881
|
|
|
10881
|
-
|
|
10882
|
-
dimEl[attr] = dim[attr] + diff - span;
|
|
10883
|
-
} else if (span > diff) {
|
|
10882
|
+
function backgroundFn(prop, el, steps) {
|
|
10884
10883
|
|
|
10885
|
-
|
|
10884
|
+
if (steps.length === 1) {
|
|
10885
|
+
steps.unshift(0);
|
|
10886
|
+
}
|
|
10886
10887
|
|
|
10887
|
-
|
|
10888
|
-
|
|
10889
|
-
|
|
10890
|
-
}
|
|
10888
|
+
prop = prop.substr(-1);
|
|
10889
|
+
var attr = prop === 'y' ? 'height' : 'width';
|
|
10890
|
+
steps = steps.map(function (step) { return toPx(step, attr, el); });
|
|
10891
10891
|
|
|
10892
|
-
|
|
10893
|
-
|
|
10892
|
+
css(el, ("background-position-" + prop), '');
|
|
10893
|
+
var bgPos = css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
|
|
10894
10894
|
|
|
10895
|
-
|
|
10896
|
-
|
|
10895
|
+
return getCssValue(el, 'backgroundSize', '') === 'cover'
|
|
10896
|
+
? backgroundCoverFn.call(this, prop, el, steps, bgPos, attr)
|
|
10897
|
+
: setBackgroundPosFn(prop, steps, bgPos);
|
|
10898
|
+
}
|
|
10897
10899
|
|
|
10898
|
-
|
|
10899
|
-
var dim = ref.dim;
|
|
10900
|
+
function backgroundCoverFn(prop, el, steps, bgPos, attr) {
|
|
10900
10901
|
|
|
10902
|
+
var image = getBackgroundImage.call(this, el);
|
|
10901
10903
|
|
|
10902
|
-
|
|
10903
|
-
|
|
10904
|
-
|
|
10905
|
-
}
|
|
10904
|
+
if (!image.naturalWidth) {
|
|
10905
|
+
return noop;
|
|
10906
|
+
}
|
|
10906
10907
|
|
|
10907
|
-
|
|
10908
|
-
|
|
10909
|
-
|
|
10910
|
-
});
|
|
10908
|
+
var min = Math.min.apply(Math, steps);
|
|
10909
|
+
var max = Math.max.apply(Math, steps);
|
|
10910
|
+
var down = steps.indexOf(min) < steps.indexOf(max);
|
|
10911
10911
|
|
|
10912
|
-
|
|
10912
|
+
var diff = max - min;
|
|
10913
|
+
var pos = (down ? -diff : 0) - (down ? min : max);
|
|
10913
10914
|
|
|
10914
|
-
|
|
10915
|
+
var dimEl = {
|
|
10916
|
+
width: el.offsetWidth,
|
|
10917
|
+
height: el.offsetHeight
|
|
10918
|
+
};
|
|
10915
10919
|
|
|
10916
|
-
|
|
10920
|
+
var dimImage = {
|
|
10921
|
+
width: image.naturalWidth,
|
|
10922
|
+
height: image.naturalHeight
|
|
10923
|
+
};
|
|
10917
10924
|
|
|
10918
|
-
|
|
10925
|
+
var baseDim = Dimensions.cover(dimImage, dimEl);
|
|
10926
|
+
var span = baseDim[attr] - dimEl[attr];
|
|
10919
10927
|
|
|
10920
|
-
|
|
10921
|
-
|
|
10928
|
+
if (span < diff) {
|
|
10929
|
+
dimEl[attr] = baseDim[attr] + diff - span;
|
|
10930
|
+
} else if (span > diff) {
|
|
10922
10931
|
|
|
10923
|
-
|
|
10924
|
-
},
|
|
10932
|
+
var posPercentage = dimEl[attr] / toPx(bgPos, attr, el, true);
|
|
10925
10933
|
|
|
10926
|
-
|
|
10934
|
+
if (posPercentage) {
|
|
10935
|
+
pos -= (span - diff) / posPercentage;
|
|
10936
|
+
}
|
|
10937
|
+
}
|
|
10927
10938
|
|
|
10928
|
-
|
|
10929
|
-
var props = ref.props;
|
|
10930
|
-
return Object.keys(props).reduce(function (css, prop) {
|
|
10931
|
-
|
|
10932
|
-
var ref = props[prop];
|
|
10933
|
-
var steps = ref.steps;
|
|
10934
|
-
var unit = ref.unit;
|
|
10935
|
-
var pos = ref.pos;
|
|
10936
|
-
var value = getValue(steps, percent);
|
|
10937
|
-
|
|
10938
|
-
switch (prop) {
|
|
10939
|
-
|
|
10940
|
-
// transforms
|
|
10941
|
-
case 'x':
|
|
10942
|
-
case 'y': {
|
|
10943
|
-
unit = unit || 'px';
|
|
10944
|
-
css.transform += " translate" + (ucfirst(prop)) + "(" + (toFloat(value).toFixed(unit === 'px' ? 0 : 2)) + unit + ")";
|
|
10945
|
-
break;
|
|
10946
|
-
}
|
|
10947
|
-
case 'rotate':
|
|
10948
|
-
unit = unit || 'deg';
|
|
10949
|
-
css.transform += " rotate(" + (value + unit) + ")";
|
|
10950
|
-
break;
|
|
10951
|
-
case 'scale':
|
|
10952
|
-
css.transform += " scale(" + value + ")";
|
|
10953
|
-
break;
|
|
10939
|
+
var dim = Dimensions.cover(dimImage, dimEl);
|
|
10954
10940
|
|
|
10955
|
-
|
|
10956
|
-
|
|
10957
|
-
|
|
10958
|
-
|
|
10959
|
-
|
|
10941
|
+
var fn = setBackgroundPosFn(prop, steps, (pos + "px"));
|
|
10942
|
+
return function (css, percent) {
|
|
10943
|
+
fn(css, percent);
|
|
10944
|
+
css.backgroundSize = (dim.width) + "px " + (dim.height) + "px";
|
|
10945
|
+
css.backgroundRepeat = 'no-repeat';
|
|
10946
|
+
};
|
|
10947
|
+
}
|
|
10960
10948
|
|
|
10961
|
-
|
|
10962
|
-
|
|
10963
|
-
|
|
10964
|
-
|
|
10949
|
+
function setBackgroundPosFn(prop, steps, pos) {
|
|
10950
|
+
return function (css, percent) {
|
|
10951
|
+
css[("background-position-" + prop)] = "calc(" + pos + " + " + (getValue(steps, percent)) + "px)";
|
|
10952
|
+
};
|
|
10953
|
+
}
|
|
10965
10954
|
|
|
10966
|
-
|
|
10967
|
-
|
|
10968
|
-
var end = ref$1[1];
|
|
10969
|
-
var p = ref$1[2];
|
|
10955
|
+
function getBackgroundImage(el) {
|
|
10956
|
+
var this$1$1 = this;
|
|
10970
10957
|
|
|
10971
|
-
|
|
10972
|
-
value += p * (end[i] - value);
|
|
10973
|
-
return i === 3 ? toFloat(value) : parseInt(value, 10);
|
|
10974
|
-
}).join(',')) + ")";
|
|
10975
|
-
break;
|
|
10976
|
-
}
|
|
10977
|
-
// CSS Filter
|
|
10978
|
-
case 'blur':
|
|
10979
|
-
unit = unit || 'px';
|
|
10980
|
-
css.filter += " blur(" + (value + unit) + ")";
|
|
10981
|
-
break;
|
|
10982
|
-
case 'hue':
|
|
10983
|
-
unit = unit || 'deg';
|
|
10984
|
-
css.filter += " hue-rotate(" + (value + unit) + ")";
|
|
10985
|
-
break;
|
|
10986
|
-
case 'fopacity':
|
|
10987
|
-
unit = unit || '%';
|
|
10988
|
-
css.filter += " opacity(" + (value + unit) + ")";
|
|
10989
|
-
break;
|
|
10990
|
-
case 'grayscale':
|
|
10991
|
-
case 'invert':
|
|
10992
|
-
case 'saturate':
|
|
10993
|
-
case 'sepia':
|
|
10994
|
-
unit = unit || '%';
|
|
10995
|
-
css.filter += " " + prop + "(" + (value + unit) + ")";
|
|
10996
|
-
break;
|
|
10997
|
-
default:
|
|
10998
|
-
css[prop] = value;
|
|
10999
|
-
}
|
|
10958
|
+
var src = css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
|
|
11000
10959
|
|
|
11001
|
-
|
|
10960
|
+
var data = this._data;
|
|
11002
10961
|
|
|
11003
|
-
|
|
10962
|
+
if (data[src]) {
|
|
10963
|
+
return data[src];
|
|
10964
|
+
}
|
|
11004
10965
|
|
|
10966
|
+
if (src) {
|
|
10967
|
+
var img = new Image();
|
|
10968
|
+
img.src = src;
|
|
10969
|
+
if (!img.naturalWidth) {
|
|
10970
|
+
img.onload = function () { return this$1$1.$update(); };
|
|
11005
10971
|
}
|
|
11006
10972
|
|
|
10973
|
+
return data[src] = img;
|
|
11007
10974
|
}
|
|
11008
|
-
|
|
11009
|
-
};
|
|
11010
|
-
|
|
11011
|
-
function parseColor(el, color) {
|
|
11012
|
-
return css(css(el, 'color', color), 'color')
|
|
11013
|
-
.split(/[(),]/g)
|
|
11014
|
-
.slice(1, -1)
|
|
11015
|
-
.concat(1)
|
|
11016
|
-
.slice(0, 4)
|
|
11017
|
-
.map(toFloat);
|
|
11018
10975
|
}
|
|
11019
10976
|
|
|
11020
10977
|
function getStep(steps, percent) {
|
|
11021
10978
|
var count = steps.length - 1;
|
|
11022
10979
|
var index = Math.min(Math.floor(count * percent), count - 1);
|
|
11023
|
-
var step = steps.slice(index, index + 2);
|
|
11024
|
-
|
|
11025
|
-
step.push(percent === 1 ? 1 : percent % (1 / count) * count);
|
|
11026
10980
|
|
|
11027
|
-
return
|
|
10981
|
+
return steps
|
|
10982
|
+
.slice(index, index + 2)
|
|
10983
|
+
.concat(percent === 1 ? 1 : percent % (1 / count) * count);
|
|
11028
10984
|
}
|
|
11029
10985
|
|
|
11030
|
-
function getValue(steps, percent
|
|
11031
|
-
if ( digits === void 0 ) digits = 2;
|
|
11032
|
-
|
|
10986
|
+
function getValue(steps, percent) {
|
|
11033
10987
|
var ref = getStep(steps, percent);
|
|
11034
10988
|
var start = ref[0];
|
|
11035
10989
|
var end = ref[1];
|
|
11036
10990
|
var p = ref[2];
|
|
11037
|
-
return
|
|
10991
|
+
return isNumber(start)
|
|
11038
10992
|
? start + Math.abs(start - end) * p * (start < end ? 1 : -1)
|
|
11039
|
-
: +end
|
|
11040
|
-
).toFixed(digits);
|
|
10993
|
+
: +end;
|
|
11041
10994
|
}
|
|
11042
10995
|
|
|
11043
|
-
function getUnit(steps) {
|
|
11044
|
-
return steps.reduce(function (unit, step) { return isString(step) && step.replace(
|
|
10996
|
+
function getUnit(steps, defaultUnit) {
|
|
10997
|
+
return steps.reduce(function (unit, step) { return unit || isString(step) && step.replace(/[\d-]/g, '').trim(); }, '') || defaultUnit;
|
|
11045
10998
|
}
|
|
11046
10999
|
|
|
11047
|
-
function
|
|
11048
|
-
var
|
|
11049
|
-
var
|
|
11050
|
-
|
|
11051
|
-
|
|
11052
|
-
|
|
11000
|
+
function getCssValue(el, prop, value) {
|
|
11001
|
+
var prev = el.style[prop];
|
|
11002
|
+
var val = css(css(el, prop, value), prop);
|
|
11003
|
+
el.style[prop] = prev;
|
|
11004
|
+
return val;
|
|
11005
|
+
}
|
|
11006
|
+
|
|
11007
|
+
function fillObject(keys, value) {
|
|
11008
|
+
return keys.reduce(function (data, prop) {
|
|
11009
|
+
data[prop] = value;
|
|
11010
|
+
return data;
|
|
11011
|
+
}, {});
|
|
11053
11012
|
}
|
|
11054
11013
|
|
|
11055
11014
|
var parallax = {
|
|
@@ -11058,14 +11017,18 @@
|
|
|
11058
11017
|
|
|
11059
11018
|
props: {
|
|
11060
11019
|
target: String,
|
|
11061
|
-
viewport: Number,
|
|
11062
|
-
easing: Number
|
|
11020
|
+
viewport: Number, // Deprecated
|
|
11021
|
+
easing: Number,
|
|
11022
|
+
start: String,
|
|
11023
|
+
end: String
|
|
11063
11024
|
},
|
|
11064
11025
|
|
|
11065
11026
|
data: {
|
|
11066
11027
|
target: false,
|
|
11067
11028
|
viewport: 1,
|
|
11068
|
-
easing: 1
|
|
11029
|
+
easing: 1,
|
|
11030
|
+
start: 0,
|
|
11031
|
+
end: 0
|
|
11069
11032
|
},
|
|
11070
11033
|
|
|
11071
11034
|
computed: {
|
|
@@ -11074,6 +11037,22 @@
|
|
|
11074
11037
|
var target = ref.target;
|
|
11075
11038
|
|
|
11076
11039
|
return getOffsetElement(target && query(target, $el) || $el);
|
|
11040
|
+
},
|
|
11041
|
+
|
|
11042
|
+
start: function(ref) {
|
|
11043
|
+
var start = ref.start;
|
|
11044
|
+
|
|
11045
|
+
return parseCalc(start, this.target);
|
|
11046
|
+
},
|
|
11047
|
+
|
|
11048
|
+
end: function(ref) {
|
|
11049
|
+
var end = ref.end;
|
|
11050
|
+
var viewport = ref.viewport;
|
|
11051
|
+
|
|
11052
|
+
return parseCalc(
|
|
11053
|
+
end || (viewport = (1 - viewport) * 100) && (viewport + "vh+" + viewport + "%"),
|
|
11054
|
+
this.target
|
|
11055
|
+
);
|
|
11077
11056
|
}
|
|
11078
11057
|
|
|
11079
11058
|
},
|
|
@@ -11093,11 +11072,11 @@
|
|
|
11093
11072
|
}
|
|
11094
11073
|
|
|
11095
11074
|
var prev = percent;
|
|
11096
|
-
percent = ease(scrolledOver(this.target
|
|
11075
|
+
percent = ease(scrolledOver(this.target, this.start, this.end), this.easing);
|
|
11097
11076
|
|
|
11098
11077
|
return {
|
|
11099
11078
|
percent: percent,
|
|
11100
|
-
style: prev
|
|
11079
|
+
style: prev === percent ? false : this.getCss(percent)
|
|
11101
11080
|
};
|
|
11102
11081
|
},
|
|
11103
11082
|
|
|
@@ -11119,8 +11098,23 @@
|
|
|
11119
11098
|
|
|
11120
11099
|
};
|
|
11121
11100
|
|
|
11101
|
+
var calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
|
|
11102
|
+
function parseCalc(calc, el) {
|
|
11103
|
+
var match;
|
|
11104
|
+
var result = 0;
|
|
11105
|
+
calc = calc.toString().replace(/\s/g, '');
|
|
11106
|
+
calcRe.lastIndex = 0;
|
|
11107
|
+
while ((match = calcRe.exec(calc)) !== null) {
|
|
11108
|
+
result += toPx(match, 'height', el, true);
|
|
11109
|
+
}
|
|
11110
|
+
|
|
11111
|
+
return result;
|
|
11112
|
+
}
|
|
11113
|
+
|
|
11122
11114
|
function ease(percent, easing) {
|
|
11123
|
-
return
|
|
11115
|
+
return easing >= 0
|
|
11116
|
+
? Math.pow(percent, easing + 1)
|
|
11117
|
+
: 1 - Math.pow(1 - percent, -easing + 1);
|
|
11124
11118
|
}
|
|
11125
11119
|
|
|
11126
11120
|
// SVG elements do not inherit from HTMLElement
|
|
@@ -11129,7 +11123,7 @@
|
|
|
11129
11123
|
? 'offsetTop' in el
|
|
11130
11124
|
? el
|
|
11131
11125
|
: getOffsetElement(parent(el))
|
|
11132
|
-
: document.
|
|
11126
|
+
: document.documentElement;
|
|
11133
11127
|
}
|
|
11134
11128
|
|
|
11135
11129
|
var SliderReactive = {
|