uikit 3.11.2-dev.31cd2ba38 → 3.11.2-dev.4274bc35b
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 +38 -28
- 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 +121 -202
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +121 -202
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +123 -208
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +123 -208
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +88 -133
- 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 +1098 -1316
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1144 -1393
- 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 +326 -358
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +324 -357
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +768 -843
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +324 -357
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +645 -793
- 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 +155 -167
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +5405 -6716
- 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 +7997 -9703
- 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 +79 -100
- package/src/js/components/countdown.js +24 -50
- 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 +37 -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 +95 -64
- 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 +52 -63
- package/src/js/core/accordion.js +53 -48
- package/src/js/core/alert.js +9 -17
- package/src/js/core/core.js +74 -53
- package/src/js/core/cover.js +11 -15
- package/src/js/core/drop.js +106 -92
- package/src/js/core/form-custom.js +20 -25
- 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 +28 -35
- package/src/js/core/icon.js +38 -50
- package/src/js/core/img.js +127 -87
- 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 +112 -88
- package/src/js/core/offcanvas.js +49 -53
- 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 +130 -91
- package/src/js/core/svg.js +68 -83
- package/src/js/core/switcher.js +47 -46
- package/src/js/core/tab.js +7 -10
- package/src/js/core/toggle.js +66 -67
- package/src/js/core/video.js +11 -22
- 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/media.js +5 -10
- package/src/js/mixin/modal.js +89 -66
- package/src/js/mixin/parallax.js +130 -106
- 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 +48 -55
- package/src/js/mixin/slideshow.js +13 -19
- 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 +20 -39
- 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 +56 -43
- package/src/js/util/dom.js +44 -80
- 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 +17 -34
- package/src/js/util/index.js +0 -1
- package/src/js/util/lang.js +82 -121
- package/src/js/util/mouse.js +19 -17
- package/src/js/util/options.js +33 -47
- 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 +52 -97
- package/src/less/components/form.less +0 -1
- package/src/less/components/leader.less +0 -1
- package/src/less/components/lightbox.less +0 -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 +0 -3
- package/src/less/components/slideshow.less +0 -3
- package/src/less/components/text.less +16 -32
- package/src/less/components/utility.less +22 -0
- package/src/scss/components/base.scss +10 -33
- package/src/scss/components/flex.scss +0 -9
- package/src/scss/components/form-range.scss +52 -97
- package/src/scss/components/form.scss +3 -4
- 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/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 +0 -3
- package/src/scss/components/slideshow.scss +0 -3
- package/src/scss/components/text.scss +16 -32
- package/src/scss/components/utility.scss +22 -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/dotnav.html +3 -3
- package/tests/image.html +296 -48
- 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 +14 -5
- 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 +47 -62
- 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 +33 -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
- package/tests/images/test.avif +0 -0
- package/tests/images/test.webp +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! UIkit 3.11.2-dev.
|
|
1
|
+
/*! UIkit 3.11.2-dev.4274bc35b | 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,462 @@
|
|
|
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
|
-
|
|
100
|
-
|
|
101
|
-
props: fillObject(keys(props), 'list'),
|
|
102
|
-
|
|
103
|
-
data: fillObject(keys(props), undefined),
|
|
104
|
-
|
|
105
|
-
computed: {
|
|
92
|
+
props: fillObject(keys(props), 'list'),
|
|
106
93
|
|
|
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
|
-
}, {});
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
},
|
|
94
|
+
data: fillObject(keys(props), undefined),
|
|
117
95
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
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());
|
|
121
101
|
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
102
|
+
return result;
|
|
103
|
+
}, {});
|
|
104
|
+
} },
|
|
125
105
|
|
|
126
|
-
reset: function() {
|
|
127
|
-
var this$1$1 = this;
|
|
128
106
|
|
|
129
|
-
|
|
130
|
-
|
|
107
|
+
events: {
|
|
108
|
+
bgimageload() {
|
|
109
|
+
this.$emit();
|
|
110
|
+
} },
|
|
131
111
|
|
|
132
|
-
getCss: function(percent) {
|
|
133
|
-
var this$1$1 = this;
|
|
134
112
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
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
|
+
return keys(this.props).reduce(
|
|
120
|
+
(css, prop) => {
|
|
121
|
+
this.props[prop](css, percent);
|
|
122
|
+
return css;
|
|
123
|
+
},
|
|
124
|
+
{ transform: '', filter: '' });
|
|
144
125
|
|
|
145
|
-
|
|
126
|
+
} } };
|
|
146
127
|
|
|
147
|
-
var unit = getUnit(steps) || {x: 'px', y: 'px', rotate: 'deg'}[prop] || '';
|
|
148
128
|
|
|
149
|
-
if (prop === 'x' || prop === 'y') {
|
|
150
|
-
prop = "translate" + (uikitUtil.ucfirst(prop));
|
|
151
|
-
}
|
|
152
129
|
|
|
153
|
-
|
|
130
|
+
function transformFn(prop, el, stops) {
|
|
131
|
+
const unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
|
|
132
|
+
let transformFn;
|
|
154
133
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
134
|
+
if (prop === 'x' || prop === 'y') {
|
|
135
|
+
prop = "translate" + uikitUtil.ucfirst(prop);
|
|
136
|
+
transformFn = (stop) => uikitUtil.toFloat(uikitUtil.toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
|
|
137
|
+
}
|
|
158
138
|
|
|
159
|
-
|
|
160
|
-
|
|
139
|
+
if (stops.length === 1) {
|
|
140
|
+
stops.unshift(prop === 'scale' ? 1 : 0);
|
|
141
|
+
}
|
|
161
142
|
|
|
162
|
-
|
|
163
|
-
value = uikitUtil.toFloat(value).toFixed(unit === 'px' ? 0 : 6);
|
|
164
|
-
}
|
|
143
|
+
stops = parseStops(stops, transformFn);
|
|
165
144
|
|
|
166
|
-
|
|
167
|
-
|
|
145
|
+
return (css, percent) => {
|
|
146
|
+
css.transform += " " + prop + "(" + getValue(stops, percent) + unit + ")";
|
|
147
|
+
};
|
|
168
148
|
}
|
|
169
149
|
|
|
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
|
-
};
|
|
150
|
+
function colorFn(prop, el, stops) {
|
|
151
|
+
if (stops.length === 1) {
|
|
152
|
+
stops.unshift(getCssValue(el, prop, ''));
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
stops = parseStops(stops, (stop) => parseColor(el, stop));
|
|
156
|
+
|
|
157
|
+
return (css, percent) => {
|
|
158
|
+
const [start, end, p] = getStop(stops, percent);
|
|
159
|
+
const value = start.
|
|
160
|
+
map((value, i) => {
|
|
161
|
+
value += p * (end[i] - value);
|
|
162
|
+
return i === 3 ? uikitUtil.toFloat(value) : parseInt(value, 10);
|
|
163
|
+
}).
|
|
164
|
+
join(',');
|
|
165
|
+
css[prop] = "rgba(" + value + ")";
|
|
166
|
+
};
|
|
190
167
|
}
|
|
191
168
|
|
|
192
169
|
function parseColor(el, color) {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
170
|
+
return getCssValue(el, 'color', color).
|
|
171
|
+
split(/[(),]/g).
|
|
172
|
+
slice(1, -1).
|
|
173
|
+
concat(1).
|
|
174
|
+
slice(0, 4).
|
|
175
|
+
map(uikitUtil.toFloat);
|
|
199
176
|
}
|
|
200
177
|
|
|
201
|
-
function filterFn(prop, el,
|
|
178
|
+
function filterFn(prop, el, stops) {
|
|
179
|
+
if (stops.length === 1) {
|
|
180
|
+
stops.unshift(0);
|
|
181
|
+
}
|
|
202
182
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
183
|
+
const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
|
|
184
|
+
prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
|
|
185
|
+
stops = parseStops(stops);
|
|
206
186
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
return function (css, percent) {
|
|
212
|
-
var value = getValue(steps, percent);
|
|
213
|
-
css.filter += " " + prop + "(" + (value + unit) + ")";
|
|
214
|
-
};
|
|
187
|
+
return (css, percent) => {
|
|
188
|
+
const value = getValue(stops, percent);
|
|
189
|
+
css.filter += " " + prop + "(" + (value + unit) + ")";
|
|
190
|
+
};
|
|
215
191
|
}
|
|
216
192
|
|
|
217
|
-
function cssPropFn(prop, el,
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
}
|
|
193
|
+
function cssPropFn(prop, el, stops) {
|
|
194
|
+
if (stops.length === 1) {
|
|
195
|
+
stops.unshift(getCssValue(el, prop, ''));
|
|
196
|
+
}
|
|
222
197
|
|
|
223
|
-
|
|
198
|
+
stops = parseStops(stops);
|
|
224
199
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
200
|
+
return (css, percent) => {
|
|
201
|
+
css[prop] = getValue(stops, percent);
|
|
202
|
+
};
|
|
228
203
|
}
|
|
229
204
|
|
|
230
|
-
function strokeFn(prop, el,
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
}
|
|
205
|
+
function strokeFn(prop, el, stops) {
|
|
206
|
+
if (stops.length === 1) {
|
|
207
|
+
stops.unshift(0);
|
|
208
|
+
}
|
|
235
209
|
|
|
236
|
-
|
|
237
|
-
|
|
210
|
+
const unit = getUnit(stops);
|
|
211
|
+
const length = getMaxPathLength(el);
|
|
212
|
+
stops = parseStops(stops.reverse(), (stop) => {
|
|
213
|
+
stop = uikitUtil.toFloat(stop);
|
|
214
|
+
return unit === '%' ? stop * length / 100 : stop;
|
|
215
|
+
});
|
|
238
216
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
var length = getMaxPathLength(el);
|
|
244
|
-
uikitUtil.css(el, 'strokeDasharray', length);
|
|
245
|
-
|
|
246
|
-
if (unit === '%') {
|
|
247
|
-
steps = steps.map(function (step) { return step * length / 100; });
|
|
248
|
-
}
|
|
217
|
+
if (!stops.some((_ref) => {let [value] = _ref;return value;})) {
|
|
218
|
+
return uikitUtil.noop;
|
|
219
|
+
}
|
|
249
220
|
|
|
250
|
-
|
|
221
|
+
uikitUtil.css(el, 'strokeDasharray', length);
|
|
251
222
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
223
|
+
return (css, percent) => {
|
|
224
|
+
css.strokeDashoffset = getValue(stops, percent);
|
|
225
|
+
};
|
|
255
226
|
}
|
|
256
227
|
|
|
257
|
-
function backgroundFn(prop, el,
|
|
228
|
+
function backgroundFn(prop, el, stops) {
|
|
229
|
+
if (stops.length === 1) {
|
|
230
|
+
stops.unshift(0);
|
|
231
|
+
}
|
|
258
232
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
prop = prop.substr(-1);
|
|
264
|
-
var attr = prop === 'y' ? 'height' : 'width';
|
|
265
|
-
steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, el); });
|
|
233
|
+
prop = prop.substr(-1);
|
|
234
|
+
const attr = prop === 'y' ? 'height' : 'width';
|
|
235
|
+
stops = parseStops(stops, (stop) => uikitUtil.toPx(stop, attr, el));
|
|
266
236
|
|
|
267
|
-
|
|
268
|
-
var bgPos = uikitUtil.css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
|
|
237
|
+
const bgPos = getCssValue(el, "background-position-" + prop, '');
|
|
269
238
|
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
239
|
+
return getCssValue(el, 'backgroundSize', '') === 'cover' ?
|
|
240
|
+
backgroundCoverFn(prop, el, stops, bgPos, attr) :
|
|
241
|
+
setBackgroundPosFn(prop, stops, bgPos);
|
|
273
242
|
}
|
|
274
243
|
|
|
275
|
-
function backgroundCoverFn(prop, el,
|
|
244
|
+
function backgroundCoverFn(prop, el, stops, bgPos, attr) {
|
|
245
|
+
const dimImage = getBackgroundImageDimensions(el);
|
|
276
246
|
|
|
277
|
-
|
|
247
|
+
if (!dimImage.width) {
|
|
248
|
+
return uikitUtil.noop;
|
|
249
|
+
}
|
|
278
250
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
251
|
+
const values = stops.map((_ref2) => {let [value] = _ref2;return value;});
|
|
252
|
+
const min = Math.min(...values);
|
|
253
|
+
const max = Math.max(...values);
|
|
254
|
+
const down = values.indexOf(min) < values.indexOf(max);
|
|
282
255
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
var down = steps.indexOf(min) < steps.indexOf(max);
|
|
256
|
+
const diff = max - min;
|
|
257
|
+
let pos = (down ? -diff : 0) - (down ? min : max);
|
|
286
258
|
|
|
287
|
-
|
|
288
|
-
|
|
259
|
+
const dimEl = {
|
|
260
|
+
width: el.offsetWidth,
|
|
261
|
+
height: el.offsetHeight };
|
|
289
262
|
|
|
290
|
-
var dimEl = {
|
|
291
|
-
width: el.offsetWidth,
|
|
292
|
-
height: el.offsetHeight
|
|
293
|
-
};
|
|
294
263
|
|
|
295
|
-
|
|
296
|
-
|
|
264
|
+
const baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
|
|
265
|
+
const span = baseDim[attr] - dimEl[attr];
|
|
297
266
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
267
|
+
if (span < diff) {
|
|
268
|
+
dimEl[attr] = baseDim[attr] + diff - span;
|
|
269
|
+
} else if (span > diff) {
|
|
270
|
+
const posPercentage = dimEl[attr] / uikitUtil.toPx(bgPos, attr, el, true);
|
|
301
271
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
if (posPercentage) {
|
|
305
|
-
pos -= (span - diff) / posPercentage;
|
|
306
|
-
}
|
|
272
|
+
if (posPercentage) {
|
|
273
|
+
pos -= (span - diff) / posPercentage;
|
|
307
274
|
}
|
|
275
|
+
}
|
|
308
276
|
|
|
309
|
-
|
|
277
|
+
const dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
|
|
310
278
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
279
|
+
const fn = setBackgroundPosFn(prop, stops, pos + "px");
|
|
280
|
+
return (css, percent) => {
|
|
281
|
+
fn(css, percent);
|
|
282
|
+
css.backgroundSize = dim.width + "px " + dim.height + "px";
|
|
283
|
+
css.backgroundRepeat = 'no-repeat';
|
|
284
|
+
};
|
|
317
285
|
}
|
|
318
286
|
|
|
319
|
-
function setBackgroundPosFn(prop,
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
287
|
+
function setBackgroundPosFn(prop, stops, pos) {
|
|
288
|
+
return function (css, percent) {
|
|
289
|
+
css["background-position-" + prop] = "calc(" + pos + " + " + getValue(stops, percent) + "px)";
|
|
290
|
+
};
|
|
323
291
|
}
|
|
324
292
|
|
|
325
|
-
|
|
293
|
+
const dimensions = {};
|
|
326
294
|
function getBackgroundImageDimensions(el) {
|
|
327
|
-
|
|
295
|
+
const src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
|
|
328
296
|
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
297
|
+
if (dimensions[src]) {
|
|
298
|
+
return dimensions[src];
|
|
299
|
+
}
|
|
332
300
|
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
301
|
+
const image = new Image();
|
|
302
|
+
if (src) {
|
|
303
|
+
image.src = src;
|
|
336
304
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
}
|
|
305
|
+
if (!image.naturalWidth) {
|
|
306
|
+
image.onload = () => {
|
|
307
|
+
dimensions[src] = toDimensions(image);
|
|
308
|
+
uikitUtil.trigger(el, 'bgimageload');
|
|
309
|
+
};
|
|
343
310
|
}
|
|
311
|
+
}
|
|
344
312
|
|
|
345
|
-
|
|
313
|
+
return dimensions[src] = toDimensions(image);
|
|
346
314
|
}
|
|
347
315
|
|
|
348
316
|
function toDimensions(image) {
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
317
|
+
return {
|
|
318
|
+
width: image.naturalWidth,
|
|
319
|
+
height: image.naturalHeight };
|
|
320
|
+
|
|
353
321
|
}
|
|
354
322
|
|
|
355
|
-
function
|
|
356
|
-
|
|
357
|
-
|
|
323
|
+
function parseStops(stops, fn) {if (fn === void 0) {fn = uikitUtil.toFloat;}
|
|
324
|
+
const result = [];
|
|
325
|
+
for (const stop of stops) {
|
|
326
|
+
const [value, percent] = uikitUtil.isString(stop) ? stop.trim().split(' ') : [stop];
|
|
327
|
+
result.push([fn(value), percent ? uikitUtil.toFloat(percent) / 100 : null]);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
const { length } = result;
|
|
331
|
+
result[0][1] = 0;
|
|
332
|
+
result[length - 1][1] = 1;
|
|
333
|
+
for (let i = 1; i < length - 1; i++) {
|
|
334
|
+
if (result[i] === null) {
|
|
335
|
+
const nextIndex = uikitUtil.findIndex(result.slice(i + 1), (_ref3) => {let [, percent] = _ref3;return percent !== null;}) + 1;
|
|
336
|
+
const percent = (result[i + nextIndex] - result[i - 1][1]) / (nextIndex + 1);
|
|
337
|
+
for (let j = 0; j < nextIndex; j++) {
|
|
338
|
+
result[i + j][1] = percent * j + 1;
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
}
|
|
358
342
|
|
|
359
|
-
|
|
360
|
-
.slice(index, index + 2)
|
|
361
|
-
.concat(percent === 1 ? 1 : percent % (1 / count) * count);
|
|
343
|
+
return result;
|
|
362
344
|
}
|
|
363
345
|
|
|
364
|
-
function
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
: +end;
|
|
346
|
+
function getStop(stops, percent) {
|
|
347
|
+
const index = uikitUtil.findIndex(stops.slice(1), (_ref4) => {let [, targetPercent] = _ref4;return percent <= targetPercent;}) + 1;
|
|
348
|
+
return [
|
|
349
|
+
stops[index - 1][0],
|
|
350
|
+
stops[index][0],
|
|
351
|
+
(percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])];
|
|
352
|
+
|
|
372
353
|
}
|
|
373
354
|
|
|
374
|
-
function
|
|
375
|
-
|
|
355
|
+
function getValue(stops, percent) {
|
|
356
|
+
const [start, end, p] = getStop(stops, percent);
|
|
357
|
+
return uikitUtil.isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
const unitRe = /^[\d-]+([^\s]+)/;
|
|
361
|
+
function getUnit(stops, defaultUnit) {
|
|
362
|
+
for (const stop of stops) {
|
|
363
|
+
const match = stop.match == null ? void 0 : stop.match(unitRe);
|
|
364
|
+
if (match) {
|
|
365
|
+
return match[1];
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
return defaultUnit;
|
|
376
369
|
}
|
|
377
370
|
|
|
378
371
|
function getCssValue(el, prop, value) {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
372
|
+
const prev = el.style[prop];
|
|
373
|
+
const val = uikitUtil.css(uikitUtil.css(el, prop, value), prop);
|
|
374
|
+
el.style[prop] = prev;
|
|
375
|
+
return val;
|
|
383
376
|
}
|
|
384
377
|
|
|
385
378
|
function fillObject(keys, value) {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
379
|
+
return keys.reduce((data, prop) => {
|
|
380
|
+
data[prop] = value;
|
|
381
|
+
return data;
|
|
382
|
+
}, {});
|
|
390
383
|
}
|
|
391
384
|
|
|
392
385
|
var Component = {
|
|
386
|
+
mixins: [Parallax],
|
|
393
387
|
|
|
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
|
-
},
|
|
411
|
-
|
|
412
|
-
computed: {
|
|
388
|
+
props: {
|
|
389
|
+
target: String,
|
|
390
|
+
viewport: Number, // Deprecated
|
|
391
|
+
easing: Number,
|
|
392
|
+
start: String,
|
|
393
|
+
end: String },
|
|
413
394
|
|
|
414
|
-
target: function(ref, $el) {
|
|
415
|
-
var target = ref.target;
|
|
416
395
|
|
|
417
|
-
|
|
418
|
-
|
|
396
|
+
data: {
|
|
397
|
+
target: false,
|
|
398
|
+
viewport: 1,
|
|
399
|
+
easing: 1,
|
|
400
|
+
start: 0,
|
|
401
|
+
end: 0 },
|
|
419
402
|
|
|
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
403
|
|
|
404
|
+
computed: {
|
|
405
|
+
target(_ref, $el) {let { target } = _ref;
|
|
406
|
+
return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
|
|
438
407
|
},
|
|
439
408
|
|
|
440
|
-
|
|
409
|
+
start(_ref2) {let { start } = _ref2;
|
|
410
|
+
return uikitUtil.toPx(start, 'height', this.target, true);
|
|
411
|
+
},
|
|
441
412
|
|
|
442
|
-
|
|
443
|
-
|
|
413
|
+
end(_ref3) {let { end, viewport } = _ref3;
|
|
414
|
+
return uikitUtil.toPx(
|
|
415
|
+
end || (viewport = (1 - viewport) * 100) && viewport + "vh+" + viewport + "%",
|
|
416
|
+
'height',
|
|
417
|
+
this.target,
|
|
418
|
+
true);
|
|
444
419
|
|
|
420
|
+
} },
|
|
445
421
|
|
|
446
|
-
if (!types.has('scroll')) {
|
|
447
|
-
percent = false;
|
|
448
|
-
}
|
|
449
422
|
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
423
|
+
update: {
|
|
424
|
+
read(_ref4, types) {let { percent } = _ref4;
|
|
425
|
+
if (!types.has('scroll')) {
|
|
426
|
+
percent = false;
|
|
427
|
+
}
|
|
453
428
|
|
|
454
|
-
|
|
455
|
-
|
|
429
|
+
if (!this.matchMedia) {
|
|
430
|
+
return;
|
|
431
|
+
}
|
|
456
432
|
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
style: prev === percent ? false : this.getCss(percent)
|
|
460
|
-
};
|
|
461
|
-
},
|
|
433
|
+
const prev = percent;
|
|
434
|
+
percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
|
|
462
435
|
|
|
463
|
-
|
|
464
|
-
|
|
436
|
+
return {
|
|
437
|
+
percent,
|
|
438
|
+
style: prev === percent ? false : this.getCss(percent) };
|
|
465
439
|
|
|
440
|
+
},
|
|
466
441
|
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
442
|
+
write(_ref5) {let { style } = _ref5;
|
|
443
|
+
if (!this.matchMedia) {
|
|
444
|
+
this.reset();
|
|
445
|
+
return;
|
|
446
|
+
}
|
|
471
447
|
|
|
472
|
-
|
|
448
|
+
style && uikitUtil.css(this.$el, style);
|
|
449
|
+
},
|
|
473
450
|
|
|
474
|
-
|
|
451
|
+
events: ['scroll', 'resize'] } };
|
|
475
452
|
|
|
476
|
-
events: ['scroll', 'resize']
|
|
477
|
-
}
|
|
478
453
|
|
|
479
|
-
};
|
|
480
454
|
|
|
481
455
|
function ease(percent, easing) {
|
|
482
|
-
|
|
483
|
-
? Math.pow(percent, easing + 1)
|
|
484
|
-
: 1 - Math.pow(1 - percent, -easing + 1);
|
|
456
|
+
return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
|
|
485
457
|
}
|
|
486
458
|
|
|
487
459
|
// SVG elements do not inherit from HTMLElement
|
|
488
460
|
function getOffsetElement(el) {
|
|
489
|
-
|
|
490
|
-
? 'offsetTop' in el
|
|
491
|
-
? el
|
|
492
|
-
: getOffsetElement(uikitUtil.parent(el))
|
|
493
|
-
: document.documentElement;
|
|
461
|
+
return el ? 'offsetTop' in el ? el : getOffsetElement(uikitUtil.parent(el)) : document.documentElement;
|
|
494
462
|
}
|
|
495
463
|
|
|
496
464
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
497
|
-
|
|
465
|
+
window.UIkit.component('parallax', Component);
|
|
498
466
|
}
|
|
499
467
|
|
|
500
468
|
return Component;
|