uikit 3.11.2-dev.19d26d0f9 → 3.11.2-dev.21a5b7139
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 +16 -1
- 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 +42 -17
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +42 -17
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +42 -17
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +42 -17
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +88 -133
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +410 -437
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +1116 -1305
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1164 -1383
- 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 +294 -345
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +292 -344
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +724 -846
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +292 -344
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +615 -799
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +587 -616
- 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 +153 -161
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +5293 -6602
- 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 +8114 -9862
- 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 +23 -27
- package/src/js/api/global.js +6 -12
- package/src/js/api/hooks.js +13 -32
- package/src/js/api/instance.js +7 -15
- package/src/js/api/state.js +80 -101
- package/src/js/components/countdown.js +23 -49
- package/src/js/components/filter.js +71 -66
- package/src/js/components/index.js +13 -13
- package/src/js/components/internal/lightbox-animations.js +11 -23
- package/src/js/components/internal/slider-transitioner.js +65 -44
- package/src/js/components/internal/slideshow-animations.js +42 -61
- package/src/js/components/lightbox-panel.js +135 -109
- package/src/js/components/lightbox.js +17 -38
- 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 +73 -61
- package/src/js/components/slideshow-parallax.js +1 -1
- package/src/js/components/slideshow.js +8 -13
- package/src/js/components/sortable.js +121 -102
- package/src/js/components/tooltip.js +41 -31
- package/src/js/components/upload.js +46 -53
- package/src/js/core/accordion.js +54 -49
- package/src/js/core/alert.js +10 -17
- package/src/js/core/core.js +74 -53
- package/src/js/core/cover.js +11 -15
- package/src/js/core/drop.js +107 -93
- package/src/js/core/form-custom.js +20 -25
- package/src/js/core/gif.js +3 -7
- package/src/js/core/grid.js +57 -58
- package/src/js/core/height-match.js +15 -28
- package/src/js/core/height-viewport.js +28 -35
- package/src/js/core/icon.js +38 -50
- package/src/js/core/img.js +57 -58
- package/src/js/core/index.js +39 -39
- package/src/js/core/leader.js +9 -18
- package/src/js/core/margin.js +10 -24
- package/src/js/core/modal.js +50 -36
- package/src/js/core/nav.js +2 -4
- package/src/js/core/navbar.js +112 -84
- package/src/js/core/offcanvas.js +49 -53
- package/src/js/core/overflow-auto.js +13 -17
- package/src/js/core/responsive.js +14 -12
- package/src/js/core/scroll.js +10 -20
- package/src/js/core/scrollspy-nav.js +34 -31
- package/src/js/core/scrollspy.js +34 -51
- package/src/js/core/sticky.js +151 -93
- package/src/js/core/svg.js +60 -79
- package/src/js/core/switcher.js +47 -46
- package/src/js/core/tab.js +7 -10
- package/src/js/core/toggle.js +63 -65
- package/src/js/core/video.js +11 -22
- package/src/js/mixin/animate.js +19 -20
- package/src/js/mixin/class.js +2 -4
- package/src/js/mixin/container.js +7 -11
- package/src/js/mixin/internal/animate-fade.js +73 -30
- package/src/js/mixin/internal/animate-slide.js +61 -41
- package/src/js/mixin/internal/slideshow-animations.js +7 -14
- package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
- package/src/js/mixin/media.js +5 -10
- package/src/js/mixin/modal.js +89 -66
- package/src/js/mixin/parallax.js +53 -48
- package/src/js/mixin/position.js +26 -20
- package/src/js/mixin/slider-autoplay.js +12 -21
- package/src/js/mixin/slider-drag.js +62 -63
- package/src/js/mixin/slider-nav.js +25 -34
- package/src/js/mixin/slider-reactive.js +2 -8
- package/src/js/mixin/slider.js +51 -50
- package/src/js/mixin/slideshow.js +13 -19
- package/src/js/mixin/togglable.js +90 -63
- package/src/js/uikit-core.js +2 -4
- package/src/js/uikit.js +2 -4
- package/src/js/util/ajax.js +27 -43
- package/src/js/util/animation.js +82 -75
- package/src/js/util/attr.js +6 -12
- package/src/js/util/class.js +14 -52
- package/src/js/util/dimensions.js +56 -43
- package/src/js/util/dom.js +36 -54
- package/src/js/util/env.js +7 -12
- package/src/js/util/event.js +60 -59
- package/src/js/util/fastdom.js +1 -6
- package/src/js/util/filter.js +17 -34
- package/src/js/util/index.js +0 -1
- package/src/js/util/lang.js +79 -119
- package/src/js/util/mouse.js +19 -17
- package/src/js/util/options.js +44 -49
- package/src/js/util/player.js +40 -36
- package/src/js/util/position.js +53 -45
- package/src/js/util/promise.js +0 -191
- package/src/js/util/selector.js +39 -48
- package/src/js/util/style.js +36 -46
- package/src/js/util/viewport.js +75 -64
- package/src/less/components/flex.less +0 -9
- package/src/less/components/navbar.less +0 -7
- package/src/less/components/utility.less +22 -0
- package/src/scss/components/flex.scss +0 -9
- package/src/scss/components/form.scss +3 -3
- package/src/scss/components/icon.scss +2 -2
- package/src/scss/components/navbar.scss +0 -7
- package/src/scss/components/search.scss +1 -1
- package/src/scss/components/utility.scss +22 -0
- package/src/scss/variables-theme.scss +6 -6
- package/src/scss/variables.scss +6 -6
- package/tests/js/index.js +114 -85
- package/tests/sticky-parallax.html +44 -41
- package/tests/sticky.html +20 -3
- package/src/js/mixin/flex-bug.js +0 -56
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! UIkit 3.11.2-dev.
|
|
1
|
+
/*! UIkit 3.11.2-dev.21a5b7139 | 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,810 +7,781 @@
|
|
|
7
7
|
})(this, (function (uikitUtil) { 'use strict';
|
|
8
8
|
|
|
9
9
|
function getRows(items) {
|
|
10
|
-
|
|
10
|
+
return sortBy(items, 'top', 'bottom');
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
function sortBy(items, startProp, endProp) {
|
|
14
|
+
const sorted = [[]];
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
for (let i = 0; i < items.length; i++) {
|
|
17
|
+
const el = items[i];
|
|
16
18
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
if (!uikitUtil.isVisible(el)) {
|
|
22
|
-
continue;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
var dim = getOffset(el);
|
|
26
|
-
|
|
27
|
-
for (var j = sorted.length - 1; j >= 0; j--) {
|
|
28
|
-
|
|
29
|
-
var current = sorted[j];
|
|
30
|
-
|
|
31
|
-
if (!current[0]) {
|
|
32
|
-
current.push(el);
|
|
33
|
-
break;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
var startDim = (void 0);
|
|
37
|
-
if (current[0].offsetParent === el.offsetParent) {
|
|
38
|
-
startDim = getOffset(current[0]);
|
|
39
|
-
} else {
|
|
40
|
-
dim = getOffset(el, true);
|
|
41
|
-
startDim = getOffset(current[0], true);
|
|
42
|
-
}
|
|
19
|
+
if (!uikitUtil.isVisible(el)) {
|
|
20
|
+
continue;
|
|
21
|
+
}
|
|
43
22
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
23
|
+
let dim = getOffset(el);
|
|
24
|
+
|
|
25
|
+
for (let j = sorted.length - 1; j >= 0; j--) {
|
|
26
|
+
const current = sorted[j];
|
|
27
|
+
|
|
28
|
+
if (!current[0]) {
|
|
29
|
+
current.push(el);
|
|
30
|
+
break;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
let startDim;
|
|
34
|
+
if (current[0].offsetParent === el.offsetParent) {
|
|
35
|
+
startDim = getOffset(current[0]);
|
|
36
|
+
} else {
|
|
37
|
+
dim = getOffset(el, true);
|
|
38
|
+
startDim = getOffset(current[0], true);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
|
|
42
|
+
sorted.push([el]);
|
|
43
|
+
break;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
|
|
47
|
+
current.push(el);
|
|
48
|
+
break;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
if (j === 0) {
|
|
52
|
+
sorted.unshift([el]);
|
|
53
|
+
break;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
48
57
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
break;
|
|
52
|
-
}
|
|
58
|
+
return sorted;
|
|
59
|
+
}
|
|
53
60
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
break;
|
|
57
|
-
}
|
|
61
|
+
function getOffset(element, offset) {if (offset === void 0) {offset = false;}
|
|
62
|
+
let { offsetTop, offsetLeft, offsetHeight, offsetWidth } = element;
|
|
58
63
|
|
|
59
|
-
|
|
64
|
+
if (offset) {
|
|
65
|
+
[offsetTop, offsetLeft] = uikitUtil.offsetPosition(element);
|
|
66
|
+
}
|
|
60
67
|
|
|
61
|
-
|
|
68
|
+
return {
|
|
69
|
+
top: offsetTop,
|
|
70
|
+
left: offsetLeft,
|
|
71
|
+
bottom: offsetTop + offsetHeight,
|
|
72
|
+
right: offsetLeft + offsetWidth };
|
|
62
73
|
|
|
63
|
-
return sorted;
|
|
64
74
|
}
|
|
65
75
|
|
|
66
|
-
|
|
67
|
-
|
|
76
|
+
const clsLeave = 'uk-transition-leave';
|
|
77
|
+
const clsEnter = 'uk-transition-enter';
|
|
68
78
|
|
|
69
|
-
|
|
79
|
+
function fade(action, target, duration, stagger) {if (stagger === void 0) {stagger = 0;}
|
|
80
|
+
const index = transitionIndex(target, true);
|
|
81
|
+
const propsIn = { opacity: 1 };
|
|
82
|
+
const propsOut = { opacity: 0 };
|
|
70
83
|
|
|
71
|
-
|
|
72
|
-
var offsetLeft = element.offsetLeft;
|
|
73
|
-
var offsetHeight = element.offsetHeight;
|
|
74
|
-
var offsetWidth = element.offsetWidth;
|
|
84
|
+
const wrapIndexFn = (fn) => () => index === transitionIndex(target) ? fn() : Promise.reject();
|
|
75
85
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}
|
|
86
|
+
const leaveFn = wrapIndexFn(() => {
|
|
87
|
+
uikitUtil.addClass(target, clsLeave);
|
|
79
88
|
|
|
80
|
-
return
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
89
|
+
return Promise.all(
|
|
90
|
+
getTransitionNodes(target).map(
|
|
91
|
+
(child, i) =>
|
|
92
|
+
new Promise((resolve) =>
|
|
93
|
+
setTimeout(
|
|
94
|
+
() =>
|
|
95
|
+
uikitUtil.Transition.start(child, propsOut, duration / 2, 'ease').then(
|
|
96
|
+
resolve),
|
|
87
97
|
|
|
88
|
-
|
|
89
|
-
var clsEnter = 'uk-transition-enter';
|
|
98
|
+
i * stagger)))).
|
|
90
99
|
|
|
91
|
-
function fade(action, target, duration, stagger) {
|
|
92
|
-
if ( stagger === void 0 ) stagger = 0;
|
|
93
100
|
|
|
94
101
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
var propsOut = {opacity: 0};
|
|
102
|
+
then(() => uikitUtil.removeClass(target, clsLeave));
|
|
103
|
+
});
|
|
98
104
|
|
|
99
|
-
|
|
105
|
+
const enterFn = wrapIndexFn(() => {
|
|
106
|
+
const oldHeight = uikitUtil.height(target);
|
|
100
107
|
|
|
101
|
-
|
|
108
|
+
uikitUtil.addClass(target, clsEnter);
|
|
109
|
+
action();
|
|
102
110
|
|
|
103
|
-
|
|
111
|
+
uikitUtil.css(uikitUtil.children(target), { opacity: 0 });
|
|
104
112
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
113
|
+
// Ensure UIkit updates have propagated
|
|
114
|
+
return new Promise((resolve) =>
|
|
115
|
+
requestAnimationFrame(() => {
|
|
116
|
+
const nodes = uikitUtil.children(target);
|
|
117
|
+
const newHeight = uikitUtil.height(target);
|
|
108
118
|
|
|
109
|
-
|
|
119
|
+
// Ensure Grid cells do not stretch when height is applied
|
|
120
|
+
uikitUtil.css(target, 'alignContent', 'flex-start');
|
|
121
|
+
uikitUtil.height(target, oldHeight);
|
|
110
122
|
|
|
111
|
-
|
|
123
|
+
const transitionNodes = getTransitionNodes(target);
|
|
124
|
+
uikitUtil.css(nodes, propsOut);
|
|
112
125
|
|
|
113
|
-
|
|
126
|
+
const transitions = transitionNodes.map(
|
|
127
|
+
(child, i) =>
|
|
128
|
+
new Promise((resolve) =>
|
|
129
|
+
setTimeout(
|
|
130
|
+
() =>
|
|
131
|
+
uikitUtil.Transition.start(child, propsIn, duration / 2, 'ease').then(
|
|
132
|
+
resolve),
|
|
114
133
|
|
|
115
|
-
|
|
116
|
-
action();
|
|
134
|
+
i * stagger)));
|
|
117
135
|
|
|
118
|
-
uikitUtil.css(uikitUtil.children(target), {opacity: 0});
|
|
119
136
|
|
|
120
|
-
// Ensure UIkit updates have propagated
|
|
121
|
-
return new uikitUtil.Promise(function (resolve) { return requestAnimationFrame(function () {
|
|
122
137
|
|
|
123
|
-
var nodes = uikitUtil.children(target);
|
|
124
|
-
var newHeight = uikitUtil.height(target);
|
|
125
138
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
139
|
+
if (oldHeight !== newHeight) {
|
|
140
|
+
transitions.push(
|
|
141
|
+
uikitUtil.Transition.start(
|
|
142
|
+
target,
|
|
143
|
+
{ height: newHeight },
|
|
144
|
+
duration / 2 + transitionNodes.length * stagger,
|
|
145
|
+
'ease'));
|
|
129
146
|
|
|
130
|
-
var transitionNodes = getTransitionNodes(target);
|
|
131
|
-
uikitUtil.css(nodes, propsOut);
|
|
132
147
|
|
|
133
|
-
|
|
134
|
-
); }
|
|
135
|
-
);
|
|
148
|
+
}
|
|
136
149
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
150
|
+
Promise.all(transitions).then(() => {
|
|
151
|
+
uikitUtil.removeClass(target, clsEnter);
|
|
152
|
+
if (index === transitionIndex(target)) {
|
|
153
|
+
uikitUtil.css(target, { height: '', alignContent: '' });
|
|
154
|
+
uikitUtil.css(nodes, { opacity: '' });
|
|
155
|
+
delete target.dataset.transition;
|
|
156
|
+
}
|
|
157
|
+
resolve();
|
|
158
|
+
});
|
|
159
|
+
}));
|
|
140
160
|
|
|
141
|
-
|
|
142
|
-
uikitUtil.removeClass(target, clsEnter);
|
|
143
|
-
if (index === transitionIndex(target)) {
|
|
144
|
-
uikitUtil.css(target, {height: '', alignContent: ''});
|
|
145
|
-
uikitUtil.css(nodes, {opacity: ''});
|
|
146
|
-
delete target.dataset.transition;
|
|
147
|
-
}
|
|
148
|
-
resolve();
|
|
149
|
-
});
|
|
150
|
-
}); }
|
|
151
|
-
);
|
|
152
|
-
});
|
|
161
|
+
});
|
|
153
162
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
163
|
+
return uikitUtil.hasClass(target, clsLeave) ?
|
|
164
|
+
waitTransitionend(target).then(enterFn) :
|
|
165
|
+
uikitUtil.hasClass(target, clsEnter) ?
|
|
166
|
+
waitTransitionend(target).then(leaveFn).then(enterFn) :
|
|
167
|
+
leaveFn().then(enterFn);
|
|
159
168
|
}
|
|
160
169
|
|
|
161
170
|
function transitionIndex(target, next) {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
171
|
+
if (next) {
|
|
172
|
+
target.dataset.transition = 1 + transitionIndex(target);
|
|
173
|
+
}
|
|
165
174
|
|
|
166
|
-
|
|
175
|
+
return uikitUtil.toNumber(target.dataset.transition) || 0;
|
|
167
176
|
}
|
|
168
177
|
|
|
169
178
|
function waitTransitionend(target) {
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
function slide (action, target, duration) {
|
|
179
|
-
|
|
180
|
-
return new uikitUtil.Promise(function (resolve) { return requestAnimationFrame(function () {
|
|
179
|
+
return Promise.all(
|
|
180
|
+
uikitUtil.children(target).
|
|
181
|
+
filter(uikitUtil.Transition.inProgress).
|
|
182
|
+
map(
|
|
183
|
+
(el) =>
|
|
184
|
+
new Promise((resolve) => uikitUtil.once(el, 'transitionend transitioncanceled', resolve))));
|
|
181
185
|
|
|
182
|
-
var nodes = uikitUtil.children(target);
|
|
183
186
|
|
|
184
|
-
|
|
185
|
-
var currentProps = nodes.map(function (el) { return getProps(el, true); });
|
|
186
|
-
var targetProps = uikitUtil.css(target, ['height', 'padding']);
|
|
187
|
-
|
|
188
|
-
// Cancel previous animations
|
|
189
|
-
uikitUtil.Transition.cancel(target);
|
|
190
|
-
nodes.forEach(uikitUtil.Transition.cancel);
|
|
191
|
-
reset(target);
|
|
192
|
-
|
|
193
|
-
// Adding, sorting, removing nodes
|
|
194
|
-
action();
|
|
195
|
-
|
|
196
|
-
// Find new nodes
|
|
197
|
-
nodes = nodes.concat(uikitUtil.children(target).filter(function (el) { return !uikitUtil.includes(nodes, el); }));
|
|
198
|
-
|
|
199
|
-
// Wait for update to propagate
|
|
200
|
-
uikitUtil.Promise.resolve().then(function () {
|
|
201
|
-
|
|
202
|
-
// Force update
|
|
203
|
-
uikitUtil.fastdom.flush();
|
|
187
|
+
}
|
|
204
188
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
189
|
+
function getTransitionNodes(target) {
|
|
190
|
+
return getRows(uikitUtil.children(target)).reduce(
|
|
191
|
+
(nodes, row) =>
|
|
192
|
+
nodes.concat(
|
|
193
|
+
uikitUtil.sortBy(
|
|
194
|
+
row.filter((el) => uikitUtil.isInView(el)),
|
|
195
|
+
'offsetLeft')),
|
|
210
196
|
|
|
211
|
-
// Reset to previous state
|
|
212
|
-
nodes.forEach(function (el, i) { return propsFrom[i] && uikitUtil.css(el, propsFrom[i]); });
|
|
213
|
-
uikitUtil.css(target, uikitUtil.assign({display: 'block'}, targetProps));
|
|
214
197
|
|
|
215
|
-
|
|
216
|
-
requestAnimationFrame(function () {
|
|
198
|
+
[]);
|
|
217
199
|
|
|
218
|
-
|
|
219
|
-
).concat(uikitUtil.Transition.start(target, targetPropsTo, duration, 'ease'));
|
|
200
|
+
}
|
|
220
201
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
202
|
+
function slide (action, target, duration) {
|
|
203
|
+
return new Promise((resolve) =>
|
|
204
|
+
requestAnimationFrame(() => {
|
|
205
|
+
let nodes = uikitUtil.children(target);
|
|
206
|
+
|
|
207
|
+
// Get current state
|
|
208
|
+
const currentProps = nodes.map((el) => getProps(el, true));
|
|
209
|
+
const targetProps = uikitUtil.css(target, ['height', 'padding']);
|
|
210
|
+
|
|
211
|
+
// Cancel previous animations
|
|
212
|
+
uikitUtil.Transition.cancel(target);
|
|
213
|
+
nodes.forEach(uikitUtil.Transition.cancel);
|
|
214
|
+
reset(target);
|
|
215
|
+
|
|
216
|
+
// Adding, sorting, removing nodes
|
|
217
|
+
action();
|
|
218
|
+
|
|
219
|
+
// Find new nodes
|
|
220
|
+
nodes = nodes.concat(uikitUtil.children(target).filter((el) => !uikitUtil.includes(nodes, el)));
|
|
221
|
+
|
|
222
|
+
// Wait for update to propagate
|
|
223
|
+
Promise.resolve().then(() => {
|
|
224
|
+
// Force update
|
|
225
|
+
uikitUtil.fastdom.flush();
|
|
226
|
+
|
|
227
|
+
// Get new state
|
|
228
|
+
const targetPropsTo = uikitUtil.css(target, ['height', 'padding']);
|
|
229
|
+
const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
|
|
230
|
+
|
|
231
|
+
// Reset to previous state
|
|
232
|
+
nodes.forEach((el, i) => propsFrom[i] && uikitUtil.css(el, propsFrom[i]));
|
|
233
|
+
uikitUtil.css(target, uikitUtil.assign({ display: 'block' }, targetProps));
|
|
234
|
+
|
|
235
|
+
// Start transitions on next frame
|
|
236
|
+
requestAnimationFrame(() => {
|
|
237
|
+
const transitions = nodes.
|
|
238
|
+
map(
|
|
239
|
+
(el, i) =>
|
|
240
|
+
uikitUtil.parent(el) === target &&
|
|
241
|
+
uikitUtil.Transition.start(el, propsTo[i], duration, 'ease')).
|
|
242
|
+
|
|
243
|
+
concat(uikitUtil.Transition.start(target, targetPropsTo, duration, 'ease'));
|
|
244
|
+
|
|
245
|
+
Promise.all(transitions).
|
|
246
|
+
then(() => {
|
|
247
|
+
nodes.forEach(
|
|
248
|
+
(el, i) =>
|
|
249
|
+
uikitUtil.parent(el) === target &&
|
|
250
|
+
uikitUtil.css(el, 'display', propsTo[i].opacity === 0 ? 'none' : ''));
|
|
251
|
+
|
|
252
|
+
reset(target);
|
|
253
|
+
}, uikitUtil.noop).
|
|
254
|
+
then(resolve);
|
|
255
|
+
});
|
|
256
|
+
});
|
|
257
|
+
}));
|
|
225
258
|
|
|
226
|
-
});
|
|
227
|
-
});
|
|
228
|
-
}); });
|
|
229
259
|
}
|
|
230
260
|
|
|
231
261
|
function getProps(el, opacity) {
|
|
262
|
+
const zIndex = uikitUtil.css(el, 'zIndex');
|
|
263
|
+
|
|
264
|
+
return uikitUtil.isVisible(el) ?
|
|
265
|
+
uikitUtil.assign(
|
|
266
|
+
{
|
|
267
|
+
display: '',
|
|
268
|
+
opacity: opacity ? uikitUtil.css(el, 'opacity') : '0',
|
|
269
|
+
pointerEvents: 'none',
|
|
270
|
+
position: 'absolute',
|
|
271
|
+
zIndex: zIndex === 'auto' ? uikitUtil.index(el) : zIndex },
|
|
232
272
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
? uikitUtil.assign({
|
|
237
|
-
display: '',
|
|
238
|
-
opacity: opacity ? uikitUtil.css(el, 'opacity') : '0',
|
|
239
|
-
pointerEvents: 'none',
|
|
240
|
-
position: 'absolute',
|
|
241
|
-
zIndex: zIndex === 'auto' ? uikitUtil.index(el) : zIndex
|
|
242
|
-
}, getPositionWithMargin(el))
|
|
243
|
-
: false;
|
|
273
|
+
getPositionWithMargin(el)) :
|
|
274
|
+
|
|
275
|
+
false;
|
|
244
276
|
}
|
|
245
277
|
|
|
246
278
|
function getTransitionProps(target, nodes, currentProps) {
|
|
279
|
+
const propsTo = nodes.map((el, i) =>
|
|
280
|
+
uikitUtil.parent(el) && i in currentProps ?
|
|
281
|
+
currentProps[i] ?
|
|
282
|
+
uikitUtil.isVisible(el) ?
|
|
283
|
+
getPositionWithMargin(el) :
|
|
284
|
+
{ opacity: 0 } :
|
|
285
|
+
{ opacity: uikitUtil.isVisible(el) ? 1 : 0 } :
|
|
286
|
+
false);
|
|
247
287
|
|
|
248
|
-
var propsTo = nodes.map(function (el, i) { return uikitUtil.parent(el) && i in currentProps
|
|
249
|
-
? currentProps[i]
|
|
250
|
-
? uikitUtil.isVisible(el)
|
|
251
|
-
? getPositionWithMargin(el)
|
|
252
|
-
: {opacity: 0}
|
|
253
|
-
: {opacity: uikitUtil.isVisible(el) ? 1 : 0}
|
|
254
|
-
: false; });
|
|
255
288
|
|
|
256
|
-
|
|
289
|
+
const propsFrom = propsTo.map((props, i) => {
|
|
290
|
+
const from = uikitUtil.parent(nodes[i]) === target && (currentProps[i] || getProps(nodes[i]));
|
|
257
291
|
|
|
258
|
-
|
|
292
|
+
if (!from) {
|
|
293
|
+
return false;
|
|
294
|
+
}
|
|
259
295
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
296
|
+
if (!props) {
|
|
297
|
+
delete from.opacity;
|
|
298
|
+
} else if (!('opacity' in props)) {
|
|
299
|
+
const { opacity } = from;
|
|
263
300
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
301
|
+
if (opacity % 1) {
|
|
302
|
+
props.opacity = 1;
|
|
303
|
+
} else {
|
|
304
|
+
delete from.opacity;
|
|
305
|
+
}
|
|
306
|
+
}
|
|
268
307
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
} else {
|
|
272
|
-
delete from.opacity;
|
|
273
|
-
}
|
|
274
|
-
}
|
|
308
|
+
return from;
|
|
309
|
+
});
|
|
275
310
|
|
|
276
|
-
|
|
277
|
-
});
|
|
278
|
-
|
|
279
|
-
return [propsTo, propsFrom];
|
|
311
|
+
return [propsTo, propsFrom];
|
|
280
312
|
}
|
|
281
313
|
|
|
282
314
|
function reset(el) {
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
315
|
+
uikitUtil.css(el.children, {
|
|
316
|
+
height: '',
|
|
317
|
+
left: '',
|
|
318
|
+
opacity: '',
|
|
319
|
+
pointerEvents: '',
|
|
320
|
+
position: '',
|
|
321
|
+
top: '',
|
|
322
|
+
marginTop: '',
|
|
323
|
+
marginLeft: '',
|
|
324
|
+
transform: '',
|
|
325
|
+
width: '',
|
|
326
|
+
zIndex: '' });
|
|
327
|
+
|
|
328
|
+
uikitUtil.css(el, { height: '', display: '', padding: '' });
|
|
297
329
|
}
|
|
298
330
|
|
|
299
331
|
function getPositionWithMargin(el) {
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
var left = ref$1.left;
|
|
306
|
-
var ref$2 = uikitUtil.css(el, ['marginTop', 'marginLeft']);
|
|
307
|
-
var marginLeft = ref$2.marginLeft;
|
|
308
|
-
var marginTop = ref$2.marginTop;
|
|
309
|
-
|
|
310
|
-
return {top: top, left: left, height: height, width: width, marginLeft: marginLeft, marginTop: marginTop, transform: ''};
|
|
332
|
+
const { height, width } = uikitUtil.offset(el);
|
|
333
|
+
const { top, left } = uikitUtil.position(el);
|
|
334
|
+
const { marginLeft, marginTop } = uikitUtil.css(el, ['marginTop', 'marginLeft']);
|
|
335
|
+
|
|
336
|
+
return { top, left, height, width, marginLeft, marginTop, transform: '' };
|
|
311
337
|
}
|
|
312
338
|
|
|
313
339
|
var Animate = {
|
|
340
|
+
props: {
|
|
341
|
+
duration: Number,
|
|
342
|
+
animation: Boolean },
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
data: {
|
|
346
|
+
duration: 150,
|
|
347
|
+
animation: 'slide' },
|
|
348
|
+
|
|
349
|
+
|
|
350
|
+
methods: {
|
|
351
|
+
animate(action, target) {if (target === void 0) {target = this.$el;}
|
|
352
|
+
const name = this.animation;
|
|
353
|
+
const animationFn =
|
|
354
|
+
name === 'fade' ?
|
|
355
|
+
fade :
|
|
356
|
+
name === 'delayed-fade' ?
|
|
357
|
+
function () {for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}return fade(...args, 40);} :
|
|
358
|
+
name ?
|
|
359
|
+
slide :
|
|
360
|
+
() => {
|
|
361
|
+
action();
|
|
362
|
+
return Promise.resolve();
|
|
363
|
+
};
|
|
314
364
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
},
|
|
319
|
-
|
|
320
|
-
data: {
|
|
321
|
-
duration: 150,
|
|
322
|
-
animation: 'slide'
|
|
323
|
-
},
|
|
324
|
-
|
|
325
|
-
methods: {
|
|
326
|
-
|
|
327
|
-
animate: function(action, target) {
|
|
328
|
-
var this$1$1 = this;
|
|
329
|
-
if ( target === void 0 ) target = this.$el;
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
var name = this.animation;
|
|
333
|
-
var animationFn = name === 'fade'
|
|
334
|
-
? fade
|
|
335
|
-
: name === 'delayed-fade'
|
|
336
|
-
? function () {
|
|
337
|
-
var args = [], len = arguments.length;
|
|
338
|
-
while ( len-- ) args[ len ] = arguments[ len ];
|
|
339
|
-
|
|
340
|
-
return fade.apply(void 0, args.concat( [40] ));
|
|
341
|
-
}
|
|
342
|
-
: name
|
|
343
|
-
? slide
|
|
344
|
-
: function () {
|
|
345
|
-
action();
|
|
346
|
-
return uikitUtil.Promise.resolve();
|
|
347
|
-
};
|
|
365
|
+
return animationFn(action, target, this.duration).then(
|
|
366
|
+
() => this.$update(target, 'resize'),
|
|
367
|
+
uikitUtil.noop);
|
|
348
368
|
|
|
349
|
-
|
|
350
|
-
.then(function () { return this$1$1.$update(target, 'resize'); }, uikitUtil.noop);
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
}
|
|
354
|
-
};
|
|
369
|
+
} } };
|
|
355
370
|
|
|
356
371
|
var Class = {
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
};
|
|
372
|
+
connected() {
|
|
373
|
+
!uikitUtil.hasClass(this.$el, this.$name) && uikitUtil.addClass(this.$el, this.$name);
|
|
374
|
+
} };
|
|
363
375
|
|
|
364
376
|
var Component = {
|
|
377
|
+
mixins: [Class, Animate],
|
|
378
|
+
|
|
379
|
+
props: {
|
|
380
|
+
group: String,
|
|
381
|
+
threshold: Number,
|
|
382
|
+
clsItem: String,
|
|
383
|
+
clsPlaceholder: String,
|
|
384
|
+
clsDrag: String,
|
|
385
|
+
clsDragState: String,
|
|
386
|
+
clsBase: String,
|
|
387
|
+
clsNoDrag: String,
|
|
388
|
+
clsEmpty: String,
|
|
389
|
+
clsCustom: String,
|
|
390
|
+
handle: String },
|
|
391
|
+
|
|
392
|
+
|
|
393
|
+
data: {
|
|
394
|
+
group: false,
|
|
395
|
+
threshold: 5,
|
|
396
|
+
clsItem: 'uk-sortable-item',
|
|
397
|
+
clsPlaceholder: 'uk-sortable-placeholder',
|
|
398
|
+
clsDrag: 'uk-sortable-drag',
|
|
399
|
+
clsDragState: 'uk-drag',
|
|
400
|
+
clsBase: 'uk-sortable',
|
|
401
|
+
clsNoDrag: 'uk-sortable-nodrag',
|
|
402
|
+
clsEmpty: 'uk-sortable-empty',
|
|
403
|
+
clsCustom: '',
|
|
404
|
+
handle: false,
|
|
405
|
+
pos: {} },
|
|
406
|
+
|
|
407
|
+
|
|
408
|
+
created() {
|
|
409
|
+
['init', 'start', 'move', 'end'].forEach((key) => {
|
|
410
|
+
const fn = this[key];
|
|
411
|
+
this[key] = (e) => {
|
|
412
|
+
uikitUtil.assign(this.pos, uikitUtil.getEventPos(e));
|
|
413
|
+
fn(e);
|
|
414
|
+
};
|
|
415
|
+
});
|
|
416
|
+
},
|
|
365
417
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
threshold: Number,
|
|
371
|
-
clsItem: String,
|
|
372
|
-
clsPlaceholder: String,
|
|
373
|
-
clsDrag: String,
|
|
374
|
-
clsDragState: String,
|
|
375
|
-
clsBase: String,
|
|
376
|
-
clsNoDrag: String,
|
|
377
|
-
clsEmpty: String,
|
|
378
|
-
clsCustom: String,
|
|
379
|
-
handle: String
|
|
380
|
-
},
|
|
381
|
-
|
|
382
|
-
data: {
|
|
383
|
-
group: false,
|
|
384
|
-
threshold: 5,
|
|
385
|
-
clsItem: 'uk-sortable-item',
|
|
386
|
-
clsPlaceholder: 'uk-sortable-placeholder',
|
|
387
|
-
clsDrag: 'uk-sortable-drag',
|
|
388
|
-
clsDragState: 'uk-drag',
|
|
389
|
-
clsBase: 'uk-sortable',
|
|
390
|
-
clsNoDrag: 'uk-sortable-nodrag',
|
|
391
|
-
clsEmpty: 'uk-sortable-empty',
|
|
392
|
-
clsCustom: '',
|
|
393
|
-
handle: false,
|
|
394
|
-
pos: {}
|
|
395
|
-
},
|
|
418
|
+
events: {
|
|
419
|
+
name: uikitUtil.pointerDown,
|
|
420
|
+
passive: false,
|
|
421
|
+
handler: 'init' },
|
|
396
422
|
|
|
397
|
-
created: function() {
|
|
398
|
-
var this$1$1 = this;
|
|
399
423
|
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
uikitUtil.assign(this$1$1.pos, uikitUtil.getEventPos(e));
|
|
404
|
-
fn(e);
|
|
405
|
-
};
|
|
406
|
-
});
|
|
424
|
+
computed: {
|
|
425
|
+
target() {
|
|
426
|
+
return (this.$el.tBodies || [this.$el])[0];
|
|
407
427
|
},
|
|
408
428
|
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
name: uikitUtil.pointerDown,
|
|
412
|
-
passive: false,
|
|
413
|
-
handler: 'init'
|
|
414
|
-
|
|
429
|
+
items() {
|
|
430
|
+
return uikitUtil.children(this.target);
|
|
415
431
|
},
|
|
416
432
|
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
},
|
|
433
|
+
isEmpty: {
|
|
434
|
+
get() {
|
|
435
|
+
return uikitUtil.isEmpty(this.items);
|
|
436
|
+
},
|
|
422
437
|
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
438
|
+
watch(empty) {
|
|
439
|
+
uikitUtil.toggleClass(this.target, this.clsEmpty, empty);
|
|
440
|
+
},
|
|
426
441
|
|
|
427
|
-
|
|
442
|
+
immediate: true },
|
|
428
443
|
|
|
429
|
-
get: function() {
|
|
430
|
-
return uikitUtil.isEmpty(this.items);
|
|
431
|
-
},
|
|
432
444
|
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
445
|
+
handles: {
|
|
446
|
+
get(_ref, el) {let { handle } = _ref;
|
|
447
|
+
return handle ? uikitUtil.$$(handle, el) : this.items;
|
|
448
|
+
},
|
|
436
449
|
|
|
437
|
-
|
|
450
|
+
watch(handles, prev) {
|
|
451
|
+
uikitUtil.css(prev, { touchAction: '', userSelect: '' });
|
|
452
|
+
uikitUtil.css(handles, { touchAction: uikitUtil.hasTouch ? 'none' : '', userSelect: 'none' }); // touchAction set to 'none' causes a performance drop in Chrome 80
|
|
453
|
+
},
|
|
438
454
|
|
|
439
|
-
|
|
455
|
+
immediate: true } },
|
|
440
456
|
|
|
441
|
-
handles: {
|
|
442
457
|
|
|
443
|
-
get: function(ref, el) {
|
|
444
|
-
var handle = ref.handle;
|
|
445
458
|
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
uikitUtil.css(handles, {touchAction: uikitUtil.hasTouch ? 'none' : '', userSelect: 'none'}); // touchAction set to 'none' causes a performance drop in Chrome 80
|
|
452
|
-
},
|
|
453
|
-
|
|
454
|
-
immediate: true
|
|
455
|
-
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
},
|
|
459
|
-
|
|
460
|
-
update: {
|
|
461
|
-
|
|
462
|
-
write: function(data) {
|
|
463
|
-
|
|
464
|
-
if (!this.drag || !uikitUtil.parent(this.placeholder)) {
|
|
465
|
-
return;
|
|
466
|
-
}
|
|
459
|
+
update: {
|
|
460
|
+
write(data) {
|
|
461
|
+
if (!this.drag || !uikitUtil.parent(this.placeholder)) {
|
|
462
|
+
return;
|
|
463
|
+
}
|
|
467
464
|
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
var offsetTop = ref_origin.offsetTop;
|
|
474
|
-
var offsetLeft = ref_origin.offsetLeft;
|
|
475
|
-
var placeholder = ref.placeholder;
|
|
465
|
+
const {
|
|
466
|
+
pos: { x, y },
|
|
467
|
+
origin: { offsetTop, offsetLeft },
|
|
468
|
+
placeholder } =
|
|
469
|
+
this;
|
|
476
470
|
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
});
|
|
471
|
+
uikitUtil.css(this.drag, {
|
|
472
|
+
top: y - offsetTop,
|
|
473
|
+
left: x - offsetLeft });
|
|
481
474
|
|
|
482
|
-
var sortable = this.getSortable(document.elementFromPoint(x, y));
|
|
483
475
|
|
|
484
|
-
|
|
485
|
-
return;
|
|
486
|
-
}
|
|
476
|
+
const sortable = this.getSortable(document.elementFromPoint(x, y));
|
|
487
477
|
|
|
488
|
-
|
|
478
|
+
if (!sortable) {
|
|
479
|
+
return;
|
|
480
|
+
}
|
|
489
481
|
|
|
490
|
-
|
|
491
|
-
return;
|
|
492
|
-
}
|
|
482
|
+
const { items } = sortable;
|
|
493
483
|
|
|
494
|
-
|
|
484
|
+
if (items.some(uikitUtil.Transition.inProgress)) {
|
|
485
|
+
return;
|
|
486
|
+
}
|
|
495
487
|
|
|
496
|
-
|
|
497
|
-
return;
|
|
498
|
-
}
|
|
488
|
+
const target = findTarget(items, { x, y });
|
|
499
489
|
|
|
500
|
-
|
|
501
|
-
|
|
490
|
+
if (items.length && (!target || target === placeholder)) {
|
|
491
|
+
return;
|
|
492
|
+
}
|
|
502
493
|
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
494
|
+
const previous = this.getSortable(placeholder);
|
|
495
|
+
const insertTarget = findInsertTarget(
|
|
496
|
+
sortable.target,
|
|
497
|
+
target,
|
|
498
|
+
placeholder,
|
|
499
|
+
x,
|
|
500
|
+
y,
|
|
501
|
+
sortable === previous && data.moved !== target);
|
|
506
502
|
|
|
507
|
-
if (insertTarget && placeholder === insertTarget) {
|
|
508
|
-
return;
|
|
509
|
-
}
|
|
510
503
|
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
} else {
|
|
515
|
-
delete data.moved;
|
|
516
|
-
}
|
|
504
|
+
if (insertTarget === false) {
|
|
505
|
+
return;
|
|
506
|
+
}
|
|
517
507
|
|
|
518
|
-
|
|
508
|
+
if (insertTarget && placeholder === insertTarget) {
|
|
509
|
+
return;
|
|
510
|
+
}
|
|
519
511
|
|
|
520
|
-
|
|
521
|
-
|
|
512
|
+
if (sortable !== previous) {
|
|
513
|
+
previous.remove(placeholder);
|
|
514
|
+
data.moved = target;
|
|
515
|
+
} else {
|
|
516
|
+
delete data.moved;
|
|
517
|
+
}
|
|
522
518
|
|
|
523
|
-
|
|
519
|
+
sortable.insert(placeholder, insertTarget);
|
|
524
520
|
|
|
521
|
+
this.touched.add(sortable);
|
|
525
522
|
},
|
|
526
523
|
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
init: function(e) {
|
|
530
|
-
|
|
531
|
-
var target = e.target;
|
|
532
|
-
var button = e.button;
|
|
533
|
-
var defaultPrevented = e.defaultPrevented;
|
|
534
|
-
var ref = this.items.filter(function (el) { return uikitUtil.within(target, el); });
|
|
535
|
-
var placeholder = ref[0];
|
|
524
|
+
events: ['move'] },
|
|
536
525
|
|
|
537
|
-
if (!placeholder
|
|
538
|
-
|| defaultPrevented
|
|
539
|
-
|| button > 0
|
|
540
|
-
|| uikitUtil.isInput(target)
|
|
541
|
-
|| uikitUtil.within(target, ("." + (this.clsNoDrag)))
|
|
542
|
-
|| this.handle && !uikitUtil.within(target, this.handle)
|
|
543
|
-
) {
|
|
544
|
-
return;
|
|
545
|
-
}
|
|
546
526
|
|
|
547
|
-
|
|
527
|
+
methods: {
|
|
528
|
+
init(e) {
|
|
529
|
+
const { target, button, defaultPrevented } = e;
|
|
530
|
+
const [placeholder] = this.items.filter((el) => uikitUtil.within(target, el));
|
|
548
531
|
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
},
|
|
561
|
-
|
|
562
|
-
start: function(e) {
|
|
563
|
-
|
|
564
|
-
this.drag = appendDrag(this.$container, this.placeholder);
|
|
565
|
-
var ref = this.placeholder.getBoundingClientRect();
|
|
566
|
-
var left = ref.left;
|
|
567
|
-
var top = ref.top;
|
|
568
|
-
uikitUtil.assign(this.origin, {offsetLeft: this.pos.x - left, offsetTop: this.pos.y - top});
|
|
569
|
-
|
|
570
|
-
uikitUtil.addClass(this.drag, this.clsDrag, this.clsCustom);
|
|
571
|
-
uikitUtil.addClass(this.placeholder, this.clsPlaceholder);
|
|
572
|
-
uikitUtil.addClass(this.items, this.clsItem);
|
|
573
|
-
uikitUtil.addClass(document.documentElement, this.clsDragState);
|
|
574
|
-
|
|
575
|
-
uikitUtil.trigger(this.$el, 'start', [this, this.placeholder]);
|
|
576
|
-
|
|
577
|
-
trackScroll(this.pos);
|
|
578
|
-
|
|
579
|
-
this.move(e);
|
|
580
|
-
},
|
|
532
|
+
if (
|
|
533
|
+
!placeholder ||
|
|
534
|
+
defaultPrevented ||
|
|
535
|
+
button > 0 ||
|
|
536
|
+
uikitUtil.isInput(target) ||
|
|
537
|
+
uikitUtil.within(target, "." + this.clsNoDrag) ||
|
|
538
|
+
this.handle && !uikitUtil.within(target, this.handle))
|
|
539
|
+
{
|
|
540
|
+
return;
|
|
541
|
+
}
|
|
581
542
|
|
|
582
|
-
|
|
543
|
+
e.preventDefault();
|
|
583
544
|
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
this.start(e);
|
|
588
|
-
}
|
|
545
|
+
this.touched = new Set([this]);
|
|
546
|
+
this.placeholder = placeholder;
|
|
547
|
+
this.origin = uikitUtil.assign({ target, index: uikitUtil.index(placeholder) }, this.pos);
|
|
589
548
|
|
|
590
|
-
|
|
549
|
+
uikitUtil.on(document, uikitUtil.pointerMove, this.move);
|
|
550
|
+
uikitUtil.on(document, uikitUtil.pointerUp, this.end);
|
|
591
551
|
|
|
592
|
-
|
|
593
|
-
|
|
552
|
+
if (!this.threshold) {
|
|
553
|
+
this.start(e);
|
|
554
|
+
}
|
|
555
|
+
},
|
|
594
556
|
|
|
557
|
+
start(e) {
|
|
558
|
+
this.drag = appendDrag(this.$container, this.placeholder);
|
|
559
|
+
const { left, top } = this.placeholder.getBoundingClientRect();
|
|
560
|
+
uikitUtil.assign(this.origin, { offsetLeft: this.pos.x - left, offsetTop: this.pos.y - top });
|
|
595
561
|
|
|
596
|
-
|
|
597
|
-
|
|
562
|
+
uikitUtil.addClass(this.drag, this.clsDrag, this.clsCustom);
|
|
563
|
+
uikitUtil.addClass(this.placeholder, this.clsPlaceholder);
|
|
564
|
+
uikitUtil.addClass(this.items, this.clsItem);
|
|
565
|
+
uikitUtil.addClass(document.documentElement, this.clsDragState);
|
|
598
566
|
|
|
599
|
-
|
|
600
|
-
return;
|
|
601
|
-
}
|
|
567
|
+
uikitUtil.trigger(this.$el, 'start', [this, this.placeholder]);
|
|
602
568
|
|
|
603
|
-
|
|
569
|
+
trackScroll(this.pos);
|
|
604
570
|
|
|
605
|
-
|
|
571
|
+
this.move(e);
|
|
572
|
+
},
|
|
606
573
|
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
574
|
+
move(e) {
|
|
575
|
+
if (this.drag) {
|
|
576
|
+
this.$emit('move');
|
|
577
|
+
} else if (
|
|
578
|
+
Math.abs(this.pos.x - this.origin.x) > this.threshold ||
|
|
579
|
+
Math.abs(this.pos.y - this.origin.y) > this.threshold)
|
|
580
|
+
{
|
|
581
|
+
this.start(e);
|
|
582
|
+
}
|
|
583
|
+
},
|
|
615
584
|
|
|
616
|
-
|
|
585
|
+
end() {
|
|
586
|
+
uikitUtil.off(document, uikitUtil.pointerMove, this.move);
|
|
587
|
+
uikitUtil.off(document, uikitUtil.pointerUp, this.end);
|
|
617
588
|
|
|
618
|
-
|
|
619
|
-
|
|
589
|
+
if (!this.drag) {
|
|
590
|
+
return;
|
|
591
|
+
}
|
|
620
592
|
|
|
621
|
-
|
|
622
|
-
var clsPlaceholder = ref.clsPlaceholder;
|
|
623
|
-
var clsItem = ref.clsItem;
|
|
593
|
+
untrackScroll();
|
|
624
594
|
|
|
625
|
-
|
|
626
|
-
);
|
|
627
|
-
}
|
|
628
|
-
);
|
|
629
|
-
this.touched = null;
|
|
630
|
-
uikitUtil.removeClass(document.documentElement, this.clsDragState);
|
|
595
|
+
const sortable = this.getSortable(this.placeholder);
|
|
631
596
|
|
|
632
|
-
|
|
597
|
+
if (this === sortable) {
|
|
598
|
+
if (this.origin.index !== uikitUtil.index(this.placeholder)) {
|
|
599
|
+
uikitUtil.trigger(this.$el, 'moved', [this, this.placeholder]);
|
|
600
|
+
}
|
|
601
|
+
} else {
|
|
602
|
+
uikitUtil.trigger(sortable.$el, 'added', [sortable, this.placeholder]);
|
|
603
|
+
uikitUtil.trigger(this.$el, 'removed', [this, this.placeholder]);
|
|
604
|
+
}
|
|
633
605
|
|
|
634
|
-
|
|
635
|
-
var this$1$1 = this;
|
|
606
|
+
uikitUtil.trigger(this.$el, 'stop', [this, this.placeholder]);
|
|
636
607
|
|
|
608
|
+
uikitUtil.remove(this.drag);
|
|
609
|
+
this.drag = null;
|
|
637
610
|
|
|
638
|
-
|
|
611
|
+
this.touched.forEach((_ref2) => {let { clsPlaceholder, clsItem } = _ref2;return (
|
|
612
|
+
this.touched.forEach((sortable) =>
|
|
613
|
+
uikitUtil.removeClass(sortable.items, clsPlaceholder, clsItem)));});
|
|
639
614
|
|
|
640
|
-
var insert = function () { return target
|
|
641
|
-
? uikitUtil.before(target, element)
|
|
642
|
-
: uikitUtil.append(this$1$1.target, element); };
|
|
643
615
|
|
|
644
|
-
|
|
616
|
+
this.touched = null;
|
|
617
|
+
uikitUtil.removeClass(document.documentElement, this.clsDragState);
|
|
618
|
+
},
|
|
645
619
|
|
|
646
|
-
|
|
620
|
+
insert(element, target) {
|
|
621
|
+
uikitUtil.addClass(this.items, this.clsItem);
|
|
647
622
|
|
|
648
|
-
|
|
623
|
+
const insert = () => target ? uikitUtil.before(target, element) : uikitUtil.append(this.target, element);
|
|
649
624
|
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
}
|
|
625
|
+
this.animate(insert);
|
|
626
|
+
},
|
|
653
627
|
|
|
654
|
-
|
|
628
|
+
remove(element) {
|
|
629
|
+
if (!uikitUtil.within(element, this.target)) {
|
|
630
|
+
return;
|
|
631
|
+
}
|
|
655
632
|
|
|
656
|
-
|
|
633
|
+
this.animate(() => uikitUtil.remove(element));
|
|
634
|
+
},
|
|
657
635
|
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
636
|
+
getSortable(element) {
|
|
637
|
+
do {
|
|
638
|
+
const sortable = this.$getComponent(element, 'sortable');
|
|
661
639
|
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
640
|
+
if (
|
|
641
|
+
sortable && (
|
|
642
|
+
sortable === this || this.group !== false && sortable.group === this.group))
|
|
643
|
+
{
|
|
644
|
+
return sortable;
|
|
666
645
|
}
|
|
646
|
+
} while (element = uikitUtil.parent(element));
|
|
647
|
+
} } };
|
|
667
648
|
|
|
668
|
-
}
|
|
669
649
|
|
|
670
|
-
};
|
|
671
650
|
|
|
672
|
-
|
|
651
|
+
let trackTimer;
|
|
673
652
|
function trackScroll(pos) {
|
|
653
|
+
let last = Date.now();
|
|
654
|
+
trackTimer = setInterval(() => {
|
|
655
|
+
let { x, y } = pos;
|
|
656
|
+
y += uikitUtil.scrollTop(window);
|
|
657
|
+
|
|
658
|
+
const dist = (Date.now() - last) * 0.3;
|
|
659
|
+
last = Date.now();
|
|
660
|
+
|
|
661
|
+
uikitUtil.scrollParents(document.elementFromPoint(x, pos.y), /auto|scroll/).
|
|
662
|
+
reverse().
|
|
663
|
+
some((scrollEl) => {
|
|
664
|
+
let { scrollTop: scroll, scrollHeight } = scrollEl;
|
|
665
|
+
|
|
666
|
+
const { top, bottom, height } = uikitUtil.offset(uikitUtil.getViewport(scrollEl));
|
|
667
|
+
|
|
668
|
+
if (top < y && top + 35 > y) {
|
|
669
|
+
scroll -= dist;
|
|
670
|
+
} else if (bottom > y && bottom - 35 < y) {
|
|
671
|
+
scroll += dist;
|
|
672
|
+
} else {
|
|
673
|
+
return;
|
|
674
|
+
}
|
|
674
675
|
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
var dist = (Date.now() - last) * .3;
|
|
683
|
-
last = Date.now();
|
|
684
|
-
|
|
685
|
-
uikitUtil.scrollParents(document.elementFromPoint(x, pos.y), /auto|scroll/).reverse().some(function (scrollEl) {
|
|
686
|
-
|
|
687
|
-
var scroll = scrollEl.scrollTop;
|
|
688
|
-
var scrollHeight = scrollEl.scrollHeight;
|
|
689
|
-
|
|
690
|
-
var ref = uikitUtil.offset(uikitUtil.getViewport(scrollEl));
|
|
691
|
-
var top = ref.top;
|
|
692
|
-
var bottom = ref.bottom;
|
|
693
|
-
var height = ref.height;
|
|
694
|
-
|
|
695
|
-
if (top < y && top + 35 > y) {
|
|
696
|
-
scroll -= dist;
|
|
697
|
-
} else if (bottom > y && bottom - 35 < y) {
|
|
698
|
-
scroll += dist;
|
|
699
|
-
} else {
|
|
700
|
-
return;
|
|
701
|
-
}
|
|
702
|
-
|
|
703
|
-
if (scroll > 0 && scroll < scrollHeight - height) {
|
|
704
|
-
uikitUtil.scrollTop(scrollEl, scroll);
|
|
705
|
-
return true;
|
|
706
|
-
}
|
|
707
|
-
|
|
708
|
-
});
|
|
709
|
-
|
|
710
|
-
}, 15);
|
|
711
|
-
|
|
676
|
+
if (scroll > 0 && scroll < scrollHeight - height) {
|
|
677
|
+
uikitUtil.scrollTop(scrollEl, scroll);
|
|
678
|
+
return true;
|
|
679
|
+
}
|
|
680
|
+
});
|
|
681
|
+
}, 15);
|
|
712
682
|
}
|
|
713
683
|
|
|
714
684
|
function untrackScroll() {
|
|
715
|
-
|
|
685
|
+
clearInterval(trackTimer);
|
|
716
686
|
}
|
|
717
687
|
|
|
718
688
|
function appendDrag(container, element) {
|
|
719
|
-
|
|
689
|
+
const clone = uikitUtil.append(
|
|
690
|
+
container,
|
|
691
|
+
element.outerHTML.replace(/(^<)(?:li|tr)|(?:li|tr)(\/>$)/g, '$1div$2'));
|
|
692
|
+
|
|
693
|
+
|
|
694
|
+
uikitUtil.css(clone, 'margin', '0', 'important');
|
|
695
|
+
uikitUtil.css(clone, {
|
|
696
|
+
boxSizing: 'border-box',
|
|
697
|
+
width: element.offsetWidth,
|
|
698
|
+
height: element.offsetHeight,
|
|
699
|
+
padding: uikitUtil.css(element, 'padding') });
|
|
720
700
|
|
|
721
|
-
uikitUtil.css(clone, 'margin', '0', 'important');
|
|
722
|
-
uikitUtil.css(clone, uikitUtil.assign({
|
|
723
|
-
boxSizing: 'border-box',
|
|
724
|
-
width: element.offsetWidth,
|
|
725
|
-
height: element.offsetHeight
|
|
726
|
-
}, uikitUtil.css(element, ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'])));
|
|
727
701
|
|
|
728
|
-
|
|
702
|
+
uikitUtil.height(clone.firstElementChild, uikitUtil.height(element.firstElementChild));
|
|
729
703
|
|
|
730
|
-
|
|
704
|
+
return clone;
|
|
731
705
|
}
|
|
732
706
|
|
|
733
707
|
function findTarget(items, point) {
|
|
734
|
-
|
|
708
|
+
return items[uikitUtil.findIndex(items, (item) => uikitUtil.pointInRect(point, item.getBoundingClientRect()))];
|
|
735
709
|
}
|
|
736
710
|
|
|
737
711
|
function findInsertTarget(list, target, placeholder, x, y, sameList) {
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
712
|
+
if (!uikitUtil.children(list).length) {
|
|
713
|
+
return;
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
const rect = target.getBoundingClientRect();
|
|
717
|
+
if (!sameList) {
|
|
718
|
+
if (!isHorizontal(list, placeholder)) {
|
|
719
|
+
return y < rect.top + rect.height / 2 ? target : target.nextElementSibling;
|
|
741
720
|
}
|
|
742
721
|
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
if (!isHorizontal(list, placeholder)) {
|
|
747
|
-
return y < rect.top + rect.height / 2
|
|
748
|
-
? target
|
|
749
|
-
: target.nextElementSibling;
|
|
750
|
-
}
|
|
751
|
-
|
|
752
|
-
return target;
|
|
753
|
-
}
|
|
754
|
-
|
|
755
|
-
var placeholderRect = placeholder.getBoundingClientRect();
|
|
756
|
-
var sameRow = linesIntersect(
|
|
757
|
-
[rect.top, rect.bottom],
|
|
758
|
-
[placeholderRect.top, placeholderRect.bottom]
|
|
759
|
-
);
|
|
722
|
+
return target;
|
|
723
|
+
}
|
|
760
724
|
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
725
|
+
const placeholderRect = placeholder.getBoundingClientRect();
|
|
726
|
+
const sameRow = linesIntersect(
|
|
727
|
+
[rect.top, rect.bottom],
|
|
728
|
+
[placeholderRect.top, placeholderRect.bottom]);
|
|
765
729
|
|
|
766
|
-
var diff = placeholderRect[lengthProp] < rect[lengthProp] ? rect[lengthProp] - placeholderRect[lengthProp] : 0;
|
|
767
730
|
|
|
768
|
-
|
|
731
|
+
const pointerPos = sameRow ? x : y;
|
|
732
|
+
const lengthProp = sameRow ? 'width' : 'height';
|
|
733
|
+
const startProp = sameRow ? 'left' : 'top';
|
|
734
|
+
const endProp = sameRow ? 'right' : 'bottom';
|
|
769
735
|
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
736
|
+
const diff =
|
|
737
|
+
placeholderRect[lengthProp] < rect[lengthProp] ?
|
|
738
|
+
rect[lengthProp] - placeholderRect[lengthProp] :
|
|
739
|
+
0;
|
|
773
740
|
|
|
774
|
-
|
|
741
|
+
if (placeholderRect[startProp] < rect[startProp]) {
|
|
742
|
+
if (diff && pointerPos < rect[startProp] + diff) {
|
|
743
|
+
return false;
|
|
775
744
|
}
|
|
776
745
|
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
}
|
|
746
|
+
return target.nextElementSibling;
|
|
747
|
+
}
|
|
780
748
|
|
|
781
|
-
|
|
749
|
+
if (diff && pointerPos > rect[endProp] - diff) {
|
|
750
|
+
return false;
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
return target;
|
|
782
754
|
}
|
|
783
755
|
|
|
784
756
|
function isHorizontal(list, placeholder) {
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
return !linesIntersect([rectA.left, rectA.right], [rectB.left, rectB.right]);
|
|
798
|
-
});
|
|
757
|
+
const single = uikitUtil.children(list).length === 1;
|
|
758
|
+
|
|
759
|
+
if (single) {
|
|
760
|
+
uikitUtil.append(list, placeholder);
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
const items = uikitUtil.children(list);
|
|
764
|
+
const isHorizontal = items.some((el, i) => {
|
|
765
|
+
const rectA = el.getBoundingClientRect();
|
|
766
|
+
return items.slice(i + 1).some((el) => {
|
|
767
|
+
const rectB = el.getBoundingClientRect();
|
|
768
|
+
return !linesIntersect([rectA.left, rectA.right], [rectB.left, rectB.right]);
|
|
799
769
|
});
|
|
770
|
+
});
|
|
800
771
|
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
772
|
+
if (single) {
|
|
773
|
+
uikitUtil.remove(placeholder);
|
|
774
|
+
}
|
|
804
775
|
|
|
805
|
-
|
|
776
|
+
return isHorizontal;
|
|
806
777
|
}
|
|
807
778
|
|
|
808
779
|
function linesIntersect(lineA, lineB) {
|
|
809
|
-
|
|
780
|
+
return lineA[1] > lineB[0] && lineB[1] > lineA[0];
|
|
810
781
|
}
|
|
811
782
|
|
|
812
783
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
813
|
-
|
|
784
|
+
window.UIkit.component('sortable', Component);
|
|
814
785
|
}
|
|
815
786
|
|
|
816
787
|
return Component;
|