uikit 3.11.2-dev.fb043abc2 → 3.12.2
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 +63 -20
- 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 +144 -202
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +144 -202
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +146 -208
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +146 -208
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +66 -138
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +408 -439
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +1091 -1319
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1137 -1396
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +94 -114
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +347 -361
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +345 -360
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +749 -843
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +345 -360
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +628 -798
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +587 -620
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +324 -356
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +156 -167
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +5317 -6554
- 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 +8018 -9698
- 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 +32 -85
- 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 +16 -30
- package/src/js/components/slider-parallax.js +13 -23
- package/src/js/components/slider.js +117 -89
- package/src/js/components/slideshow-parallax.js +1 -1
- package/src/js/components/slideshow.js +15 -13
- package/src/js/components/sortable.js +125 -106
- package/src/js/components/tooltip.js +41 -31
- package/src/js/components/upload.js +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 +30 -34
- package/src/js/core/icon.js +47 -52
- package/src/js/core/img.js +153 -143
- package/src/js/core/index.js +39 -39
- package/src/js/core/leader.js +9 -18
- package/src/js/core/margin.js +21 -37
- package/src/js/core/modal.js +49 -36
- package/src/js/core/nav.js +2 -4
- package/src/js/core/navbar.js +113 -85
- package/src/js/core/offcanvas.js +51 -54
- package/src/js/core/overflow-auto.js +13 -17
- package/src/js/core/responsive.js +14 -12
- package/src/js/core/scroll.js +10 -20
- package/src/js/core/scrollspy-nav.js +34 -31
- package/src/js/core/scrollspy.js +37 -54
- package/src/js/core/sticky.js +161 -128
- package/src/js/core/svg.js +68 -83
- package/src/js/core/switcher.js +56 -47
- package/src/js/core/tab.js +7 -10
- package/src/js/core/toggle.js +69 -68
- package/src/js/core/video.js +22 -21
- package/src/js/mixin/animate.js +19 -20
- package/src/js/mixin/class.js +2 -4
- package/src/js/mixin/container.js +7 -11
- package/src/js/mixin/internal/animate-fade.js +73 -30
- package/src/js/mixin/internal/animate-slide.js +58 -41
- package/src/js/mixin/internal/slideshow-animations.js +7 -14
- package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
- package/src/js/mixin/lazyload.js +20 -0
- package/src/js/mixin/media.js +5 -10
- package/src/js/mixin/modal.js +89 -66
- package/src/js/mixin/parallax.js +149 -107
- package/src/js/mixin/position.js +26 -20
- package/src/js/mixin/slider-autoplay.js +12 -21
- package/src/js/mixin/slider-drag.js +64 -65
- package/src/js/mixin/slider-nav.js +26 -35
- package/src/js/mixin/slider-reactive.js +2 -8
- package/src/js/mixin/slider.js +47 -60
- package/src/js/mixin/slideshow.js +12 -22
- package/src/js/mixin/swipe.js +72 -0
- package/src/js/mixin/togglable.js +89 -63
- package/src/js/uikit-core.js +2 -4
- package/src/js/uikit.js +2 -4
- package/src/js/util/ajax.js +25 -40
- package/src/js/util/animation.js +77 -75
- package/src/js/util/attr.js +17 -21
- package/src/js/util/class.js +14 -52
- package/src/js/util/dimensions.js +58 -45
- package/src/js/util/dom.js +37 -66
- package/src/js/util/env.js +7 -12
- package/src/js/util/event.js +60 -59
- package/src/js/util/fastdom.js +1 -6
- package/src/js/util/filter.js +18 -36
- package/src/js/util/index.js +1 -1
- package/src/js/util/lang.js +82 -121
- package/src/js/util/mouse.js +19 -17
- package/src/js/util/observer.js +36 -0
- package/src/js/util/options.js +35 -49
- package/src/js/util/player.js +41 -36
- package/src/js/util/position.js +54 -46
- package/src/js/util/selector.js +43 -58
- package/src/js/util/style.js +39 -49
- package/src/js/util/viewport.js +75 -64
- package/src/less/components/base.less +10 -33
- package/src/less/components/flex.less +0 -9
- package/src/less/components/form-range.less +48 -95
- package/src/less/components/form.less +0 -1
- package/src/less/components/height.less +3 -0
- package/src/less/components/leader.less +0 -1
- package/src/less/components/lightbox.less +0 -1
- package/src/less/components/list.less +5 -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 +3 -3
- package/src/less/components/slideshow.less +3 -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/list.scss +5 -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 +3 -3
- package/src/scss/components/slideshow.scss +3 -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/countdown.html +10 -8
- 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 +57 -72
- package/tests/sticky.html +14 -3
- 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.
|
|
1
|
+
/*! UIkit 3.12.2 | 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,1840 +7,1581 @@
|
|
|
7
7
|
})(this, (function (uikitUtil) { 'use strict';
|
|
8
8
|
|
|
9
9
|
var Animations$1 = {
|
|
10
|
+
slide: {
|
|
11
|
+
show(dir) {
|
|
12
|
+
return [{ transform: translate(dir * -100) }, { transform: translate() }];
|
|
13
|
+
},
|
|
10
14
|
|
|
11
|
-
|
|
15
|
+
percent(current) {
|
|
16
|
+
return translated(current);
|
|
17
|
+
},
|
|
12
18
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
];
|
|
18
|
-
},
|
|
19
|
+
translate(percent, dir) {
|
|
20
|
+
return [
|
|
21
|
+
{ transform: translate(dir * -100 * percent) },
|
|
22
|
+
{ transform: translate(dir * 100 * (1 - percent)) }];
|
|
19
23
|
|
|
20
|
-
|
|
21
|
-
return translated(current);
|
|
22
|
-
},
|
|
24
|
+
} } };
|
|
23
25
|
|
|
24
|
-
translate: function(percent, dir) {
|
|
25
|
-
return [
|
|
26
|
-
{transform: translate(dir * -100 * percent)},
|
|
27
|
-
{transform: translate(dir * 100 * (1 - percent))}
|
|
28
|
-
];
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
}
|
|
32
26
|
|
|
33
|
-
};
|
|
34
27
|
|
|
35
28
|
function translated(el) {
|
|
36
|
-
|
|
29
|
+
return Math.abs(uikitUtil.css(el, 'transform').split(',')[4] / el.offsetWidth) || 0;
|
|
37
30
|
}
|
|
38
31
|
|
|
39
|
-
function translate(value, unit) {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
value += value ? unit : '';
|
|
44
|
-
return uikitUtil.isIE ? ("translateX(" + value + ")") : ("translate3d(" + value + ", 0, 0)"); // currently, not translate3d in IE, translate3d within translate3d does not work while transitioning
|
|
32
|
+
function translate(value, unit) {if (value === void 0) {value = 0;}if (unit === void 0) {unit = '%';}
|
|
33
|
+
value += value ? unit : '';
|
|
34
|
+
return "translate3d(" + value + ", 0, 0)";
|
|
45
35
|
}
|
|
46
36
|
|
|
47
37
|
function scale3d(value) {
|
|
48
|
-
|
|
38
|
+
return "scale3d(" + value + ", " + value + ", 1)";
|
|
49
39
|
}
|
|
50
40
|
|
|
51
|
-
var Animations =
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
return [
|
|
57
|
-
{opacity: 0},
|
|
58
|
-
{opacity: 1}
|
|
59
|
-
];
|
|
60
|
-
},
|
|
61
|
-
|
|
62
|
-
percent: function(current) {
|
|
63
|
-
return 1 - uikitUtil.css(current, 'opacity');
|
|
64
|
-
},
|
|
65
|
-
|
|
66
|
-
translate: function(percent) {
|
|
67
|
-
return [
|
|
68
|
-
{opacity: 1 - percent},
|
|
69
|
-
{opacity: percent}
|
|
70
|
-
];
|
|
71
|
-
}
|
|
72
|
-
|
|
41
|
+
var Animations = {
|
|
42
|
+
...Animations$1,
|
|
43
|
+
fade: {
|
|
44
|
+
show() {
|
|
45
|
+
return [{ opacity: 0 }, { opacity: 1 }];
|
|
73
46
|
},
|
|
74
47
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
return [
|
|
79
|
-
{opacity: 0, transform: scale3d(1 - .2)},
|
|
80
|
-
{opacity: 1, transform: scale3d(1)}
|
|
81
|
-
];
|
|
82
|
-
},
|
|
83
|
-
|
|
84
|
-
percent: function(current) {
|
|
85
|
-
return 1 - uikitUtil.css(current, 'opacity');
|
|
86
|
-
},
|
|
87
|
-
|
|
88
|
-
translate: function(percent) {
|
|
89
|
-
return [
|
|
90
|
-
{opacity: 1 - percent, transform: scale3d(1 - .2 * percent)},
|
|
91
|
-
{opacity: percent, transform: scale3d(1 - .2 + .2 * percent)}
|
|
92
|
-
];
|
|
93
|
-
}
|
|
48
|
+
percent(current) {
|
|
49
|
+
return 1 - uikitUtil.css(current, 'opacity');
|
|
50
|
+
},
|
|
94
51
|
|
|
95
|
-
|
|
52
|
+
translate(percent) {
|
|
53
|
+
return [{ opacity: 1 - percent }, { opacity: percent }];
|
|
54
|
+
} },
|
|
96
55
|
|
|
97
|
-
});
|
|
98
56
|
|
|
99
|
-
|
|
57
|
+
scale: {
|
|
58
|
+
show() {
|
|
59
|
+
return [
|
|
60
|
+
{ opacity: 0, transform: scale3d(1 - 0.2) },
|
|
61
|
+
{ opacity: 1, transform: scale3d(1) }];
|
|
100
62
|
|
|
101
|
-
props: {
|
|
102
|
-
container: Boolean
|
|
103
63
|
},
|
|
104
64
|
|
|
105
|
-
|
|
106
|
-
|
|
65
|
+
percent(current) {
|
|
66
|
+
return 1 - uikitUtil.css(current, 'opacity');
|
|
107
67
|
},
|
|
108
68
|
|
|
109
|
-
|
|
69
|
+
translate(percent) {
|
|
70
|
+
return [
|
|
71
|
+
{ opacity: 1 - percent, transform: scale3d(1 - 0.2 * percent) },
|
|
72
|
+
{ opacity: percent, transform: scale3d(1 - 0.2 + 0.2 * percent) }];
|
|
110
73
|
|
|
111
|
-
|
|
112
|
-
var container = ref.container;
|
|
74
|
+
} } };
|
|
113
75
|
|
|
114
|
-
|
|
115
|
-
|
|
76
|
+
var Container = {
|
|
77
|
+
props: {
|
|
78
|
+
container: Boolean },
|
|
116
79
|
|
|
117
|
-
}
|
|
118
80
|
|
|
119
|
-
|
|
81
|
+
data: {
|
|
82
|
+
container: true },
|
|
120
83
|
|
|
121
|
-
var Class = {
|
|
122
84
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
85
|
+
computed: {
|
|
86
|
+
container(_ref) {let { container } = _ref;
|
|
87
|
+
return container === true && this.$container || container && uikitUtil.$(container);
|
|
88
|
+
} } };
|
|
126
89
|
|
|
127
|
-
|
|
90
|
+
var Class = {
|
|
91
|
+
connected() {
|
|
92
|
+
!uikitUtil.hasClass(this.$el, this.$name) && uikitUtil.addClass(this.$el, this.$name);
|
|
93
|
+
} };
|
|
128
94
|
|
|
129
95
|
var Togglable = {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
96
|
+
props: {
|
|
97
|
+
cls: Boolean,
|
|
98
|
+
animation: 'list',
|
|
99
|
+
duration: Number,
|
|
100
|
+
origin: String,
|
|
101
|
+
transition: String },
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
data: {
|
|
105
|
+
cls: false,
|
|
106
|
+
animation: [false],
|
|
107
|
+
duration: 200,
|
|
108
|
+
origin: false,
|
|
109
|
+
transition: 'linear',
|
|
110
|
+
clsEnter: 'uk-togglabe-enter',
|
|
111
|
+
clsLeave: 'uk-togglabe-leave',
|
|
112
|
+
|
|
113
|
+
initProps: {
|
|
114
|
+
overflow: '',
|
|
115
|
+
height: '',
|
|
116
|
+
paddingTop: '',
|
|
117
|
+
paddingBottom: '',
|
|
118
|
+
marginTop: '',
|
|
119
|
+
marginBottom: '' },
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
hideProps: {
|
|
123
|
+
overflow: 'hidden',
|
|
124
|
+
height: 0,
|
|
125
|
+
paddingTop: 0,
|
|
126
|
+
paddingBottom: 0,
|
|
127
|
+
marginTop: 0,
|
|
128
|
+
marginBottom: 0 } },
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
computed: {
|
|
133
|
+
hasAnimation(_ref) {let { animation } = _ref;
|
|
134
|
+
return !!animation[0];
|
|
166
135
|
},
|
|
167
136
|
|
|
168
|
-
|
|
137
|
+
hasTransition(_ref2) {let { animation } = _ref2;
|
|
138
|
+
return this.hasAnimation && animation[0] === true;
|
|
139
|
+
} },
|
|
169
140
|
|
|
170
|
-
hasAnimation: function(ref) {
|
|
171
|
-
var animation = ref.animation;
|
|
172
141
|
|
|
173
|
-
|
|
174
|
-
|
|
142
|
+
methods: {
|
|
143
|
+
toggleElement(targets, toggle, animate) {
|
|
144
|
+
return new Promise((resolve) =>
|
|
145
|
+
Promise.all(
|
|
146
|
+
uikitUtil.toNodes(targets).map((el) => {
|
|
147
|
+
const show = uikitUtil.isBoolean(toggle) ? toggle : !this.isToggled(el);
|
|
175
148
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
return this.hasAnimation && animation[0] === true;
|
|
149
|
+
if (!uikitUtil.trigger(el, "before" + (show ? 'show' : 'hide'), [this])) {
|
|
150
|
+
return Promise.reject();
|
|
180
151
|
}
|
|
181
152
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
153
|
+
const promise = (
|
|
154
|
+
uikitUtil.isFunction(animate) ?
|
|
155
|
+
animate :
|
|
156
|
+
animate === false || !this.hasAnimation ?
|
|
157
|
+
this._toggle :
|
|
158
|
+
this.hasTransition ?
|
|
159
|
+
toggleHeight(this) :
|
|
160
|
+
toggleAnimation(this))(
|
|
161
|
+
el, show);
|
|
162
|
+
|
|
163
|
+
const cls = show ? this.clsEnter : this.clsLeave;
|
|
164
|
+
|
|
165
|
+
uikitUtil.addClass(el, cls);
|
|
166
|
+
|
|
167
|
+
uikitUtil.trigger(el, show ? 'show' : 'hide', [this]);
|
|
168
|
+
|
|
169
|
+
const done = () => {
|
|
170
|
+
uikitUtil.removeClass(el, cls);
|
|
171
|
+
uikitUtil.trigger(el, show ? 'shown' : 'hidden', [this]);
|
|
172
|
+
this.$update(el);
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
return promise ?
|
|
176
|
+
promise.then(done, () => {
|
|
177
|
+
uikitUtil.removeClass(el, cls);
|
|
178
|
+
return Promise.reject();
|
|
179
|
+
}) :
|
|
180
|
+
done();
|
|
181
|
+
})).
|
|
182
|
+
then(resolve, uikitUtil.noop));
|
|
208
183
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
uikitUtil.trigger(el, show ? 'show' : 'hide', [this$1$1]);
|
|
212
|
-
|
|
213
|
-
var done = function () {
|
|
214
|
-
uikitUtil.removeClass(el, cls);
|
|
215
|
-
uikitUtil.trigger(el, show ? 'shown' : 'hidden', [this$1$1]);
|
|
216
|
-
this$1$1.$update(el);
|
|
217
|
-
};
|
|
184
|
+
},
|
|
218
185
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
186
|
+
isToggled(el) {if (el === void 0) {el = this.$el;}
|
|
187
|
+
[el] = uikitUtil.toNodes(el);
|
|
188
|
+
return uikitUtil.hasClass(el, this.clsEnter) ?
|
|
189
|
+
true :
|
|
190
|
+
uikitUtil.hasClass(el, this.clsLeave) ?
|
|
191
|
+
false :
|
|
192
|
+
this.cls ?
|
|
193
|
+
uikitUtil.hasClass(el, this.cls.split(' ')[0]) :
|
|
194
|
+
uikitUtil.isVisible(el);
|
|
195
|
+
},
|
|
223
196
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
197
|
+
_toggle(el, toggled) {
|
|
198
|
+
if (!el) {
|
|
199
|
+
return;
|
|
200
|
+
}
|
|
227
201
|
|
|
228
|
-
|
|
229
|
-
var assign;
|
|
202
|
+
toggled = Boolean(toggled);
|
|
230
203
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
: uikitUtil.isVisible(el);
|
|
240
|
-
},
|
|
204
|
+
let changed;
|
|
205
|
+
if (this.cls) {
|
|
206
|
+
changed = uikitUtil.includes(this.cls, ' ') || toggled !== uikitUtil.hasClass(el, this.cls);
|
|
207
|
+
changed && uikitUtil.toggleClass(el, this.cls, uikitUtil.includes(this.cls, ' ') ? undefined : toggled);
|
|
208
|
+
} else {
|
|
209
|
+
changed = toggled === el.hidden;
|
|
210
|
+
changed && (el.hidden = !toggled);
|
|
211
|
+
}
|
|
241
212
|
|
|
242
|
-
|
|
213
|
+
uikitUtil.$$('[autofocus]', el).some((el) => uikitUtil.isVisible(el) ? el.focus() || true : el.blur());
|
|
243
214
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
215
|
+
if (changed) {
|
|
216
|
+
uikitUtil.trigger(el, 'toggled', [toggled, this]);
|
|
217
|
+
this.$update(el);
|
|
218
|
+
}
|
|
219
|
+
} } };
|
|
247
220
|
|
|
248
|
-
toggled = Boolean(toggled);
|
|
249
221
|
|
|
250
|
-
var changed;
|
|
251
|
-
if (this.cls) {
|
|
252
|
-
changed = uikitUtil.includes(this.cls, ' ') || toggled !== uikitUtil.hasClass(el, this.cls);
|
|
253
|
-
changed && uikitUtil.toggleClass(el, this.cls, uikitUtil.includes(this.cls, ' ') ? undefined : toggled);
|
|
254
|
-
} else {
|
|
255
|
-
changed = toggled === el.hidden;
|
|
256
|
-
changed && (el.hidden = !toggled);
|
|
257
|
-
}
|
|
258
222
|
|
|
259
|
-
|
|
223
|
+
function toggleHeight(_ref3) {let { isToggled, duration, initProps, hideProps, transition, _toggle } = _ref3;
|
|
224
|
+
return (el, show) => {
|
|
225
|
+
const inProgress = uikitUtil.Transition.inProgress(el);
|
|
226
|
+
const inner = el.hasChildNodes() ?
|
|
227
|
+
uikitUtil.toFloat(uikitUtil.css(el.firstElementChild, 'marginTop')) +
|
|
228
|
+
uikitUtil.toFloat(uikitUtil.css(el.lastElementChild, 'marginBottom')) :
|
|
229
|
+
0;
|
|
230
|
+
const currentHeight = uikitUtil.isVisible(el) ? uikitUtil.height(el) + (inProgress ? 0 : inner) : 0;
|
|
260
231
|
|
|
261
|
-
|
|
262
|
-
uikitUtil.trigger(el, 'toggled', [toggled, this]);
|
|
263
|
-
this.$update(el);
|
|
264
|
-
}
|
|
265
|
-
}
|
|
232
|
+
uikitUtil.Transition.cancel(el);
|
|
266
233
|
|
|
234
|
+
if (!isToggled(el)) {
|
|
235
|
+
_toggle(el, true);
|
|
267
236
|
}
|
|
268
237
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
// Update child components first
|
|
294
|
-
uikitUtil.fastdom.flush();
|
|
295
|
-
|
|
296
|
-
var endHeight = uikitUtil.height(el) + (inProgress ? 0 : inner);
|
|
297
|
-
uikitUtil.height(el, currentHeight);
|
|
298
|
-
|
|
299
|
-
return (show
|
|
300
|
-
? uikitUtil.Transition.start(el, uikitUtil.assign({}, initProps, {overflow: 'hidden', height: endHeight}), Math.round(duration * (1 - currentHeight / endHeight)), transition)
|
|
301
|
-
: uikitUtil.Transition.start(el, hideProps, Math.round(duration * (currentHeight / endHeight)), transition).then(function () { return _toggle(el, false); })
|
|
302
|
-
).then(function () { return uikitUtil.css(el, initProps); });
|
|
303
|
-
|
|
304
|
-
};
|
|
238
|
+
uikitUtil.height(el, '');
|
|
239
|
+
|
|
240
|
+
// Update child components first
|
|
241
|
+
uikitUtil.fastdom.flush();
|
|
242
|
+
|
|
243
|
+
const endHeight = uikitUtil.height(el) + (inProgress ? 0 : inner);
|
|
244
|
+
uikitUtil.height(el, currentHeight);
|
|
245
|
+
|
|
246
|
+
return (
|
|
247
|
+
show ?
|
|
248
|
+
uikitUtil.Transition.start(
|
|
249
|
+
el,
|
|
250
|
+
{ ...initProps, overflow: 'hidden', height: endHeight },
|
|
251
|
+
Math.round(duration * (1 - currentHeight / endHeight)),
|
|
252
|
+
transition) :
|
|
253
|
+
|
|
254
|
+
uikitUtil.Transition.start(
|
|
255
|
+
el,
|
|
256
|
+
hideProps,
|
|
257
|
+
Math.round(duration * (currentHeight / endHeight)),
|
|
258
|
+
transition).
|
|
259
|
+
then(() => _toggle(el, false))).
|
|
260
|
+
then(() => uikitUtil.css(el, initProps));
|
|
261
|
+
};
|
|
305
262
|
}
|
|
306
263
|
|
|
307
264
|
function toggleAnimation(cmp) {
|
|
308
|
-
|
|
265
|
+
return (el, show) => {
|
|
266
|
+
uikitUtil.Animation.cancel(el);
|
|
309
267
|
|
|
310
|
-
|
|
268
|
+
const { animation, duration, _toggle } = cmp;
|
|
311
269
|
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
270
|
+
if (show) {
|
|
271
|
+
_toggle(el, true);
|
|
272
|
+
return uikitUtil.Animation.in(el, animation[0], duration, cmp.origin);
|
|
273
|
+
}
|
|
315
274
|
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
return uikitUtil.Animation.in(el, animation[0], duration, cmp.origin);
|
|
319
|
-
}
|
|
275
|
+
return uikitUtil.Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(() =>
|
|
276
|
+
_toggle(el, false));
|
|
320
277
|
|
|
321
|
-
|
|
322
|
-
};
|
|
278
|
+
};
|
|
323
279
|
}
|
|
324
280
|
|
|
325
|
-
|
|
281
|
+
const active = [];
|
|
326
282
|
|
|
327
283
|
var Modal = {
|
|
284
|
+
mixins: [Class, Container, Togglable],
|
|
328
285
|
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
bgClose: Boolean,
|
|
336
|
-
stack: Boolean
|
|
337
|
-
},
|
|
338
|
-
|
|
339
|
-
data: {
|
|
340
|
-
cls: 'uk-open',
|
|
341
|
-
escClose: true,
|
|
342
|
-
bgClose: true,
|
|
343
|
-
overlay: true,
|
|
344
|
-
stack: false
|
|
345
|
-
},
|
|
346
|
-
|
|
347
|
-
computed: {
|
|
348
|
-
|
|
349
|
-
panel: function(ref, $el) {
|
|
350
|
-
var selPanel = ref.selPanel;
|
|
286
|
+
props: {
|
|
287
|
+
selPanel: String,
|
|
288
|
+
selClose: String,
|
|
289
|
+
escClose: Boolean,
|
|
290
|
+
bgClose: Boolean,
|
|
291
|
+
stack: Boolean },
|
|
351
292
|
|
|
352
|
-
return uikitUtil.$(selPanel, $el);
|
|
353
|
-
},
|
|
354
293
|
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
294
|
+
data: {
|
|
295
|
+
cls: 'uk-open',
|
|
296
|
+
escClose: true,
|
|
297
|
+
bgClose: true,
|
|
298
|
+
overlay: true,
|
|
299
|
+
stack: false },
|
|
358
300
|
|
|
359
|
-
bgClose: function(ref) {
|
|
360
|
-
var bgClose = ref.bgClose;
|
|
361
|
-
|
|
362
|
-
return bgClose && this.panel;
|
|
363
|
-
}
|
|
364
301
|
|
|
302
|
+
computed: {
|
|
303
|
+
panel(_ref, $el) {let { selPanel } = _ref;
|
|
304
|
+
return uikitUtil.$(selPanel, $el);
|
|
365
305
|
},
|
|
366
306
|
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
this.toggleElement(this.$el, false, false);
|
|
370
|
-
}
|
|
307
|
+
transitionElement() {
|
|
308
|
+
return this.panel;
|
|
371
309
|
},
|
|
372
310
|
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
name: 'click',
|
|
378
|
-
|
|
379
|
-
delegate: function() {
|
|
380
|
-
return this.selClose;
|
|
381
|
-
},
|
|
382
|
-
|
|
383
|
-
handler: function(e) {
|
|
384
|
-
e.preventDefault();
|
|
385
|
-
this.hide();
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
},
|
|
389
|
-
|
|
390
|
-
{
|
|
391
|
-
|
|
392
|
-
name: 'toggle',
|
|
311
|
+
bgClose(_ref2) {let { bgClose } = _ref2;
|
|
312
|
+
return bgClose && this.panel;
|
|
313
|
+
} },
|
|
393
314
|
|
|
394
|
-
self: true,
|
|
395
315
|
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
e.preventDefault();
|
|
403
|
-
|
|
404
|
-
if (this.isToggled() === uikitUtil.includes(active, this)) {
|
|
405
|
-
this.toggle();
|
|
406
|
-
}
|
|
407
|
-
}
|
|
316
|
+
beforeDisconnect() {
|
|
317
|
+
if (uikitUtil.includes(active, this)) {
|
|
318
|
+
this.toggleElement(this.$el, false, false);
|
|
319
|
+
}
|
|
320
|
+
},
|
|
408
321
|
|
|
409
|
-
|
|
322
|
+
events: [
|
|
323
|
+
{
|
|
324
|
+
name: 'click',
|
|
410
325
|
|
|
411
|
-
|
|
412
|
-
|
|
326
|
+
delegate() {
|
|
327
|
+
return this.selClose;
|
|
328
|
+
},
|
|
413
329
|
|
|
414
|
-
|
|
330
|
+
handler(e) {
|
|
331
|
+
e.preventDefault();
|
|
332
|
+
this.hide();
|
|
333
|
+
} },
|
|
415
334
|
|
|
416
|
-
handler: function(e) {
|
|
417
335
|
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
}
|
|
336
|
+
{
|
|
337
|
+
name: 'toggle',
|
|
421
338
|
|
|
422
|
-
|
|
423
|
-
uikitUtil.Promise.all(active.map(function (modal) { return modal.hide(); })).then(this.show);
|
|
424
|
-
e.preventDefault();
|
|
425
|
-
} else {
|
|
426
|
-
active.push(this);
|
|
427
|
-
}
|
|
428
|
-
}
|
|
339
|
+
self: true,
|
|
429
340
|
|
|
430
|
-
|
|
341
|
+
handler(e) {
|
|
342
|
+
if (e.defaultPrevented) {
|
|
343
|
+
return;
|
|
344
|
+
}
|
|
431
345
|
|
|
432
|
-
|
|
346
|
+
e.preventDefault();
|
|
433
347
|
|
|
434
|
-
|
|
348
|
+
if (this.isToggled() === uikitUtil.includes(active, this)) {
|
|
349
|
+
this.toggle();
|
|
350
|
+
}
|
|
351
|
+
} },
|
|
435
352
|
|
|
436
|
-
self: true,
|
|
437
353
|
|
|
438
|
-
|
|
439
|
-
|
|
354
|
+
{
|
|
355
|
+
name: 'beforeshow',
|
|
440
356
|
|
|
357
|
+
self: true,
|
|
441
358
|
|
|
442
|
-
|
|
359
|
+
handler(e) {
|
|
360
|
+
if (uikitUtil.includes(active, this)) {
|
|
361
|
+
return false;
|
|
362
|
+
}
|
|
443
363
|
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
364
|
+
if (!this.stack && active.length) {
|
|
365
|
+
Promise.all(active.map((modal) => modal.hide())).then(this.show);
|
|
366
|
+
e.preventDefault();
|
|
367
|
+
} else {
|
|
368
|
+
active.push(this);
|
|
369
|
+
}
|
|
370
|
+
} },
|
|
447
371
|
|
|
448
|
-
if (this.stack) {
|
|
449
|
-
uikitUtil.css(this.$el, 'zIndex', uikitUtil.toFloat(uikitUtil.css(this.$el, 'zIndex')) + active.length);
|
|
450
|
-
}
|
|
451
372
|
|
|
452
|
-
|
|
373
|
+
{
|
|
374
|
+
name: 'show',
|
|
453
375
|
|
|
454
|
-
|
|
455
|
-
uikitUtil.once(this.$el, 'hide', uikitUtil.on(document, uikitUtil.pointerDown, function (ref) {
|
|
456
|
-
var target = ref.target;
|
|
376
|
+
self: true,
|
|
457
377
|
|
|
378
|
+
handler() {
|
|
379
|
+
const docEl = document.documentElement;
|
|
458
380
|
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
381
|
+
if (uikitUtil.width(window) > docEl.clientWidth && this.overlay) {
|
|
382
|
+
uikitUtil.css(document.body, 'overflowY', 'scroll');
|
|
383
|
+
}
|
|
462
384
|
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
var newTarget = ref.target;
|
|
385
|
+
if (this.stack) {
|
|
386
|
+
uikitUtil.css(this.$el, 'zIndex', uikitUtil.toFloat(uikitUtil.css(this.$el, 'zIndex')) + active.length);
|
|
387
|
+
}
|
|
467
388
|
|
|
468
|
-
|
|
469
|
-
this$1$1.hide();
|
|
470
|
-
}
|
|
471
|
-
}, true);
|
|
389
|
+
uikitUtil.addClass(docEl, this.clsPage);
|
|
472
390
|
|
|
473
|
-
|
|
474
|
-
|
|
391
|
+
if (this.bgClose) {
|
|
392
|
+
uikitUtil.once(
|
|
393
|
+
this.$el,
|
|
394
|
+
'hide',
|
|
395
|
+
uikitUtil.on(document, uikitUtil.pointerDown, (_ref3) => {let { target } = _ref3;
|
|
396
|
+
if (
|
|
397
|
+
uikitUtil.last(active) !== this ||
|
|
398
|
+
this.overlay && !uikitUtil.within(target, this.$el) ||
|
|
399
|
+
uikitUtil.within(target, this.panel))
|
|
400
|
+
{
|
|
401
|
+
return;
|
|
402
|
+
}
|
|
475
403
|
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
404
|
+
uikitUtil.once(
|
|
405
|
+
document,
|
|
406
|
+
uikitUtil.pointerUp + " " + uikitUtil.pointerCancel + " scroll",
|
|
407
|
+
(_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
|
|
408
|
+
if (
|
|
409
|
+
!defaultPrevented &&
|
|
410
|
+
type === uikitUtil.pointerUp &&
|
|
411
|
+
target === newTarget)
|
|
412
|
+
{
|
|
413
|
+
this.hide();
|
|
483
414
|
}
|
|
415
|
+
},
|
|
416
|
+
true);
|
|
484
417
|
|
|
485
|
-
},
|
|
418
|
+
}),
|
|
419
|
+
{ self: true });
|
|
486
420
|
|
|
487
|
-
|
|
488
|
-
name: 'shown',
|
|
421
|
+
}
|
|
489
422
|
|
|
490
|
-
|
|
423
|
+
if (this.escClose) {
|
|
424
|
+
uikitUtil.once(
|
|
425
|
+
this.$el,
|
|
426
|
+
'hide',
|
|
427
|
+
uikitUtil.on(document, 'keydown', (e) => {
|
|
428
|
+
if (e.keyCode === 27 && uikitUtil.last(active) === this) {
|
|
429
|
+
this.hide();
|
|
430
|
+
}
|
|
431
|
+
}),
|
|
432
|
+
{ self: true });
|
|
491
433
|
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
uikitUtil.attr(this.$el, 'tabindex', '-1');
|
|
495
|
-
}
|
|
434
|
+
}
|
|
435
|
+
} },
|
|
496
436
|
|
|
497
|
-
if (!uikitUtil.$(':focus', this.$el)) {
|
|
498
|
-
this.$el.focus();
|
|
499
|
-
}
|
|
500
|
-
}
|
|
501
|
-
},
|
|
502
437
|
|
|
503
|
-
|
|
438
|
+
{
|
|
439
|
+
name: 'shown',
|
|
504
440
|
|
|
505
|
-
|
|
441
|
+
self: true,
|
|
506
442
|
|
|
507
|
-
|
|
443
|
+
handler() {
|
|
444
|
+
if (!uikitUtil.isFocusable(this.$el)) {
|
|
445
|
+
uikitUtil.attr(this.$el, 'tabindex', '-1');
|
|
446
|
+
}
|
|
508
447
|
|
|
509
|
-
|
|
510
|
-
|
|
448
|
+
if (!uikitUtil.$(':focus', this.$el)) {
|
|
449
|
+
this.$el.focus();
|
|
450
|
+
}
|
|
451
|
+
} },
|
|
511
452
|
|
|
512
453
|
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
}
|
|
454
|
+
{
|
|
455
|
+
name: 'hidden',
|
|
516
456
|
|
|
517
|
-
|
|
518
|
-
uikitUtil.css(document.body, 'overflowY', '');
|
|
519
|
-
}
|
|
457
|
+
self: true,
|
|
520
458
|
|
|
521
|
-
|
|
459
|
+
handler() {
|
|
460
|
+
if (uikitUtil.includes(active, this)) {
|
|
461
|
+
active.splice(active.indexOf(this), 1);
|
|
462
|
+
}
|
|
522
463
|
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
464
|
+
if (!active.length) {
|
|
465
|
+
uikitUtil.css(document.body, 'overflowY', '');
|
|
466
|
+
}
|
|
526
467
|
|
|
527
|
-
|
|
468
|
+
uikitUtil.css(this.$el, 'zIndex', '');
|
|
528
469
|
|
|
529
|
-
|
|
470
|
+
if (!active.some((modal) => modal.clsPage === this.clsPage)) {
|
|
471
|
+
uikitUtil.removeClass(document.documentElement, this.clsPage);
|
|
472
|
+
}
|
|
473
|
+
} }],
|
|
530
474
|
|
|
531
|
-
],
|
|
532
475
|
|
|
533
|
-
methods: {
|
|
534
476
|
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
477
|
+
methods: {
|
|
478
|
+
toggle() {
|
|
479
|
+
return this.isToggled() ? this.hide() : this.show();
|
|
480
|
+
},
|
|
538
481
|
|
|
539
|
-
|
|
540
|
-
|
|
482
|
+
show() {
|
|
483
|
+
if (this.container && uikitUtil.parent(this.$el) !== this.container) {
|
|
484
|
+
uikitUtil.append(this.container, this.$el);
|
|
485
|
+
return new Promise((resolve) =>
|
|
486
|
+
requestAnimationFrame(() => this.show().then(resolve)));
|
|
541
487
|
|
|
542
|
-
|
|
543
|
-
uikitUtil.append(this.container, this.$el);
|
|
544
|
-
return new uikitUtil.Promise(function (resolve) { return requestAnimationFrame(function () { return this$1$1.show().then(resolve); }
|
|
545
|
-
); }
|
|
546
|
-
);
|
|
547
|
-
}
|
|
488
|
+
}
|
|
548
489
|
|
|
549
|
-
|
|
550
|
-
|
|
490
|
+
return this.toggleElement(this.$el, true, animate(this));
|
|
491
|
+
},
|
|
551
492
|
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
493
|
+
hide() {
|
|
494
|
+
return this.toggleElement(this.$el, false, animate(this));
|
|
495
|
+
} } };
|
|
555
496
|
|
|
556
|
-
}
|
|
557
497
|
|
|
558
|
-
};
|
|
559
498
|
|
|
560
|
-
function animate(
|
|
561
|
-
|
|
562
|
-
|
|
499
|
+
function animate(_ref5) {let { transitionElement, _toggle } = _ref5;
|
|
500
|
+
return (el, show) =>
|
|
501
|
+
new Promise((resolve, reject) =>
|
|
502
|
+
uikitUtil.once(el, 'show hide', () => {
|
|
503
|
+
el._reject && el._reject();
|
|
504
|
+
el._reject = reject;
|
|
563
505
|
|
|
564
|
-
|
|
565
|
-
el._reject && el._reject();
|
|
566
|
-
el._reject = reject;
|
|
506
|
+
_toggle(el, show);
|
|
567
507
|
|
|
568
|
-
|
|
508
|
+
const off = uikitUtil.once(
|
|
509
|
+
transitionElement,
|
|
510
|
+
'transitionstart',
|
|
511
|
+
() => {
|
|
512
|
+
uikitUtil.once(transitionElement, 'transitionend transitioncancel', resolve, {
|
|
513
|
+
self: true });
|
|
569
514
|
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
}, {self: true});
|
|
515
|
+
clearTimeout(timer);
|
|
516
|
+
},
|
|
517
|
+
{ self: true });
|
|
574
518
|
|
|
575
|
-
var timer = setTimeout(function () {
|
|
576
|
-
off();
|
|
577
|
-
resolve();
|
|
578
|
-
}, uikitUtil.toMs(uikitUtil.css(transitionElement, 'transitionDuration')));
|
|
579
519
|
|
|
580
|
-
|
|
581
|
-
|
|
520
|
+
const timer = setTimeout(() => {
|
|
521
|
+
off();
|
|
522
|
+
resolve();
|
|
523
|
+
}, uikitUtil.toMs(uikitUtil.css(transitionElement, 'transitionDuration')));
|
|
524
|
+
})).
|
|
525
|
+
then(() => delete el._reject);
|
|
582
526
|
}
|
|
583
527
|
|
|
584
|
-
function Transitioner(prev, next, dir,
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
var percent = animation.percent;
|
|
590
|
-
var translate = animation.translate;
|
|
591
|
-
var show = animation.show; if ( show === void 0 ) show = uikitUtil.noop;
|
|
592
|
-
var props = show(dir);
|
|
593
|
-
var deferred = new uikitUtil.Deferred();
|
|
594
|
-
|
|
595
|
-
return {
|
|
596
|
-
|
|
597
|
-
dir: dir,
|
|
528
|
+
function Transitioner(prev, next, dir, _ref) {let { animation, easing } = _ref;
|
|
529
|
+
const { percent, translate, show = uikitUtil.noop } = animation;
|
|
530
|
+
const props = show(dir);
|
|
531
|
+
const deferred = new uikitUtil.Deferred();
|
|
598
532
|
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
if ( percent === void 0 ) percent = 0;
|
|
533
|
+
return {
|
|
534
|
+
dir,
|
|
602
535
|
|
|
536
|
+
show(duration, percent, linear) {if (percent === void 0) {percent = 0;}
|
|
537
|
+
const timing = linear ? 'linear' : easing;
|
|
538
|
+
duration -= Math.round(duration * uikitUtil.clamp(percent, -1, 1));
|
|
603
539
|
|
|
604
|
-
|
|
605
|
-
duration -= Math.round(duration * uikitUtil.clamp(percent, -1, 1));
|
|
540
|
+
this.translate(percent);
|
|
606
541
|
|
|
607
|
-
|
|
542
|
+
triggerUpdate(next, 'itemin', { percent, duration, timing, dir });
|
|
543
|
+
triggerUpdate(prev, 'itemout', { percent: 1 - percent, duration, timing, dir });
|
|
608
544
|
|
|
609
|
-
|
|
610
|
-
|
|
545
|
+
Promise.all([
|
|
546
|
+
uikitUtil.Transition.start(next, props[1], duration, timing),
|
|
547
|
+
uikitUtil.Transition.start(prev, props[0], duration, timing)]).
|
|
548
|
+
then(() => {
|
|
549
|
+
this.reset();
|
|
550
|
+
deferred.resolve();
|
|
551
|
+
}, uikitUtil.noop);
|
|
611
552
|
|
|
612
|
-
|
|
613
|
-
uikitUtil.Transition.start(next, props[1], duration, timing),
|
|
614
|
-
uikitUtil.Transition.start(prev, props[0], duration, timing)
|
|
615
|
-
]).then(function () {
|
|
616
|
-
this$1$1.reset();
|
|
617
|
-
deferred.resolve();
|
|
618
|
-
}, uikitUtil.noop);
|
|
619
|
-
|
|
620
|
-
return deferred.promise;
|
|
621
|
-
},
|
|
622
|
-
|
|
623
|
-
cancel: function() {
|
|
624
|
-
uikitUtil.Transition.cancel([next, prev]);
|
|
625
|
-
},
|
|
626
|
-
|
|
627
|
-
reset: function() {
|
|
628
|
-
for (var prop in props[0]) {
|
|
629
|
-
uikitUtil.css([next, prev], prop, '');
|
|
630
|
-
}
|
|
631
|
-
},
|
|
632
|
-
|
|
633
|
-
forward: function(duration, percent) {
|
|
634
|
-
if ( percent === void 0 ) percent = this.percent();
|
|
635
|
-
|
|
636
|
-
uikitUtil.Transition.cancel([next, prev]);
|
|
637
|
-
return this.show(duration, percent, true);
|
|
638
|
-
},
|
|
639
|
-
|
|
640
|
-
translate: function(percent) {
|
|
641
|
-
|
|
642
|
-
this.reset();
|
|
643
|
-
|
|
644
|
-
var props = translate(percent, dir);
|
|
645
|
-
uikitUtil.css(next, props[1]);
|
|
646
|
-
uikitUtil.css(prev, props[0]);
|
|
647
|
-
triggerUpdate(next, 'itemtranslatein', {percent: percent, dir: dir});
|
|
648
|
-
triggerUpdate(prev, 'itemtranslateout', {percent: 1 - percent, dir: dir});
|
|
649
|
-
|
|
650
|
-
},
|
|
651
|
-
|
|
652
|
-
percent: function() {
|
|
653
|
-
return percent(prev || next, next, dir);
|
|
654
|
-
},
|
|
655
|
-
|
|
656
|
-
getDistance: function() {
|
|
657
|
-
return prev && prev.offsetWidth;
|
|
658
|
-
}
|
|
659
|
-
|
|
660
|
-
};
|
|
661
|
-
|
|
662
|
-
}
|
|
663
|
-
|
|
664
|
-
function triggerUpdate(el, type, data) {
|
|
665
|
-
uikitUtil.trigger(el, uikitUtil.createEvent(type, false, false, data));
|
|
666
|
-
}
|
|
667
|
-
|
|
668
|
-
var SliderAutoplay = {
|
|
669
|
-
|
|
670
|
-
props: {
|
|
671
|
-
autoplay: Boolean,
|
|
672
|
-
autoplayInterval: Number,
|
|
673
|
-
pauseOnHover: Boolean
|
|
674
|
-
},
|
|
675
|
-
|
|
676
|
-
data: {
|
|
677
|
-
autoplay: false,
|
|
678
|
-
autoplayInterval: 7000,
|
|
679
|
-
pauseOnHover: true
|
|
553
|
+
return deferred.promise;
|
|
680
554
|
},
|
|
681
555
|
|
|
682
|
-
|
|
683
|
-
|
|
556
|
+
cancel() {
|
|
557
|
+
uikitUtil.Transition.cancel([next, prev]);
|
|
684
558
|
},
|
|
685
559
|
|
|
686
|
-
|
|
687
|
-
|
|
560
|
+
reset() {
|
|
561
|
+
for (const prop in props[0]) {
|
|
562
|
+
uikitUtil.css([next, prev], prop, '');
|
|
563
|
+
}
|
|
688
564
|
},
|
|
689
565
|
|
|
690
|
-
|
|
691
|
-
|
|
566
|
+
forward(duration, percent) {if (percent === void 0) {percent = this.percent();}
|
|
567
|
+
uikitUtil.Transition.cancel([next, prev]);
|
|
568
|
+
return this.show(duration, percent, true);
|
|
692
569
|
},
|
|
693
570
|
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
{
|
|
697
|
-
|
|
698
|
-
name: 'visibilitychange',
|
|
699
|
-
|
|
700
|
-
el: function() {
|
|
701
|
-
return document;
|
|
702
|
-
},
|
|
703
|
-
|
|
704
|
-
filter: function() {
|
|
705
|
-
return this.autoplay;
|
|
706
|
-
},
|
|
571
|
+
translate(percent) {
|
|
572
|
+
this.reset();
|
|
707
573
|
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
}
|
|
574
|
+
const props = translate(percent, dir);
|
|
575
|
+
uikitUtil.css(next, props[1]);
|
|
576
|
+
uikitUtil.css(prev, props[0]);
|
|
577
|
+
triggerUpdate(next, 'itemtranslatein', { percent, dir });
|
|
578
|
+
triggerUpdate(prev, 'itemtranslateout', { percent: 1 - percent, dir });
|
|
579
|
+
},
|
|
715
580
|
|
|
716
|
-
|
|
581
|
+
percent() {
|
|
582
|
+
return percent(prev || next, next, dir);
|
|
583
|
+
},
|
|
717
584
|
|
|
718
|
-
|
|
585
|
+
getDistance() {
|
|
586
|
+
return prev == null ? void 0 : prev.offsetWidth;
|
|
587
|
+
} };
|
|
719
588
|
|
|
720
|
-
|
|
589
|
+
}
|
|
721
590
|
|
|
722
|
-
|
|
723
|
-
|
|
591
|
+
function triggerUpdate(el, type, data) {
|
|
592
|
+
uikitUtil.trigger(el, uikitUtil.createEvent(type, false, false, data));
|
|
593
|
+
}
|
|
724
594
|
|
|
595
|
+
var SliderAutoplay = {
|
|
596
|
+
props: {
|
|
597
|
+
autoplay: Boolean,
|
|
598
|
+
autoplayInterval: Number,
|
|
599
|
+
pauseOnHover: Boolean },
|
|
725
600
|
|
|
726
|
-
this.stopAutoplay();
|
|
727
601
|
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
&& this$1$1.show('next'); },
|
|
733
|
-
this.autoplayInterval
|
|
734
|
-
);
|
|
602
|
+
data: {
|
|
603
|
+
autoplay: false,
|
|
604
|
+
autoplayInterval: 7000,
|
|
605
|
+
pauseOnHover: true },
|
|
735
606
|
|
|
736
|
-
},
|
|
737
607
|
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
608
|
+
connected() {
|
|
609
|
+
this.autoplay && this.startAutoplay();
|
|
610
|
+
},
|
|
741
611
|
|
|
742
|
-
|
|
612
|
+
disconnected() {
|
|
613
|
+
this.stopAutoplay();
|
|
614
|
+
},
|
|
743
615
|
|
|
744
|
-
|
|
616
|
+
update() {
|
|
617
|
+
uikitUtil.attr(this.slides, 'tabindex', '-1');
|
|
618
|
+
},
|
|
745
619
|
|
|
746
|
-
|
|
620
|
+
events: [
|
|
621
|
+
{
|
|
622
|
+
name: 'visibilitychange',
|
|
747
623
|
|
|
748
|
-
|
|
749
|
-
|
|
624
|
+
el() {
|
|
625
|
+
return document;
|
|
750
626
|
},
|
|
751
627
|
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
threshold: 10
|
|
628
|
+
filter() {
|
|
629
|
+
return this.autoplay;
|
|
755
630
|
},
|
|
756
631
|
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
this$1$1[key] = function (e) {
|
|
632
|
+
handler() {
|
|
633
|
+
if (document.hidden) {
|
|
634
|
+
this.stopAutoplay();
|
|
635
|
+
} else {
|
|
636
|
+
this.startAutoplay();
|
|
637
|
+
}
|
|
638
|
+
} }],
|
|
765
639
|
|
|
766
|
-
var pos = uikitUtil.getEventPos(e).x * (uikitUtil.isRtl ? -1 : 1);
|
|
767
640
|
|
|
768
|
-
this$1$1.prevPos = pos !== this$1$1.pos ? this$1$1.pos : this$1$1.prevPos;
|
|
769
|
-
this$1$1.pos = pos;
|
|
770
641
|
|
|
771
|
-
|
|
772
|
-
|
|
642
|
+
methods: {
|
|
643
|
+
startAutoplay() {
|
|
644
|
+
this.stopAutoplay();
|
|
773
645
|
|
|
774
|
-
|
|
646
|
+
this.interval = setInterval(
|
|
647
|
+
() =>
|
|
648
|
+
(!this.draggable || !uikitUtil.$(':focus', this.$el)) && (
|
|
649
|
+
!this.pauseOnHover || !uikitUtil.matches(this.$el, ':hover')) &&
|
|
650
|
+
!this.stack.length &&
|
|
651
|
+
this.show('next'),
|
|
652
|
+
this.autoplayInterval);
|
|
775
653
|
|
|
776
654
|
},
|
|
777
655
|
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
name: uikitUtil.pointerDown,
|
|
783
|
-
|
|
784
|
-
delegate: function() {
|
|
785
|
-
return this.selSlides;
|
|
786
|
-
},
|
|
787
|
-
|
|
788
|
-
handler: function(e) {
|
|
789
|
-
|
|
790
|
-
if (!this.draggable
|
|
791
|
-
|| !uikitUtil.isTouch(e) && hasTextNodesOnly(e.target)
|
|
792
|
-
|| uikitUtil.closest(e.target, uikitUtil.selInput)
|
|
793
|
-
|| e.button > 0
|
|
794
|
-
|| this.length < 2
|
|
795
|
-
) {
|
|
796
|
-
return;
|
|
797
|
-
}
|
|
798
|
-
|
|
799
|
-
this.start(e);
|
|
800
|
-
}
|
|
801
|
-
|
|
802
|
-
},
|
|
803
|
-
|
|
804
|
-
{
|
|
805
|
-
name: 'dragstart',
|
|
806
|
-
|
|
807
|
-
handler: function(e) {
|
|
808
|
-
e.preventDefault();
|
|
809
|
-
}
|
|
810
|
-
}
|
|
656
|
+
stopAutoplay() {
|
|
657
|
+
this.interval && clearInterval(this.interval);
|
|
658
|
+
} } };
|
|
811
659
|
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
start: function() {
|
|
660
|
+
var SliderDrag = {
|
|
661
|
+
props: {
|
|
662
|
+
draggable: Boolean },
|
|
817
663
|
|
|
818
|
-
this.drag = this.pos;
|
|
819
664
|
|
|
820
|
-
|
|
665
|
+
data: {
|
|
666
|
+
draggable: true,
|
|
667
|
+
threshold: 10 },
|
|
821
668
|
|
|
822
|
-
this.percent = this._transitioner.percent();
|
|
823
|
-
this.drag += this._transitioner.getDistance() * this.percent * this.dir;
|
|
824
669
|
|
|
825
|
-
|
|
826
|
-
|
|
670
|
+
created() {
|
|
671
|
+
for (const key of ['start', 'move', 'end']) {
|
|
672
|
+
const fn = this[key];
|
|
673
|
+
this[key] = (e) => {
|
|
674
|
+
const pos = uikitUtil.getEventPos(e).x * (uikitUtil.isRtl ? -1 : 1);
|
|
827
675
|
|
|
828
|
-
|
|
676
|
+
this.prevPos = pos === this.pos ? this.prevPos : this.pos;
|
|
677
|
+
this.pos = pos;
|
|
829
678
|
|
|
830
|
-
|
|
679
|
+
fn(e);
|
|
680
|
+
};
|
|
681
|
+
}
|
|
682
|
+
},
|
|
831
683
|
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
684
|
+
events: [
|
|
685
|
+
{
|
|
686
|
+
name: uikitUtil.pointerDown,
|
|
835
687
|
|
|
836
|
-
|
|
688
|
+
delegate() {
|
|
689
|
+
return this.selSlides;
|
|
690
|
+
},
|
|
837
691
|
|
|
838
|
-
|
|
839
|
-
|
|
692
|
+
handler(e) {
|
|
693
|
+
if (
|
|
694
|
+
!this.draggable ||
|
|
695
|
+
!uikitUtil.isTouch(e) && hasTextNodesOnly(e.target) ||
|
|
696
|
+
uikitUtil.closest(e.target, uikitUtil.selInput) ||
|
|
697
|
+
e.button > 0 ||
|
|
698
|
+
this.length < 2)
|
|
699
|
+
{
|
|
700
|
+
return;
|
|
701
|
+
}
|
|
840
702
|
|
|
841
|
-
|
|
703
|
+
this.start(e);
|
|
704
|
+
} },
|
|
842
705
|
|
|
843
|
-
},
|
|
844
706
|
|
|
845
|
-
|
|
846
|
-
|
|
707
|
+
{
|
|
708
|
+
name: 'dragstart',
|
|
847
709
|
|
|
710
|
+
handler(e) {
|
|
711
|
+
e.preventDefault();
|
|
712
|
+
} }],
|
|
848
713
|
|
|
849
|
-
var distance = this.pos - this.drag;
|
|
850
714
|
|
|
851
|
-
if (distance === 0 || this.prevPos === this.pos || !this.dragging && Math.abs(distance) < this.threshold) {
|
|
852
|
-
return;
|
|
853
|
-
}
|
|
854
715
|
|
|
855
|
-
|
|
856
|
-
|
|
716
|
+
methods: {
|
|
717
|
+
start() {
|
|
718
|
+
this.drag = this.pos;
|
|
857
719
|
|
|
858
|
-
|
|
720
|
+
if (this._transitioner) {
|
|
721
|
+
this.percent = this._transitioner.percent();
|
|
722
|
+
this.drag += this._transitioner.getDistance() * this.percent * this.dir;
|
|
859
723
|
|
|
860
|
-
|
|
861
|
-
|
|
724
|
+
this._transitioner.cancel();
|
|
725
|
+
this._transitioner.translate(this.percent);
|
|
862
726
|
|
|
863
|
-
|
|
864
|
-
var slides = ref.slides;
|
|
865
|
-
var ref$1 = this;
|
|
866
|
-
var prevIndex = ref$1.prevIndex;
|
|
867
|
-
var dis = Math.abs(distance);
|
|
868
|
-
var nextIndex = this.getIndex(prevIndex + this.dir, prevIndex);
|
|
869
|
-
var width = this._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth;
|
|
727
|
+
this.dragging = true;
|
|
870
728
|
|
|
871
|
-
|
|
729
|
+
this.stack = [];
|
|
730
|
+
} else {
|
|
731
|
+
this.prevIndex = this.index;
|
|
732
|
+
}
|
|
872
733
|
|
|
873
|
-
|
|
734
|
+
uikitUtil.on(document, uikitUtil.pointerMove, this.move, { passive: false });
|
|
874
735
|
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
nextIndex = this.getIndex(prevIndex + this.dir, prevIndex);
|
|
878
|
-
width = this._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth;
|
|
736
|
+
// 'input' event is triggered by video controls
|
|
737
|
+
uikitUtil.on(document, uikitUtil.pointerUp + " " + uikitUtil.pointerCancel + " input", this.end, true);
|
|
879
738
|
|
|
880
|
-
|
|
739
|
+
uikitUtil.css(this.list, 'userSelect', 'none');
|
|
740
|
+
},
|
|
881
741
|
|
|
882
|
-
|
|
742
|
+
move(e) {
|
|
743
|
+
const distance = this.pos - this.drag;
|
|
883
744
|
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
745
|
+
if (
|
|
746
|
+
distance === 0 ||
|
|
747
|
+
this.prevPos === this.pos ||
|
|
748
|
+
!this.dragging && Math.abs(distance) < this.threshold)
|
|
749
|
+
{
|
|
750
|
+
return;
|
|
751
|
+
}
|
|
888
752
|
|
|
889
|
-
|
|
753
|
+
// prevent click event
|
|
754
|
+
uikitUtil.css(this.list, 'pointerEvents', 'none');
|
|
890
755
|
|
|
891
|
-
|
|
892
|
-
uikitUtil.trigger(slides[i], 'itemhidden', [this$1$1]);
|
|
756
|
+
e.cancelable && e.preventDefault();
|
|
893
757
|
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
this$1$1.prevIndex = prevIndex;
|
|
897
|
-
}
|
|
758
|
+
this.dragging = true;
|
|
759
|
+
this.dir = distance < 0 ? 1 : -1;
|
|
898
760
|
|
|
899
|
-
|
|
761
|
+
const { slides } = this;
|
|
762
|
+
let { prevIndex } = this;
|
|
763
|
+
let dis = Math.abs(distance);
|
|
764
|
+
let nextIndex = this.getIndex(prevIndex + this.dir, prevIndex);
|
|
765
|
+
let width = this._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth;
|
|
900
766
|
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
}
|
|
767
|
+
while (nextIndex !== prevIndex && dis > width) {
|
|
768
|
+
this.drag -= width * this.dir;
|
|
904
769
|
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
770
|
+
prevIndex = nextIndex;
|
|
771
|
+
dis -= width;
|
|
772
|
+
nextIndex = this.getIndex(prevIndex + this.dir, prevIndex);
|
|
773
|
+
width = this._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth;
|
|
774
|
+
}
|
|
908
775
|
|
|
909
|
-
|
|
910
|
-
uikitUtil.trigger(next, 'beforeitemshow', [this]);
|
|
911
|
-
}
|
|
776
|
+
this.percent = dis / width;
|
|
912
777
|
|
|
913
|
-
|
|
778
|
+
const prev = slides[prevIndex];
|
|
779
|
+
const next = slides[nextIndex];
|
|
780
|
+
const changed = this.index !== nextIndex;
|
|
781
|
+
const edge = prevIndex === nextIndex;
|
|
914
782
|
|
|
915
|
-
|
|
916
|
-
!edge && uikitUtil.trigger(prev, 'itemhide', [this]);
|
|
917
|
-
uikitUtil.trigger(next, 'itemshow', [this]);
|
|
918
|
-
}
|
|
783
|
+
let itemShown;
|
|
919
784
|
|
|
920
|
-
|
|
785
|
+
[this.index, this.prevIndex].
|
|
786
|
+
filter((i) => !uikitUtil.includes([nextIndex, prevIndex], i)).
|
|
787
|
+
forEach((i) => {
|
|
788
|
+
uikitUtil.trigger(slides[i], 'itemhidden', [this]);
|
|
921
789
|
|
|
922
|
-
|
|
790
|
+
if (edge) {
|
|
791
|
+
itemShown = true;
|
|
792
|
+
this.prevIndex = prevIndex;
|
|
793
|
+
}
|
|
794
|
+
});
|
|
923
795
|
|
|
924
|
-
|
|
925
|
-
|
|
796
|
+
if (this.index === prevIndex && this.prevIndex !== prevIndex || itemShown) {
|
|
797
|
+
uikitUtil.trigger(slides[this.index], 'itemshown', [this]);
|
|
798
|
+
}
|
|
926
799
|
|
|
927
|
-
|
|
800
|
+
if (changed) {
|
|
801
|
+
this.prevIndex = prevIndex;
|
|
802
|
+
this.index = nextIndex;
|
|
928
803
|
|
|
929
|
-
|
|
804
|
+
!edge && uikitUtil.trigger(prev, 'beforeitemhide', [this]);
|
|
805
|
+
uikitUtil.trigger(next, 'beforeitemshow', [this]);
|
|
806
|
+
}
|
|
930
807
|
|
|
931
|
-
|
|
932
|
-
this.percent = 1 - this.percent;
|
|
933
|
-
this.dir *= -1;
|
|
934
|
-
this._show(false, this.index, true);
|
|
935
|
-
this._transitioner = null;
|
|
936
|
-
} else {
|
|
808
|
+
this._transitioner = this._translate(Math.abs(this.percent), prev, !edge && next);
|
|
937
809
|
|
|
938
|
-
|
|
939
|
-
|
|
810
|
+
if (changed) {
|
|
811
|
+
!edge && uikitUtil.trigger(prev, 'itemhide', [this]);
|
|
812
|
+
uikitUtil.trigger(next, 'itemshow', [this]);
|
|
813
|
+
}
|
|
814
|
+
},
|
|
940
815
|
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
816
|
+
end() {
|
|
817
|
+
uikitUtil.off(document, uikitUtil.pointerMove, this.move, { passive: false });
|
|
818
|
+
uikitUtil.off(document, uikitUtil.pointerUp + " " + uikitUtil.pointerCancel + " input", this.end, true);
|
|
819
|
+
|
|
820
|
+
if (this.dragging) {
|
|
821
|
+
this.dragging = null;
|
|
822
|
+
|
|
823
|
+
if (this.index === this.prevIndex) {
|
|
824
|
+
this.percent = 1 - this.percent;
|
|
825
|
+
this.dir *= -1;
|
|
826
|
+
this._show(false, this.index, true);
|
|
827
|
+
this._transitioner = null;
|
|
828
|
+
} else {
|
|
829
|
+
const dirChange =
|
|
830
|
+
(uikitUtil.isRtl ? this.dir * (uikitUtil.isRtl ? 1 : -1) : this.dir) < 0 ===
|
|
831
|
+
this.prevPos > this.pos;
|
|
832
|
+
this.index = dirChange ? this.index : this.prevIndex;
|
|
833
|
+
|
|
834
|
+
if (dirChange) {
|
|
835
|
+
this.percent = 1 - this.percent;
|
|
836
|
+
}
|
|
837
|
+
|
|
838
|
+
this.show(
|
|
839
|
+
this.dir > 0 && !dirChange || this.dir < 0 && dirChange ?
|
|
840
|
+
'next' :
|
|
841
|
+
'previous',
|
|
842
|
+
true);
|
|
944
843
|
|
|
945
|
-
|
|
946
|
-
|
|
844
|
+
}
|
|
845
|
+
}
|
|
947
846
|
|
|
948
|
-
|
|
847
|
+
uikitUtil.css(this.list, { userSelect: '', pointerEvents: '' });
|
|
949
848
|
|
|
950
|
-
|
|
849
|
+
this.drag = this.percent = null;
|
|
850
|
+
} } };
|
|
951
851
|
|
|
952
|
-
this.drag
|
|
953
|
-
= this.percent
|
|
954
|
-
= null;
|
|
955
852
|
|
|
956
|
-
}
|
|
957
|
-
|
|
958
|
-
}
|
|
959
|
-
|
|
960
|
-
};
|
|
961
853
|
|
|
962
854
|
function hasTextNodesOnly(el) {
|
|
963
|
-
|
|
855
|
+
return !el.children.length && el.childNodes.length;
|
|
964
856
|
}
|
|
965
857
|
|
|
966
858
|
var SliderNav = {
|
|
859
|
+
data: {
|
|
860
|
+
selNav: false },
|
|
967
861
|
|
|
968
|
-
data: {
|
|
969
|
-
selNav: false
|
|
970
|
-
},
|
|
971
|
-
|
|
972
|
-
computed: {
|
|
973
|
-
|
|
974
|
-
nav: function(ref, $el) {
|
|
975
|
-
var selNav = ref.selNav;
|
|
976
|
-
|
|
977
|
-
return uikitUtil.$(selNav, $el);
|
|
978
|
-
},
|
|
979
|
-
|
|
980
|
-
selNavItem: function(ref) {
|
|
981
|
-
var attrItem = ref.attrItem;
|
|
982
|
-
|
|
983
|
-
return ("[" + attrItem + "],[data-" + attrItem + "]");
|
|
984
|
-
},
|
|
985
|
-
|
|
986
|
-
navItems: function(_, $el) {
|
|
987
|
-
return uikitUtil.$$(this.selNavItem, $el);
|
|
988
|
-
}
|
|
989
862
|
|
|
863
|
+
computed: {
|
|
864
|
+
nav(_ref, $el) {let { selNav } = _ref;
|
|
865
|
+
return uikitUtil.$(selNav, $el);
|
|
990
866
|
},
|
|
991
867
|
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
write: function() {
|
|
995
|
-
var this$1$1 = this;
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
if (this.nav && this.length !== this.nav.children.length) {
|
|
999
|
-
uikitUtil.html(this.nav, this.slides.map(function (_, i) { return ("<li " + (this$1$1.attrItem) + "=\"" + i + "\"><a href></a></li>"); }).join(''));
|
|
1000
|
-
}
|
|
1001
|
-
|
|
1002
|
-
this.navItems.concat(this.nav).forEach(function (el) { return el && (el.hidden = !this$1$1.maxIndex); });
|
|
1003
|
-
|
|
1004
|
-
this.updateNav();
|
|
1005
|
-
|
|
1006
|
-
},
|
|
1007
|
-
|
|
1008
|
-
events: ['resize']
|
|
1009
|
-
|
|
868
|
+
selNavItem(_ref2) {let { attrItem } = _ref2;
|
|
869
|
+
return "[" + attrItem + "],[data-" + attrItem + "]";
|
|
1010
870
|
},
|
|
1011
871
|
|
|
1012
|
-
|
|
872
|
+
navItems(_, $el) {
|
|
873
|
+
return uikitUtil.$$(this.selNavItem, $el);
|
|
874
|
+
} },
|
|
1013
875
|
|
|
1014
|
-
{
|
|
1015
876
|
|
|
1016
|
-
|
|
877
|
+
update: {
|
|
878
|
+
write() {
|
|
879
|
+
if (this.nav && this.length !== this.nav.children.length) {
|
|
880
|
+
uikitUtil.html(
|
|
881
|
+
this.nav,
|
|
882
|
+
this.slides.
|
|
883
|
+
map((_, i) => "<li " + this.attrItem + "=\"" + i + "\"><a href></a></li>").
|
|
884
|
+
join(''));
|
|
1017
885
|
|
|
1018
|
-
|
|
1019
|
-
return this.selNavItem;
|
|
1020
|
-
},
|
|
886
|
+
}
|
|
1021
887
|
|
|
1022
|
-
|
|
1023
|
-
e.preventDefault();
|
|
1024
|
-
this.show(uikitUtil.data(e.current, this.attrItem));
|
|
1025
|
-
}
|
|
888
|
+
this.navItems.concat(this.nav).forEach((el) => el && (el.hidden = !this.maxIndex));
|
|
1026
889
|
|
|
1027
|
-
|
|
890
|
+
this.updateNav();
|
|
891
|
+
},
|
|
1028
892
|
|
|
1029
|
-
|
|
893
|
+
events: ['resize'] },
|
|
1030
894
|
|
|
1031
|
-
name: 'itemshow',
|
|
1032
|
-
handler: 'updateNav'
|
|
1033
895
|
|
|
1034
|
-
|
|
896
|
+
events: [
|
|
897
|
+
{
|
|
898
|
+
name: 'click',
|
|
1035
899
|
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
900
|
+
delegate() {
|
|
901
|
+
return this.selNavItem;
|
|
902
|
+
},
|
|
1039
903
|
|
|
1040
|
-
|
|
1041
|
-
|
|
904
|
+
handler(e) {
|
|
905
|
+
e.preventDefault();
|
|
906
|
+
this.show(uikitUtil.data(e.current, this.attrItem));
|
|
907
|
+
} },
|
|
1042
908
|
|
|
1043
909
|
|
|
1044
|
-
|
|
1045
|
-
|
|
910
|
+
{
|
|
911
|
+
name: 'itemshow',
|
|
912
|
+
handler: 'updateNav' }],
|
|
1046
913
|
|
|
1047
|
-
var cmd = uikitUtil.data(el, this$1$1.attrItem);
|
|
1048
914
|
|
|
1049
|
-
uikitUtil.toggleClass(el, this$1$1.clsActive, uikitUtil.toNumber(cmd) === i);
|
|
1050
|
-
uikitUtil.toggleClass(el, 'uk-invisible', this$1$1.finite && (cmd === 'previous' && i === 0 || cmd === 'next' && i >= this$1$1.maxIndex));
|
|
1051
|
-
});
|
|
1052
915
|
|
|
1053
|
-
|
|
916
|
+
methods: {
|
|
917
|
+
updateNav() {
|
|
918
|
+
const i = this.getValidIndex();
|
|
919
|
+
for (const el of this.navItems) {
|
|
920
|
+
const cmd = uikitUtil.data(el, this.attrItem);
|
|
1054
921
|
|
|
1055
|
-
|
|
922
|
+
uikitUtil.toggleClass(el, this.clsActive, uikitUtil.toNumber(cmd) === i);
|
|
923
|
+
uikitUtil.toggleClass(
|
|
924
|
+
el,
|
|
925
|
+
'uk-invisible',
|
|
926
|
+
this.finite && (
|
|
927
|
+
cmd === 'previous' && i === 0 || cmd === 'next' && i >= this.maxIndex));
|
|
1056
928
|
|
|
1057
|
-
|
|
929
|
+
}
|
|
930
|
+
} } };
|
|
1058
931
|
|
|
1059
932
|
var Slider = {
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
933
|
+
mixins: [SliderAutoplay, SliderDrag, SliderNav],
|
|
934
|
+
|
|
935
|
+
props: {
|
|
936
|
+
clsActivated: Boolean,
|
|
937
|
+
easing: String,
|
|
938
|
+
index: Number,
|
|
939
|
+
finite: Boolean,
|
|
940
|
+
velocity: Number,
|
|
941
|
+
selSlides: String },
|
|
942
|
+
|
|
943
|
+
|
|
944
|
+
data: () => ({
|
|
945
|
+
easing: 'ease',
|
|
946
|
+
finite: false,
|
|
947
|
+
velocity: 1,
|
|
948
|
+
index: 0,
|
|
949
|
+
prevIndex: -1,
|
|
950
|
+
stack: [],
|
|
951
|
+
percent: 0,
|
|
952
|
+
clsActive: 'uk-active',
|
|
953
|
+
clsActivated: false,
|
|
954
|
+
Transitioner: false,
|
|
955
|
+
transitionOptions: {} }),
|
|
956
|
+
|
|
957
|
+
|
|
958
|
+
connected() {
|
|
959
|
+
this.prevIndex = -1;
|
|
960
|
+
this.index = this.getValidIndex(this.$props.index);
|
|
961
|
+
this.stack = [];
|
|
962
|
+
},
|
|
963
|
+
|
|
964
|
+
disconnected() {
|
|
965
|
+
uikitUtil.removeClass(this.slides, this.clsActive);
|
|
966
|
+
},
|
|
967
|
+
|
|
968
|
+
computed: {
|
|
969
|
+
duration(_ref, $el) {let { velocity } = _ref;
|
|
970
|
+
return speedUp($el.offsetWidth / velocity);
|
|
1070
971
|
},
|
|
1071
972
|
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
finite: false,
|
|
1075
|
-
velocity: 1,
|
|
1076
|
-
index: 0,
|
|
1077
|
-
prevIndex: -1,
|
|
1078
|
-
stack: [],
|
|
1079
|
-
percent: 0,
|
|
1080
|
-
clsActive: 'uk-active',
|
|
1081
|
-
clsActivated: false,
|
|
1082
|
-
Transitioner: false,
|
|
1083
|
-
transitionOptions: {}
|
|
1084
|
-
}); },
|
|
1085
|
-
|
|
1086
|
-
connected: function() {
|
|
1087
|
-
this.prevIndex = -1;
|
|
1088
|
-
this.index = this.getValidIndex(this.$props.index);
|
|
1089
|
-
this.stack = [];
|
|
973
|
+
list(_ref2, $el) {let { selList } = _ref2;
|
|
974
|
+
return uikitUtil.$(selList, $el);
|
|
1090
975
|
},
|
|
1091
976
|
|
|
1092
|
-
|
|
1093
|
-
|
|
977
|
+
maxIndex() {
|
|
978
|
+
return this.length - 1;
|
|
1094
979
|
},
|
|
1095
980
|
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
var velocity = ref.velocity;
|
|
1100
|
-
|
|
1101
|
-
return speedUp($el.offsetWidth / velocity);
|
|
1102
|
-
},
|
|
1103
|
-
|
|
1104
|
-
list: function(ref, $el) {
|
|
1105
|
-
var selList = ref.selList;
|
|
981
|
+
selSlides(_ref3) {let { selList, selSlides } = _ref3;
|
|
982
|
+
return selList + " " + (selSlides || '> *');
|
|
983
|
+
},
|
|
1106
984
|
|
|
1107
|
-
|
|
1108
|
-
|
|
985
|
+
slides: {
|
|
986
|
+
get() {
|
|
987
|
+
return uikitUtil.$$(this.selSlides, this.$el);
|
|
988
|
+
},
|
|
1109
989
|
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
990
|
+
watch() {
|
|
991
|
+
this.$reset();
|
|
992
|
+
} },
|
|
1113
993
|
|
|
1114
|
-
selSlides: function(ref) {
|
|
1115
|
-
var selList = ref.selList;
|
|
1116
|
-
var selSlides = ref.selSlides;
|
|
1117
994
|
|
|
1118
|
-
|
|
1119
|
-
|
|
995
|
+
length() {
|
|
996
|
+
return this.slides.length;
|
|
997
|
+
} },
|
|
1120
998
|
|
|
1121
|
-
slides: {
|
|
1122
999
|
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1000
|
+
methods: {
|
|
1001
|
+
show(index, force) {if (force === void 0) {force = false;}
|
|
1002
|
+
if (this.dragging || !this.length) {
|
|
1003
|
+
return;
|
|
1004
|
+
}
|
|
1126
1005
|
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1006
|
+
const { stack } = this;
|
|
1007
|
+
const queueIndex = force ? 0 : stack.length;
|
|
1008
|
+
const reset = () => {
|
|
1009
|
+
stack.splice(queueIndex, 1);
|
|
1130
1010
|
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
length: function() {
|
|
1134
|
-
return this.slides.length;
|
|
1011
|
+
if (stack.length) {
|
|
1012
|
+
this.show(stack.shift(), true);
|
|
1135
1013
|
}
|
|
1014
|
+
};
|
|
1136
1015
|
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
events: {
|
|
1016
|
+
stack[force ? 'unshift' : 'push'](index);
|
|
1140
1017
|
|
|
1141
|
-
|
|
1142
|
-
|
|
1018
|
+
if (!force && stack.length > 1) {
|
|
1019
|
+
if (stack.length === 2) {
|
|
1020
|
+
this._transitioner.forward(Math.min(this.duration, 200));
|
|
1143
1021
|
}
|
|
1144
1022
|
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
var nextIndex = this.getIndex(index, this.index);
|
|
1183
|
-
var next = this.slides[nextIndex];
|
|
1184
|
-
|
|
1185
|
-
if (prev === next) {
|
|
1186
|
-
reset();
|
|
1187
|
-
return;
|
|
1188
|
-
}
|
|
1189
|
-
|
|
1190
|
-
this.dir = getDirection(index, prevIndex);
|
|
1191
|
-
this.prevIndex = prevIndex;
|
|
1192
|
-
this.index = nextIndex;
|
|
1193
|
-
|
|
1194
|
-
if (prev && !uikitUtil.trigger(prev, 'beforeitemhide', [this])
|
|
1195
|
-
|| !uikitUtil.trigger(next, 'beforeitemshow', [this, prev])
|
|
1196
|
-
) {
|
|
1197
|
-
this.index = this.prevIndex;
|
|
1198
|
-
reset();
|
|
1199
|
-
return;
|
|
1023
|
+
return;
|
|
1024
|
+
}
|
|
1025
|
+
|
|
1026
|
+
const prevIndex = this.getIndex(this.index);
|
|
1027
|
+
const prev = uikitUtil.hasClass(this.slides, this.clsActive) && this.slides[prevIndex];
|
|
1028
|
+
const nextIndex = this.getIndex(index, this.index);
|
|
1029
|
+
const next = this.slides[nextIndex];
|
|
1030
|
+
|
|
1031
|
+
if (prev === next) {
|
|
1032
|
+
reset();
|
|
1033
|
+
return;
|
|
1034
|
+
}
|
|
1035
|
+
|
|
1036
|
+
this.dir = getDirection(index, prevIndex);
|
|
1037
|
+
this.prevIndex = prevIndex;
|
|
1038
|
+
this.index = nextIndex;
|
|
1039
|
+
|
|
1040
|
+
if (
|
|
1041
|
+
prev && !uikitUtil.trigger(prev, 'beforeitemhide', [this]) ||
|
|
1042
|
+
!uikitUtil.trigger(next, 'beforeitemshow', [this, prev]))
|
|
1043
|
+
{
|
|
1044
|
+
this.index = this.prevIndex;
|
|
1045
|
+
reset();
|
|
1046
|
+
return;
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
const promise = this._show(prev, next, force).then(() => {
|
|
1050
|
+
prev && uikitUtil.trigger(prev, 'itemhidden', [this]);
|
|
1051
|
+
uikitUtil.trigger(next, 'itemshown', [this]);
|
|
1052
|
+
|
|
1053
|
+
return new Promise((resolve) => {
|
|
1054
|
+
uikitUtil.fastdom.write(() => {
|
|
1055
|
+
stack.shift();
|
|
1056
|
+
if (stack.length) {
|
|
1057
|
+
this.show(stack.shift(), true);
|
|
1058
|
+
} else {
|
|
1059
|
+
this._transitioner = null;
|
|
1200
1060
|
}
|
|
1061
|
+
resolve();
|
|
1062
|
+
});
|
|
1063
|
+
});
|
|
1064
|
+
});
|
|
1201
1065
|
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
prev && uikitUtil.trigger(prev, 'itemhidden', [this$1$1]);
|
|
1205
|
-
uikitUtil.trigger(next, 'itemshown', [this$1$1]);
|
|
1206
|
-
|
|
1207
|
-
return new uikitUtil.Promise(function (resolve) {
|
|
1208
|
-
uikitUtil.fastdom.write(function () {
|
|
1209
|
-
stack.shift();
|
|
1210
|
-
if (stack.length) {
|
|
1211
|
-
this$1$1.show(stack.shift(), true);
|
|
1212
|
-
} else {
|
|
1213
|
-
this$1$1._transitioner = null;
|
|
1214
|
-
}
|
|
1215
|
-
resolve();
|
|
1216
|
-
});
|
|
1217
|
-
});
|
|
1066
|
+
prev && uikitUtil.trigger(prev, 'itemhide', [this]);
|
|
1067
|
+
uikitUtil.trigger(next, 'itemshow', [this]);
|
|
1218
1068
|
|
|
1219
|
-
|
|
1069
|
+
return promise;
|
|
1070
|
+
},
|
|
1220
1071
|
|
|
1221
|
-
|
|
1222
|
-
|
|
1072
|
+
getIndex(index, prev) {if (index === void 0) {index = this.index;}if (prev === void 0) {prev = this.index;}
|
|
1073
|
+
return uikitUtil.clamp(uikitUtil.getIndex(index, this.slides, prev, this.finite), 0, this.maxIndex);
|
|
1074
|
+
},
|
|
1223
1075
|
|
|
1224
|
-
|
|
1076
|
+
getValidIndex(index, prevIndex) {if (index === void 0) {index = this.index;}if (prevIndex === void 0) {prevIndex = this.prevIndex;}
|
|
1077
|
+
return this.getIndex(index, prevIndex);
|
|
1078
|
+
},
|
|
1225
1079
|
|
|
1226
|
-
|
|
1080
|
+
_show(prev, next, force) {
|
|
1081
|
+
this._transitioner = this._getTransitioner(prev, next, this.dir, {
|
|
1082
|
+
easing: force ?
|
|
1083
|
+
next.offsetWidth < 600 ?
|
|
1084
|
+
'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */ :
|
|
1085
|
+
'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */ :
|
|
1086
|
+
this.easing,
|
|
1087
|
+
...this.transitionOptions });
|
|
1227
1088
|
|
|
1228
|
-
getIndex: function(index, prev) {
|
|
1229
|
-
if ( index === void 0 ) index = this.index;
|
|
1230
|
-
if ( prev === void 0 ) prev = this.index;
|
|
1231
1089
|
|
|
1232
|
-
|
|
1233
|
-
|
|
1090
|
+
if (!force && !prev) {
|
|
1091
|
+
this._translate(1);
|
|
1092
|
+
return Promise.resolve();
|
|
1093
|
+
}
|
|
1234
1094
|
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1095
|
+
const { length } = this.stack;
|
|
1096
|
+
return this._transitioner[length > 1 ? 'forward' : 'show'](
|
|
1097
|
+
length > 1 ? Math.min(this.duration, 75 + 75 / (length - 1)) : this.duration,
|
|
1098
|
+
this.percent);
|
|
1238
1099
|
|
|
1239
|
-
|
|
1240
|
-
},
|
|
1100
|
+
},
|
|
1241
1101
|
|
|
1242
|
-
|
|
1102
|
+
_getDistance(prev, next) {
|
|
1103
|
+
return this._getTransitioner(prev, prev !== next && next).getDistance();
|
|
1104
|
+
},
|
|
1243
1105
|
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
easing: force
|
|
1250
|
-
? next.offsetWidth < 600
|
|
1251
|
-
? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */
|
|
1252
|
-
: 'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */
|
|
1253
|
-
: this.easing
|
|
1254
|
-
}, this.transitionOptions)
|
|
1255
|
-
);
|
|
1106
|
+
_translate(percent, prev, next) {if (prev === void 0) {prev = this.prevIndex;}if (next === void 0) {next = this.index;}
|
|
1107
|
+
const transitioner = this._getTransitioner(prev !== next ? prev : false, next);
|
|
1108
|
+
transitioner.translate(percent);
|
|
1109
|
+
return transitioner;
|
|
1110
|
+
},
|
|
1256
1111
|
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1112
|
+
_getTransitioner(
|
|
1113
|
+
prev,
|
|
1114
|
+
next,
|
|
1115
|
+
dir,
|
|
1116
|
+
options)
|
|
1117
|
+
{if (prev === void 0) {prev = this.prevIndex;}if (next === void 0) {next = this.index;}if (dir === void 0) {dir = this.dir || 1;}if (options === void 0) {options = this.transitionOptions;}
|
|
1118
|
+
return new this.Transitioner(
|
|
1119
|
+
uikitUtil.isNumber(prev) ? this.slides[prev] : prev,
|
|
1120
|
+
uikitUtil.isNumber(next) ? this.slides[next] : next,
|
|
1121
|
+
dir * (uikitUtil.isRtl ? -1 : 1),
|
|
1122
|
+
options);
|
|
1261
1123
|
|
|
1262
|
-
|
|
1263
|
-
var length = ref.length;
|
|
1264
|
-
return this._transitioner[length > 1 ? 'forward' : 'show'](length > 1 ? Math.min(this.duration, 75 + 75 / (length - 1)) : this.duration, this.percent);
|
|
1265
|
-
|
|
1266
|
-
},
|
|
1267
|
-
|
|
1268
|
-
_getDistance: function(prev, next) {
|
|
1269
|
-
return this._getTransitioner(prev, prev !== next && next).getDistance();
|
|
1270
|
-
},
|
|
1271
|
-
|
|
1272
|
-
_translate: function(percent, prev, next) {
|
|
1273
|
-
if ( prev === void 0 ) prev = this.prevIndex;
|
|
1274
|
-
if ( next === void 0 ) next = this.index;
|
|
1275
|
-
|
|
1276
|
-
var transitioner = this._getTransitioner(prev !== next ? prev : false, next);
|
|
1277
|
-
transitioner.translate(percent);
|
|
1278
|
-
return transitioner;
|
|
1279
|
-
},
|
|
1280
|
-
|
|
1281
|
-
_getTransitioner: function(prev, next, dir, options) {
|
|
1282
|
-
if ( prev === void 0 ) prev = this.prevIndex;
|
|
1283
|
-
if ( next === void 0 ) next = this.index;
|
|
1284
|
-
if ( dir === void 0 ) dir = this.dir || 1;
|
|
1285
|
-
if ( options === void 0 ) options = this.transitionOptions;
|
|
1286
|
-
|
|
1287
|
-
return new this.Transitioner(
|
|
1288
|
-
uikitUtil.isNumber(prev) ? this.slides[prev] : prev,
|
|
1289
|
-
uikitUtil.isNumber(next) ? this.slides[next] : next,
|
|
1290
|
-
dir * (uikitUtil.isRtl ? -1 : 1),
|
|
1291
|
-
options
|
|
1292
|
-
);
|
|
1293
|
-
}
|
|
1124
|
+
} } };
|
|
1294
1125
|
|
|
1295
|
-
}
|
|
1296
1126
|
|
|
1297
|
-
};
|
|
1298
1127
|
|
|
1299
1128
|
function getDirection(index, prevIndex) {
|
|
1300
|
-
|
|
1301
|
-
? 1
|
|
1302
|
-
: index === 'previous'
|
|
1303
|
-
? -1
|
|
1304
|
-
: index < prevIndex
|
|
1305
|
-
? -1
|
|
1306
|
-
: 1;
|
|
1129
|
+
return index === 'next' ? 1 : index === 'previous' ? -1 : index < prevIndex ? -1 : 1;
|
|
1307
1130
|
}
|
|
1308
1131
|
|
|
1309
1132
|
function speedUp(x) {
|
|
1310
|
-
|
|
1133
|
+
return 0.5 * x + 300; // parabola through (400,500; 600,600; 1800,1200)
|
|
1311
1134
|
}
|
|
1312
1135
|
|
|
1313
1136
|
var Slideshow = {
|
|
1137
|
+
mixins: [Slider],
|
|
1314
1138
|
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
props: {
|
|
1318
|
-
animation: String
|
|
1319
|
-
},
|
|
1320
|
-
|
|
1321
|
-
data: {
|
|
1322
|
-
animation: 'slide',
|
|
1323
|
-
clsActivated: 'uk-transition-active',
|
|
1324
|
-
Animations: Animations$1,
|
|
1325
|
-
Transitioner: Transitioner
|
|
1326
|
-
},
|
|
1327
|
-
|
|
1328
|
-
computed: {
|
|
1139
|
+
props: {
|
|
1140
|
+
animation: String },
|
|
1329
1141
|
|
|
1330
|
-
animation: function(ref) {
|
|
1331
|
-
var animation = ref.animation;
|
|
1332
|
-
var Animations = ref.Animations;
|
|
1333
1142
|
|
|
1334
|
-
|
|
1335
|
-
|
|
1143
|
+
data: {
|
|
1144
|
+
animation: 'slide',
|
|
1145
|
+
clsActivated: 'uk-transition-active',
|
|
1146
|
+
Animations: Animations$1,
|
|
1147
|
+
Transitioner },
|
|
1336
1148
|
|
|
1337
|
-
transitionOptions: function() {
|
|
1338
|
-
return {animation: this.animation};
|
|
1339
|
-
}
|
|
1340
1149
|
|
|
1150
|
+
computed: {
|
|
1151
|
+
animation(_ref) {let { animation, Animations } = _ref;
|
|
1152
|
+
return { ...(Animations[animation] || Animations.slide), name: animation };
|
|
1341
1153
|
},
|
|
1342
1154
|
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
var target = ref.target;
|
|
1347
|
-
|
|
1348
|
-
this.$update(target);
|
|
1349
|
-
},
|
|
1350
|
-
|
|
1351
|
-
beforeitemshow: function(ref) {
|
|
1352
|
-
var target = ref.target;
|
|
1155
|
+
transitionOptions() {
|
|
1156
|
+
return { animation: this.animation };
|
|
1157
|
+
} },
|
|
1353
1158
|
|
|
1354
|
-
uikitUtil.addClass(target, this.clsActive);
|
|
1355
|
-
},
|
|
1356
1159
|
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
},
|
|
1362
|
-
|
|
1363
|
-
itemhidden: function(ref) {
|
|
1364
|
-
var target = ref.target;
|
|
1365
|
-
|
|
1366
|
-
uikitUtil.removeClass(target, this.clsActive, this.clsActivated);
|
|
1367
|
-
}
|
|
1160
|
+
events: {
|
|
1161
|
+
beforeitemshow(_ref2) {let { target } = _ref2;
|
|
1162
|
+
uikitUtil.addClass(target, this.clsActive);
|
|
1163
|
+
},
|
|
1368
1164
|
|
|
1369
|
-
}
|
|
1165
|
+
itemshown(_ref3) {let { target } = _ref3;
|
|
1166
|
+
uikitUtil.addClass(target, this.clsActivated);
|
|
1167
|
+
},
|
|
1370
1168
|
|
|
1371
|
-
|
|
1169
|
+
itemhidden(_ref4) {let { target } = _ref4;
|
|
1170
|
+
uikitUtil.removeClass(target, this.clsActive, this.clsActivated);
|
|
1171
|
+
} } };
|
|
1372
1172
|
|
|
1373
1173
|
var LightboxPanel = {
|
|
1174
|
+
mixins: [Container, Modal, Togglable, Slideshow],
|
|
1374
1175
|
|
|
1375
|
-
|
|
1176
|
+
functional: true,
|
|
1376
1177
|
|
|
1377
|
-
|
|
1178
|
+
props: {
|
|
1179
|
+
delayControls: Number,
|
|
1180
|
+
preload: Number,
|
|
1181
|
+
videoAutoplay: Boolean,
|
|
1182
|
+
template: String },
|
|
1378
1183
|
|
|
1379
|
-
props: {
|
|
1380
|
-
delayControls: Number,
|
|
1381
|
-
preload: Number,
|
|
1382
|
-
videoAutoplay: Boolean,
|
|
1383
|
-
template: String
|
|
1384
|
-
},
|
|
1385
1184
|
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
}); },
|
|
1402
|
-
|
|
1403
|
-
created: function() {
|
|
1404
|
-
|
|
1405
|
-
var $el = uikitUtil.$(this.template);
|
|
1406
|
-
var list = uikitUtil.$(this.selList, $el);
|
|
1407
|
-
this.items.forEach(function () { return uikitUtil.append(list, '<li>'); });
|
|
1408
|
-
|
|
1409
|
-
this.$mount(uikitUtil.append(this.container, $el));
|
|
1185
|
+
data: () => ({
|
|
1186
|
+
preload: 1,
|
|
1187
|
+
videoAutoplay: false,
|
|
1188
|
+
delayControls: 3000,
|
|
1189
|
+
items: [],
|
|
1190
|
+
cls: 'uk-open',
|
|
1191
|
+
clsPage: 'uk-lightbox-page',
|
|
1192
|
+
selList: '.uk-lightbox-items',
|
|
1193
|
+
attrItem: 'uk-lightbox-item',
|
|
1194
|
+
selClose: '.uk-close-large',
|
|
1195
|
+
selCaption: '.uk-lightbox-caption',
|
|
1196
|
+
pauseOnHover: false,
|
|
1197
|
+
velocity: 2,
|
|
1198
|
+
Animations,
|
|
1199
|
+
template: "<div class=\"uk-lightbox uk-overflow-hidden\"> <ul class=\"uk-lightbox-items\"></ul> <div class=\"uk-lightbox-toolbar uk-position-top uk-text-right uk-transition-slide-top uk-transition-opaque\"> <button class=\"uk-lightbox-toolbar-icon uk-close-large\" type=\"button\" uk-close></button> </div> <a class=\"uk-lightbox-button uk-position-center-left uk-position-medium uk-transition-fade\" href uk-slidenav-previous uk-lightbox-item=\"previous\"></a> <a class=\"uk-lightbox-button uk-position-center-right uk-position-medium uk-transition-fade\" href uk-slidenav-next uk-lightbox-item=\"next\"></a> <div class=\"uk-lightbox-toolbar uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque\"></div> </div>" }),
|
|
1410
1200
|
|
|
1411
|
-
},
|
|
1412
1201
|
|
|
1413
|
-
computed: {
|
|
1414
1202
|
|
|
1415
|
-
caption: function(ref, $el) {
|
|
1416
|
-
var selCaption = ref.selCaption;
|
|
1417
1203
|
|
|
1418
|
-
return uikitUtil.$(selCaption, $el);
|
|
1419
|
-
}
|
|
1420
1204
|
|
|
1421
|
-
},
|
|
1422
1205
|
|
|
1423
|
-
events: [
|
|
1424
1206
|
|
|
1425
|
-
{
|
|
1426
1207
|
|
|
1427
|
-
name: (uikitUtil.pointerMove + " " + uikitUtil.pointerDown + " keydown"),
|
|
1428
1208
|
|
|
1429
|
-
handler: 'showControls'
|
|
1430
1209
|
|
|
1431
|
-
|
|
1210
|
+
created() {
|
|
1211
|
+
const $el = uikitUtil.$(this.template);
|
|
1212
|
+
const list = uikitUtil.$(this.selList, $el);
|
|
1213
|
+
this.items.forEach(() => uikitUtil.append(list, '<li>'));
|
|
1432
1214
|
|
|
1433
|
-
|
|
1215
|
+
this.$mount(uikitUtil.append(this.container, $el));
|
|
1216
|
+
},
|
|
1434
1217
|
|
|
1435
|
-
|
|
1218
|
+
computed: {
|
|
1219
|
+
caption(_ref, $el) {let { selCaption } = _ref;
|
|
1220
|
+
return uikitUtil.$(selCaption, $el);
|
|
1221
|
+
} },
|
|
1436
1222
|
|
|
1437
|
-
self: true,
|
|
1438
1223
|
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1224
|
+
events: [
|
|
1225
|
+
{
|
|
1226
|
+
name: uikitUtil.pointerMove + " " + uikitUtil.pointerDown + " keydown",
|
|
1442
1227
|
|
|
1443
|
-
|
|
1228
|
+
handler: 'showControls' },
|
|
1444
1229
|
|
|
1445
|
-
if (e.defaultPrevented) {
|
|
1446
|
-
return;
|
|
1447
|
-
}
|
|
1448
1230
|
|
|
1449
|
-
|
|
1450
|
-
|
|
1231
|
+
{
|
|
1232
|
+
name: 'click',
|
|
1451
1233
|
|
|
1452
|
-
|
|
1234
|
+
self: true,
|
|
1453
1235
|
|
|
1454
|
-
|
|
1236
|
+
delegate() {
|
|
1237
|
+
return this.selSlides;
|
|
1238
|
+
},
|
|
1455
1239
|
|
|
1456
|
-
|
|
1240
|
+
handler(e) {
|
|
1241
|
+
if (e.defaultPrevented) {
|
|
1242
|
+
return;
|
|
1243
|
+
}
|
|
1457
1244
|
|
|
1458
|
-
|
|
1245
|
+
this.hide();
|
|
1246
|
+
} },
|
|
1459
1247
|
|
|
1460
|
-
handler: function() {
|
|
1461
|
-
this.showControls();
|
|
1462
|
-
}
|
|
1463
1248
|
|
|
1464
|
-
|
|
1249
|
+
{
|
|
1250
|
+
name: 'shown',
|
|
1465
1251
|
|
|
1466
|
-
|
|
1252
|
+
self: true,
|
|
1467
1253
|
|
|
1468
|
-
|
|
1254
|
+
handler() {
|
|
1255
|
+
this.showControls();
|
|
1256
|
+
} },
|
|
1469
1257
|
|
|
1470
|
-
self: true,
|
|
1471
1258
|
|
|
1472
|
-
|
|
1259
|
+
{
|
|
1260
|
+
name: 'hide',
|
|
1473
1261
|
|
|
1474
|
-
|
|
1262
|
+
self: true,
|
|
1475
1263
|
|
|
1476
|
-
|
|
1477
|
-
|
|
1264
|
+
handler() {
|
|
1265
|
+
this.hideControls();
|
|
1478
1266
|
|
|
1479
|
-
|
|
1480
|
-
|
|
1267
|
+
uikitUtil.removeClass(this.slides, this.clsActive);
|
|
1268
|
+
uikitUtil.Transition.stop(this.slides);
|
|
1269
|
+
} },
|
|
1481
1270
|
|
|
1482
|
-
{
|
|
1483
1271
|
|
|
1484
|
-
|
|
1272
|
+
{
|
|
1273
|
+
name: 'hidden',
|
|
1485
1274
|
|
|
1486
|
-
|
|
1275
|
+
self: true,
|
|
1487
1276
|
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1277
|
+
handler() {
|
|
1278
|
+
this.$destroy(true);
|
|
1279
|
+
} },
|
|
1491
1280
|
|
|
1492
|
-
},
|
|
1493
1281
|
|
|
1494
|
-
|
|
1282
|
+
{
|
|
1283
|
+
name: 'keyup',
|
|
1495
1284
|
|
|
1496
|
-
|
|
1285
|
+
el() {
|
|
1286
|
+
return document;
|
|
1287
|
+
},
|
|
1497
1288
|
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1289
|
+
handler(e) {
|
|
1290
|
+
if (!this.isToggled(this.$el) || !this.draggable) {
|
|
1291
|
+
return;
|
|
1292
|
+
}
|
|
1501
1293
|
|
|
1502
|
-
|
|
1294
|
+
switch (e.keyCode) {
|
|
1295
|
+
case 37:
|
|
1296
|
+
this.show('previous');
|
|
1297
|
+
break;
|
|
1298
|
+
case 39:
|
|
1299
|
+
this.show('next');
|
|
1300
|
+
break;}
|
|
1503
1301
|
|
|
1504
|
-
|
|
1505
|
-
return;
|
|
1506
|
-
}
|
|
1302
|
+
} },
|
|
1507
1303
|
|
|
1508
|
-
switch (e.keyCode) {
|
|
1509
|
-
case 37:
|
|
1510
|
-
this.show('previous');
|
|
1511
|
-
break;
|
|
1512
|
-
case 39:
|
|
1513
|
-
this.show('next');
|
|
1514
|
-
break;
|
|
1515
|
-
}
|
|
1516
|
-
}
|
|
1517
|
-
},
|
|
1518
1304
|
|
|
1519
|
-
|
|
1305
|
+
{
|
|
1306
|
+
name: 'beforeitemshow',
|
|
1520
1307
|
|
|
1521
|
-
|
|
1308
|
+
handler(e) {
|
|
1309
|
+
if (this.isToggled()) {
|
|
1310
|
+
return;
|
|
1311
|
+
}
|
|
1522
1312
|
|
|
1523
|
-
|
|
1313
|
+
this.draggable = false;
|
|
1524
1314
|
|
|
1525
|
-
|
|
1526
|
-
return;
|
|
1527
|
-
}
|
|
1315
|
+
e.preventDefault();
|
|
1528
1316
|
|
|
1529
|
-
|
|
1317
|
+
this.toggleElement(this.$el, true, false);
|
|
1530
1318
|
|
|
1531
|
-
|
|
1319
|
+
this.animation = Animations['scale'];
|
|
1320
|
+
uikitUtil.removeClass(e.target, this.clsActive);
|
|
1321
|
+
this.stack.splice(1, 0, this.index);
|
|
1322
|
+
} },
|
|
1532
1323
|
|
|
1533
|
-
this.toggleElement(this.$el, true, false);
|
|
1534
1324
|
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
this.stack.splice(1, 0, this.index);
|
|
1325
|
+
{
|
|
1326
|
+
name: 'itemshow',
|
|
1538
1327
|
|
|
1539
|
-
|
|
1328
|
+
handler() {
|
|
1329
|
+
uikitUtil.html(this.caption, this.getItem().caption || '');
|
|
1540
1330
|
|
|
1541
|
-
|
|
1331
|
+
for (let j = -this.preload; j <= this.preload; j++) {
|
|
1332
|
+
this.loadItem(this.index + j);
|
|
1333
|
+
}
|
|
1334
|
+
} },
|
|
1542
1335
|
|
|
1543
|
-
{
|
|
1544
1336
|
|
|
1545
|
-
|
|
1337
|
+
{
|
|
1338
|
+
name: 'itemshown',
|
|
1546
1339
|
|
|
1547
|
-
|
|
1340
|
+
handler() {
|
|
1341
|
+
this.draggable = this.$props.draggable;
|
|
1342
|
+
} },
|
|
1548
1343
|
|
|
1549
|
-
uikitUtil.html(this.caption, this.getItem().caption || '');
|
|
1550
1344
|
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
}
|
|
1345
|
+
{
|
|
1346
|
+
name: 'itemload',
|
|
1554
1347
|
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
},
|
|
1348
|
+
async handler(_, item) {
|
|
1349
|
+
const { source: src, type, alt = '', poster, attrs = {} } = item;
|
|
1558
1350
|
|
|
1559
|
-
|
|
1351
|
+
this.setItem(item, '<span uk-spinner></span>');
|
|
1560
1352
|
|
|
1561
|
-
|
|
1353
|
+
if (!src) {
|
|
1354
|
+
return;
|
|
1355
|
+
}
|
|
1562
1356
|
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1357
|
+
let matches;
|
|
1358
|
+
const iframeAttrs = {
|
|
1359
|
+
frameborder: '0',
|
|
1360
|
+
allow: 'autoplay',
|
|
1361
|
+
allowfullscreen: '',
|
|
1362
|
+
style: 'max-width: 100%; box-sizing: border-box;',
|
|
1363
|
+
'uk-responsive': '',
|
|
1364
|
+
'uk-video': "" + this.videoAutoplay };
|
|
1566
1365
|
|
|
1567
|
-
},
|
|
1568
|
-
|
|
1569
|
-
{
|
|
1570
|
-
|
|
1571
|
-
name: 'itemload',
|
|
1572
|
-
|
|
1573
|
-
handler: function(_, item) {
|
|
1574
|
-
var this$1$1 = this;
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
var src = item.source;
|
|
1578
|
-
var type = item.type;
|
|
1579
|
-
var alt = item.alt; if ( alt === void 0 ) alt = '';
|
|
1580
|
-
var poster = item.poster;
|
|
1581
|
-
var attrs = item.attrs; if ( attrs === void 0 ) attrs = {};
|
|
1582
|
-
|
|
1583
|
-
this.setItem(item, '<span uk-spinner></span>');
|
|
1584
|
-
|
|
1585
|
-
if (!src) {
|
|
1586
|
-
return;
|
|
1587
|
-
}
|
|
1588
|
-
|
|
1589
|
-
var matches;
|
|
1590
|
-
var iframeAttrs = {
|
|
1591
|
-
frameborder: '0',
|
|
1592
|
-
allow: 'autoplay',
|
|
1593
|
-
allowfullscreen: '',
|
|
1594
|
-
style: 'max-width: 100%; box-sizing: border-box;',
|
|
1595
|
-
'uk-responsive': '',
|
|
1596
|
-
'uk-video': ("" + (this.videoAutoplay))
|
|
1597
|
-
};
|
|
1598
|
-
|
|
1599
|
-
// Image
|
|
1600
|
-
if (type === 'image' || src.match(/\.(avif|jpe?g|a?png|gif|svg|webp)($|\?)/i)) {
|
|
1601
|
-
|
|
1602
|
-
uikitUtil.getImage(src, attrs.srcset, attrs.size).then(
|
|
1603
|
-
function (ref) {
|
|
1604
|
-
var width = ref.width;
|
|
1605
|
-
var height = ref.height;
|
|
1606
|
-
|
|
1607
|
-
return this$1$1.setItem(item, createEl('img', uikitUtil.assign({src: src, width: width, height: height, alt: alt}, attrs)));
|
|
1608
|
-
},
|
|
1609
|
-
function () { return this$1$1.setError(item); }
|
|
1610
|
-
);
|
|
1611
|
-
|
|
1612
|
-
// Video
|
|
1613
|
-
} else if (type === 'video' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
|
|
1614
|
-
|
|
1615
|
-
var video = createEl('video', uikitUtil.assign({
|
|
1616
|
-
src: src,
|
|
1617
|
-
poster: poster,
|
|
1618
|
-
controls: '',
|
|
1619
|
-
playsinline: '',
|
|
1620
|
-
'uk-video': ("" + (this.videoAutoplay))
|
|
1621
|
-
}, attrs));
|
|
1622
|
-
|
|
1623
|
-
uikitUtil.on(video, 'loadedmetadata', function () {
|
|
1624
|
-
uikitUtil.attr(video, {width: video.videoWidth, height: video.videoHeight});
|
|
1625
|
-
this$1$1.setItem(item, video);
|
|
1626
|
-
});
|
|
1627
|
-
uikitUtil.on(video, 'error', function () { return this$1$1.setError(item); });
|
|
1628
|
-
|
|
1629
|
-
// Iframe
|
|
1630
|
-
} else if (type === 'iframe' || src.match(/\.(html|php)($|\?)/i)) {
|
|
1631
|
-
|
|
1632
|
-
this.setItem(item, createEl('iframe', uikitUtil.assign({
|
|
1633
|
-
src: src,
|
|
1634
|
-
frameborder: '0',
|
|
1635
|
-
allowfullscreen: '',
|
|
1636
|
-
class: 'uk-lightbox-iframe'
|
|
1637
|
-
}, attrs)));
|
|
1638
|
-
|
|
1639
|
-
// YouTube
|
|
1640
|
-
} else if ((matches = src.match(/\/\/(?:.*?youtube(-nocookie)?\..*?[?&]v=|youtu\.be\/)([\w-]{11})[&?]?(.*)?/))) {
|
|
1641
|
-
|
|
1642
|
-
this.setItem(item, createEl('iframe', uikitUtil.assign({
|
|
1643
|
-
src: ("https://www.youtube" + (matches[1] || '') + ".com/embed/" + (matches[2]) + (matches[3] ? ("?" + (matches[3])) : '')),
|
|
1644
|
-
width: 1920,
|
|
1645
|
-
height: 1080
|
|
1646
|
-
}, iframeAttrs, attrs)));
|
|
1647
|
-
|
|
1648
|
-
// Vimeo
|
|
1649
|
-
} else if ((matches = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/))) {
|
|
1650
|
-
|
|
1651
|
-
uikitUtil.ajax(("https://vimeo.com/api/oembed.json?maxwidth=1920&url=" + (encodeURI(src))), {
|
|
1652
|
-
responseType: 'json',
|
|
1653
|
-
withCredentials: false
|
|
1654
|
-
}).then(
|
|
1655
|
-
function (ref) {
|
|
1656
|
-
var ref_response = ref.response;
|
|
1657
|
-
var height = ref_response.height;
|
|
1658
|
-
var width = ref_response.width;
|
|
1659
|
-
|
|
1660
|
-
return this$1$1.setItem(item, createEl('iframe', uikitUtil.assign({
|
|
1661
|
-
src: ("https://player.vimeo.com/video/" + (matches[1]) + (matches[2] ? ("?" + (matches[2])) : '')),
|
|
1662
|
-
width: width,
|
|
1663
|
-
height: height
|
|
1664
|
-
}, iframeAttrs, attrs)));
|
|
1665
|
-
},
|
|
1666
|
-
function () { return this$1$1.setError(item); }
|
|
1667
|
-
);
|
|
1668
|
-
|
|
1669
|
-
}
|
|
1670
|
-
|
|
1671
|
-
}
|
|
1672
1366
|
|
|
1367
|
+
// Image
|
|
1368
|
+
if (type === 'image' || src.match(/\.(avif|jpe?g|a?png|gif|svg|webp)($|\?)/i)) {
|
|
1369
|
+
try {
|
|
1370
|
+
const { width, height } = await uikitUtil.getImage(src, attrs.srcset, attrs.size);
|
|
1371
|
+
this.setItem(item, createEl('img', { src, width, height, alt, ...attrs }));
|
|
1372
|
+
} catch (e) {
|
|
1373
|
+
this.setError(item);
|
|
1673
1374
|
}
|
|
1674
1375
|
|
|
1675
|
-
|
|
1376
|
+
// Video
|
|
1377
|
+
} else if (type === 'video' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
|
|
1378
|
+
const video = createEl('video', {
|
|
1379
|
+
src,
|
|
1380
|
+
poster,
|
|
1381
|
+
controls: '',
|
|
1382
|
+
playsinline: '',
|
|
1383
|
+
'uk-video': "" + this.videoAutoplay,
|
|
1384
|
+
...attrs });
|
|
1676
1385
|
|
|
1677
|
-
methods: {
|
|
1678
1386
|
|
|
1679
|
-
|
|
1680
|
-
|
|
1387
|
+
uikitUtil.on(video, 'loadedmetadata', () => {
|
|
1388
|
+
uikitUtil.attr(video, { width: video.videoWidth, height: video.videoHeight });
|
|
1389
|
+
this.setItem(item, video);
|
|
1390
|
+
});
|
|
1391
|
+
uikitUtil.on(video, 'error', () => this.setError(item));
|
|
1681
1392
|
|
|
1393
|
+
// Iframe
|
|
1394
|
+
} else if (type === 'iframe' || src.match(/\.(html|php)($|\?)/i)) {
|
|
1395
|
+
this.setItem(
|
|
1396
|
+
item,
|
|
1397
|
+
createEl('iframe', {
|
|
1398
|
+
src,
|
|
1399
|
+
frameborder: '0',
|
|
1400
|
+
allowfullscreen: '',
|
|
1401
|
+
class: 'uk-lightbox-iframe',
|
|
1402
|
+
...attrs }));
|
|
1682
1403
|
|
|
1683
|
-
var item = this.getItem(index);
|
|
1684
1404
|
|
|
1685
|
-
if (!this.getSlide(item).childElementCount) {
|
|
1686
|
-
uikitUtil.trigger(this.$el, 'itemload', [item]);
|
|
1687
|
-
}
|
|
1688
|
-
},
|
|
1689
1405
|
|
|
1690
|
-
|
|
1691
|
-
|
|
1406
|
+
// YouTube
|
|
1407
|
+
} else if (
|
|
1408
|
+
matches = src.match(
|
|
1409
|
+
/\/\/(?:.*?youtube(-nocookie)?\..*?[?&]v=|youtu\.be\/)([\w-]{11})[&?]?(.*)?/))
|
|
1692
1410
|
|
|
1693
|
-
|
|
1694
|
-
|
|
1411
|
+
{
|
|
1412
|
+
this.setItem(
|
|
1413
|
+
item,
|
|
1414
|
+
createEl('iframe', {
|
|
1415
|
+
src: "https://www.youtube" + (matches[1] || '') + ".com/embed/" + matches[2] + (
|
|
1416
|
+
matches[3] ? "?" + matches[3] : ''),
|
|
1695
1417
|
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1418
|
+
width: 1920,
|
|
1419
|
+
height: 1080,
|
|
1420
|
+
...iframeAttrs,
|
|
1421
|
+
...attrs }));
|
|
1699
1422
|
|
|
1700
|
-
getSlide: function(item) {
|
|
1701
|
-
return this.slides[this.items.indexOf(item)];
|
|
1702
|
-
},
|
|
1703
1423
|
|
|
1704
|
-
setError: function(item) {
|
|
1705
|
-
this.setItem(item, '<span uk-icon="icon: bolt; ratio: 2"></span>');
|
|
1706
|
-
},
|
|
1707
1424
|
|
|
1708
|
-
|
|
1425
|
+
// Vimeo
|
|
1426
|
+
} else if (matches = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/)) {
|
|
1427
|
+
try {
|
|
1428
|
+
const { height, width } = await (
|
|
1429
|
+
await fetch("https://vimeo.com/api/oembed.json?maxwidth=1920&url=" +
|
|
1430
|
+
encodeURI(
|
|
1431
|
+
src),
|
|
1709
1432
|
|
|
1710
|
-
|
|
1711
|
-
|
|
1433
|
+
{
|
|
1434
|
+
credentials: 'omit' })).
|
|
1712
1435
|
|
|
1713
|
-
uikitUtil.addClass(this.$el, 'uk-active', 'uk-transition-active');
|
|
1714
1436
|
|
|
1715
|
-
|
|
1437
|
+
json();
|
|
1716
1438
|
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1439
|
+
this.setItem(
|
|
1440
|
+
item,
|
|
1441
|
+
createEl('iframe', {
|
|
1442
|
+
src: "https://player.vimeo.com/video/" + matches[1] + (
|
|
1443
|
+
matches[2] ? "?" + matches[2] : ''),
|
|
1720
1444
|
|
|
1721
|
-
|
|
1445
|
+
width,
|
|
1446
|
+
height,
|
|
1447
|
+
...iframeAttrs,
|
|
1448
|
+
...attrs }));
|
|
1722
1449
|
|
|
1723
|
-
};
|
|
1724
1450
|
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
var Component = {
|
|
1451
|
+
} catch (e) {
|
|
1452
|
+
this.setError(item);
|
|
1453
|
+
}
|
|
1454
|
+
}
|
|
1455
|
+
} }],
|
|
1732
1456
|
|
|
1733
|
-
install: install,
|
|
1734
1457
|
|
|
1735
|
-
props: {toggle: String},
|
|
1736
1458
|
|
|
1737
|
-
|
|
1459
|
+
methods: {
|
|
1460
|
+
loadItem(index) {if (index === void 0) {index = this.index;}
|
|
1461
|
+
const item = this.getItem(index);
|
|
1738
1462
|
|
|
1739
|
-
|
|
1463
|
+
if (!this.getSlide(item).childElementCount) {
|
|
1464
|
+
uikitUtil.trigger(this.$el, 'itemload', [item]);
|
|
1465
|
+
}
|
|
1466
|
+
},
|
|
1740
1467
|
|
|
1741
|
-
|
|
1468
|
+
getItem(index) {if (index === void 0) {index = this.index;}
|
|
1469
|
+
return this.items[uikitUtil.getIndex(index, this.slides)];
|
|
1470
|
+
},
|
|
1742
1471
|
|
|
1743
|
-
|
|
1744
|
-
|
|
1472
|
+
setItem(item, content) {
|
|
1473
|
+
uikitUtil.trigger(this.$el, 'itemloaded', [this, uikitUtil.html(this.getSlide(item), content)]);
|
|
1474
|
+
},
|
|
1745
1475
|
|
|
1746
|
-
|
|
1747
|
-
|
|
1476
|
+
getSlide(item) {
|
|
1477
|
+
return this.slides[this.items.indexOf(item)];
|
|
1478
|
+
},
|
|
1748
1479
|
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1480
|
+
setError(item) {
|
|
1481
|
+
this.setItem(item, '<span uk-icon="icon: bolt; ratio: 2"></span>');
|
|
1482
|
+
},
|
|
1752
1483
|
|
|
1753
|
-
|
|
1484
|
+
showControls() {
|
|
1485
|
+
clearTimeout(this.controlsTimer);
|
|
1486
|
+
this.controlsTimer = setTimeout(this.hideControls, this.delayControls);
|
|
1754
1487
|
|
|
1488
|
+
uikitUtil.addClass(this.$el, 'uk-active', 'uk-transition-active');
|
|
1755
1489
|
},
|
|
1756
1490
|
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
}
|
|
1491
|
+
hideControls() {
|
|
1492
|
+
uikitUtil.removeClass(this.$el, 'uk-active', 'uk-transition-active');
|
|
1493
|
+
} } };
|
|
1760
1494
|
|
|
1761
|
-
events: [
|
|
1762
1495
|
|
|
1763
|
-
{
|
|
1764
1496
|
|
|
1765
|
-
|
|
1497
|
+
function createEl(tag, attrs) {
|
|
1498
|
+
const el = uikitUtil.fragment("<" + tag + ">");
|
|
1499
|
+
uikitUtil.attr(el, attrs);
|
|
1500
|
+
return el;
|
|
1501
|
+
}
|
|
1766
1502
|
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
},
|
|
1503
|
+
var Component = {
|
|
1504
|
+
install,
|
|
1770
1505
|
|
|
1771
|
-
|
|
1772
|
-
e.preventDefault();
|
|
1773
|
-
this.show(e.current);
|
|
1774
|
-
}
|
|
1506
|
+
props: { toggle: String },
|
|
1775
1507
|
|
|
1776
|
-
|
|
1508
|
+
data: { toggle: 'a' },
|
|
1777
1509
|
|
|
1778
|
-
|
|
1510
|
+
computed: {
|
|
1511
|
+
toggles: {
|
|
1512
|
+
get(_ref, $el) {let { toggle } = _ref;
|
|
1513
|
+
return uikitUtil.$$(toggle, $el);
|
|
1514
|
+
},
|
|
1779
1515
|
|
|
1780
|
-
|
|
1516
|
+
watch() {
|
|
1517
|
+
this.hide();
|
|
1518
|
+
} } },
|
|
1781
1519
|
|
|
1782
|
-
show: function(index) {
|
|
1783
|
-
var this$1$1 = this;
|
|
1784
1520
|
|
|
1785
1521
|
|
|
1786
|
-
|
|
1522
|
+
disconnected() {
|
|
1523
|
+
this.hide();
|
|
1524
|
+
},
|
|
1787
1525
|
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
index = uikitUtil.findIndex(items, function (ref) {
|
|
1792
|
-
var src = ref.source;
|
|
1526
|
+
events: [
|
|
1527
|
+
{
|
|
1528
|
+
name: 'click',
|
|
1793
1529
|
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1530
|
+
delegate() {
|
|
1531
|
+
return this.toggle + ":not(.uk-disabled)";
|
|
1532
|
+
},
|
|
1797
1533
|
|
|
1798
|
-
|
|
1534
|
+
handler(e) {
|
|
1535
|
+
e.preventDefault();
|
|
1536
|
+
this.show(e.current);
|
|
1537
|
+
} }],
|
|
1799
1538
|
|
|
1800
|
-
uikitUtil.on(this.panel.$el, 'hidden', function () { return this$1$1.panel = false; });
|
|
1801
1539
|
|
|
1802
|
-
return this.panel.show(index);
|
|
1803
1540
|
|
|
1804
|
-
|
|
1541
|
+
methods: {
|
|
1542
|
+
show(index) {
|
|
1543
|
+
const items = uikitUtil.uniqueBy(this.toggles.map(toItem), 'source');
|
|
1805
1544
|
|
|
1806
|
-
|
|
1545
|
+
if (uikitUtil.isElement(index)) {
|
|
1546
|
+
const { source } = toItem(index);
|
|
1547
|
+
index = uikitUtil.findIndex(items, (_ref2) => {let { source: src } = _ref2;return source === src;});
|
|
1548
|
+
}
|
|
1807
1549
|
|
|
1808
|
-
|
|
1550
|
+
this.panel = this.panel || this.$create('lightboxPanel', { ...this.$props, items });
|
|
1809
1551
|
|
|
1810
|
-
|
|
1552
|
+
uikitUtil.on(this.panel.$el, 'hidden', () => this.panel = false);
|
|
1811
1553
|
|
|
1812
|
-
|
|
1554
|
+
return this.panel.show(index);
|
|
1555
|
+
},
|
|
1813
1556
|
|
|
1814
|
-
|
|
1557
|
+
hide() {
|
|
1558
|
+
return this.panel && this.panel.hide();
|
|
1559
|
+
} } };
|
|
1815
1560
|
|
|
1816
|
-
function install(UIkit, Lightbox) {
|
|
1817
1561
|
|
|
1818
|
-
if (!UIkit.lightboxPanel) {
|
|
1819
|
-
UIkit.component('lightboxPanel', LightboxPanel);
|
|
1820
|
-
}
|
|
1821
1562
|
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1563
|
+
function install(UIkit, Lightbox) {
|
|
1564
|
+
if (!UIkit.lightboxPanel) {
|
|
1565
|
+
UIkit.component('lightboxPanel', LightboxPanel);
|
|
1566
|
+
}
|
|
1826
1567
|
|
|
1568
|
+
uikitUtil.assign(Lightbox.props, UIkit.component('lightboxPanel').options.props);
|
|
1827
1569
|
}
|
|
1828
1570
|
|
|
1829
1571
|
function toItem(el) {
|
|
1572
|
+
const item = {};
|
|
1830
1573
|
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
item[attr === 'href' ? 'source' : attr] = uikitUtil.data(el, attr);
|
|
1835
|
-
});
|
|
1574
|
+
for (const attr of ['href', 'caption', 'type', 'poster', 'alt', 'attrs']) {
|
|
1575
|
+
item[attr === 'href' ? 'source' : attr] = uikitUtil.data(el, attr);
|
|
1576
|
+
}
|
|
1836
1577
|
|
|
1837
|
-
|
|
1578
|
+
item.attrs = uikitUtil.parseOptions(item.attrs);
|
|
1838
1579
|
|
|
1839
|
-
|
|
1580
|
+
return item;
|
|
1840
1581
|
}
|
|
1841
1582
|
|
|
1842
1583
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
1843
|
-
|
|
1584
|
+
window.UIkit.component('lightbox', Component);
|
|
1844
1585
|
}
|
|
1845
1586
|
|
|
1846
1587
|
return Component;
|