uikit 3.11.2-dev.4c11be04b → 3.11.2-dev.64133b093
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 +56 -17
- 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 +127 -201
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +127 -201
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +129 -207
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +129 -207
- 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 +345 -369
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +343 -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 +343 -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 -621
- 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 +5423 -6687
- 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 +7999 -9651
- 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 +21 -46
- 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 +126 -108
- 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 +107 -93
- 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 +31 -35
- package/src/js/core/icon.js +47 -52
- package/src/js/core/img.js +156 -138
- 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 +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 +197 -132
- 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 +149 -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 +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 +78 -49
- package/src/js/util/dom.js +39 -66
- package/src/js/util/env.js +7 -12
- package/src/js/util/event.js +60 -59
- package/src/js/util/fastdom.js +3 -8
- 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 +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 +81 -66
- 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/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 +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/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 -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 +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 +86 -98
- package/tests/sticky.html +56 -24
- 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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! UIkit 3.11.2-dev.
|
|
1
|
+
/*! UIkit 3.11.2-dev.64133b093 | 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,505 +7,481 @@
|
|
|
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: {
|
|
106
|
-
|
|
107
|
-
props: function(properties, $el) {
|
|
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
|
-
}
|
|
92
|
+
props: fillObject(keys(props), 'list'),
|
|
115
93
|
|
|
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
|
-
|
|
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
112
|
|
|
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
|
-
|
|
206
|
-
|
|
207
|
-
var unit = getUnit(steps) || {blur: 'px', hue: 'deg'}[prop] || '%';
|
|
208
|
-
prop = {fopacity: 'opacity', hue: 'hue-rotate'}[prop] || prop;
|
|
209
|
-
steps = steps.map(uikitUtil.toFloat);
|
|
183
|
+
const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
|
|
184
|
+
prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
|
|
185
|
+
stops = parseStops(stops);
|
|
210
186
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
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,
|
|
193
|
+
function cssPropFn(prop, el, stops) {
|
|
194
|
+
if (stops.length === 1) {
|
|
195
|
+
stops.unshift(getCssValue(el, prop, ''));
|
|
196
|
+
}
|
|
218
197
|
|
|
219
|
-
|
|
220
|
-
steps.unshift(getCssValue(el, prop, ''));
|
|
221
|
-
}
|
|
198
|
+
stops = parseStops(stops);
|
|
222
199
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
css[prop] = getValue(steps, percent);
|
|
227
|
-
};
|
|
200
|
+
return (css, percent) => {
|
|
201
|
+
css[prop] = getValue(stops, percent);
|
|
202
|
+
};
|
|
228
203
|
}
|
|
229
204
|
|
|
230
|
-
function strokeFn(prop, el,
|
|
205
|
+
function strokeFn(prop, el, stops) {
|
|
206
|
+
if (stops.length === 1) {
|
|
207
|
+
stops.unshift(0);
|
|
208
|
+
}
|
|
231
209
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
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
|
+
});
|
|
235
216
|
|
|
236
|
-
|
|
237
|
-
|
|
217
|
+
if (!stops.some((_ref) => {let [value] = _ref;return value;})) {
|
|
218
|
+
return uikitUtil.noop;
|
|
219
|
+
}
|
|
238
220
|
|
|
239
|
-
|
|
240
|
-
return uikitUtil.noop;
|
|
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
|
-
}
|
|
249
|
-
|
|
250
|
-
steps = steps.reverse();
|
|
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
|
+
const { length } = stops;
|
|
326
|
+
let nullIndex = 0;
|
|
327
|
+
for (let i = 0; i < length; i++) {
|
|
328
|
+
let [value, percent] = uikitUtil.isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
|
|
329
|
+
value = fn(value);
|
|
330
|
+
percent = percent ? uikitUtil.toFloat(percent) / 100 : null;
|
|
331
|
+
|
|
332
|
+
if (i === 0) {
|
|
333
|
+
if (percent === null) {
|
|
334
|
+
percent = 0;
|
|
335
|
+
} else if (percent) {
|
|
336
|
+
result.push([value, 0]);
|
|
337
|
+
}
|
|
338
|
+
} else if (i === length - 1) {
|
|
339
|
+
if (percent === null) {
|
|
340
|
+
percent = 1;
|
|
341
|
+
} else if (percent !== 1) {
|
|
342
|
+
result.push([value, percent]);
|
|
343
|
+
percent = 1;
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
result.push([value, percent]);
|
|
358
348
|
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
349
|
+
if (percent === null) {
|
|
350
|
+
nullIndex++;
|
|
351
|
+
} else if (nullIndex) {
|
|
352
|
+
const leftPercent = result[i - nullIndex - 1][1];
|
|
353
|
+
const p = (percent - leftPercent) / (nullIndex + 1);
|
|
354
|
+
for (let j = nullIndex; j > 0; j--) {
|
|
355
|
+
result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
nullIndex = 0;
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
return result;
|
|
362
363
|
}
|
|
363
364
|
|
|
364
|
-
function
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
: +end;
|
|
365
|
+
function getStop(stops, percent) {
|
|
366
|
+
const index = uikitUtil.findIndex(stops.slice(1), (_ref3) => {let [, targetPercent] = _ref3;return percent <= targetPercent;}) + 1;
|
|
367
|
+
return [
|
|
368
|
+
stops[index - 1][0],
|
|
369
|
+
stops[index][0],
|
|
370
|
+
(percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])];
|
|
371
|
+
|
|
372
372
|
}
|
|
373
373
|
|
|
374
|
-
function
|
|
375
|
-
|
|
374
|
+
function getValue(stops, percent) {
|
|
375
|
+
const [start, end, p] = getStop(stops, percent);
|
|
376
|
+
return uikitUtil.isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
const unitRe = /^-?\d+([^\s]*)/;
|
|
380
|
+
function getUnit(stops, defaultUnit) {
|
|
381
|
+
for (const stop of stops) {
|
|
382
|
+
const match = stop.match == null ? void 0 : stop.match(unitRe);
|
|
383
|
+
if (match) {
|
|
384
|
+
return match[1];
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
return defaultUnit;
|
|
376
388
|
}
|
|
377
389
|
|
|
378
390
|
function getCssValue(el, prop, value) {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
391
|
+
const prev = el.style[prop];
|
|
392
|
+
const val = uikitUtil.css(uikitUtil.css(el, prop, value), prop);
|
|
393
|
+
el.style[prop] = prev;
|
|
394
|
+
return val;
|
|
383
395
|
}
|
|
384
396
|
|
|
385
397
|
function fillObject(keys, value) {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
398
|
+
return keys.reduce((data, prop) => {
|
|
399
|
+
data[prop] = value;
|
|
400
|
+
return data;
|
|
401
|
+
}, {});
|
|
390
402
|
}
|
|
391
403
|
|
|
392
404
|
var Component = {
|
|
405
|
+
mixins: [Parallax],
|
|
393
406
|
|
|
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: {
|
|
413
|
-
|
|
414
|
-
target: function(ref, $el) {
|
|
415
|
-
var target = ref.target;
|
|
407
|
+
props: {
|
|
408
|
+
target: String,
|
|
409
|
+
viewport: Number, // Deprecated
|
|
410
|
+
easing: Number,
|
|
411
|
+
start: String,
|
|
412
|
+
end: String },
|
|
416
413
|
|
|
417
|
-
return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
|
|
418
|
-
},
|
|
419
414
|
|
|
420
|
-
|
|
421
|
-
|
|
415
|
+
data: {
|
|
416
|
+
target: false,
|
|
417
|
+
viewport: 1,
|
|
418
|
+
easing: 1,
|
|
419
|
+
start: 0,
|
|
420
|
+
end: 0 },
|
|
422
421
|
|
|
423
|
-
return parseCalc(start, this.target);
|
|
424
|
-
},
|
|
425
|
-
|
|
426
|
-
end: function(ref) {
|
|
427
|
-
var end = ref.end;
|
|
428
|
-
var viewport = ref.viewport;
|
|
429
|
-
|
|
430
|
-
return parseCalc(
|
|
431
|
-
end || (viewport = (1 - viewport) * 100) && (viewport + "vh+" + viewport + "%"),
|
|
432
|
-
this.target
|
|
433
|
-
);
|
|
434
|
-
}
|
|
435
422
|
|
|
423
|
+
computed: {
|
|
424
|
+
target(_ref, $el) {let { target } = _ref;
|
|
425
|
+
return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
|
|
436
426
|
},
|
|
437
427
|
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
var percent = ref.percent;
|
|
442
|
-
|
|
428
|
+
start(_ref2) {let { start } = _ref2;
|
|
429
|
+
return uikitUtil.toPx(start, 'height', this.target, true);
|
|
430
|
+
},
|
|
443
431
|
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
432
|
+
end(_ref3) {let { end, viewport } = _ref3;
|
|
433
|
+
return uikitUtil.toPx(
|
|
434
|
+
end || (viewport = (1 - viewport) * 100) && viewport + "vh+" + viewport + "%",
|
|
435
|
+
'height',
|
|
436
|
+
this.target,
|
|
437
|
+
true);
|
|
447
438
|
|
|
448
|
-
|
|
449
|
-
return;
|
|
450
|
-
}
|
|
439
|
+
} },
|
|
451
440
|
|
|
452
|
-
var prev = percent;
|
|
453
|
-
percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
|
|
454
441
|
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
442
|
+
update: {
|
|
443
|
+
read(_ref4, types) {let { percent } = _ref4;
|
|
444
|
+
if (!types.has('scroll')) {
|
|
445
|
+
percent = false;
|
|
446
|
+
}
|
|
460
447
|
|
|
461
|
-
|
|
462
|
-
|
|
448
|
+
if (!this.matchMedia) {
|
|
449
|
+
return;
|
|
450
|
+
}
|
|
463
451
|
|
|
452
|
+
const prev = percent;
|
|
453
|
+
percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
|
|
464
454
|
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
}
|
|
455
|
+
return {
|
|
456
|
+
percent,
|
|
457
|
+
style: prev === percent ? false : this.getCss(percent) };
|
|
469
458
|
|
|
470
|
-
|
|
459
|
+
},
|
|
471
460
|
|
|
472
|
-
|
|
461
|
+
write(_ref5) {let { style } = _ref5;
|
|
462
|
+
if (!this.matchMedia) {
|
|
463
|
+
this.reset();
|
|
464
|
+
return;
|
|
465
|
+
}
|
|
473
466
|
|
|
474
|
-
|
|
475
|
-
}
|
|
467
|
+
style && uikitUtil.css(this.$el, style);
|
|
468
|
+
},
|
|
476
469
|
|
|
477
|
-
|
|
470
|
+
events: ['scroll', 'resize'] } };
|
|
478
471
|
|
|
479
|
-
var calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
|
|
480
|
-
function parseCalc(calc, el) {
|
|
481
|
-
var match;
|
|
482
|
-
var result = 0;
|
|
483
|
-
calc = calc.toString().replace(/\s/g, '');
|
|
484
|
-
calcRe.lastIndex = 0;
|
|
485
|
-
while ((match = calcRe.exec(calc)) !== null) {
|
|
486
|
-
result += uikitUtil.toPx(match[0], 'height', el, true);
|
|
487
|
-
}
|
|
488
472
|
|
|
489
|
-
return result;
|
|
490
|
-
}
|
|
491
473
|
|
|
492
474
|
function ease(percent, easing) {
|
|
493
|
-
|
|
494
|
-
? Math.pow(percent, easing + 1)
|
|
495
|
-
: 1 - Math.pow(1 - percent, -easing + 1);
|
|
475
|
+
return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
|
|
496
476
|
}
|
|
497
477
|
|
|
498
478
|
// SVG elements do not inherit from HTMLElement
|
|
499
479
|
function getOffsetElement(el) {
|
|
500
|
-
|
|
501
|
-
? 'offsetTop' in el
|
|
502
|
-
? el
|
|
503
|
-
: getOffsetElement(uikitUtil.parent(el))
|
|
504
|
-
: document.documentElement;
|
|
480
|
+
return el ? 'offsetTop' in el ? el : getOffsetElement(uikitUtil.parent(el)) : document.documentElement;
|
|
505
481
|
}
|
|
506
482
|
|
|
507
483
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
508
|
-
|
|
484
|
+
window.UIkit.component('parallax', Component);
|
|
509
485
|
}
|
|
510
486
|
|
|
511
487
|
return Component;
|