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.
Files changed (65) hide show
  1. package/CHANGELOG.md +45 -17
  2. package/build/icons.js +4 -4
  3. package/build/scope.js +4 -6
  4. package/build/scss.js +4 -4
  5. package/dist/css/uikit-core-rtl.css +10 -1
  6. package/dist/css/uikit-core-rtl.min.css +1 -1
  7. package/dist/css/uikit-core.css +10 -1
  8. package/dist/css/uikit-core.min.css +1 -1
  9. package/dist/css/uikit-rtl.css +10 -1
  10. package/dist/css/uikit-rtl.min.css +1 -1
  11. package/dist/css/uikit.css +10 -1
  12. package/dist/css/uikit.min.css +1 -1
  13. package/dist/js/components/countdown.js +1 -1
  14. package/dist/js/components/countdown.min.js +1 -1
  15. package/dist/js/components/filter.js +1 -1
  16. package/dist/js/components/filter.min.js +1 -1
  17. package/dist/js/components/lightbox-panel.js +1 -1
  18. package/dist/js/components/lightbox-panel.min.js +1 -1
  19. package/dist/js/components/lightbox.js +1 -1
  20. package/dist/js/components/lightbox.min.js +1 -1
  21. package/dist/js/components/notification.js +1 -1
  22. package/dist/js/components/notification.min.js +1 -1
  23. package/dist/js/components/parallax.js +257 -264
  24. package/dist/js/components/parallax.min.js +1 -1
  25. package/dist/js/components/slider-parallax.js +215 -257
  26. package/dist/js/components/slider-parallax.min.js +1 -1
  27. package/dist/js/components/slider.js +1 -1
  28. package/dist/js/components/slider.min.js +1 -1
  29. package/dist/js/components/slideshow-parallax.js +215 -257
  30. package/dist/js/components/slideshow-parallax.min.js +1 -1
  31. package/dist/js/components/slideshow.js +1 -1
  32. package/dist/js/components/slideshow.min.js +1 -1
  33. package/dist/js/components/sortable.js +1 -1
  34. package/dist/js/components/sortable.min.js +1 -1
  35. package/dist/js/components/tooltip.js +1 -1
  36. package/dist/js/components/tooltip.min.js +1 -1
  37. package/dist/js/components/upload.js +1 -1
  38. package/dist/js/components/upload.min.js +1 -1
  39. package/dist/js/uikit-core.js +38 -37
  40. package/dist/js/uikit-core.min.js +1 -1
  41. package/dist/js/uikit-icons.js +1 -1
  42. package/dist/js/uikit-icons.min.js +1 -1
  43. package/dist/js/uikit.js +294 -300
  44. package/dist/js/uikit.min.js +1 -1
  45. package/package.json +5 -5
  46. package/src/js/api/hooks.js +6 -10
  47. package/src/js/components/parallax.js +38 -8
  48. package/src/js/core/grid.js +2 -2
  49. package/src/js/core/scrollspy.js +1 -1
  50. package/src/js/core/svg.js +9 -7
  51. package/src/js/mixin/parallax.js +209 -242
  52. package/src/js/util/dimensions.js +4 -2
  53. package/src/js/util/lang.js +4 -0
  54. package/src/js/util/viewport.js +9 -13
  55. package/src/less/components/position.less +2 -0
  56. package/src/less/components/sticky.less +6 -0
  57. package/src/scss/components/position.scss +2 -0
  58. package/src/scss/components/sticky.scss +6 -0
  59. package/tests/index.html +1 -1
  60. package/tests/js/index.js +1 -1
  61. package/tests/notification.html +5 -5
  62. package/tests/parallax.html +66 -50
  63. package/tests/sticky-parallax.html +274 -0
  64. package/tests/sticky.html +2 -2
  65. package/tests/tab.html +1 -1
