uikit 3.11.2-dev.ab82450f4 → 3.11.2-dev.b4d9c97d5
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 +52 -19
- 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 +121 -202
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +121 -202
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +123 -208
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +123 -208
- 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 +326 -364
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +324 -352
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +768 -852
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +324 -352
- 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 +5410 -6698
- 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 +8101 -9800
- 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 -73
- 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 +38 -50
- package/src/js/core/img.js +154 -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 +188 -117
- 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 +154 -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 +20 -39
- package/src/js/util/animation.js +77 -75
- package/src/js/util/attr.js +17 -21
- package/src/js/util/class.js +14 -52
- package/src/js/util/dimensions.js +76 -47
- package/src/js/util/dom.js +39 -81
- 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 +52 -97
- package/src/less/components/form.less +0 -1
- package/src/less/components/leader.less +0 -1
- package/src/less/components/lightbox.less +0 -1
- package/src/less/components/modal.less +3 -7
- package/src/less/components/navbar.less +0 -7
- package/src/less/components/progress.less +14 -36
- package/src/less/components/slider.less +0 -3
- package/src/less/components/slideshow.less +0 -3
- package/src/less/components/text.less +16 -32
- package/src/less/components/utility.less +22 -0
- package/src/scss/components/base.scss +10 -33
- package/src/scss/components/flex.scss +0 -9
- package/src/scss/components/form-range.scss +52 -97
- package/src/scss/components/form.scss +3 -4
- package/src/scss/components/icon.scss +2 -2
- package/src/scss/components/leader.scss +0 -1
- package/src/scss/components/lightbox.scss +0 -1
- package/src/scss/components/modal.scss +3 -7
- package/src/scss/components/navbar.scss +0 -7
- package/src/scss/components/progress.scss +14 -36
- package/src/scss/components/search.scss +1 -1
- package/src/scss/components/slider.scss +0 -3
- package/src/scss/components/slideshow.scss +0 -3
- package/src/scss/components/text.scss +16 -32
- package/src/scss/components/utility.scss +22 -0
- package/src/scss/mixins-theme.scss +1 -1
- package/src/scss/mixins.scss +1 -1
- package/src/scss/variables-theme.scss +9 -9
- package/src/scss/variables.scss +9 -9
- package/tests/align.html +10 -10
- package/tests/animation.html +2 -2
- package/tests/article.html +2 -2
- package/tests/base.html +3 -3
- package/tests/card.html +10 -10
- package/tests/column.html +3 -3
- package/tests/comment.html +9 -9
- package/tests/dotnav.html +3 -3
- package/tests/image.html +296 -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 +85 -97
- 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.2-dev.
|
|
1
|
+
/*! UIkit 3.11.2-dev.b4d9c97d5 | 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,459 @@
|
|
|
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
|
-
|
|
241
|
-
|
|
242
|
-
if (unit === '%') {
|
|
243
|
-
steps = steps.map(function (step) { return step * length / 100; });
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
steps = steps.reverse();
|
|
247
|
-
|
|
248
|
-
return function (css, percent) {
|
|
249
|
-
css.strokeDashoffset = getValue(steps, percent);
|
|
250
|
-
};
|
|
223
|
+
return (css, percent) => {
|
|
224
|
+
css.strokeDashoffset = getValue(stops, percent);
|
|
225
|
+
};
|
|
251
226
|
}
|
|
252
227
|
|
|
253
|
-
function backgroundFn(prop, el,
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
}
|
|
228
|
+
function backgroundFn(prop, el, stops) {
|
|
229
|
+
if (stops.length === 1) {
|
|
230
|
+
stops.unshift(0);
|
|
231
|
+
}
|
|
258
232
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
233
|
+
prop = prop.substr(-1);
|
|
234
|
+
const attr = prop === 'y' ? 'height' : 'width';
|
|
235
|
+
stops = parseStops(stops, (stop) => uikitUtil.toPx(stop, attr, el));
|
|
262
236
|
|
|
263
|
-
|
|
264
|
-
var bgPos = uikitUtil.css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
|
|
237
|
+
const bgPos = getCssValue(el, "background-position-" + prop, '');
|
|
265
238
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
239
|
+
return getCssValue(el, 'backgroundSize', '') === 'cover' ?
|
|
240
|
+
backgroundCoverFn(prop, el, stops, bgPos, attr) :
|
|
241
|
+
setBackgroundPosFn(prop, stops, bgPos);
|
|
269
242
|
}
|
|
270
243
|
|
|
271
|
-
function backgroundCoverFn(prop, el,
|
|
244
|
+
function backgroundCoverFn(prop, el, stops, bgPos, attr) {
|
|
245
|
+
const dimImage = getBackgroundImageDimensions(el);
|
|
272
246
|
|
|
273
|
-
|
|
247
|
+
if (!dimImage.width) {
|
|
248
|
+
return uikitUtil.noop;
|
|
249
|
+
}
|
|
274
250
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
var min = Math.min.apply(Math, steps);
|
|
280
|
-
var max = Math.max.apply(Math, steps);
|
|
281
|
-
var down = steps.indexOf(min) < steps.indexOf(max);
|
|
251
|
+
const values = stops.map((_ref2) => {let [value] = _ref2;return value;});
|
|
252
|
+
const min = Math.min(...values);
|
|
253
|
+
const max = Math.max(...values);
|
|
254
|
+
const down = values.indexOf(min) < values.indexOf(max);
|
|
282
255
|
|
|
283
|
-
|
|
284
|
-
|
|
256
|
+
const diff = max - min;
|
|
257
|
+
let pos = (down ? -diff : 0) - (down ? min : max);
|
|
285
258
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
};
|
|
259
|
+
const dimEl = {
|
|
260
|
+
width: el.offsetWidth,
|
|
261
|
+
height: el.offsetHeight };
|
|
290
262
|
|
|
291
|
-
var dimImage = {
|
|
292
|
-
width: image.naturalWidth,
|
|
293
|
-
height: image.naturalHeight
|
|
294
|
-
};
|
|
295
263
|
|
|
296
|
-
|
|
297
|
-
|
|
264
|
+
const baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
|
|
265
|
+
const span = baseDim[attr] - dimEl[attr];
|
|
298
266
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
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);
|
|
302
271
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
if (posPercentage) {
|
|
306
|
-
pos -= (span - diff) / posPercentage;
|
|
307
|
-
}
|
|
272
|
+
if (posPercentage) {
|
|
273
|
+
pos -= (span - diff) / posPercentage;
|
|
308
274
|
}
|
|
275
|
+
}
|
|
309
276
|
|
|
310
|
-
|
|
277
|
+
const dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
|
|
311
278
|
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
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
|
+
};
|
|
318
285
|
}
|
|
319
286
|
|
|
320
|
-
function setBackgroundPosFn(prop,
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
287
|
+
function setBackgroundPosFn(prop, stops, pos) {
|
|
288
|
+
return function (css, percent) {
|
|
289
|
+
css["background-position-" + prop] = "calc(" + pos + " + " + getValue(stops, percent) + "px)";
|
|
290
|
+
};
|
|
324
291
|
}
|
|
325
292
|
|
|
326
|
-
|
|
327
|
-
|
|
293
|
+
const dimensions = {};
|
|
294
|
+
function getBackgroundImageDimensions(el) {
|
|
295
|
+
const src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
|
|
328
296
|
|
|
329
|
-
|
|
297
|
+
if (dimensions[src]) {
|
|
298
|
+
return dimensions[src];
|
|
299
|
+
}
|
|
330
300
|
|
|
331
|
-
|
|
301
|
+
const image = new Image();
|
|
302
|
+
if (src) {
|
|
303
|
+
image.src = src;
|
|
332
304
|
|
|
333
|
-
if (
|
|
334
|
-
|
|
305
|
+
if (!image.naturalWidth) {
|
|
306
|
+
image.onload = () => {
|
|
307
|
+
dimensions[src] = toDimensions(image);
|
|
308
|
+
uikitUtil.trigger(el, 'bgimageload');
|
|
309
|
+
};
|
|
335
310
|
}
|
|
311
|
+
}
|
|
336
312
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
313
|
+
return dimensions[src] = toDimensions(image);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
function toDimensions(image) {
|
|
317
|
+
return {
|
|
318
|
+
width: image.naturalWidth,
|
|
319
|
+
height: image.naturalHeight };
|
|
343
320
|
|
|
344
|
-
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
function parseStops(stops, fn) {if (fn === void 0) {fn = uikitUtil.toFloat;}
|
|
324
|
+
const result = [];
|
|
325
|
+
for (const stop of stops) {
|
|
326
|
+
const [value, percent] = uikitUtil.isString(stop) ? stop.trim().split(' ') : [stop];
|
|
327
|
+
result.push([fn(value), percent ? uikitUtil.toFloat(percent) / 100 : null]);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
const { length } = result;
|
|
331
|
+
result[0][1] = 0;
|
|
332
|
+
result[length - 1][1] = 1;
|
|
333
|
+
for (let i = 1; i < length - 1; i++) {
|
|
334
|
+
if (result[i] === null) {
|
|
335
|
+
const nextIndex = uikitUtil.findIndex(result.slice(i + 1), (_ref3) => {let [, percent] = _ref3;return percent !== null;}) + 1;
|
|
336
|
+
const percent = (result[i + nextIndex] - result[i - 1][1]) / (nextIndex + 1);
|
|
337
|
+
for (let j = 0; j < nextIndex; j++) {
|
|
338
|
+
result[i + j][1] = percent * j + 1;
|
|
339
|
+
}
|
|
345
340
|
}
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
return result;
|
|
346
344
|
}
|
|
347
345
|
|
|
348
|
-
function
|
|
349
|
-
|
|
350
|
-
|
|
346
|
+
function getStop(stops, percent) {
|
|
347
|
+
const index = uikitUtil.findIndex(stops.slice(1), (_ref4) => {let [, targetPercent] = _ref4;return percent <= targetPercent;}) + 1;
|
|
348
|
+
return [
|
|
349
|
+
stops[index - 1][0],
|
|
350
|
+
stops[index][0],
|
|
351
|
+
(percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])];
|
|
351
352
|
|
|
352
|
-
return steps
|
|
353
|
-
.slice(index, index + 2)
|
|
354
|
-
.concat(percent === 1 ? 1 : percent % (1 / count) * count);
|
|
355
353
|
}
|
|
356
354
|
|
|
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;
|
|
355
|
+
function getValue(stops, percent) {
|
|
356
|
+
const [start, end, p] = getStop(stops, percent);
|
|
357
|
+
return uikitUtil.isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
|
|
365
358
|
}
|
|
366
359
|
|
|
367
|
-
function getUnit(
|
|
368
|
-
|
|
360
|
+
function getUnit(stops, defaultUnit) {
|
|
361
|
+
return (
|
|
362
|
+
stops.reduce(
|
|
363
|
+
(unit, stop) => unit || uikitUtil.isString(stop) && stop.replace(/[\d-]/g, '').trim(),
|
|
364
|
+
'') ||
|
|
365
|
+
defaultUnit);
|
|
366
|
+
|
|
369
367
|
}
|
|
370
368
|
|
|
371
369
|
function getCssValue(el, prop, value) {
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
370
|
+
const prev = el.style[prop];
|
|
371
|
+
const val = uikitUtil.css(uikitUtil.css(el, prop, value), prop);
|
|
372
|
+
el.style[prop] = prev;
|
|
373
|
+
return val;
|
|
376
374
|
}
|
|
377
375
|
|
|
378
376
|
function fillObject(keys, value) {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
377
|
+
return keys.reduce((data, prop) => {
|
|
378
|
+
data[prop] = value;
|
|
379
|
+
return data;
|
|
380
|
+
}, {});
|
|
383
381
|
}
|
|
384
382
|
|
|
385
383
|
var Component = {
|
|
384
|
+
mixins: [Parallax],
|
|
386
385
|
|
|
387
|
-
|
|
386
|
+
data: {
|
|
387
|
+
selItem: '!li' },
|
|
388
388
|
|
|
389
|
-
data: {
|
|
390
|
-
selItem: '!li'
|
|
391
|
-
},
|
|
392
389
|
|
|
393
|
-
|
|
390
|
+
computed: {
|
|
391
|
+
item(_ref, $el) {let { selItem } = _ref;
|
|
392
|
+
return uikitUtil.query(selItem, $el);
|
|
393
|
+
} },
|
|
394
394
|
|
|
395
|
-
item: function(ref, $el) {
|
|
396
|
-
var selItem = ref.selItem;
|
|
397
|
-
|
|
398
|
-
return uikitUtil.query(selItem, $el);
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
},
|
|
402
395
|
|
|
403
|
-
|
|
396
|
+
events: [
|
|
397
|
+
{
|
|
398
|
+
name: 'itemin itemout',
|
|
404
399
|
|
|
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;
|
|
400
|
+
self: true,
|
|
422
401
|
|
|
402
|
+
el() {
|
|
403
|
+
return this.item;
|
|
404
|
+
},
|
|
423
405
|
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
406
|
+
handler(_ref2) {let { type, detail: { percent, duration, timing, dir } } = _ref2;
|
|
407
|
+
uikitUtil.fastdom.read(() => {
|
|
408
|
+
const propsFrom = this.getCss(getCurrentPercent(type, dir, percent));
|
|
409
|
+
const propsTo = this.getCss(isIn(type) ? 0.5 : dir > 0 ? 1 : 0);
|
|
410
|
+
uikitUtil.fastdom.write(() => {
|
|
411
|
+
uikitUtil.css(this.$el, propsFrom);
|
|
412
|
+
uikitUtil.Transition.start(this.$el, propsTo, duration, timing).catch(uikitUtil.noop);
|
|
413
|
+
});
|
|
414
|
+
});
|
|
415
|
+
} },
|
|
432
416
|
|
|
433
|
-
}
|
|
434
|
-
},
|
|
435
417
|
|
|
436
|
-
|
|
437
|
-
|
|
418
|
+
{
|
|
419
|
+
name: 'transitioncanceled transitionend',
|
|
438
420
|
|
|
439
|
-
|
|
421
|
+
self: true,
|
|
440
422
|
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
423
|
+
el() {
|
|
424
|
+
return this.item;
|
|
425
|
+
},
|
|
444
426
|
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
427
|
+
handler() {
|
|
428
|
+
uikitUtil.Transition.cancel(this.$el);
|
|
429
|
+
} },
|
|
448
430
|
|
|
449
|
-
},
|
|
450
431
|
|
|
451
|
-
|
|
452
|
-
|
|
432
|
+
{
|
|
433
|
+
name: 'itemtranslatein itemtranslateout',
|
|
453
434
|
|
|
454
|
-
|
|
435
|
+
self: true,
|
|
455
436
|
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
437
|
+
el() {
|
|
438
|
+
return this.item;
|
|
439
|
+
},
|
|
459
440
|
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
441
|
+
handler(_ref3) {let { type, detail: { percent, dir } } = _ref3;
|
|
442
|
+
uikitUtil.fastdom.read(() => {
|
|
443
|
+
const props = this.getCss(getCurrentPercent(type, dir, percent));
|
|
444
|
+
uikitUtil.fastdom.write(() => uikitUtil.css(this.$el, props));
|
|
445
|
+
});
|
|
446
|
+
} }] };
|
|
466
447
|
|
|
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
448
|
|
|
474
|
-
]
|
|
475
449
|
|
|
476
|
-
};
|
|
477
450
|
|
|
478
451
|
function isIn(type) {
|
|
479
|
-
|
|
452
|
+
return uikitUtil.endsWith(type, 'in');
|
|
480
453
|
}
|
|
481
454
|
|
|
482
455
|
function getCurrentPercent(type, dir, percent) {
|
|
456
|
+
percent /= 2;
|
|
483
457
|
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
return isIn(type) ^ dir < 0 ? percent : 1 - percent;
|
|
458
|
+
return isIn(type) ^ dir < 0 ? percent : 1 - percent;
|
|
487
459
|
}
|
|
488
460
|
|
|
489
461
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
490
|
-
|
|
462
|
+
window.UIkit.component('slideshowParallax', Component);
|
|
491
463
|
}
|
|
492
464
|
|
|
493
465
|
return Component;
|