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