package/dist/js/uikit.js CHANGED
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.10.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
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(dimensions(element)[property], value)
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, heightOffset) {
2316
- if ( heightOffset === void 0 ) heightOffset = 0;
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 clientHeight = getViewportClientHeight(scrollElement);
2328
- var viewportTop = offsetPosition(element)[0] - scrollTop - offsetPosition(scrollElement)[0];
2329
- var viewportDist = Math.min(clientHeight, viewportTop + scrollTop);
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
- return clamp(-1 * top / dist);
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 _computeds = ref._computeds;
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
- || hasPrev && !isEqual(prev, this[key])
2904
+ || hasOwn(values, key) && !isEqual(values[key], this[key])
2906
2905
  )) {
2907
- watch.call(this, this[key], prev);
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.10.1';
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
- var height$1 = ref.height;
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, height$1 ? height$1 - height(this.$el) : 0) * Math.abs(this.parallax)
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 (!this$1$1._connected) {
5394
-
5395
- if (isVoidElement(this$1$1.$el)) {
5396
- this$1$1.$el.hidden = false;
5397
- }
5392
+ if (this$1$1._connected) {
5393
+ return;
5394
+ }
5398
5395
 
5399
- remove$1(svg);
5400
- this$1$1.svgEl = null;
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: false,
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 = ['x', 'y', 'bgx', 'bgy', 'rotate', 'scale', 'color', 'backgroundColor', 'borderColor', 'opacity', 'blur', 'hue', 'grayscale', 'invert', 'saturate', 'sepia', 'fopacity', 'stroke'];
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: props.reduce(function (props, prop) {
10709
- props[prop] = 'list';
10710
- return props;
10711
- }, {}),
10730
+ props: fillObject(keys(props), 'list'),
10712
10731
 
10713
- data: props.reduce(function (data, prop) {
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
- return props.reduce(function (props, prop) {
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
- var unit = getUnit(steps);
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
- diff = max - min;
10749
+ methods: {
10772
10750
 
10773
- steps = steps.map(function (step) { return step - (down ? min : max); });
10774
- pos = (down ? -diff : 0) + "px";
10751
+ reset: function() {
10752
+ var this$1$1 = this;
10775
10753
 
10776
- } else {
10754
+ each(this.getCss(0), function (_, prop) { return css(this$1$1.$el, prop, ''); });
10755
+ },
10777
10756
 
10778
- pos = bgPos;
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
- } else {
10766
+ }
10783
10767
 
10784
- steps = steps.map(toFloat);
10768
+ };
10785
10769
 
10786
- }
10770
+ function transformFn(prop, el, steps) {
10787
10771
 
10788
- if (prop === 'stroke') {
10772
+ var unit = getUnit(steps) || {x: 'px', y: 'px', rotate: 'deg'}[prop] || '';
10789
10773
 
10790
- if (!steps.some(function (step) { return step; })) {
10791
- return props;
10792
- }
10774
+ if (prop === 'x' || prop === 'y') {
10775
+ prop = "translate" + (ucfirst(prop));
10776
+ }
10793
10777
 
10794
- var length = getMaxPathLength(this$1$1.$el);
10795
- css($el, 'strokeDasharray', length);
10778
+ steps = steps.map(toFloat);
10796
10779
 
10797
- if (unit === '%') {
10798
- steps = steps.map(function (step) { return step * length / 100; });
10799
- }
10780
+ if (steps.length === 1) {
10781
+ steps.unshift(prop === 'scale' ? 1 : 0);
10782
+ }
10800
10783
 
10801
- steps = steps.reverse();
10784
+ return function (css, percent) {
10785
+ var value = getValue(steps, percent);
10802
10786
 
10803
- prop = 'strokeDashoffset';
10804
- }
10787
+ if (startsWith(prop, 'translate')) {
10788
+ value = toFloat(value).toFixed(unit === 'px' ? 0 : 6);
10789
+ }
10805
10790
 
10806
- props[prop] = {steps: steps, unit: unit, pos: pos, bgPos: bgPos, diff: diff};
10791
+ css.transform += " " + prop + "(" + value + unit + ")";
10792
+ };
10793
+ }
10807
10794
 
10808
- return props;
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
- bgProps: function() {
10815
- var this$1$1 = this;
10803
+ return function (css, percent) {
10816
10804
 
10817
- return ['bgx', 'bgy'].filter(function (bg) { return bg in this$1$1.props; });
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
- covers: function(_, $el) {
10821
- return covers($el);
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
- disconnected: function() {
10827
- delete this._image;
10828
- },
10828
+ if (steps.length === 1) {
10829
+ steps.unshift(0);
10830
+ }
10829
10831
 
10830
- update: {
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
- read: function(data) {
10833
- var this$1$1 = this;
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
- if (!this.matchMedia) {
10837
- return;
10838
- }
10844
+ if (steps.length === 1) {
10845
+ steps.unshift(getCssValue(el, prop, ''));
10846
+ }
10839
10847
 
10840
- if (!data.image && this.covers && this.bgProps.length) {
10841
- var src = css(this.$el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
10848
+ steps = steps.map(toFloat);
10842
10849
 
10843
- if (src) {
10844
- var img = new Image();
10845
- img.src = src;
10846
- data.image = img;
10850
+ return function (css, percent) {
10851
+ css[prop] = getValue(steps, percent);
10852
+ };
10853
+ }
10847
10854
 
10848
- if (!img.naturalWidth) {
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
- var image = data.image;
10861
+ var unit = getUnit(steps);
10862
+ steps = steps.map(toFloat);
10856
10863
 
10857
- if (!image || !image.naturalWidth) {
10858
- return;
10859
- }
10864
+ if (!steps.some(function (step) { return step; })) {
10865
+ return noop;
10866
+ }
10860
10867
 
10861
- var dimEl = {
10862
- width: this.$el.offsetWidth,
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
- var dim = Dimensions.cover(dimImage, dimEl);
10871
+ if (unit === '%') {
10872
+ steps = steps.map(function (step) { return step * length / 100; });
10873
+ }
10871
10874
 
10872
- this.bgProps.forEach(function (prop) {
10875
+ steps = steps.reverse();
10873
10876
 
10874
- var ref = this$1$1.props[prop];
10875
- var diff = ref.diff;
10876
- var bgPos = ref.bgPos;
10877
- var steps = ref.steps;
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
- if (span < diff) {
10882
- dimEl[attr] = dim[attr] + diff - span;
10883
- } else if (span > diff) {
10882
+ function backgroundFn(prop, el, steps) {
10884
10883
 
10885
- var posPercentage = dimEl[attr] / toPx(bgPos, attr, this$1$1.$el);
10884
+ if (steps.length === 1) {
10885
+ steps.unshift(0);
10886
+ }
10886
10887
 
10887
- if (posPercentage) {
10888
- this$1$1.props[prop].steps = steps.map(function (step) { return step - (span - diff) / posPercentage; });
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
- dim = Dimensions.cover(dimImage, dimEl);
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
- data.dim = dim;
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
- write: function(ref) {
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
- if (!this.matchMedia) {
10903
- css(this.$el, {backgroundSize: '', backgroundRepeat: ''});
10904
- return;
10905
- }
10904
+ if (!image.naturalWidth) {
10905
+ return noop;
10906
+ }
10906
10907
 
10907
- dim && css(this.$el, {
10908
- backgroundSize: ((dim.width) + "px " + (dim.height) + "px"),
10909
- backgroundRepeat: 'no-repeat'
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
- events: ['resize']
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
- methods: {
10925
+ var baseDim = Dimensions.cover(dimImage, dimEl);
10926
+ var span = baseDim[attr] - dimEl[attr];
10919
10927
 
10920
- reset: function() {
10921
- var this$1$1 = this;
10928
+ if (span < diff) {
10929
+ dimEl[attr] = baseDim[attr] + diff - span;
10930
+ } else if (span > diff) {
10922
10931
 
10923
- each(this.getCss(0), function (_, prop) { return css(this$1$1.$el, prop, ''); });
10924
- },
10932
+ var posPercentage = dimEl[attr] / toPx(bgPos, attr, el, true);
10925
10933
 
10926
- getCss: function(percent) {
10934
+ if (posPercentage) {
10935
+ pos -= (span - diff) / posPercentage;
10936
+ }
10937
+ }
10927
10938
 
10928
- var ref = this;
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
- // bg image
10956
- case 'bgy':
10957
- case 'bgx':
10958
- css[("background-position-" + (prop[2]))] = "calc(" + pos + " + " + value + "px)";
10959
- break;
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
- // color
10962
- case 'color':
10963
- case 'backgroundColor':
10964
- case 'borderColor': {
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
- var ref$1 = getStep(steps, percent);
10967
- var start = ref$1[0];
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
- css[prop] = "rgba(" + (start.map(function (value, i) {
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
- return css;
10960
+ var data = this._data;
11002
10961
 
11003
- }, {transform: '', filter: ''});
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 step;
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, digits) {
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 (isNumber(start)
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(/-|\d/g, '').trim() || unit; }, '');
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 covers(el) {
11048
- var ref = el.style;
11049
- var backgroundSize = ref.backgroundSize;
11050
- var covers = css(css(el, 'backgroundSize', ''), 'backgroundSize') === 'cover';
11051
- el.style.backgroundSize = backgroundSize;
11052
- return covers;
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) / (this.viewport || 1), this.easing);
11075
+ percent = ease(scrolledOver(this.target, this.start, this.end), this.easing);
11097
11076
 
11098
11077
  return {
11099
11078
  percent: percent,
11100
- style: prev !== percent ? this.getCss(percent) : false
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 clamp(percent * (1 - (easing - easing * percent)));
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.body;
11126
+ : document.documentElement;
11133
11127
  }
11134
11128
 
11135
11129
  var SliderReactive = {