uikit 3.11.2-dev.f2970ffaa → 3.11.2-dev.f3ade19c4
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 +54 -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 +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 +347 -372
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +345 -360
- 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 +345 -360
- 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 -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 +5326 -6526
- 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 +8031 -9659
- 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 +125 -106
- package/src/js/components/tooltip.js +41 -31
- package/src/js/components/upload.js +52 -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 +30 -34
- 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 +175 -123
- 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 +149 -107
- 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 +1 -6
- 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 +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/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.2-dev.
|
|
1
|
+
/*! UIkit 3.11.2-dev.f3ade19c4 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
|
|
2
2
|
|
|
3
3
|
(function (global, factory) {
|
|
4
4
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
|
|
@@ -7,505 +7,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
|
-
|
|
100
|
-
|
|
101
|
-
props: fillObject(keys(props), 'list'),
|
|
92
|
+
props: fillObject(keys(props), 'list'),
|
|
102
93
|
|
|
103
|
-
|
|
94
|
+
data: fillObject(keys(props), undefined),
|
|
104
95
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
result[prop] = props[prop](prop, $el, properties[prop].slice());
|
|
111
|
-
}
|
|
112
|
-
return result;
|
|
113
|
-
}, {});
|
|
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());
|
|
114
101
|
}
|
|
102
|
+
return result;
|
|
103
|
+
}, {});
|
|
104
|
+
} },
|
|
115
105
|
|
|
116
|
-
},
|
|
117
|
-
|
|
118
|
-
events: {
|
|
119
|
-
bgimageload: function() {
|
|
120
|
-
this.$emit();
|
|
121
|
-
}
|
|
122
|
-
},
|
|
123
106
|
|
|
124
|
-
|
|
107
|
+
events: {
|
|
108
|
+
load() {
|
|
109
|
+
this.$emit();
|
|
110
|
+
} },
|
|
125
111
|
|
|
126
|
-
reset: function() {
|
|
127
|
-
var this$1$1 = this;
|
|
128
112
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
var this$1$1 = this;
|
|
134
|
-
|
|
135
|
-
return keys(this.props).reduce(function (css, prop) {
|
|
136
|
-
this$1$1.props[prop](css, percent);
|
|
137
|
-
return css;
|
|
138
|
-
}, {transform: '', filter: ''});
|
|
139
|
-
}
|
|
140
|
-
|
|
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);
|
|
161
|
-
|
|
162
|
-
if (uikitUtil.startsWith(prop, 'translate')) {
|
|
163
|
-
value = uikitUtil.toFloat(value).toFixed(unit === 'px' ? 0 : 6);
|
|
164
|
-
}
|
|
141
|
+
stops = parseStops(stops, transformFn);
|
|
165
142
|
|
|
166
|
-
|
|
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,
|
|
176
|
+
function filterFn(prop, el, stops) {
|
|
177
|
+
if (stops.length === 1) {
|
|
178
|
+
stops.unshift(0);
|
|
179
|
+
}
|
|
202
180
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
var unit = getUnit(steps) || {blur: 'px', hue: 'deg'}[prop] || '%';
|
|
208
|
-
prop = {fopacity: 'opacity', hue: 'hue-rotate'}[prop] || prop;
|
|
209
|
-
steps = steps.map(uikitUtil.toFloat);
|
|
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
|
-
}
|
|
196
|
+
stops = parseStops(stops);
|
|
222
197
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
css[prop] = getValue(steps, percent);
|
|
227
|
-
};
|
|
198
|
+
return (css, percent) => {
|
|
199
|
+
css[prop] = getValue(stops, percent);
|
|
200
|
+
};
|
|
228
201
|
}
|
|
229
202
|
|
|
230
|
-
function strokeFn(prop, el,
|
|
203
|
+
function strokeFn(prop, el, stops) {
|
|
204
|
+
if (stops.length === 1) {
|
|
205
|
+
stops.unshift(0);
|
|
206
|
+
}
|
|
231
207
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
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
|
+
});
|
|
235
214
|
|
|
236
|
-
|
|
237
|
-
|
|
215
|
+
if (!stops.some((_ref) => {let [value] = _ref;return value;})) {
|
|
216
|
+
return uikitUtil.noop;
|
|
217
|
+
}
|
|
238
218
|
|
|
239
|
-
|
|
240
|
-
return uikitUtil.noop;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
var length = getMaxPathLength(el);
|
|
244
|
-
uikitUtil.css(el, 'strokeDasharray', length);
|
|
245
|
-
|
|
246
|
-
if (unit === '%') {
|
|
247
|
-
steps = steps.map(function (step) { return step * length / 100; });
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
steps = steps.reverse();
|
|
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,
|
|
226
|
+
function backgroundFn(prop, el, stops) {
|
|
227
|
+
if (stops.length === 1) {
|
|
228
|
+
stops.unshift(0);
|
|
229
|
+
}
|
|
258
230
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
prop = prop.substr(-1);
|
|
264
|
-
var attr = prop === 'y' ? 'height' : 'width';
|
|
265
|
-
steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, el); });
|
|
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
|
-
|
|
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);
|
|
282
253
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
var down = steps.indexOf(min) < steps.indexOf(max);
|
|
254
|
+
const diff = max - min;
|
|
255
|
+
let pos = (down ? -diff : 0) - (down ? min : max);
|
|
286
256
|
|
|
287
|
-
|
|
288
|
-
|
|
257
|
+
const dimEl = {
|
|
258
|
+
width: el.offsetWidth,
|
|
259
|
+
height: el.offsetHeight };
|
|
289
260
|
|
|
290
|
-
var dimEl = {
|
|
291
|
-
width: el.offsetWidth,
|
|
292
|
-
height: el.offsetHeight
|
|
293
|
-
};
|
|
294
261
|
|
|
295
|
-
|
|
296
|
-
|
|
262
|
+
const baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
|
|
263
|
+
const span = baseDim[attr] - dimEl[attr];
|
|
297
264
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
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);
|
|
301
269
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
if (posPercentage) {
|
|
305
|
-
pos -= (span - diff) / posPercentage;
|
|
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
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
293
|
+
const src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
|
|
294
|
+
|
|
295
|
+
if (dimensions[src]) {
|
|
296
|
+
return dimensions[src];
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
const image = new Image();
|
|
300
|
+
if (src) {
|
|
301
|
+
image.src = src;
|
|
302
|
+
|
|
303
|
+
if (!image.naturalWidth) {
|
|
304
|
+
image.onload = () => {
|
|
305
|
+
dimensions[src] = toDimensions(image);
|
|
306
|
+
uikitUtil.trigger(el, 'load');
|
|
307
|
+
};
|
|
308
|
+
return toDimensions(image);
|
|
331
309
|
}
|
|
310
|
+
}
|
|
332
311
|
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
image.src = src;
|
|
312
|
+
return dimensions[src] = toDimensions(image);
|
|
313
|
+
}
|
|
336
314
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
};
|
|
342
|
-
}
|
|
343
|
-
}
|
|
315
|
+
function toDimensions(image) {
|
|
316
|
+
return {
|
|
317
|
+
width: image.naturalWidth,
|
|
318
|
+
height: image.naturalHeight };
|
|
344
319
|
|
|
345
|
-
return dimensions[src] = toDimensions(image);
|
|
346
320
|
}
|
|
347
321
|
|
|
348
|
-
function
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
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
|
+
}
|
|
345
|
+
|
|
346
|
+
result.push([value, percent]);
|
|
347
|
+
|
|
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
|
+
}
|
|
356
|
+
|
|
357
|
+
nullIndex = 0;
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
return result;
|
|
353
362
|
}
|
|
354
363
|
|
|
355
|
-
function
|
|
356
|
-
|
|
357
|
-
|
|
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])];
|
|
358
370
|
|
|
359
|
-
return steps
|
|
360
|
-
.slice(index, index + 2)
|
|
361
|
-
.concat(percent === 1 ? 1 : percent % (1 / count) * count);
|
|
362
371
|
}
|
|
363
372
|
|
|
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;
|
|
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;
|
|
372
376
|
}
|
|
373
377
|
|
|
374
|
-
|
|
375
|
-
|
|
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;
|
|
376
387
|
}
|
|
377
388
|
|
|
378
389
|
function getCssValue(el, prop, value) {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
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;
|
|
383
394
|
}
|
|
384
395
|
|
|
385
396
|
function fillObject(keys, value) {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
397
|
+
return keys.reduce((data, prop) => {
|
|
398
|
+
data[prop] = value;
|
|
399
|
+
return data;
|
|
400
|
+
}, {});
|
|
390
401
|
}
|
|
391
402
|
|
|
392
403
|
var Component = {
|
|
404
|
+
mixins: [Parallax],
|
|
393
405
|
|
|
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
|
-
},
|
|
406
|
+
props: {
|
|
407
|
+
target: String,
|
|
408
|
+
viewport: Number, // Deprecated
|
|
409
|
+
easing: Number,
|
|
410
|
+
start: String,
|
|
411
|
+
end: String },
|
|
419
412
|
|
|
420
|
-
start: function(ref) {
|
|
421
|
-
var start = ref.start;
|
|
422
413
|
|
|
423
|
-
|
|
424
|
-
|
|
414
|
+
data: {
|
|
415
|
+
target: false,
|
|
416
|
+
viewport: 1,
|
|
417
|
+
easing: 1,
|
|
418
|
+
start: 0,
|
|
419
|
+
end: 0 },
|
|
425
420
|
|
|
426
|
-
end: function(ref) {
|
|
427
|
-
var end = ref.end;
|
|
428
|
-
var viewport = ref.viewport;
|
|
429
|
-
|
|
430
|
-
return parseCalc(
|
|
431
|
-
end || (viewport = (1 - viewport) * 100) && (viewport + "vh+" + viewport + "%"),
|
|
432
|
-
this.target
|
|
433
|
-
);
|
|
434
|
-
}
|
|
435
421
|
|
|
422
|
+
computed: {
|
|
423
|
+
target(_ref, $el) {let { target } = _ref;
|
|
424
|
+
return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
|
|
436
425
|
},
|
|
437
426
|
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
var percent = ref.percent;
|
|
442
|
-
|
|
427
|
+
start(_ref2) {let { start } = _ref2;
|
|
428
|
+
return uikitUtil.toPx(start, 'height', this.target, true);
|
|
429
|
+
},
|
|
443
430
|
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
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);
|
|
447
437
|
|
|
448
|
-
|
|
449
|
-
return;
|
|
450
|
-
}
|
|
438
|
+
} },
|
|
451
439
|
|
|
452
|
-
var prev = percent;
|
|
453
|
-
percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
|
|
454
440
|
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
441
|
+
update: {
|
|
442
|
+
read(_ref4, types) {let { percent } = _ref4;
|
|
443
|
+
if (!types.has('scroll')) {
|
|
444
|
+
percent = false;
|
|
445
|
+
}
|
|
460
446
|
|
|
461
|
-
|
|
462
|
-
|
|
447
|
+
if (!this.matchMedia) {
|
|
448
|
+
return;
|
|
449
|
+
}
|
|
463
450
|
|
|
451
|
+
const prev = percent;
|
|
452
|
+
percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
|
|
464
453
|
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
}
|
|
454
|
+
return {
|
|
455
|
+
percent,
|
|
456
|
+
style: prev === percent ? false : this.getCss(percent) };
|
|
469
457
|
|
|
470
|
-
|
|
458
|
+
},
|
|
471
459
|
|
|
472
|
-
|
|
460
|
+
write(_ref5) {let { style } = _ref5;
|
|
461
|
+
if (!this.matchMedia) {
|
|
462
|
+
this.reset();
|
|
463
|
+
return;
|
|
464
|
+
}
|
|
473
465
|
|
|
474
|
-
|
|
475
|
-
}
|
|
466
|
+
style && uikitUtil.css(this.$el, style);
|
|
467
|
+
},
|
|
476
468
|
|
|
477
|
-
|
|
469
|
+
events: ['scroll', 'resize'] } };
|
|
478
470
|
|
|
479
|
-
var calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
|
|
480
|
-
function parseCalc(calc, el) {
|
|
481
|
-
var match;
|
|
482
|
-
var result = 0;
|
|
483
|
-
calc = calc.toString().replace(/\s/g, '');
|
|
484
|
-
calcRe.lastIndex = 0;
|
|
485
|
-
while ((match = calcRe.exec(calc)) !== null) {
|
|
486
|
-
result += uikitUtil.toPx(match[0], 'height', el, true);
|
|
487
|
-
}
|
|
488
471
|
|
|
489
|
-
return result;
|
|
490
|
-
}
|
|
491
472
|
|
|
492
473
|
function ease(percent, easing) {
|
|
493
|
-
|
|
494
|
-
? Math.pow(percent, easing + 1)
|
|
495
|
-
: 1 - Math.pow(1 - percent, -easing + 1);
|
|
474
|
+
return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
|
|
496
475
|
}
|
|
497
476
|
|
|
498
477
|
// SVG elements do not inherit from HTMLElement
|
|
499
478
|
function getOffsetElement(el) {
|
|
500
|
-
|
|
501
|
-
? 'offsetTop' in el
|
|
502
|
-
? el
|
|
503
|
-
: getOffsetElement(uikitUtil.parent(el))
|
|
504
|
-
: document.documentElement;
|
|
479
|
+
return el ? 'offsetTop' in el ? el : getOffsetElement(uikitUtil.parent(el)) : document.documentElement;
|
|
505
480
|
}
|
|
506
481
|
|
|
507
482
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
508
|
-
|
|
483
|
+
window.UIkit.component('parallax', Component);
|
|
509
484
|
}
|
|
510
485
|
|
|
511
486
|
return Component;
|