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