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,487 +7,479 @@
|
|
|
7
7
|
})(this, (function (uikitUtil) { 'use strict';
|
|
8
8
|
|
|
9
9
|
var Media = {
|
|
10
|
+
props: {
|
|
11
|
+
media: Boolean },
|
|
10
12
|
|
|
11
|
-
props: {
|
|
12
|
-
media: Boolean
|
|
13
|
-
},
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
14
|
+
data: {
|
|
15
|
+
media: false },
|
|
18
16
|
|
|
19
|
-
computed: {
|
|
20
17
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
computed: {
|
|
19
|
+
matchMedia() {
|
|
20
|
+
const media = toMedia(this.media);
|
|
21
|
+
return !media || window.matchMedia(media).matches;
|
|
22
|
+
} } };
|
|
25
23
|
|
|
26
|
-
}
|
|
27
24
|
|
|
28
|
-
};
|
|
29
25
|
|
|
30
26
|
function toMedia(value) {
|
|
31
|
-
|
|
32
|
-
if (
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
return value;
|
|
38
|
-
}
|
|
27
|
+
if (uikitUtil.isString(value)) {
|
|
28
|
+
if (value[0] === '@') {
|
|
29
|
+
const name = "breakpoint-" + value.substr(1);
|
|
30
|
+
value = uikitUtil.toFloat(uikitUtil.getCssVar(name));
|
|
31
|
+
} else if (isNaN(value)) {
|
|
32
|
+
return value;
|
|
39
33
|
}
|
|
34
|
+
}
|
|
40
35
|
|
|
41
|
-
|
|
36
|
+
return value && !isNaN(value) ? "(min-width: " + value + "px)" : false;
|
|
42
37
|
}
|
|
43
38
|
|
|
44
|
-
uikitUtil.memoize(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
39
|
+
uikitUtil.memoize(async (src) => {
|
|
40
|
+
if (src) {
|
|
41
|
+
if (uikitUtil.startsWith(src, 'data:')) {
|
|
42
|
+
return decodeURIComponent(src.split(',')[1]);
|
|
43
|
+
} else {
|
|
44
|
+
return (await fetch(src)).text();
|
|
45
|
+
}
|
|
46
|
+
} else {
|
|
47
|
+
return Promise.reject();
|
|
48
|
+
}
|
|
49
|
+
});
|
|
54
50
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
51
|
+
function getMaxPathLength(el) {
|
|
52
|
+
return Math.ceil(
|
|
53
|
+
Math.max(
|
|
54
|
+
0,
|
|
55
|
+
...uikitUtil.$$('[stroke]', el).map((stroke) => {
|
|
56
|
+
try {
|
|
57
|
+
return stroke.getTotalLength();
|
|
58
|
+
} catch (e) {
|
|
59
|
+
return 0;
|
|
60
|
+
}
|
|
61
|
+
})));
|
|
59
62
|
|
|
60
|
-
}
|
|
61
|
-
}); }
|
|
62
|
-
);
|
|
63
63
|
|
|
64
|
-
function getMaxPathLength(el) {
|
|
65
|
-
return Math.ceil(Math.max.apply(Math, [ 0 ].concat( uikitUtil.$$('[stroke]', el).map(function (stroke) {
|
|
66
|
-
try {
|
|
67
|
-
return stroke.getTotalLength();
|
|
68
|
-
} catch (e) {
|
|
69
|
-
return 0;
|
|
70
|
-
}
|
|
71
|
-
}) )));
|
|
72
64
|
}
|
|
73
65
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
66
|
+
const props = {
|
|
67
|
+
x: transformFn,
|
|
68
|
+
y: transformFn,
|
|
69
|
+
rotate: transformFn,
|
|
70
|
+
scale: transformFn,
|
|
71
|
+
color: colorFn,
|
|
72
|
+
backgroundColor: colorFn,
|
|
73
|
+
borderColor: colorFn,
|
|
74
|
+
blur: filterFn,
|
|
75
|
+
hue: filterFn,
|
|
76
|
+
fopacity: filterFn,
|
|
77
|
+
grayscale: filterFn,
|
|
78
|
+
invert: filterFn,
|
|
79
|
+
saturate: filterFn,
|
|
80
|
+
sepia: filterFn,
|
|
81
|
+
opacity: cssPropFn,
|
|
82
|
+
stroke: strokeFn,
|
|
83
|
+
bgx: backgroundFn,
|
|
84
|
+
bgy: backgroundFn };
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
const { keys } = Object;
|
|
96
88
|
|
|
97
89
|
var Parallax = {
|
|
90
|
+
mixins: [Media],
|
|
98
91
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
props: fillObject(keys(props), 'list'),
|
|
102
|
-
|
|
103
|
-
data: fillObject(keys(props), undefined),
|
|
104
|
-
|
|
105
|
-
computed: {
|
|
92
|
+
props: fillObject(keys(props), 'list'),
|
|
106
93
|
|
|
107
|
-
|
|
108
|
-
var this$1$1 = this;
|
|
94
|
+
data: fillObject(keys(props), undefined),
|
|
109
95
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
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
106
|
|
|
125
|
-
|
|
126
|
-
|
|
107
|
+
events: {
|
|
108
|
+
load() {
|
|
109
|
+
this.$emit();
|
|
110
|
+
} },
|
|
127
111
|
|
|
128
|
-
getCss: function(percent) {
|
|
129
|
-
var this$1$1 = this;
|
|
130
|
-
|
|
131
|
-
return keys(this.props).reduce(function (css, prop) {
|
|
132
|
-
this$1$1.props[prop](css, percent);
|
|
133
|
-
return css;
|
|
134
|
-
}, {transform: '', filter: ''});
|
|
135
|
-
}
|
|
136
112
|
|
|
137
|
-
|
|
138
|
-
|
|
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,
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
}
|
|
176
|
+
function filterFn(prop, el, stops) {
|
|
177
|
+
if (stops.length === 1) {
|
|
178
|
+
stops.unshift(0);
|
|
179
|
+
}
|
|
202
180
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
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,
|
|
191
|
+
function cssPropFn(prop, el, stops) {
|
|
192
|
+
if (stops.length === 1) {
|
|
193
|
+
stops.unshift(getCssValue(el, prop, ''));
|
|
194
|
+
}
|
|
214
195
|
|
|
215
|
-
|
|
216
|
-
steps.unshift(getCssValue(el, prop, ''));
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
steps = steps.map(uikitUtil.toFloat);
|
|
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
|
-
data: {
|
|
390
|
-
selItem: '!li'
|
|
391
|
-
},
|
|
392
|
-
|
|
393
|
-
computed: {
|
|
394
|
-
|
|
395
|
-
item: function(ref, $el) {
|
|
396
|
-
var selItem = ref.selItem;
|
|
406
|
+
data: {
|
|
407
|
+
selItem: '!li' },
|
|
397
408
|
|
|
398
|
-
return uikitUtil.query(selItem, $el);
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
},
|
|
402
409
|
|
|
403
|
-
|
|
410
|
+
computed: {
|
|
411
|
+
item(_ref, $el) {let { selItem } = _ref;
|
|
412
|
+
return uikitUtil.query(selItem, $el);
|
|
413
|
+
} },
|
|
404
414
|
|
|
405
|
-
{
|
|
406
|
-
name: 'itemin itemout',
|
|
407
415
|
|
|
408
|
-
|
|
416
|
+
events: [
|
|
417
|
+
{
|
|
418
|
+
name: 'itemin itemout',
|
|
409
419
|
|
|
410
|
-
|
|
411
|
-
return this.item;
|
|
412
|
-
},
|
|
413
|
-
|
|
414
|
-
handler: function(ref) {
|
|
415
|
-
var this$1$1 = this;
|
|
416
|
-
var type = ref.type;
|
|
417
|
-
var ref_detail = ref.detail;
|
|
418
|
-
var percent = ref_detail.percent;
|
|
419
|
-
var duration = ref_detail.duration;
|
|
420
|
-
var timing = ref_detail.timing;
|
|
421
|
-
var dir = ref_detail.dir;
|
|
420
|
+
self: true,
|
|
422
421
|
|
|
422
|
+
el() {
|
|
423
|
+
return this.item;
|
|
424
|
+
},
|
|
423
425
|
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
426
|
+
handler(_ref2) {let { type, detail: { percent, duration, timing, dir } } = _ref2;
|
|
427
|
+
uikitUtil.fastdom.read(() => {
|
|
428
|
+
const propsFrom = this.getCss(getCurrentPercent(type, dir, percent));
|
|
429
|
+
const propsTo = this.getCss(isIn(type) ? 0.5 : dir > 0 ? 1 : 0);
|
|
430
|
+
uikitUtil.fastdom.write(() => {
|
|
431
|
+
uikitUtil.css(this.$el, propsFrom);
|
|
432
|
+
uikitUtil.Transition.start(this.$el, propsTo, duration, timing).catch(uikitUtil.noop);
|
|
433
|
+
});
|
|
434
|
+
});
|
|
435
|
+
} },
|
|
432
436
|
|
|
433
|
-
}
|
|
434
|
-
},
|
|
435
437
|
|
|
436
|
-
|
|
437
|
-
|
|
438
|
+
{
|
|
439
|
+
name: 'transitioncanceled transitionend',
|
|
438
440
|
|
|
439
|
-
|
|
441
|
+
self: true,
|
|
440
442
|
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
443
|
+
el() {
|
|
444
|
+
return this.item;
|
|
445
|
+
},
|
|
444
446
|
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
447
|
+
handler() {
|
|
448
|
+
uikitUtil.Transition.cancel(this.$el);
|
|
449
|
+
} },
|
|
448
450
|
|
|
449
|
-
},
|
|
450
451
|
|
|
451
|
-
|
|
452
|
-
|
|
452
|
+
{
|
|
453
|
+
name: 'itemtranslatein itemtranslateout',
|
|
453
454
|
|
|
454
|
-
|
|
455
|
+
self: true,
|
|
455
456
|
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
457
|
+
el() {
|
|
458
|
+
return this.item;
|
|
459
|
+
},
|
|
459
460
|
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
461
|
+
handler(_ref3) {let { type, detail: { percent, dir } } = _ref3;
|
|
462
|
+
uikitUtil.fastdom.read(() => {
|
|
463
|
+
const props = this.getCss(getCurrentPercent(type, dir, percent));
|
|
464
|
+
uikitUtil.fastdom.write(() => uikitUtil.css(this.$el, props));
|
|
465
|
+
});
|
|
466
|
+
} }] };
|
|
466
467
|
|
|
467
|
-
uikitUtil.fastdom.read(function () {
|
|
468
|
-
var props = this$1$1.getCss(getCurrentPercent(type, dir, percent));
|
|
469
|
-
uikitUtil.fastdom.write(function () { return uikitUtil.css(this$1$1.$el, props); });
|
|
470
|
-
});
|
|
471
|
-
}
|
|
472
|
-
}
|
|
473
468
|
|
|
474
|
-
]
|
|
475
469
|
|
|
476
|
-
};
|
|
477
470
|
|
|
478
471
|
function isIn(type) {
|
|
479
|
-
|
|
472
|
+
return uikitUtil.endsWith(type, 'in');
|
|
480
473
|
}
|
|
481
474
|
|
|
482
475
|
function getCurrentPercent(type, dir, percent) {
|
|
476
|
+
percent /= 2;
|
|
483
477
|
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
return isIn(type) ^ dir < 0 ? percent : 1 - percent;
|
|
478
|
+
return isIn(type) ^ dir < 0 ? percent : 1 - percent;
|
|
487
479
|
}
|
|
488
480
|
|
|
489
481
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
490
|
-
|
|
482
|
+
window.UIkit.component('sliderParallax', Component);
|
|
491
483
|
}
|
|
492
484
|
|
|
493
485
|
return Component;
|