uikit 3.11.2-dev.fb043abc2 → 3.12.2
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/.eslintrc.json +4 -49
- package/.prettierignore +14 -0
- package/.prettierrc.json +13 -0
- package/.webstorm.js +3 -3
- package/CHANGELOG.md +63 -20
- package/build/.eslintrc.json +1 -3
- package/build/build.js +26 -28
- package/build/icons.js +7 -11
- package/build/less.js +48 -36
- package/build/package.json +2 -2
- package/build/prefix.js +21 -18
- package/build/publishDev.js +6 -8
- package/build/release.js +20 -17
- package/build/scope.js +21 -11
- package/build/scss.js +72 -39
- package/build/util.js +71 -62
- package/build/wrapper/icons.js +0 -2
- package/dist/css/uikit-core-rtl.css +144 -202
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +144 -202
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +146 -208
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +146 -208
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +66 -138
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +408 -439
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +1091 -1319
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1137 -1396
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +94 -114
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +347 -361
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +345 -360
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +749 -843
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +345 -360
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +628 -798
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +587 -620
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +324 -356
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +156 -167
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +5317 -6554
- package/dist/js/uikit-core.min.js +1 -1
- package/dist/js/uikit-icons.js +7 -9
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +8018 -9698
- package/dist/js/uikit.min.js +1 -1
- package/jsconfig.json +1 -1
- package/package.json +64 -60
- package/src/js/api/boot.js +25 -32
- package/src/js/api/component.js +15 -28
- package/src/js/api/global.js +6 -12
- package/src/js/api/hooks.js +14 -33
- package/src/js/api/instance.js +7 -15
- package/src/js/api/state.js +199 -187
- package/src/js/components/countdown.js +32 -85
- package/src/js/components/filter.js +70 -66
- package/src/js/components/index.js +13 -13
- package/src/js/components/internal/lightbox-animations.js +14 -25
- package/src/js/components/internal/slider-preload.js +9 -0
- package/src/js/components/internal/slider-transitioner.js +66 -45
- package/src/js/components/internal/slideshow-animations.js +46 -64
- package/src/js/components/lightbox-panel.js +107 -105
- package/src/js/components/lightbox.js +17 -39
- package/src/js/components/notification.js +49 -43
- package/src/js/components/parallax.js +16 -30
- package/src/js/components/slider-parallax.js +13 -23
- package/src/js/components/slider.js +117 -89
- package/src/js/components/slideshow-parallax.js +1 -1
- package/src/js/components/slideshow.js +15 -13
- package/src/js/components/sortable.js +125 -106
- package/src/js/components/tooltip.js +41 -31
- package/src/js/components/upload.js +53 -63
- package/src/js/core/accordion.js +58 -48
- package/src/js/core/alert.js +9 -17
- package/src/js/core/core.js +17 -69
- package/src/js/core/cover.js +15 -15
- package/src/js/core/drop.js +110 -94
- package/src/js/core/form-custom.js +22 -27
- package/src/js/core/gif.js +3 -7
- package/src/js/core/grid.js +57 -58
- package/src/js/core/height-match.js +16 -29
- package/src/js/core/height-viewport.js +30 -34
- package/src/js/core/icon.js +47 -52
- package/src/js/core/img.js +153 -143
- package/src/js/core/index.js +39 -39
- package/src/js/core/leader.js +9 -18
- package/src/js/core/margin.js +21 -37
- package/src/js/core/modal.js +49 -36
- package/src/js/core/nav.js +2 -4
- package/src/js/core/navbar.js +113 -85
- package/src/js/core/offcanvas.js +51 -54
- package/src/js/core/overflow-auto.js +13 -17
- package/src/js/core/responsive.js +14 -12
- package/src/js/core/scroll.js +10 -20
- package/src/js/core/scrollspy-nav.js +34 -31
- package/src/js/core/scrollspy.js +37 -54
- package/src/js/core/sticky.js +161 -128
- package/src/js/core/svg.js +68 -83
- package/src/js/core/switcher.js +56 -47
- package/src/js/core/tab.js +7 -10
- package/src/js/core/toggle.js +69 -68
- package/src/js/core/video.js +22 -21
- package/src/js/mixin/animate.js +19 -20
- package/src/js/mixin/class.js +2 -4
- package/src/js/mixin/container.js +7 -11
- package/src/js/mixin/internal/animate-fade.js +73 -30
- package/src/js/mixin/internal/animate-slide.js +58 -41
- package/src/js/mixin/internal/slideshow-animations.js +7 -14
- package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
- package/src/js/mixin/lazyload.js +20 -0
- package/src/js/mixin/media.js +5 -10
- package/src/js/mixin/modal.js +89 -66
- package/src/js/mixin/parallax.js +149 -107
- package/src/js/mixin/position.js +26 -20
- package/src/js/mixin/slider-autoplay.js +12 -21
- package/src/js/mixin/slider-drag.js +64 -65
- package/src/js/mixin/slider-nav.js +26 -35
- package/src/js/mixin/slider-reactive.js +2 -8
- package/src/js/mixin/slider.js +47 -60
- package/src/js/mixin/slideshow.js +12 -22
- package/src/js/mixin/swipe.js +72 -0
- package/src/js/mixin/togglable.js +89 -63
- package/src/js/uikit-core.js +2 -4
- package/src/js/uikit.js +2 -4
- package/src/js/util/ajax.js +25 -40
- package/src/js/util/animation.js +77 -75
- package/src/js/util/attr.js +17 -21
- package/src/js/util/class.js +14 -52
- package/src/js/util/dimensions.js +58 -45
- package/src/js/util/dom.js +37 -66
- package/src/js/util/env.js +7 -12
- package/src/js/util/event.js +60 -59
- package/src/js/util/fastdom.js +1 -6
- package/src/js/util/filter.js +18 -36
- package/src/js/util/index.js +1 -1
- package/src/js/util/lang.js +82 -121
- package/src/js/util/mouse.js +19 -17
- package/src/js/util/observer.js +36 -0
- package/src/js/util/options.js +35 -49
- package/src/js/util/player.js +41 -36
- package/src/js/util/position.js +54 -46
- package/src/js/util/selector.js +43 -58
- package/src/js/util/style.js +39 -49
- package/src/js/util/viewport.js +75 -64
- package/src/less/components/base.less +10 -33
- package/src/less/components/flex.less +0 -9
- package/src/less/components/form-range.less +48 -95
- package/src/less/components/form.less +0 -1
- package/src/less/components/height.less +3 -0
- package/src/less/components/leader.less +0 -1
- package/src/less/components/lightbox.less +0 -1
- package/src/less/components/list.less +5 -1
- package/src/less/components/modal.less +3 -7
- package/src/less/components/navbar.less +0 -7
- package/src/less/components/progress.less +14 -36
- package/src/less/components/slider.less +3 -3
- package/src/less/components/slideshow.less +3 -3
- package/src/less/components/text.less +16 -32
- package/src/less/components/utility.less +25 -0
- package/src/scss/components/base.scss +10 -33
- package/src/scss/components/flex.scss +0 -9
- package/src/scss/components/form-range.scss +48 -95
- package/src/scss/components/form.scss +3 -4
- package/src/scss/components/height.scss +3 -0
- package/src/scss/components/icon.scss +2 -2
- package/src/scss/components/leader.scss +0 -1
- package/src/scss/components/lightbox.scss +0 -1
- package/src/scss/components/list.scss +5 -1
- package/src/scss/components/modal.scss +3 -7
- package/src/scss/components/navbar.scss +0 -7
- package/src/scss/components/progress.scss +14 -36
- package/src/scss/components/search.scss +1 -1
- package/src/scss/components/slider.scss +3 -3
- package/src/scss/components/slideshow.scss +3 -3
- package/src/scss/components/text.scss +16 -32
- package/src/scss/components/utility.scss +25 -0
- package/src/scss/mixins-theme.scss +1 -1
- package/src/scss/mixins.scss +1 -1
- package/src/scss/variables-theme.scss +9 -9
- package/src/scss/variables.scss +9 -9
- package/tests/align.html +10 -10
- package/tests/animation.html +2 -2
- package/tests/article.html +2 -2
- package/tests/base.html +3 -3
- package/tests/card.html +10 -10
- package/tests/column.html +3 -3
- package/tests/comment.html +9 -9
- package/tests/countdown.html +10 -8
- package/tests/dotnav.html +3 -3
- package/tests/image.html +296 -64
- package/tests/images/image-type.avif +0 -0
- package/tests/images/image-type.jpeg +0 -0
- package/tests/images/image-type.webp +0 -0
- package/tests/index.html +8 -8
- package/tests/js/index.js +114 -85
- package/tests/lightbox.html +10 -10
- package/tests/marker.html +2 -2
- package/tests/modal.html +8 -9
- package/tests/navbar.html +2 -2
- package/tests/overlay.html +7 -7
- package/tests/parallax.html +16 -7
- package/tests/position.html +12 -12
- package/tests/slidenav.html +12 -12
- package/tests/slider.html +20 -20
- package/tests/sortable.html +1 -1
- package/tests/sticky-parallax.html +57 -72
- package/tests/sticky.html +14 -3
- package/tests/svg.html +6 -6
- package/tests/table.html +11 -11
- package/tests/thumbnav.html +12 -12
- package/tests/transition.html +30 -30
- package/tests/utility.html +50 -33
- package/tests/video.html +1 -1
- package/tests/width.html +1 -1
- package/src/js/mixin/flex-bug.js +0 -56
- package/src/js/util/promise.js +0 -191
- package/tests/images/animated.gif +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! UIkit 3.
|
|
1
|
+
/*! UIkit 3.12.2 | 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(require('uikit-util')) :
|
|
@@ -7,494 +7,480 @@
|
|
|
7
7
|
})(this, (function (uikitUtil) { 'use strict';
|
|
8
8
|
|
|
9
9
|
var Media = {
|
|
10
|
+
props: {
|
|
11
|
+
media: Boolean },
|
|
10
12
|
|
|
11
|
-
props: {
|
|
12
|
-
media: Boolean
|
|
13
|
-
},
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
14
|
+
data: {
|
|
15
|
+
media: false },
|
|
18
16
|
|
|
19
|
-
computed: {
|
|
20
17
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
computed: {
|
|
19
|
+
matchMedia() {
|
|
20
|
+
const media = toMedia(this.media);
|
|
21
|
+
return !media || window.matchMedia(media).matches;
|
|
22
|
+
} } };
|
|
25
23
|
|
|
26
|
-
}
|
|
27
24
|
|
|
28
|
-
};
|
|
29
25
|
|
|
30
26
|
function toMedia(value) {
|
|
31
|
-
|
|
32
|
-
if (
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
return value;
|
|
38
|
-
}
|
|
27
|
+
if (uikitUtil.isString(value)) {
|
|
28
|
+
if (value[0] === '@') {
|
|
29
|
+
const name = "breakpoint-" + value.substr(1);
|
|
30
|
+
value = uikitUtil.toFloat(uikitUtil.getCssVar(name));
|
|
31
|
+
} else if (isNaN(value)) {
|
|
32
|
+
return value;
|
|
39
33
|
}
|
|
34
|
+
}
|
|
40
35
|
|
|
41
|
-
|
|
36
|
+
return value && !isNaN(value) ? "(min-width: " + value + "px)" : false;
|
|
42
37
|
}
|
|
43
38
|
|
|
44
|
-
uikitUtil.memoize(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
39
|
+
uikitUtil.memoize(async (src) => {
|
|
40
|
+
if (src) {
|
|
41
|
+
if (uikitUtil.startsWith(src, 'data:')) {
|
|
42
|
+
return decodeURIComponent(src.split(',')[1]);
|
|
43
|
+
} else {
|
|
44
|
+
return (await fetch(src)).text();
|
|
45
|
+
}
|
|
46
|
+
} else {
|
|
47
|
+
return Promise.reject();
|
|
48
|
+
}
|
|
49
|
+
});
|
|
54
50
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
51
|
+
function getMaxPathLength(el) {
|
|
52
|
+
return Math.ceil(
|
|
53
|
+
Math.max(
|
|
54
|
+
0,
|
|
55
|
+
...uikitUtil.$$('[stroke]', el).map((stroke) => {
|
|
56
|
+
try {
|
|
57
|
+
return stroke.getTotalLength();
|
|
58
|
+
} catch (e) {
|
|
59
|
+
return 0;
|
|
60
|
+
}
|
|
61
|
+
})));
|
|
59
62
|
|
|
60
|
-
}
|
|
61
|
-
}); }
|
|
62
|
-
);
|
|
63
63
|
|
|
64
|
-
function getMaxPathLength(el) {
|
|
65
|
-
return Math.ceil(Math.max.apply(Math, [ 0 ].concat( uikitUtil.$$('[stroke]', el).map(function (stroke) {
|
|
66
|
-
try {
|
|
67
|
-
return stroke.getTotalLength();
|
|
68
|
-
} catch (e) {
|
|
69
|
-
return 0;
|
|
70
|
-
}
|
|
71
|
-
}) )));
|
|
72
64
|
}
|
|
73
65
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
66
|
+
const props = {
|
|
67
|
+
x: transformFn,
|
|
68
|
+
y: transformFn,
|
|
69
|
+
rotate: transformFn,
|
|
70
|
+
scale: transformFn,
|
|
71
|
+
color: colorFn,
|
|
72
|
+
backgroundColor: colorFn,
|
|
73
|
+
borderColor: colorFn,
|
|
74
|
+
blur: filterFn,
|
|
75
|
+
hue: filterFn,
|
|
76
|
+
fopacity: filterFn,
|
|
77
|
+
grayscale: filterFn,
|
|
78
|
+
invert: filterFn,
|
|
79
|
+
saturate: filterFn,
|
|
80
|
+
sepia: filterFn,
|
|
81
|
+
opacity: cssPropFn,
|
|
82
|
+
stroke: strokeFn,
|
|
83
|
+
bgx: backgroundFn,
|
|
84
|
+
bgy: backgroundFn };
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
const { keys } = Object;
|
|
96
88
|
|
|
97
89
|
var Parallax = {
|
|
90
|
+
mixins: [Media],
|
|
98
91
|
|
|
99
|
-
|
|
92
|
+
props: fillObject(keys(props), 'list'),
|
|
100
93
|
|
|
101
|
-
|
|
94
|
+
data: fillObject(keys(props), undefined),
|
|
102
95
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
return keys(props).reduce(function (result, prop) {
|
|
109
|
-
if (!uikitUtil.isUndefined(properties[prop])) {
|
|
110
|
-
result[prop] = props[prop](prop, $el, properties[prop].slice());
|
|
111
|
-
}
|
|
112
|
-
return result;
|
|
113
|
-
}, {});
|
|
96
|
+
computed: {
|
|
97
|
+
props(properties, $el) {
|
|
98
|
+
return keys(props).reduce((result, prop) => {
|
|
99
|
+
if (!uikitUtil.isUndefined(properties[prop])) {
|
|
100
|
+
result[prop] = props[prop](prop, $el, properties[prop].slice());
|
|
114
101
|
}
|
|
102
|
+
return result;
|
|
103
|
+
}, {});
|
|
104
|
+
} },
|
|
115
105
|
|
|
116
|
-
},
|
|
117
106
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
},
|
|
107
|
+
events: {
|
|
108
|
+
load() {
|
|
109
|
+
this.$emit();
|
|
110
|
+
} },
|
|
123
111
|
|
|
124
|
-
methods: {
|
|
125
112
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
},
|
|
131
|
-
|
|
132
|
-
getCss: function(percent) {
|
|
133
|
-
var this$1$1 = this;
|
|
134
|
-
|
|
135
|
-
return keys(this.props).reduce(function (css, prop) {
|
|
136
|
-
this$1$1.props[prop](css, percent);
|
|
137
|
-
return css;
|
|
138
|
-
}, {transform: '', filter: ''});
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
}
|
|
113
|
+
methods: {
|
|
114
|
+
reset() {
|
|
115
|
+
uikitUtil.each(this.getCss(0), (_, prop) => uikitUtil.css(this.$el, prop, ''));
|
|
116
|
+
},
|
|
142
117
|
|
|
143
|
-
|
|
118
|
+
getCss(percent) {
|
|
119
|
+
const css = { transform: '', filter: '' };
|
|
120
|
+
for (const prop in this.props) {
|
|
121
|
+
this.props[prop](css, percent);
|
|
122
|
+
}
|
|
123
|
+
return css;
|
|
124
|
+
} } };
|
|
144
125
|
|
|
145
|
-
function transformFn(prop, el, steps) {
|
|
146
126
|
|
|
147
|
-
var unit = getUnit(steps) || {x: 'px', y: 'px', rotate: 'deg'}[prop] || '';
|
|
148
127
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
128
|
+
function transformFn(prop, el, stops) {
|
|
129
|
+
const unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
|
|
130
|
+
let transformFn;
|
|
152
131
|
|
|
153
|
-
|
|
132
|
+
if (prop === 'x' || prop === 'y') {
|
|
133
|
+
prop = "translate" + uikitUtil.ucfirst(prop);
|
|
134
|
+
transformFn = (stop) => uikitUtil.toFloat(uikitUtil.toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
|
|
135
|
+
}
|
|
154
136
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
137
|
+
if (stops.length === 1) {
|
|
138
|
+
stops.unshift(prop === 'scale' ? 1 : 0);
|
|
139
|
+
}
|
|
158
140
|
|
|
159
|
-
|
|
160
|
-
var value = getValue(steps, percent);
|
|
141
|
+
stops = parseStops(stops, transformFn);
|
|
161
142
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
css.transform += " " + prop + "(" + value + unit + ")";
|
|
167
|
-
};
|
|
143
|
+
return (css, percent) => {
|
|
144
|
+
css.transform += " " + prop + "(" + getValue(stops, percent) + unit + ")";
|
|
145
|
+
};
|
|
168
146
|
}
|
|
169
147
|
|
|
170
|
-
function colorFn(prop, el,
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
}).join(',');
|
|
188
|
-
css[prop] = "rgba(" + value + ")";
|
|
189
|
-
};
|
|
148
|
+
function colorFn(prop, el, stops) {
|
|
149
|
+
if (stops.length === 1) {
|
|
150
|
+
stops.unshift(getCssValue(el, prop, ''));
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
stops = parseStops(stops, (stop) => parseColor(el, stop));
|
|
154
|
+
|
|
155
|
+
return (css, percent) => {
|
|
156
|
+
const [start, end, p] = getStop(stops, percent);
|
|
157
|
+
const value = start.
|
|
158
|
+
map((value, i) => {
|
|
159
|
+
value += p * (end[i] - value);
|
|
160
|
+
return i === 3 ? uikitUtil.toFloat(value) : parseInt(value, 10);
|
|
161
|
+
}).
|
|
162
|
+
join(',');
|
|
163
|
+
css[prop] = "rgba(" + value + ")";
|
|
164
|
+
};
|
|
190
165
|
}
|
|
191
166
|
|
|
192
167
|
function parseColor(el, color) {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
168
|
+
return getCssValue(el, 'color', color).
|
|
169
|
+
split(/[(),]/g).
|
|
170
|
+
slice(1, -1).
|
|
171
|
+
concat(1).
|
|
172
|
+
slice(0, 4).
|
|
173
|
+
map(uikitUtil.toFloat);
|
|
199
174
|
}
|
|
200
175
|
|
|
201
|
-
function filterFn(prop, el,
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
}
|
|
176
|
+
function filterFn(prop, el, stops) {
|
|
177
|
+
if (stops.length === 1) {
|
|
178
|
+
stops.unshift(0);
|
|
179
|
+
}
|
|
206
180
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
181
|
+
const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
|
|
182
|
+
prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
|
|
183
|
+
stops = parseStops(stops);
|
|
210
184
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
185
|
+
return (css, percent) => {
|
|
186
|
+
const value = getValue(stops, percent);
|
|
187
|
+
css.filter += " " + prop + "(" + (value + unit) + ")";
|
|
188
|
+
};
|
|
215
189
|
}
|
|
216
190
|
|
|
217
|
-
function cssPropFn(prop, el,
|
|
191
|
+
function cssPropFn(prop, el, stops) {
|
|
192
|
+
if (stops.length === 1) {
|
|
193
|
+
stops.unshift(getCssValue(el, prop, ''));
|
|
194
|
+
}
|
|
218
195
|
|
|
219
|
-
|
|
220
|
-
steps.unshift(getCssValue(el, prop, ''));
|
|
221
|
-
}
|
|
196
|
+
stops = parseStops(stops);
|
|
222
197
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
css[prop] = getValue(steps, percent);
|
|
227
|
-
};
|
|
198
|
+
return (css, percent) => {
|
|
199
|
+
css[prop] = getValue(stops, percent);
|
|
200
|
+
};
|
|
228
201
|
}
|
|
229
202
|
|
|
230
|
-
function strokeFn(prop, el,
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
var unit = getUnit(steps);
|
|
237
|
-
steps = steps.map(uikitUtil.toFloat);
|
|
238
|
-
|
|
239
|
-
if (!steps.some(function (step) { return step; })) {
|
|
240
|
-
return uikitUtil.noop;
|
|
241
|
-
}
|
|
203
|
+
function strokeFn(prop, el, stops) {
|
|
204
|
+
if (stops.length === 1) {
|
|
205
|
+
stops.unshift(0);
|
|
206
|
+
}
|
|
242
207
|
|
|
243
|
-
|
|
244
|
-
|
|
208
|
+
const unit = getUnit(stops);
|
|
209
|
+
const length = getMaxPathLength(el);
|
|
210
|
+
stops = parseStops(stops.reverse(), (stop) => {
|
|
211
|
+
stop = uikitUtil.toFloat(stop);
|
|
212
|
+
return unit === '%' ? stop * length / 100 : stop;
|
|
213
|
+
});
|
|
245
214
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
215
|
+
if (!stops.some((_ref) => {let [value] = _ref;return value;})) {
|
|
216
|
+
return uikitUtil.noop;
|
|
217
|
+
}
|
|
249
218
|
|
|
250
|
-
|
|
219
|
+
uikitUtil.css(el, 'strokeDasharray', length);
|
|
251
220
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
221
|
+
return (css, percent) => {
|
|
222
|
+
css.strokeDashoffset = getValue(stops, percent);
|
|
223
|
+
};
|
|
255
224
|
}
|
|
256
225
|
|
|
257
|
-
function backgroundFn(prop, el,
|
|
226
|
+
function backgroundFn(prop, el, stops) {
|
|
227
|
+
if (stops.length === 1) {
|
|
228
|
+
stops.unshift(0);
|
|
229
|
+
}
|
|
258
230
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
231
|
+
prop = prop.substr(-1);
|
|
232
|
+
const attr = prop === 'y' ? 'height' : 'width';
|
|
233
|
+
stops = parseStops(stops, (stop) => uikitUtil.toPx(stop, attr, el));
|
|
262
234
|
|
|
263
|
-
|
|
264
|
-
var attr = prop === 'y' ? 'height' : 'width';
|
|
265
|
-
steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, el); });
|
|
235
|
+
const bgPos = getCssValue(el, "background-position-" + prop, '');
|
|
266
236
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
return getCssValue(el, 'backgroundSize', '') === 'cover'
|
|
271
|
-
? backgroundCoverFn(prop, el, steps, bgPos, attr)
|
|
272
|
-
: setBackgroundPosFn(prop, steps, bgPos);
|
|
237
|
+
return getCssValue(el, 'backgroundSize', '') === 'cover' ?
|
|
238
|
+
backgroundCoverFn(prop, el, stops, bgPos, attr) :
|
|
239
|
+
setBackgroundPosFn(prop, stops, bgPos);
|
|
273
240
|
}
|
|
274
241
|
|
|
275
|
-
function backgroundCoverFn(prop, el,
|
|
242
|
+
function backgroundCoverFn(prop, el, stops, bgPos, attr) {
|
|
243
|
+
const dimImage = getBackgroundImageDimensions(el);
|
|
276
244
|
|
|
277
|
-
|
|
245
|
+
if (!dimImage.width) {
|
|
246
|
+
return uikitUtil.noop;
|
|
247
|
+
}
|
|
278
248
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
249
|
+
const values = stops.map((_ref2) => {let [value] = _ref2;return value;});
|
|
250
|
+
const min = Math.min(...values);
|
|
251
|
+
const max = Math.max(...values);
|
|
252
|
+
const down = values.indexOf(min) < values.indexOf(max);
|
|
282
253
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
var down = steps.indexOf(min) < steps.indexOf(max);
|
|
254
|
+
const diff = max - min;
|
|
255
|
+
let pos = (down ? -diff : 0) - (down ? min : max);
|
|
286
256
|
|
|
287
|
-
|
|
288
|
-
|
|
257
|
+
const dimEl = {
|
|
258
|
+
width: el.offsetWidth,
|
|
259
|
+
height: el.offsetHeight };
|
|
289
260
|
|
|
290
|
-
var dimEl = {
|
|
291
|
-
width: el.offsetWidth,
|
|
292
|
-
height: el.offsetHeight
|
|
293
|
-
};
|
|
294
261
|
|
|
295
|
-
|
|
296
|
-
|
|
262
|
+
const baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
|
|
263
|
+
const span = baseDim[attr] - dimEl[attr];
|
|
297
264
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
265
|
+
if (span < diff) {
|
|
266
|
+
dimEl[attr] = baseDim[attr] + diff - span;
|
|
267
|
+
} else if (span > diff) {
|
|
268
|
+
const posPercentage = dimEl[attr] / uikitUtil.toPx(bgPos, attr, el, true);
|
|
301
269
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
if (posPercentage) {
|
|
305
|
-
pos -= (span - diff) / posPercentage;
|
|
306
|
-
}
|
|
270
|
+
if (posPercentage) {
|
|
271
|
+
pos -= (span - diff) / posPercentage;
|
|
307
272
|
}
|
|
273
|
+
}
|
|
308
274
|
|
|
309
|
-
|
|
275
|
+
const dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
|
|
310
276
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
277
|
+
const fn = setBackgroundPosFn(prop, stops, pos + "px");
|
|
278
|
+
return (css, percent) => {
|
|
279
|
+
fn(css, percent);
|
|
280
|
+
css.backgroundSize = dim.width + "px " + dim.height + "px";
|
|
281
|
+
css.backgroundRepeat = 'no-repeat';
|
|
282
|
+
};
|
|
317
283
|
}
|
|
318
284
|
|
|
319
|
-
function setBackgroundPosFn(prop,
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
285
|
+
function setBackgroundPosFn(prop, stops, pos) {
|
|
286
|
+
return function (css, percent) {
|
|
287
|
+
css["background-position-" + prop] = "calc(" + pos + " + " + getValue(stops, percent) + "px)";
|
|
288
|
+
};
|
|
323
289
|
}
|
|
324
290
|
|
|
325
|
-
|
|
291
|
+
const dimensions = {};
|
|
326
292
|
function getBackgroundImageDimensions(el) {
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
293
|
+
const src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
|
|
294
|
+
|
|
295
|
+
if (dimensions[src]) {
|
|
296
|
+
return dimensions[src];
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
const image = new Image();
|
|
300
|
+
if (src) {
|
|
301
|
+
image.src = src;
|
|
302
|
+
|
|
303
|
+
if (!image.naturalWidth) {
|
|
304
|
+
image.onload = () => {
|
|
305
|
+
dimensions[src] = toDimensions(image);
|
|
306
|
+
uikitUtil.trigger(el, 'load');
|
|
307
|
+
};
|
|
308
|
+
return toDimensions(image);
|
|
331
309
|
}
|
|
310
|
+
}
|
|
332
311
|
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
image.src = src;
|
|
312
|
+
return dimensions[src] = toDimensions(image);
|
|
313
|
+
}
|
|
336
314
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
};
|
|
342
|
-
}
|
|
343
|
-
}
|
|
315
|
+
function toDimensions(image) {
|
|
316
|
+
return {
|
|
317
|
+
width: image.naturalWidth,
|
|
318
|
+
height: image.naturalHeight };
|
|
344
319
|
|
|
345
|
-
return dimensions[src] = toDimensions(image);
|
|
346
320
|
}
|
|
347
321
|
|
|
348
|
-
function
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
322
|
+
function parseStops(stops, fn) {if (fn === void 0) {fn = uikitUtil.toFloat;}
|
|
323
|
+
const result = [];
|
|
324
|
+
const { length } = stops;
|
|
325
|
+
let nullIndex = 0;
|
|
326
|
+
for (let i = 0; i < length; i++) {
|
|
327
|
+
let [value, percent] = uikitUtil.isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
|
|
328
|
+
value = fn(value);
|
|
329
|
+
percent = percent ? uikitUtil.toFloat(percent) / 100 : null;
|
|
330
|
+
|
|
331
|
+
if (i === 0) {
|
|
332
|
+
if (percent === null) {
|
|
333
|
+
percent = 0;
|
|
334
|
+
} else if (percent) {
|
|
335
|
+
result.push([value, 0]);
|
|
336
|
+
}
|
|
337
|
+
} else if (i === length - 1) {
|
|
338
|
+
if (percent === null) {
|
|
339
|
+
percent = 1;
|
|
340
|
+
} else if (percent !== 1) {
|
|
341
|
+
result.push([value, percent]);
|
|
342
|
+
percent = 1;
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
result.push([value, percent]);
|
|
347
|
+
|
|
348
|
+
if (percent === null) {
|
|
349
|
+
nullIndex++;
|
|
350
|
+
} else if (nullIndex) {
|
|
351
|
+
const leftPercent = result[i - nullIndex - 1][1];
|
|
352
|
+
const p = (percent - leftPercent) / (nullIndex + 1);
|
|
353
|
+
for (let j = nullIndex; j > 0; j--) {
|
|
354
|
+
result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
nullIndex = 0;
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
return result;
|
|
353
362
|
}
|
|
354
363
|
|
|
355
|
-
function
|
|
356
|
-
|
|
357
|
-
|
|
364
|
+
function getStop(stops, percent) {
|
|
365
|
+
const index = uikitUtil.findIndex(stops.slice(1), (_ref3) => {let [, targetPercent] = _ref3;return percent <= targetPercent;}) + 1;
|
|
366
|
+
return [
|
|
367
|
+
stops[index - 1][0],
|
|
368
|
+
stops[index][0],
|
|
369
|
+
(percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])];
|
|
358
370
|
|
|
359
|
-
return steps
|
|
360
|
-
.slice(index, index + 2)
|
|
361
|
-
.concat(percent === 1 ? 1 : percent % (1 / count) * count);
|
|
362
371
|
}
|
|
363
372
|
|
|
364
|
-
function getValue(
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
var end = ref[1];
|
|
368
|
-
var p = ref[2];
|
|
369
|
-
return uikitUtil.isNumber(start)
|
|
370
|
-
? start + Math.abs(start - end) * p * (start < end ? 1 : -1)
|
|
371
|
-
: +end;
|
|
373
|
+
function getValue(stops, percent) {
|
|
374
|
+
const [start, end, p] = getStop(stops, percent);
|
|
375
|
+
return uikitUtil.isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
|
|
372
376
|
}
|
|
373
377
|
|
|
374
|
-
|
|
375
|
-
|
|
378
|
+
const unitRe = /^-?\d+([^\s]*)/;
|
|
379
|
+
function getUnit(stops, defaultUnit) {
|
|
380
|
+
for (const stop of stops) {
|
|
381
|
+
const match = stop.match == null ? void 0 : stop.match(unitRe);
|
|
382
|
+
if (match) {
|
|
383
|
+
return match[1];
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
return defaultUnit;
|
|
376
387
|
}
|
|
377
388
|
|
|
378
389
|
function getCssValue(el, prop, value) {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
390
|
+
const prev = el.style[prop];
|
|
391
|
+
const val = uikitUtil.css(uikitUtil.css(el, prop, value), prop);
|
|
392
|
+
el.style[prop] = prev;
|
|
393
|
+
return val;
|
|
383
394
|
}
|
|
384
395
|
|
|
385
396
|
function fillObject(keys, value) {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
397
|
+
return keys.reduce((data, prop) => {
|
|
398
|
+
data[prop] = value;
|
|
399
|
+
return data;
|
|
400
|
+
}, {});
|
|
390
401
|
}
|
|
391
402
|
|
|
392
403
|
var Component = {
|
|
404
|
+
mixins: [Parallax],
|
|
393
405
|
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
start: String,
|
|
401
|
-
end: String
|
|
402
|
-
},
|
|
403
|
-
|
|
404
|
-
data: {
|
|
405
|
-
target: false,
|
|
406
|
-
viewport: 1,
|
|
407
|
-
easing: 1,
|
|
408
|
-
start: 0,
|
|
409
|
-
end: 0
|
|
410
|
-
},
|
|
406
|
+
props: {
|
|
407
|
+
target: String,
|
|
408
|
+
viewport: Number, // Deprecated
|
|
409
|
+
easing: Number,
|
|
410
|
+
start: String,
|
|
411
|
+
end: String },
|
|
411
412
|
|
|
412
|
-
computed: {
|
|
413
413
|
|
|
414
|
-
|
|
415
|
-
|
|
414
|
+
data: {
|
|
415
|
+
target: false,
|
|
416
|
+
viewport: 1,
|
|
417
|
+
easing: 1,
|
|
418
|
+
start: 0,
|
|
419
|
+
end: 0 },
|
|
416
420
|
|
|
417
|
-
return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
|
|
418
|
-
},
|
|
419
|
-
|
|
420
|
-
start: function(ref) {
|
|
421
|
-
var start = ref.start;
|
|
422
|
-
|
|
423
|
-
return uikitUtil.toPx(start, 'height', this.target, true);
|
|
424
|
-
},
|
|
425
|
-
|
|
426
|
-
end: function(ref) {
|
|
427
|
-
var end = ref.end;
|
|
428
|
-
var viewport = ref.viewport;
|
|
429
|
-
|
|
430
|
-
return uikitUtil.toPx(
|
|
431
|
-
end || (viewport = (1 - viewport) * 100) && (viewport + "vh+" + viewport + "%"),
|
|
432
|
-
'height',
|
|
433
|
-
this.target,
|
|
434
|
-
true
|
|
435
|
-
);
|
|
436
|
-
}
|
|
437
421
|
|
|
422
|
+
computed: {
|
|
423
|
+
target(_ref, $el) {let { target } = _ref;
|
|
424
|
+
return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
|
|
438
425
|
},
|
|
439
426
|
|
|
440
|
-
|
|
427
|
+
start(_ref2) {let { start } = _ref2;
|
|
428
|
+
return uikitUtil.toPx(start, 'height', this.target, true);
|
|
429
|
+
},
|
|
441
430
|
|
|
442
|
-
|
|
443
|
-
|
|
431
|
+
end(_ref3) {let { end, viewport } = _ref3;
|
|
432
|
+
return uikitUtil.toPx(
|
|
433
|
+
end || (viewport = (1 - viewport) * 100) && viewport + "vh+" + viewport + "%",
|
|
434
|
+
'height',
|
|
435
|
+
this.target,
|
|
436
|
+
true);
|
|
444
437
|
|
|
438
|
+
} },
|
|
445
439
|
|
|
446
|
-
if (!types.has('scroll')) {
|
|
447
|
-
percent = false;
|
|
448
|
-
}
|
|
449
440
|
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
441
|
+
update: {
|
|
442
|
+
read(_ref4, types) {let { percent } = _ref4;
|
|
443
|
+
if (!types.has('scroll')) {
|
|
444
|
+
percent = false;
|
|
445
|
+
}
|
|
453
446
|
|
|
454
|
-
|
|
455
|
-
|
|
447
|
+
if (!this.matchMedia) {
|
|
448
|
+
return;
|
|
449
|
+
}
|
|
456
450
|
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
style: prev === percent ? false : this.getCss(percent)
|
|
460
|
-
};
|
|
461
|
-
},
|
|
451
|
+
const prev = percent;
|
|
452
|
+
percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
|
|
462
453
|
|
|
463
|
-
|
|
464
|
-
|
|
454
|
+
return {
|
|
455
|
+
percent,
|
|
456
|
+
style: prev === percent ? false : this.getCss(percent) };
|
|
465
457
|
|
|
458
|
+
},
|
|
466
459
|
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
460
|
+
write(_ref5) {let { style } = _ref5;
|
|
461
|
+
if (!this.matchMedia) {
|
|
462
|
+
this.reset();
|
|
463
|
+
return;
|
|
464
|
+
}
|
|
471
465
|
|
|
472
|
-
|
|
466
|
+
style && uikitUtil.css(this.$el, style);
|
|
467
|
+
},
|
|
473
468
|
|
|
474
|
-
|
|
469
|
+
events: ['scroll', 'resize'] } };
|
|
475
470
|
|
|
476
|
-
events: ['scroll', 'resize']
|
|
477
|
-
}
|
|
478
471
|
|
|
479
|
-
};
|
|
480
472
|
|
|
481
473
|
function ease(percent, easing) {
|
|
482
|
-
|
|
483
|
-
? Math.pow(percent, easing + 1)
|
|
484
|
-
: 1 - Math.pow(1 - percent, -easing + 1);
|
|
474
|
+
return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
|
|
485
475
|
}
|
|
486
476
|
|
|
487
477
|
// SVG elements do not inherit from HTMLElement
|
|
488
478
|
function getOffsetElement(el) {
|
|
489
|
-
|
|
490
|
-
? 'offsetTop' in el
|
|
491
|
-
? el
|
|
492
|
-
: getOffsetElement(uikitUtil.parent(el))
|
|
493
|
-
: document.documentElement;
|
|
479
|
+
return el ? 'offsetTop' in el ? el : getOffsetElement(uikitUtil.parent(el)) : document.documentElement;
|
|
494
480
|
}
|
|
495
481
|
|
|
496
482
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
497
|
-
|
|
483
|
+
window.UIkit.component('parallax', Component);
|
|
498
484
|
}
|
|
499
485
|
|
|
500
486
|
return Component;
|