uikit 3.11.2-dev.c2430c233 → 3.11.2-dev.cfa6c7d5c
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 +41 -18
- 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 +86 -185
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +86 -185
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +88 -191
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +88 -191
- 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 +344 -359
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +342 -358
- 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 +342 -358
- 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 +5273 -6604
- 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 +7995 -9704
- 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 +65 -82
- 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 +30 -34
- 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 +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 +161 -128
- 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 +146 -105
- 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 +58 -45
- 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 +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 +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/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/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/scss/components/base.scss +10 -33
- package/src/scss/components/form-range.scss +48 -95
- package/src/scss/components/form.scss +0 -1
- package/src/scss/components/height.scss +3 -0
- 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/progress.scss +14 -36
- 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/mixins-theme.scss +1 -1
- package/src/scss/mixins.scss +1 -1
- package/src/scss/variables-theme.scss +3 -3
- package/src/scss/variables.scss +3 -3
- 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 +55 -70
- 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.cfa6c7d5c | 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,479 @@
|
|
|
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
|
-
|
|
125
|
-
|
|
126
|
-
reset: function() {
|
|
127
|
-
var this$1$1 = this;
|
|
102
|
+
return result;
|
|
103
|
+
}, {});
|
|
104
|
+
} },
|
|
128
105
|
|
|
129
|
-
uikitUtil.each(this.getCss(0), function (_, prop) { return uikitUtil.css(this$1$1.$el, prop, ''); });
|
|
130
|
-
},
|
|
131
106
|
|
|
132
|
-
|
|
133
|
-
|
|
107
|
+
events: {
|
|
108
|
+
bgimageload() {
|
|
109
|
+
this.$emit();
|
|
110
|
+
} },
|
|
134
111
|
|
|
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
|
+
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
|
-
}
|
|
222
|
-
|
|
223
|
-
steps = steps.map(uikitUtil.toFloat);
|
|
196
|
+
stops = parseStops(stops);
|
|
224
197
|
|
|
225
|
-
|
|
226
|
-
|
|
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);
|
|
203
|
+
function strokeFn(prop, el, stops) {
|
|
204
|
+
if (stops.length === 1) {
|
|
205
|
+
stops.unshift(0);
|
|
206
|
+
}
|
|
238
207
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
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,
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
}
|
|
226
|
+
function backgroundFn(prop, el, stops) {
|
|
227
|
+
if (stops.length === 1) {
|
|
228
|
+
stops.unshift(0);
|
|
229
|
+
}
|
|
262
230
|
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
231
|
+
prop = prop.substr(-1);
|
|
232
|
+
const attr = prop === 'y' ? 'height' : 'width';
|
|
233
|
+
stops = parseStops(stops, (stop) => uikitUtil.toPx(stop, attr, el));
|
|
266
234
|
|
|
267
|
-
|
|
268
|
-
var bgPos = uikitUtil.css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
|
|
235
|
+
const bgPos = getCssValue(el, "background-position-" + prop, '');
|
|
269
236
|
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
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
|
-
|
|
282
|
-
|
|
283
|
-
var min = Math.min.apply(Math, steps);
|
|
284
|
-
var max = Math.max.apply(Math, steps);
|
|
285
|
-
var down = steps.indexOf(min) < steps.indexOf(max);
|
|
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);
|
|
286
253
|
|
|
287
|
-
|
|
288
|
-
|
|
254
|
+
const diff = max - min;
|
|
255
|
+
let pos = (down ? -diff : 0) - (down ? min : max);
|
|
289
256
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
};
|
|
257
|
+
const dimEl = {
|
|
258
|
+
width: el.offsetWidth,
|
|
259
|
+
height: el.offsetHeight };
|
|
294
260
|
|
|
295
|
-
var baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
|
|
296
|
-
var span = baseDim[attr] - dimEl[attr];
|
|
297
261
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
} else if (span > diff) {
|
|
262
|
+
const baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
|
|
263
|
+
const span = baseDim[attr] - dimEl[attr];
|
|
301
264
|
|
|
302
|
-
|
|
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);
|
|
303
269
|
|
|
304
|
-
|
|
305
|
-
|
|
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
|
-
|
|
293
|
+
const src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
|
|
328
294
|
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
295
|
+
if (dimensions[src]) {
|
|
296
|
+
return dimensions[src];
|
|
297
|
+
}
|
|
332
298
|
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
299
|
+
const image = new Image();
|
|
300
|
+
if (src) {
|
|
301
|
+
image.src = src;
|
|
336
302
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
}
|
|
303
|
+
if (!image.naturalWidth) {
|
|
304
|
+
image.onload = () => {
|
|
305
|
+
dimensions[src] = toDimensions(image);
|
|
306
|
+
uikitUtil.trigger(el, 'bgimageload');
|
|
307
|
+
};
|
|
343
308
|
}
|
|
309
|
+
}
|
|
344
310
|
|
|
345
|
-
|
|
311
|
+
return dimensions[src] = toDimensions(image);
|
|
346
312
|
}
|
|
347
313
|
|
|
348
314
|
function toDimensions(image) {
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
315
|
+
return {
|
|
316
|
+
width: image.naturalWidth,
|
|
317
|
+
height: image.naturalHeight };
|
|
318
|
+
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
function parseStops(stops, fn) {if (fn === void 0) {fn = uikitUtil.toFloat;}
|
|
322
|
+
const result = [];
|
|
323
|
+
const { length } = stops;
|
|
324
|
+
let nullIndex = 0;
|
|
325
|
+
for (let i = 0; i < length; i++) {
|
|
326
|
+
let [value, percent] = uikitUtil.isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
|
|
327
|
+
value = fn(value);
|
|
328
|
+
percent = percent ? uikitUtil.toFloat(percent) / 100 : null;
|
|
329
|
+
|
|
330
|
+
if (i === 0) {
|
|
331
|
+
if (percent === null) {
|
|
332
|
+
percent = 0;
|
|
333
|
+
} else if (percent) {
|
|
334
|
+
result.push([value, 0]);
|
|
335
|
+
}
|
|
336
|
+
} else if (i === length - 1) {
|
|
337
|
+
if (percent === null) {
|
|
338
|
+
percent = 1;
|
|
339
|
+
} else if (percent !== 1) {
|
|
340
|
+
result.push([value, percent]);
|
|
341
|
+
percent = 1;
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
result.push([value, percent]);
|
|
346
|
+
|
|
347
|
+
if (percent === null) {
|
|
348
|
+
nullIndex++;
|
|
349
|
+
} else if (nullIndex) {
|
|
350
|
+
const leftPercent = result[i - nullIndex - 1][1];
|
|
351
|
+
const p = (percent - leftPercent) / (nullIndex + 1);
|
|
352
|
+
for (let j = nullIndex; j > 0; j--) {
|
|
353
|
+
result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
nullIndex = 0;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
return result;
|
|
353
361
|
}
|
|
354
362
|
|
|
355
|
-
function
|
|
356
|
-
|
|
357
|
-
|
|
363
|
+
function getStop(stops, percent) {
|
|
364
|
+
const index = uikitUtil.findIndex(stops.slice(1), (_ref3) => {let [, targetPercent] = _ref3;return percent <= targetPercent;}) + 1;
|
|
365
|
+
return [
|
|
366
|
+
stops[index - 1][0],
|
|
367
|
+
stops[index][0],
|
|
368
|
+
(percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])];
|
|
358
369
|
|
|
359
|
-
return steps
|
|
360
|
-
.slice(index, index + 2)
|
|
361
|
-
.concat(percent === 1 ? 1 : percent % (1 / count) * count);
|
|
362
370
|
}
|
|
363
371
|
|
|
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;
|
|
372
|
+
function getValue(stops, percent) {
|
|
373
|
+
const [start, end, p] = getStop(stops, percent);
|
|
374
|
+
return uikitUtil.isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
|
|
372
375
|
}
|
|
373
376
|
|
|
374
|
-
|
|
375
|
-
|
|
377
|
+
const unitRe = /^-?\d+([^\s]*)/;
|
|
378
|
+
function getUnit(stops, defaultUnit) {
|
|
379
|
+
for (const stop of stops) {
|
|
380
|
+
const match = stop.match == null ? void 0 : stop.match(unitRe);
|
|
381
|
+
if (match) {
|
|
382
|
+
return match[1];
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
return defaultUnit;
|
|
376
386
|
}
|
|
377
387
|
|
|
378
388
|
function getCssValue(el, prop, value) {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
389
|
+
const prev = el.style[prop];
|
|
390
|
+
const val = uikitUtil.css(uikitUtil.css(el, prop, value), prop);
|
|
391
|
+
el.style[prop] = prev;
|
|
392
|
+
return val;
|
|
383
393
|
}
|
|
384
394
|
|
|
385
395
|
function fillObject(keys, value) {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
396
|
+
return keys.reduce((data, prop) => {
|
|
397
|
+
data[prop] = value;
|
|
398
|
+
return data;
|
|
399
|
+
}, {});
|
|
390
400
|
}
|
|
391
401
|
|
|
392
402
|
var Component = {
|
|
403
|
+
mixins: [Parallax],
|
|
393
404
|
|
|
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
|
-
},
|
|
405
|
+
props: {
|
|
406
|
+
target: String,
|
|
407
|
+
viewport: Number, // Deprecated
|
|
408
|
+
easing: Number,
|
|
409
|
+
start: String,
|
|
410
|
+
end: String },
|
|
411
411
|
|
|
412
|
-
computed: {
|
|
413
412
|
|
|
414
|
-
|
|
415
|
-
|
|
413
|
+
data: {
|
|
414
|
+
target: false,
|
|
415
|
+
viewport: 1,
|
|
416
|
+
easing: 1,
|
|
417
|
+
start: 0,
|
|
418
|
+
end: 0 },
|
|
416
419
|
|
|
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
420
|
|
|
421
|
+
computed: {
|
|
422
|
+
target(_ref, $el) {let { target } = _ref;
|
|
423
|
+
return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
|
|
438
424
|
},
|
|
439
425
|
|
|
440
|
-
|
|
426
|
+
start(_ref2) {let { start } = _ref2;
|
|
427
|
+
return uikitUtil.toPx(start, 'height', this.target, true);
|
|
428
|
+
},
|
|
441
429
|
|
|
442
|
-
|
|
443
|
-
|
|
430
|
+
end(_ref3) {let { end, viewport } = _ref3;
|
|
431
|
+
return uikitUtil.toPx(
|
|
432
|
+
end || (viewport = (1 - viewport) * 100) && viewport + "vh+" + viewport + "%",
|
|
433
|
+
'height',
|
|
434
|
+
this.target,
|
|
435
|
+
true);
|
|
444
436
|
|
|
437
|
+
} },
|
|
445
438
|
|
|
446
|
-
if (!types.has('scroll')) {
|
|
447
|
-
percent = false;
|
|
448
|
-
}
|
|
449
439
|
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
440
|
+
update: {
|
|
441
|
+
read(_ref4, types) {let { percent } = _ref4;
|
|
442
|
+
if (!types.has('scroll')) {
|
|
443
|
+
percent = false;
|
|
444
|
+
}
|
|
453
445
|
|
|
454
|
-
|
|
455
|
-
|
|
446
|
+
if (!this.matchMedia) {
|
|
447
|
+
return;
|
|
448
|
+
}
|
|
456
449
|
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
style: prev === percent ? false : this.getCss(percent)
|
|
460
|
-
};
|
|
461
|
-
},
|
|
450
|
+
const prev = percent;
|
|
451
|
+
percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
|
|
462
452
|
|
|
463
|
-
|
|
464
|
-
|
|
453
|
+
return {
|
|
454
|
+
percent,
|
|
455
|
+
style: prev === percent ? false : this.getCss(percent) };
|
|
465
456
|
|
|
457
|
+
},
|
|
466
458
|
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
459
|
+
write(_ref5) {let { style } = _ref5;
|
|
460
|
+
if (!this.matchMedia) {
|
|
461
|
+
this.reset();
|
|
462
|
+
return;
|
|
463
|
+
}
|
|
471
464
|
|
|
472
|
-
|
|
465
|
+
style && uikitUtil.css(this.$el, style);
|
|
466
|
+
},
|
|
473
467
|
|
|
474
|
-
|
|
468
|
+
events: ['scroll', 'resize'] } };
|
|
475
469
|
|
|
476
|
-
events: ['scroll', 'resize']
|
|
477
|
-
}
|
|
478
470
|
|
|
479
|
-
};
|
|
480
471
|
|
|
481
472
|
function ease(percent, easing) {
|
|
482
|
-
|
|
483
|
-
? Math.pow(percent, easing + 1)
|
|
484
|
-
: 1 - Math.pow(1 - percent, -easing + 1);
|
|
473
|
+
return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
|
|
485
474
|
}
|
|
486
475
|
|
|
487
476
|
// SVG elements do not inherit from HTMLElement
|
|
488
477
|
function getOffsetElement(el) {
|
|
489
|
-
|
|
490
|
-
? 'offsetTop' in el
|
|
491
|
-
? el
|
|
492
|
-
: getOffsetElement(uikitUtil.parent(el))
|
|
493
|
-
: document.documentElement;
|
|
478
|
+
return el ? 'offsetTop' in el ? el : getOffsetElement(uikitUtil.parent(el)) : document.documentElement;
|
|
494
479
|
}
|
|
495
480
|
|
|
496
481
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
497
|
-
|
|
482
|
+
window.UIkit.component('parallax', Component);
|
|
498
483
|
}
|
|
499
484
|
|
|
500
485
|
return Component;
|