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