uikit 3.11.2-dev.9433cd5fd → 3.11.2-dev.a87448e52
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 +37 -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 +118 -201
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +118 -201
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +120 -207
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +120 -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 -358
- 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 -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 +5412 -6733
- 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 +8008 -9705
- 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 +47 -52
- package/src/js/core/img.js +96 -77
- 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 +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 +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 +32 -46
- package/src/js/util/player.js +41 -36
- package/src/js/util/position.js +54 -46
- package/src/js/util/selector.js +43 -58
- package/src/js/util/style.js +39 -49
- package/src/js/util/viewport.js +75 -64
- package/src/less/components/base.less +10 -33
- package/src/less/components/flex.less +0 -9
- package/src/less/components/form-range.less +48 -95
- package/src/less/components/form.less +0 -1
- package/src/less/components/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/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.a87448e52 | 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,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
|
-
|
|
102
|
+
return result;
|
|
103
|
+
}, {});
|
|
104
|
+
} },
|
|
123
105
|
|
|
124
|
-
methods: {
|
|
125
106
|
|
|
126
|
-
|
|
127
|
-
|
|
107
|
+
events: {
|
|
108
|
+
bgimageload() {
|
|
109
|
+
this.$emit();
|
|
110
|
+
} },
|
|
128
111
|
|
|
129
|
-
uikitUtil.each(this.getCss(0), function (_, prop) { return uikitUtil.css(this$1$1.$el, prop, ''); });
|
|
130
|
-
},
|
|
131
112
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
this$1$1.props[prop](css, percent);
|
|
137
|
-
return css;
|
|
138
|
-
}, {transform: '', filter: ''});
|
|
139
|
-
}
|
|
113
|
+
methods: {
|
|
114
|
+
reset() {
|
|
115
|
+
uikitUtil.each(this.getCss(0), (_, prop) => uikitUtil.css(this.$el, prop, ''));
|
|
116
|
+
},
|
|
140
117
|
|
|
141
|
-
|
|
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: '' });
|
|
142
125
|
|
|
143
|
-
|
|
126
|
+
} } };
|
|
144
127
|
|
|
145
|
-
function transformFn(prop, el, steps) {
|
|
146
128
|
|
|
147
|
-
var unit = getUnit(steps) || {x: 'px', y: 'px', rotate: 'deg'}[prop] || '';
|
|
148
129
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
130
|
+
function transformFn(prop, el, stops) {
|
|
131
|
+
const unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
|
|
132
|
+
let transformFn;
|
|
152
133
|
|
|
153
|
-
|
|
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
|
+
}
|
|
154
138
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
139
|
+
if (stops.length === 1) {
|
|
140
|
+
stops.unshift(prop === 'scale' ? 1 : 0);
|
|
141
|
+
}
|
|
158
142
|
|
|
159
|
-
|
|
160
|
-
var value = getValue(steps, percent);
|
|
143
|
+
stops = parseStops(stops, transformFn);
|
|
161
144
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
css.transform += " " + prop + "(" + value + unit + ")";
|
|
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,
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
}
|
|
178
|
+
function filterFn(prop, el, stops) {
|
|
179
|
+
if (stops.length === 1) {
|
|
180
|
+
stops.unshift(0);
|
|
181
|
+
}
|
|
206
182
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
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,
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
var unit = getUnit(steps);
|
|
237
|
-
steps = steps.map(uikitUtil.toFloat);
|
|
238
|
-
|
|
239
|
-
if (!steps.some(function (step) { return step; })) {
|
|
240
|
-
return uikitUtil.noop;
|
|
241
|
-
}
|
|
205
|
+
function strokeFn(prop, el, stops) {
|
|
206
|
+
if (stops.length === 1) {
|
|
207
|
+
stops.unshift(0);
|
|
208
|
+
}
|
|
242
209
|
|
|
243
|
-
|
|
244
|
-
|
|
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
|
+
});
|
|
245
216
|
|
|
246
|
-
|
|
247
|
-
|
|
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
|
-
|
|
233
|
+
prop = prop.substr(-1);
|
|
234
|
+
const attr = prop === 'y' ? 'height' : 'width';
|
|
235
|
+
stops = parseStops(stops, (stop) => uikitUtil.toPx(stop, attr, el));
|
|
262
236
|
|
|
263
|
-
|
|
264
|
-
var attr = prop === 'y' ? 'height' : 'width';
|
|
265
|
-
steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, el); });
|
|
237
|
+
const bgPos = getCssValue(el, "background-position-" + prop, '');
|
|
266
238
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
return getCssValue(el, 'backgroundSize', '') === 'cover'
|
|
271
|
-
? backgroundCoverFn(prop, el, steps, bgPos, attr)
|
|
272
|
-
: setBackgroundPosFn(prop, steps, bgPos);
|
|
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;
|
|
416
|
-
|
|
417
|
-
return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
|
|
418
|
-
},
|
|
407
|
+
props: {
|
|
408
|
+
target: String,
|
|
409
|
+
viewport: Number, // Deprecated
|
|
410
|
+
easing: Number,
|
|
411
|
+
start: String,
|
|
412
|
+
end: String },
|
|
419
413
|
|
|
420
|
-
start: function(ref) {
|
|
421
|
-
var start = ref.start;
|
|
422
414
|
|
|
423
|
-
|
|
424
|
-
|
|
415
|
+
data: {
|
|
416
|
+
target: false,
|
|
417
|
+
viewport: 1,
|
|
418
|
+
easing: 1,
|
|
419
|
+
start: 0,
|
|
420
|
+
end: 0 },
|
|
425
421
|
|
|
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
422
|
|
|
423
|
+
computed: {
|
|
424
|
+
target(_ref, $el) {let { target } = _ref;
|
|
425
|
+
return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
|
|
438
426
|
},
|
|
439
427
|
|
|
440
|
-
|
|
428
|
+
start(_ref2) {let { start } = _ref2;
|
|
429
|
+
return uikitUtil.toPx(start, 'height', this.target, true);
|
|
430
|
+
},
|
|
441
431
|
|
|
442
|
-
|
|
443
|
-
|
|
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);
|
|
444
438
|
|
|
439
|
+
} },
|
|
445
440
|
|
|
446
|
-
if (!types.has('scroll')) {
|
|
447
|
-
percent = false;
|
|
448
|
-
}
|
|
449
441
|
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
442
|
+
update: {
|
|
443
|
+
read(_ref4, types) {let { percent } = _ref4;
|
|
444
|
+
if (!types.has('scroll')) {
|
|
445
|
+
percent = false;
|
|
446
|
+
}
|
|
453
447
|
|
|
454
|
-
|
|
455
|
-
|
|
448
|
+
if (!this.matchMedia) {
|
|
449
|
+
return;
|
|
450
|
+
}
|
|
456
451
|
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
style: prev === percent ? false : this.getCss(percent)
|
|
460
|
-
};
|
|
461
|
-
},
|
|
452
|
+
const prev = percent;
|
|
453
|
+
percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
|
|
462
454
|
|
|
463
|
-
|
|
464
|
-
|
|
455
|
+
return {
|
|
456
|
+
percent,
|
|
457
|
+
style: prev === percent ? false : this.getCss(percent) };
|
|
465
458
|
|
|
459
|
+
},
|
|
466
460
|
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
461
|
+
write(_ref5) {let { style } = _ref5;
|
|
462
|
+
if (!this.matchMedia) {
|
|
463
|
+
this.reset();
|
|
464
|
+
return;
|
|
465
|
+
}
|
|
471
466
|
|
|
472
|
-
|
|
467
|
+
style && uikitUtil.css(this.$el, style);
|
|
468
|
+
},
|
|
473
469
|
|
|
474
|
-
|
|
470
|
+
events: ['scroll', 'resize'] } };
|
|
475
471
|
|
|
476
|
-
events: ['scroll', 'resize']
|
|
477
|
-
}
|
|
478
472
|
|
|
479
|
-
};
|
|
480
473
|
|
|
481
474
|
function ease(percent, easing) {
|
|
482
|
-
|
|
483
|
-
? Math.pow(percent, easing + 1)
|
|
484
|
-
: 1 - Math.pow(1 - percent, -easing + 1);
|
|
475
|
+
return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
|
|
485
476
|
}
|
|
486
477
|
|
|
487
478
|
// SVG elements do not inherit from HTMLElement
|
|
488
479
|
function getOffsetElement(el) {
|
|
489
|
-
|
|
490
|
-
? 'offsetTop' in el
|
|
491
|
-
? el
|
|
492
|
-
: getOffsetElement(uikitUtil.parent(el))
|
|
493
|
-
: document.documentElement;
|
|
480
|
+
return el ? 'offsetTop' in el ? el : getOffsetElement(uikitUtil.parent(el)) : document.documentElement;
|
|
494
481
|
}
|
|
495
482
|
|
|
496
483
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
497
|
-
|
|
484
|
+
window.UIkit.component('parallax', Component);
|
|
498
485
|
}
|
|
499
486
|
|
|
500
487
|
return Component;
|