hyperclayjs 1.3.0 → 1.4.0

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.
Files changed (42) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +77 -45
  3. package/communication/behaviorCollector.js +7 -4
  4. package/communication/sendMessage.js +7 -4
  5. package/communication/uploadFile.js +8 -5
  6. package/core/autosave.js +5 -47
  7. package/core/editmodeSystem.js +8 -5
  8. package/core/enablePersistentFormInputValues.js +7 -4
  9. package/core/exportToWindow.js +14 -0
  10. package/core/optionVisibilityRuleGenerator.js +8 -5
  11. package/core/savePage.js +47 -14
  12. package/core/savePageCore.js +10 -7
  13. package/custom-attributes/domHelpers.js +7 -4
  14. package/custom-attributes/sortable.js +23 -16
  15. package/dom-utilities/All.js +9 -6
  16. package/dom-utilities/getDataFromForm.js +8 -5
  17. package/dom-utilities/insertStyleTag.js +8 -5
  18. package/dom-utilities/onDomReady.js +7 -4
  19. package/dom-utilities/onLoad.js +7 -4
  20. package/hyperclay.js +92 -34
  21. package/module-dependency-graph.json +103 -135
  22. package/package.json +1 -1
  23. package/string-utilities/copy-to-clipboard.js +7 -4
  24. package/string-utilities/query.js +8 -5
  25. package/string-utilities/slugify.js +8 -5
  26. package/ui/prompts.js +49 -31
  27. package/ui/theModal.js +50 -6
  28. package/ui/toast-hyperclay.js +27 -11
  29. package/ui/toast.js +82 -92
  30. package/utilities/cookie.js +8 -5
  31. package/utilities/debounce.js +7 -4
  32. package/utilities/loadVendorScript.js +57 -0
  33. package/utilities/mutation.js +9 -6
  34. package/utilities/nearest.js +7 -4
  35. package/utilities/throttle.js +7 -4
  36. package/vendor/Sortable.vendor.js +2 -0
  37. package/vendor/idiomorph.min.js +8 -5
  38. package/vendor/tailwind-play.js +16 -162
  39. package/vendor/tailwind-play.vendor.js +169 -0
  40. package/string-utilities/emmet-html.js +0 -60
  41. package/ui/info.js +0 -47
  42. package/vendor/Sortable.js +0 -3351
@@ -1,3351 +0,0 @@
1
- /**!
2
- * Sortable 1.15.3
3
- * @author RubaXa <trash@rubaxa.org>
4
- * @author owenm <owen23355@gmail.com>
5
- * @license MIT
6
- */
7
- function ownKeys(object, enumerableOnly) {
8
- var keys = Object.keys(object);
9
- if (Object.getOwnPropertySymbols) {
10
- var symbols = Object.getOwnPropertySymbols(object);
11
- if (enumerableOnly) {
12
- symbols = symbols.filter(function (sym) {
13
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
14
- });
15
- }
16
- keys.push.apply(keys, symbols);
17
- }
18
- return keys;
19
- }
20
- function _objectSpread2(target) {
21
- for (var i = 1; i < arguments.length; i++) {
22
- var source = arguments[i] != null ? arguments[i] : {};
23
- if (i % 2) {
24
- ownKeys(Object(source), true).forEach(function (key) {
25
- _defineProperty(target, key, source[key]);
26
- });
27
- } else if (Object.getOwnPropertyDescriptors) {
28
- Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
29
- } else {
30
- ownKeys(Object(source)).forEach(function (key) {
31
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
32
- });
33
- }
34
- }
35
- return target;
36
- }
37
- function _typeof(obj) {
38
- "@babel/helpers - typeof";
39
-
40
- if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
41
- _typeof = function (obj) {
42
- return typeof obj;
43
- };
44
- } else {
45
- _typeof = function (obj) {
46
- return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
47
- };
48
- }
49
- return _typeof(obj);
50
- }
51
- function _defineProperty(obj, key, value) {
52
- if (key in obj) {
53
- Object.defineProperty(obj, key, {
54
- value: value,
55
- enumerable: true,
56
- configurable: true,
57
- writable: true
58
- });
59
- } else {
60
- obj[key] = value;
61
- }
62
- return obj;
63
- }
64
- function _extends() {
65
- _extends = Object.assign || function (target) {
66
- for (var i = 1; i < arguments.length; i++) {
67
- var source = arguments[i];
68
- for (var key in source) {
69
- if (Object.prototype.hasOwnProperty.call(source, key)) {
70
- target[key] = source[key];
71
- }
72
- }
73
- }
74
- return target;
75
- };
76
- return _extends.apply(this, arguments);
77
- }
78
- function _objectWithoutPropertiesLoose(source, excluded) {
79
- if (source == null) return {};
80
- var target = {};
81
- var sourceKeys = Object.keys(source);
82
- var key, i;
83
- for (i = 0; i < sourceKeys.length; i++) {
84
- key = sourceKeys[i];
85
- if (excluded.indexOf(key) >= 0) continue;
86
- target[key] = source[key];
87
- }
88
- return target;
89
- }
90
- function _objectWithoutProperties(source, excluded) {
91
- if (source == null) return {};
92
- var target = _objectWithoutPropertiesLoose(source, excluded);
93
- var key, i;
94
- if (Object.getOwnPropertySymbols) {
95
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
96
- for (i = 0; i < sourceSymbolKeys.length; i++) {
97
- key = sourceSymbolKeys[i];
98
- if (excluded.indexOf(key) >= 0) continue;
99
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
100
- target[key] = source[key];
101
- }
102
- }
103
- return target;
104
- }
105
- function _toConsumableArray(arr) {
106
- return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
107
- }
108
- function _arrayWithoutHoles(arr) {
109
- if (Array.isArray(arr)) return _arrayLikeToArray(arr);
110
- }
111
- function _iterableToArray(iter) {
112
- if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
113
- }
114
- function _unsupportedIterableToArray(o, minLen) {
115
- if (!o) return;
116
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
117
- var n = Object.prototype.toString.call(o).slice(8, -1);
118
- if (n === "Object" && o.constructor) n = o.constructor.name;
119
- if (n === "Map" || n === "Set") return Array.from(o);
120
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
121
- }
122
- function _arrayLikeToArray(arr, len) {
123
- if (len == null || len > arr.length) len = arr.length;
124
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
125
- return arr2;
126
- }
127
- function _nonIterableSpread() {
128
- throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
129
- }
130
-
131
- var version = "1.15.3";
132
-
133
- function userAgent(pattern) {
134
- if (typeof window !== 'undefined' && window.navigator) {
135
- return !! /*@__PURE__*/navigator.userAgent.match(pattern);
136
- }
137
- }
138
- var IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i);
139
- var Edge = userAgent(/Edge/i);
140
- var FireFox = userAgent(/firefox/i);
141
- var Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i);
142
- var IOS = userAgent(/iP(ad|od|hone)/i);
143
- var ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i);
144
-
145
- var captureMode = {
146
- capture: false,
147
- passive: false
148
- };
149
- function on(el, event, fn) {
150
- el.addEventListener(event, fn, !IE11OrLess && captureMode);
151
- }
152
- function off(el, event, fn) {
153
- el.removeEventListener(event, fn, !IE11OrLess && captureMode);
154
- }
155
- function matches( /**HTMLElement*/el, /**String*/selector) {
156
- if (!selector) return;
157
- selector[0] === '>' && (selector = selector.substring(1));
158
- if (el) {
159
- try {
160
- if (el.matches) {
161
- return el.matches(selector);
162
- } else if (el.msMatchesSelector) {
163
- return el.msMatchesSelector(selector);
164
- } else if (el.webkitMatchesSelector) {
165
- return el.webkitMatchesSelector(selector);
166
- }
167
- } catch (_) {
168
- return false;
169
- }
170
- }
171
- return false;
172
- }
173
- function getParentOrHost(el) {
174
- return el.host && el !== document && el.host.nodeType ? el.host : el.parentNode;
175
- }
176
- function closest( /**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx, includeCTX) {
177
- if (el) {
178
- ctx = ctx || document;
179
- do {
180
- if (selector != null && (selector[0] === '>' ? el.parentNode === ctx && matches(el, selector) : matches(el, selector)) || includeCTX && el === ctx) {
181
- return el;
182
- }
183
- if (el === ctx) break;
184
- /* jshint boss:true */
185
- } while (el = getParentOrHost(el));
186
- }
187
- return null;
188
- }
189
- var R_SPACE = /\s+/g;
190
- function toggleClass(el, name, state) {
191
- if (el && name) {
192
- if (el.classList) {
193
- el.classList[state ? 'add' : 'remove'](name);
194
- } else {
195
- var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' ');
196
- el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' ');
197
- }
198
- }
199
- }
200
- function css(el, prop, val) {
201
- var style = el && el.style;
202
- if (style) {
203
- if (val === void 0) {
204
- if (document.defaultView && document.defaultView.getComputedStyle) {
205
- val = document.defaultView.getComputedStyle(el, '');
206
- } else if (el.currentStyle) {
207
- val = el.currentStyle;
208
- }
209
- return prop === void 0 ? val : val[prop];
210
- } else {
211
- if (!(prop in style) && prop.indexOf('webkit') === -1) {
212
- prop = '-webkit-' + prop;
213
- }
214
- style[prop] = val + (typeof val === 'string' ? '' : 'px');
215
- }
216
- }
217
- }
218
- function matrix(el, selfOnly) {
219
- var appliedTransforms = '';
220
- if (typeof el === 'string') {
221
- appliedTransforms = el;
222
- } else {
223
- do {
224
- var transform = css(el, 'transform');
225
- if (transform && transform !== 'none') {
226
- appliedTransforms = transform + ' ' + appliedTransforms;
227
- }
228
- /* jshint boss:true */
229
- } while (!selfOnly && (el = el.parentNode));
230
- }
231
- var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix;
232
- /*jshint -W056 */
233
- return matrixFn && new matrixFn(appliedTransforms);
234
- }
235
- function find(ctx, tagName, iterator) {
236
- if (ctx) {
237
- var list = ctx.getElementsByTagName(tagName),
238
- i = 0,
239
- n = list.length;
240
- if (iterator) {
241
- for (; i < n; i++) {
242
- iterator(list[i], i);
243
- }
244
- }
245
- return list;
246
- }
247
- return [];
248
- }
249
- function getWindowScrollingElement() {
250
- var scrollingElement = document.scrollingElement;
251
- if (scrollingElement) {
252
- return scrollingElement;
253
- } else {
254
- return document.documentElement;
255
- }
256
- }
257
-
258
- /**
259
- * Returns the "bounding client rect" of given element
260
- * @param {HTMLElement} el The element whose boundingClientRect is wanted
261
- * @param {[Boolean]} relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container
262
- * @param {[Boolean]} relativeToNonStaticParent Whether the rect should be relative to the relative parent of (including) the contaienr
263
- * @param {[Boolean]} undoScale Whether the container's scale() should be undone
264
- * @param {[HTMLElement]} container The parent the element will be placed in
265
- * @return {Object} The boundingClientRect of el, with specified adjustments
266
- */
267
- function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoScale, container) {
268
- if (!el.getBoundingClientRect && el !== window) return;
269
- var elRect, top, left, bottom, right, height, width;
270
- if (el !== window && el.parentNode && el !== getWindowScrollingElement()) {
271
- elRect = el.getBoundingClientRect();
272
- top = elRect.top;
273
- left = elRect.left;
274
- bottom = elRect.bottom;
275
- right = elRect.right;
276
- height = elRect.height;
277
- width = elRect.width;
278
- } else {
279
- top = 0;
280
- left = 0;
281
- bottom = window.innerHeight;
282
- right = window.innerWidth;
283
- height = window.innerHeight;
284
- width = window.innerWidth;
285
- }
286
- if ((relativeToContainingBlock || relativeToNonStaticParent) && el !== window) {
287
- // Adjust for translate()
288
- container = container || el.parentNode;
289
-
290
- // solves #1123 (see: https://stackoverflow.com/a/37953806/6088312)
291
- // Not needed on <= IE11
292
- if (!IE11OrLess) {
293
- do {
294
- if (container && container.getBoundingClientRect && (css(container, 'transform') !== 'none' || relativeToNonStaticParent && css(container, 'position') !== 'static')) {
295
- var containerRect = container.getBoundingClientRect();
296
-
297
- // Set relative to edges of padding box of container
298
- top -= containerRect.top + parseInt(css(container, 'border-top-width'));
299
- left -= containerRect.left + parseInt(css(container, 'border-left-width'));
300
- bottom = top + elRect.height;
301
- right = left + elRect.width;
302
- break;
303
- }
304
- /* jshint boss:true */
305
- } while (container = container.parentNode);
306
- }
307
- }
308
- if (undoScale && el !== window) {
309
- // Adjust for scale()
310
- var elMatrix = matrix(container || el),
311
- scaleX = elMatrix && elMatrix.a,
312
- scaleY = elMatrix && elMatrix.d;
313
- if (elMatrix) {
314
- top /= scaleY;
315
- left /= scaleX;
316
- width /= scaleX;
317
- height /= scaleY;
318
- bottom = top + height;
319
- right = left + width;
320
- }
321
- }
322
- return {
323
- top: top,
324
- left: left,
325
- bottom: bottom,
326
- right: right,
327
- width: width,
328
- height: height
329
- };
330
- }
331
-
332
- /**
333
- * Checks if a side of an element is scrolled past a side of its parents
334
- * @param {HTMLElement} el The element who's side being scrolled out of view is in question
335
- * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom')
336
- * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom')
337
- * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element
338
- */
339
- function isScrolledPast(el, elSide, parentSide) {
340
- var parent = getParentAutoScrollElement(el, true),
341
- elSideVal = getRect(el)[elSide];
342
-
343
- /* jshint boss:true */
344
- while (parent) {
345
- var parentSideVal = getRect(parent)[parentSide],
346
- visible = void 0;
347
- if (parentSide === 'top' || parentSide === 'left') {
348
- visible = elSideVal >= parentSideVal;
349
- } else {
350
- visible = elSideVal <= parentSideVal;
351
- }
352
- if (!visible) return parent;
353
- if (parent === getWindowScrollingElement()) break;
354
- parent = getParentAutoScrollElement(parent, false);
355
- }
356
- return false;
357
- }
358
-
359
- /**
360
- * Gets nth child of el, ignoring hidden children, sortable's elements (does not ignore clone if it's visible)
361
- * and non-draggable elements
362
- * @param {HTMLElement} el The parent element
363
- * @param {Number} childNum The index of the child
364
- * @param {Object} options Parent Sortable's options
365
- * @return {HTMLElement} The child at index childNum, or null if not found
366
- */
367
- function getChild(el, childNum, options, includeDragEl) {
368
- var currentChild = 0,
369
- i = 0,
370
- children = el.children;
371
- while (i < children.length) {
372
- if (children[i].style.display !== 'none' && children[i] !== Sortable.ghost && (includeDragEl || children[i] !== Sortable.dragged) && closest(children[i], options.draggable, el, false)) {
373
- if (currentChild === childNum) {
374
- return children[i];
375
- }
376
- currentChild++;
377
- }
378
- i++;
379
- }
380
- return null;
381
- }
382
-
383
- /**
384
- * Gets the last child in the el, ignoring ghostEl or invisible elements (clones)
385
- * @param {HTMLElement} el Parent element
386
- * @param {selector} selector Any other elements that should be ignored
387
- * @return {HTMLElement} The last child, ignoring ghostEl
388
- */
389
- function lastChild(el, selector) {
390
- var last = el.lastElementChild;
391
- while (last && (last === Sortable.ghost || css(last, 'display') === 'none' || selector && !matches(last, selector))) {
392
- last = last.previousElementSibling;
393
- }
394
- return last || null;
395
- }
396
-
397
- /**
398
- * Returns the index of an element within its parent for a selected set of
399
- * elements
400
- * @param {HTMLElement} el
401
- * @param {selector} selector
402
- * @return {number}
403
- */
404
- function index(el, selector) {
405
- var index = 0;
406
- if (!el || !el.parentNode) {
407
- return -1;
408
- }
409
-
410
- /* jshint boss:true */
411
- while (el = el.previousElementSibling) {
412
- if (el.nodeName.toUpperCase() !== 'TEMPLATE' && el !== Sortable.clone && (!selector || matches(el, selector))) {
413
- index++;
414
- }
415
- }
416
- return index;
417
- }
418
-
419
- /**
420
- * Returns the scroll offset of the given element, added with all the scroll offsets of parent elements.
421
- * The value is returned in real pixels.
422
- * @param {HTMLElement} el
423
- * @return {Array} Offsets in the format of [left, top]
424
- */
425
- function getRelativeScrollOffset(el) {
426
- var offsetLeft = 0,
427
- offsetTop = 0,
428
- winScroller = getWindowScrollingElement();
429
- if (el) {
430
- do {
431
- var elMatrix = matrix(el),
432
- scaleX = elMatrix.a,
433
- scaleY = elMatrix.d;
434
- offsetLeft += el.scrollLeft * scaleX;
435
- offsetTop += el.scrollTop * scaleY;
436
- } while (el !== winScroller && (el = el.parentNode));
437
- }
438
- return [offsetLeft, offsetTop];
439
- }
440
-
441
- /**
442
- * Returns the index of the object within the given array
443
- * @param {Array} arr Array that may or may not hold the object
444
- * @param {Object} obj An object that has a key-value pair unique to and identical to a key-value pair in the object you want to find
445
- * @return {Number} The index of the object in the array, or -1
446
- */
447
- function indexOfObject(arr, obj) {
448
- for (var i in arr) {
449
- if (!arr.hasOwnProperty(i)) continue;
450
- for (var key in obj) {
451
- if (obj.hasOwnProperty(key) && obj[key] === arr[i][key]) return Number(i);
452
- }
453
- }
454
- return -1;
455
- }
456
- function getParentAutoScrollElement(el, includeSelf) {
457
- // skip to window
458
- if (!el || !el.getBoundingClientRect) return getWindowScrollingElement();
459
- var elem = el;
460
- var gotSelf = false;
461
- do {
462
- // we don't need to get elem css if it isn't even overflowing in the first place (performance)
463
- if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) {
464
- var elemCSS = css(elem);
465
- if (elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')) {
466
- if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement();
467
- if (gotSelf || includeSelf) return elem;
468
- gotSelf = true;
469
- }
470
- }
471
- /* jshint boss:true */
472
- } while (elem = elem.parentNode);
473
- return getWindowScrollingElement();
474
- }
475
- function extend(dst, src) {
476
- if (dst && src) {
477
- for (var key in src) {
478
- if (src.hasOwnProperty(key)) {
479
- dst[key] = src[key];
480
- }
481
- }
482
- }
483
- return dst;
484
- }
485
- function isRectEqual(rect1, rect2) {
486
- return Math.round(rect1.top) === Math.round(rect2.top) && Math.round(rect1.left) === Math.round(rect2.left) && Math.round(rect1.height) === Math.round(rect2.height) && Math.round(rect1.width) === Math.round(rect2.width);
487
- }
488
- var _throttleTimeout;
489
- function throttle(callback, ms) {
490
- return function () {
491
- if (!_throttleTimeout) {
492
- var args = arguments,
493
- _this = this;
494
- if (args.length === 1) {
495
- callback.call(_this, args[0]);
496
- } else {
497
- callback.apply(_this, args);
498
- }
499
- _throttleTimeout = setTimeout(function () {
500
- _throttleTimeout = void 0;
501
- }, ms);
502
- }
503
- };
504
- }
505
- function cancelThrottle() {
506
- clearTimeout(_throttleTimeout);
507
- _throttleTimeout = void 0;
508
- }
509
- function scrollBy(el, x, y) {
510
- el.scrollLeft += x;
511
- el.scrollTop += y;
512
- }
513
- function clone(el) {
514
- var Polymer = window.Polymer;
515
- var $ = window.jQuery || window.Zepto;
516
- if (Polymer && Polymer.dom) {
517
- return Polymer.dom(el).cloneNode(true);
518
- } else if ($) {
519
- return $(el).clone(true)[0];
520
- } else {
521
- return el.cloneNode(true);
522
- }
523
- }
524
- function setRect(el, rect) {
525
- css(el, 'position', 'absolute');
526
- css(el, 'top', rect.top);
527
- css(el, 'left', rect.left);
528
- css(el, 'width', rect.width);
529
- css(el, 'height', rect.height);
530
- }
531
- function unsetRect(el) {
532
- css(el, 'position', '');
533
- css(el, 'top', '');
534
- css(el, 'left', '');
535
- css(el, 'width', '');
536
- css(el, 'height', '');
537
- }
538
- function getChildContainingRectFromElement(container, options, ghostEl) {
539
- var rect = {};
540
- Array.from(container.children).forEach(function (child) {
541
- var _rect$left, _rect$top, _rect$right, _rect$bottom;
542
- if (!closest(child, options.draggable, container, false) || child.animated || child === ghostEl) return;
543
- var childRect = getRect(child);
544
- rect.left = Math.min((_rect$left = rect.left) !== null && _rect$left !== void 0 ? _rect$left : Infinity, childRect.left);
545
- rect.top = Math.min((_rect$top = rect.top) !== null && _rect$top !== void 0 ? _rect$top : Infinity, childRect.top);
546
- rect.right = Math.max((_rect$right = rect.right) !== null && _rect$right !== void 0 ? _rect$right : -Infinity, childRect.right);
547
- rect.bottom = Math.max((_rect$bottom = rect.bottom) !== null && _rect$bottom !== void 0 ? _rect$bottom : -Infinity, childRect.bottom);
548
- });
549
- rect.width = rect.right - rect.left;
550
- rect.height = rect.bottom - rect.top;
551
- rect.x = rect.left;
552
- rect.y = rect.top;
553
- return rect;
554
- }
555
- var expando = 'Sortable' + new Date().getTime();
556
-
557
- function AnimationStateManager() {
558
- var animationStates = [],
559
- animationCallbackId;
560
- return {
561
- captureAnimationState: function captureAnimationState() {
562
- animationStates = [];
563
- if (!this.options.animation) return;
564
- var children = [].slice.call(this.el.children);
565
- children.forEach(function (child) {
566
- if (css(child, 'display') === 'none' || child === Sortable.ghost) return;
567
- animationStates.push({
568
- target: child,
569
- rect: getRect(child)
570
- });
571
- var fromRect = _objectSpread2({}, animationStates[animationStates.length - 1].rect);
572
-
573
- // If animating: compensate for current animation
574
- if (child.thisAnimationDuration) {
575
- var childMatrix = matrix(child, true);
576
- if (childMatrix) {
577
- fromRect.top -= childMatrix.f;
578
- fromRect.left -= childMatrix.e;
579
- }
580
- }
581
- child.fromRect = fromRect;
582
- });
583
- },
584
- addAnimationState: function addAnimationState(state) {
585
- animationStates.push(state);
586
- },
587
- removeAnimationState: function removeAnimationState(target) {
588
- animationStates.splice(indexOfObject(animationStates, {
589
- target: target
590
- }), 1);
591
- },
592
- animateAll: function animateAll(callback) {
593
- var _this = this;
594
- if (!this.options.animation) {
595
- clearTimeout(animationCallbackId);
596
- if (typeof callback === 'function') callback();
597
- return;
598
- }
599
- var animating = false,
600
- animationTime = 0;
601
- animationStates.forEach(function (state) {
602
- var time = 0,
603
- target = state.target,
604
- fromRect = target.fromRect,
605
- toRect = getRect(target),
606
- prevFromRect = target.prevFromRect,
607
- prevToRect = target.prevToRect,
608
- animatingRect = state.rect,
609
- targetMatrix = matrix(target, true);
610
- if (targetMatrix) {
611
- // Compensate for current animation
612
- toRect.top -= targetMatrix.f;
613
- toRect.left -= targetMatrix.e;
614
- }
615
- target.toRect = toRect;
616
- if (target.thisAnimationDuration) {
617
- // Could also check if animatingRect is between fromRect and toRect
618
- if (isRectEqual(prevFromRect, toRect) && !isRectEqual(fromRect, toRect) &&
619
- // Make sure animatingRect is on line between toRect & fromRect
620
- (animatingRect.top - toRect.top) / (animatingRect.left - toRect.left) === (fromRect.top - toRect.top) / (fromRect.left - toRect.left)) {
621
- // If returning to same place as started from animation and on same axis
622
- time = calculateRealTime(animatingRect, prevFromRect, prevToRect, _this.options);
623
- }
624
- }
625
-
626
- // if fromRect != toRect: animate
627
- if (!isRectEqual(toRect, fromRect)) {
628
- target.prevFromRect = fromRect;
629
- target.prevToRect = toRect;
630
- if (!time) {
631
- time = _this.options.animation;
632
- }
633
- _this.animate(target, animatingRect, toRect, time);
634
- }
635
- if (time) {
636
- animating = true;
637
- animationTime = Math.max(animationTime, time);
638
- clearTimeout(target.animationResetTimer);
639
- target.animationResetTimer = setTimeout(function () {
640
- target.animationTime = 0;
641
- target.prevFromRect = null;
642
- target.fromRect = null;
643
- target.prevToRect = null;
644
- target.thisAnimationDuration = null;
645
- }, time);
646
- target.thisAnimationDuration = time;
647
- }
648
- });
649
- clearTimeout(animationCallbackId);
650
- if (!animating) {
651
- if (typeof callback === 'function') callback();
652
- } else {
653
- animationCallbackId = setTimeout(function () {
654
- if (typeof callback === 'function') callback();
655
- }, animationTime);
656
- }
657
- animationStates = [];
658
- },
659
- animate: function animate(target, currentRect, toRect, duration) {
660
- if (duration) {
661
- css(target, 'transition', '');
662
- css(target, 'transform', '');
663
- var elMatrix = matrix(this.el),
664
- scaleX = elMatrix && elMatrix.a,
665
- scaleY = elMatrix && elMatrix.d,
666
- translateX = (currentRect.left - toRect.left) / (scaleX || 1),
667
- translateY = (currentRect.top - toRect.top) / (scaleY || 1);
668
- target.animatingX = !!translateX;
669
- target.animatingY = !!translateY;
670
- css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)');
671
- this.forRepaintDummy = repaint(target); // repaint
672
-
673
- css(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : ''));
674
- css(target, 'transform', 'translate3d(0,0,0)');
675
- typeof target.animated === 'number' && clearTimeout(target.animated);
676
- target.animated = setTimeout(function () {
677
- css(target, 'transition', '');
678
- css(target, 'transform', '');
679
- target.animated = false;
680
- target.animatingX = false;
681
- target.animatingY = false;
682
- }, duration);
683
- }
684
- }
685
- };
686
- }
687
- function repaint(target) {
688
- return target.offsetWidth;
689
- }
690
- function calculateRealTime(animatingRect, fromRect, toRect, options) {
691
- return Math.sqrt(Math.pow(fromRect.top - animatingRect.top, 2) + Math.pow(fromRect.left - animatingRect.left, 2)) / Math.sqrt(Math.pow(fromRect.top - toRect.top, 2) + Math.pow(fromRect.left - toRect.left, 2)) * options.animation;
692
- }
693
-
694
- var plugins = [];
695
- var defaults = {
696
- initializeByDefault: true
697
- };
698
- var PluginManager = {
699
- mount: function mount(plugin) {
700
- // Set default static properties
701
- for (var option in defaults) {
702
- if (defaults.hasOwnProperty(option) && !(option in plugin)) {
703
- plugin[option] = defaults[option];
704
- }
705
- }
706
- plugins.forEach(function (p) {
707
- if (p.pluginName === plugin.pluginName) {
708
- throw "Sortable: Cannot mount plugin ".concat(plugin.pluginName, " more than once");
709
- }
710
- });
711
- plugins.push(plugin);
712
- },
713
- pluginEvent: function pluginEvent(eventName, sortable, evt) {
714
- var _this = this;
715
- this.eventCanceled = false;
716
- evt.cancel = function () {
717
- _this.eventCanceled = true;
718
- };
719
- var eventNameGlobal = eventName + 'Global';
720
- plugins.forEach(function (plugin) {
721
- if (!sortable[plugin.pluginName]) return;
722
- // Fire global events if it exists in this sortable
723
- if (sortable[plugin.pluginName][eventNameGlobal]) {
724
- sortable[plugin.pluginName][eventNameGlobal](_objectSpread2({
725
- sortable: sortable
726
- }, evt));
727
- }
728
-
729
- // Only fire plugin event if plugin is enabled in this sortable,
730
- // and plugin has event defined
731
- if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) {
732
- sortable[plugin.pluginName][eventName](_objectSpread2({
733
- sortable: sortable
734
- }, evt));
735
- }
736
- });
737
- },
738
- initializePlugins: function initializePlugins(sortable, el, defaults, options) {
739
- plugins.forEach(function (plugin) {
740
- var pluginName = plugin.pluginName;
741
- if (!sortable.options[pluginName] && !plugin.initializeByDefault) return;
742
- var initialized = new plugin(sortable, el, sortable.options);
743
- initialized.sortable = sortable;
744
- initialized.options = sortable.options;
745
- sortable[pluginName] = initialized;
746
-
747
- // Add default options from plugin
748
- _extends(defaults, initialized.defaults);
749
- });
750
- for (var option in sortable.options) {
751
- if (!sortable.options.hasOwnProperty(option)) continue;
752
- var modified = this.modifyOption(sortable, option, sortable.options[option]);
753
- if (typeof modified !== 'undefined') {
754
- sortable.options[option] = modified;
755
- }
756
- }
757
- },
758
- getEventProperties: function getEventProperties(name, sortable) {
759
- var eventProperties = {};
760
- plugins.forEach(function (plugin) {
761
- if (typeof plugin.eventProperties !== 'function') return;
762
- _extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name));
763
- });
764
- return eventProperties;
765
- },
766
- modifyOption: function modifyOption(sortable, name, value) {
767
- var modifiedValue;
768
- plugins.forEach(function (plugin) {
769
- // Plugin must exist on the Sortable
770
- if (!sortable[plugin.pluginName]) return;
771
-
772
- // If static option listener exists for this option, call in the context of the Sortable's instance of this plugin
773
- if (plugin.optionListeners && typeof plugin.optionListeners[name] === 'function') {
774
- modifiedValue = plugin.optionListeners[name].call(sortable[plugin.pluginName], value);
775
- }
776
- });
777
- return modifiedValue;
778
- }
779
- };
780
-
781
- function dispatchEvent(_ref) {
782
- var sortable = _ref.sortable,
783
- rootEl = _ref.rootEl,
784
- name = _ref.name,
785
- targetEl = _ref.targetEl,
786
- cloneEl = _ref.cloneEl,
787
- toEl = _ref.toEl,
788
- fromEl = _ref.fromEl,
789
- oldIndex = _ref.oldIndex,
790
- newIndex = _ref.newIndex,
791
- oldDraggableIndex = _ref.oldDraggableIndex,
792
- newDraggableIndex = _ref.newDraggableIndex,
793
- originalEvent = _ref.originalEvent,
794
- putSortable = _ref.putSortable,
795
- extraEventProperties = _ref.extraEventProperties;
796
- sortable = sortable || rootEl && rootEl[expando];
797
- if (!sortable) return;
798
- var evt,
799
- options = sortable.options,
800
- onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1);
801
- // Support for new CustomEvent feature
802
- if (window.CustomEvent && !IE11OrLess && !Edge) {
803
- evt = new CustomEvent(name, {
804
- bubbles: true,
805
- cancelable: true
806
- });
807
- } else {
808
- evt = document.createEvent('Event');
809
- evt.initEvent(name, true, true);
810
- }
811
- evt.to = toEl || rootEl;
812
- evt.from = fromEl || rootEl;
813
- evt.item = targetEl || rootEl;
814
- evt.clone = cloneEl;
815
- evt.oldIndex = oldIndex;
816
- evt.newIndex = newIndex;
817
- evt.oldDraggableIndex = oldDraggableIndex;
818
- evt.newDraggableIndex = newDraggableIndex;
819
- evt.originalEvent = originalEvent;
820
- evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
821
- var allEventProperties = _objectSpread2(_objectSpread2({}, extraEventProperties), PluginManager.getEventProperties(name, sortable));
822
- for (var option in allEventProperties) {
823
- evt[option] = allEventProperties[option];
824
- }
825
- if (rootEl) {
826
- rootEl.dispatchEvent(evt);
827
- }
828
- if (options[onName]) {
829
- options[onName].call(sortable, evt);
830
- }
831
- }
832
-
833
- var _excluded = ["evt"];
834
- var pluginEvent = function pluginEvent(eventName, sortable) {
835
- var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
836
- originalEvent = _ref.evt,
837
- data = _objectWithoutProperties(_ref, _excluded);
838
- PluginManager.pluginEvent.bind(Sortable)(eventName, sortable, _objectSpread2({
839
- dragEl: dragEl,
840
- parentEl: parentEl,
841
- ghostEl: ghostEl,
842
- rootEl: rootEl,
843
- nextEl: nextEl,
844
- lastDownEl: lastDownEl,
845
- cloneEl: cloneEl,
846
- cloneHidden: cloneHidden,
847
- dragStarted: moved,
848
- putSortable: putSortable,
849
- activeSortable: Sortable.active,
850
- originalEvent: originalEvent,
851
- oldIndex: oldIndex,
852
- oldDraggableIndex: oldDraggableIndex,
853
- newIndex: newIndex,
854
- newDraggableIndex: newDraggableIndex,
855
- hideGhostForTarget: _hideGhostForTarget,
856
- unhideGhostForTarget: _unhideGhostForTarget,
857
- cloneNowHidden: function cloneNowHidden() {
858
- cloneHidden = true;
859
- },
860
- cloneNowShown: function cloneNowShown() {
861
- cloneHidden = false;
862
- },
863
- dispatchSortableEvent: function dispatchSortableEvent(name) {
864
- _dispatchEvent({
865
- sortable: sortable,
866
- name: name,
867
- originalEvent: originalEvent
868
- });
869
- }
870
- }, data));
871
- };
872
- function _dispatchEvent(info) {
873
- dispatchEvent(_objectSpread2({
874
- putSortable: putSortable,
875
- cloneEl: cloneEl,
876
- targetEl: dragEl,
877
- rootEl: rootEl,
878
- oldIndex: oldIndex,
879
- oldDraggableIndex: oldDraggableIndex,
880
- newIndex: newIndex,
881
- newDraggableIndex: newDraggableIndex
882
- }, info));
883
- }
884
- var dragEl,
885
- parentEl,
886
- ghostEl,
887
- rootEl,
888
- nextEl,
889
- lastDownEl,
890
- cloneEl,
891
- cloneHidden,
892
- oldIndex,
893
- newIndex,
894
- oldDraggableIndex,
895
- newDraggableIndex,
896
- activeGroup,
897
- putSortable,
898
- awaitingDragStarted = false,
899
- ignoreNextClick = false,
900
- sortables = [],
901
- tapEvt,
902
- touchEvt,
903
- lastDx,
904
- lastDy,
905
- tapDistanceLeft,
906
- tapDistanceTop,
907
- moved,
908
- lastTarget,
909
- lastDirection,
910
- pastFirstInvertThresh = false,
911
- isCircumstantialInvert = false,
912
- targetMoveDistance,
913
- // For positioning ghost absolutely
914
- ghostRelativeParent,
915
- ghostRelativeParentInitialScroll = [],
916
- // (left, top)
917
-
918
- _silent = false,
919
- savedInputChecked = [];
920
-
921
- /** @const */
922
- var documentExists = typeof document !== 'undefined',
923
- PositionGhostAbsolutely = IOS,
924
- CSSFloatProperty = Edge || IE11OrLess ? 'cssFloat' : 'float',
925
- // This will not pass for IE9, because IE9 DnD only works on anchors
926
- supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in document.createElement('div'),
927
- supportCssPointerEvents = function () {
928
- if (!documentExists) return;
929
- // false when <= IE11
930
- if (IE11OrLess) {
931
- return false;
932
- }
933
- var el = document.createElement('x');
934
- el.style.cssText = 'pointer-events:auto';
935
- return el.style.pointerEvents === 'auto';
936
- }(),
937
- _detectDirection = function _detectDirection(el, options) {
938
- var elCSS = css(el),
939
- elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth),
940
- child1 = getChild(el, 0, options),
941
- child2 = getChild(el, 1, options),
942
- firstChildCSS = child1 && css(child1),
943
- secondChildCSS = child2 && css(child2),
944
- firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width,
945
- secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width;
946
- if (elCSS.display === 'flex') {
947
- return elCSS.flexDirection === 'column' || elCSS.flexDirection === 'column-reverse' ? 'vertical' : 'horizontal';
948
- }
949
- if (elCSS.display === 'grid') {
950
- return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal';
951
- }
952
- if (child1 && firstChildCSS["float"] && firstChildCSS["float"] !== 'none') {
953
- var touchingSideChild2 = firstChildCSS["float"] === 'left' ? 'left' : 'right';
954
- return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal';
955
- }
956
- return child1 && (firstChildCSS.display === 'block' || firstChildCSS.display === 'flex' || firstChildCSS.display === 'table' || firstChildCSS.display === 'grid' || firstChildWidth >= elWidth && elCSS[CSSFloatProperty] === 'none' || child2 && elCSS[CSSFloatProperty] === 'none' && firstChildWidth + secondChildWidth > elWidth) ? 'vertical' : 'horizontal';
957
- },
958
- _dragElInRowColumn = function _dragElInRowColumn(dragRect, targetRect, vertical) {
959
- var dragElS1Opp = vertical ? dragRect.left : dragRect.top,
960
- dragElS2Opp = vertical ? dragRect.right : dragRect.bottom,
961
- dragElOppLength = vertical ? dragRect.width : dragRect.height,
962
- targetS1Opp = vertical ? targetRect.left : targetRect.top,
963
- targetS2Opp = vertical ? targetRect.right : targetRect.bottom,
964
- targetOppLength = vertical ? targetRect.width : targetRect.height;
965
- return dragElS1Opp === targetS1Opp || dragElS2Opp === targetS2Opp || dragElS1Opp + dragElOppLength / 2 === targetS1Opp + targetOppLength / 2;
966
- },
967
- /**
968
- * Detects first nearest empty sortable to X and Y position using emptyInsertThreshold.
969
- * @param {Number} x X position
970
- * @param {Number} y Y position
971
- * @return {HTMLElement} Element of the first found nearest Sortable
972
- */
973
- _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
974
- var ret;
975
- sortables.some(function (sortable) {
976
- var threshold = sortable[expando].options.emptyInsertThreshold;
977
- if (!threshold || lastChild(sortable)) return;
978
- var rect = getRect(sortable),
979
- insideHorizontally = x >= rect.left - threshold && x <= rect.right + threshold,
980
- insideVertically = y >= rect.top - threshold && y <= rect.bottom + threshold;
981
- if (insideHorizontally && insideVertically) {
982
- return ret = sortable;
983
- }
984
- });
985
- return ret;
986
- },
987
- _prepareGroup = function _prepareGroup(options) {
988
- function toFn(value, pull) {
989
- return function (to, from, dragEl, evt) {
990
- var sameGroup = to.options.group.name && from.options.group.name && to.options.group.name === from.options.group.name;
991
- if (value == null && (pull || sameGroup)) {
992
- // Default pull value
993
- // Default pull and put value if same group
994
- return true;
995
- } else if (value == null || value === false) {
996
- return false;
997
- } else if (pull && value === 'clone') {
998
- return value;
999
- } else if (typeof value === 'function') {
1000
- return toFn(value(to, from, dragEl, evt), pull)(to, from, dragEl, evt);
1001
- } else {
1002
- var otherGroup = (pull ? to : from).options.group.name;
1003
- return value === true || typeof value === 'string' && value === otherGroup || value.join && value.indexOf(otherGroup) > -1;
1004
- }
1005
- };
1006
- }
1007
- var group = {};
1008
- var originalGroup = options.group;
1009
- if (!originalGroup || _typeof(originalGroup) != 'object') {
1010
- originalGroup = {
1011
- name: originalGroup
1012
- };
1013
- }
1014
- group.name = originalGroup.name;
1015
- group.checkPull = toFn(originalGroup.pull, true);
1016
- group.checkPut = toFn(originalGroup.put);
1017
- group.revertClone = originalGroup.revertClone;
1018
- options.group = group;
1019
- },
1020
- _hideGhostForTarget = function _hideGhostForTarget() {
1021
- if (!supportCssPointerEvents && ghostEl) {
1022
- css(ghostEl, 'display', 'none');
1023
- }
1024
- },
1025
- _unhideGhostForTarget = function _unhideGhostForTarget() {
1026
- if (!supportCssPointerEvents && ghostEl) {
1027
- css(ghostEl, 'display', '');
1028
- }
1029
- };
1030
-
1031
- // #1184 fix - Prevent click event on fallback if dragged but item not changed position
1032
- if (documentExists && !ChromeForAndroid) {
1033
- document.addEventListener('click', function (evt) {
1034
- if (ignoreNextClick) {
1035
- evt.preventDefault();
1036
- evt.stopPropagation && evt.stopPropagation();
1037
- evt.stopImmediatePropagation && evt.stopImmediatePropagation();
1038
- ignoreNextClick = false;
1039
- return false;
1040
- }
1041
- }, true);
1042
- }
1043
- var nearestEmptyInsertDetectEvent = function nearestEmptyInsertDetectEvent(evt) {
1044
- if (dragEl) {
1045
- evt = evt.touches ? evt.touches[0] : evt;
1046
- var nearest = _detectNearestEmptySortable(evt.clientX, evt.clientY);
1047
- if (nearest) {
1048
- // Create imitation event
1049
- var event = {};
1050
- for (var i in evt) {
1051
- if (evt.hasOwnProperty(i)) {
1052
- event[i] = evt[i];
1053
- }
1054
- }
1055
- event.target = event.rootEl = nearest;
1056
- event.preventDefault = void 0;
1057
- event.stopPropagation = void 0;
1058
- nearest[expando]._onDragOver(event);
1059
- }
1060
- }
1061
- };
1062
- var _checkOutsideTargetEl = function _checkOutsideTargetEl(evt) {
1063
- if (dragEl) {
1064
- dragEl.parentNode[expando]._isOutsideThisEl(evt.target);
1065
- }
1066
- };
1067
-
1068
- /**
1069
- * @class Sortable
1070
- * @param {HTMLElement} el
1071
- * @param {Object} [options]
1072
- */
1073
- function Sortable(el, options) {
1074
- if (!(el && el.nodeType && el.nodeType === 1)) {
1075
- throw "Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(el));
1076
- }
1077
- this.el = el; // root element
1078
- this.options = options = _extends({}, options);
1079
-
1080
- // Export instance
1081
- el[expando] = this;
1082
- var defaults = {
1083
- group: null,
1084
- sort: true,
1085
- disabled: false,
1086
- store: null,
1087
- handle: null,
1088
- draggable: /^[uo]l$/i.test(el.nodeName) ? '>li' : '>*',
1089
- swapThreshold: 1,
1090
- // percentage; 0 <= x <= 1
1091
- invertSwap: false,
1092
- // invert always
1093
- invertedSwapThreshold: null,
1094
- // will be set to same as swapThreshold if default
1095
- removeCloneOnHide: true,
1096
- direction: function direction() {
1097
- return _detectDirection(el, this.options);
1098
- },
1099
- ghostClass: 'sortable-ghost',
1100
- chosenClass: 'sortable-chosen',
1101
- dragClass: 'sortable-drag',
1102
- ignore: 'a, img',
1103
- filter: null,
1104
- preventOnFilter: true,
1105
- animation: 0,
1106
- easing: null,
1107
- setData: function setData(dataTransfer, dragEl) {
1108
- dataTransfer.setData('Text', dragEl.textContent);
1109
- },
1110
- dropBubble: false,
1111
- dragoverBubble: false,
1112
- dataIdAttr: 'data-id',
1113
- delay: 0,
1114
- delayOnTouchOnly: false,
1115
- touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1,
1116
- forceFallback: false,
1117
- fallbackClass: 'sortable-fallback',
1118
- fallbackOnBody: false,
1119
- fallbackTolerance: 0,
1120
- fallbackOffset: {
1121
- x: 0,
1122
- y: 0
1123
- },
1124
- supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && !Safari,
1125
- emptyInsertThreshold: 5
1126
- };
1127
- PluginManager.initializePlugins(this, el, defaults);
1128
-
1129
- // Set default options
1130
- for (var name in defaults) {
1131
- !(name in options) && (options[name] = defaults[name]);
1132
- }
1133
- _prepareGroup(options);
1134
-
1135
- // Bind all private methods
1136
- for (var fn in this) {
1137
- if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
1138
- this[fn] = this[fn].bind(this);
1139
- }
1140
- }
1141
-
1142
- // Setup drag mode
1143
- this.nativeDraggable = options.forceFallback ? false : supportDraggable;
1144
- if (this.nativeDraggable) {
1145
- // Touch start threshold cannot be greater than the native dragstart threshold
1146
- this.options.touchStartThreshold = 1;
1147
- }
1148
-
1149
- // Bind events
1150
- if (options.supportPointer) {
1151
- on(el, 'pointerdown', this._onTapStart);
1152
- } else {
1153
- on(el, 'mousedown', this._onTapStart);
1154
- on(el, 'touchstart', this._onTapStart);
1155
- }
1156
- if (this.nativeDraggable) {
1157
- on(el, 'dragover', this);
1158
- on(el, 'dragenter', this);
1159
- }
1160
- sortables.push(this.el);
1161
-
1162
- // Restore sorting
1163
- options.store && options.store.get && this.sort(options.store.get(this) || []);
1164
-
1165
- // Add animation state manager
1166
- _extends(this, AnimationStateManager());
1167
- }
1168
- Sortable.prototype = /** @lends Sortable.prototype */{
1169
- constructor: Sortable,
1170
- _isOutsideThisEl: function _isOutsideThisEl(target) {
1171
- if (!this.el.contains(target) && target !== this.el) {
1172
- lastTarget = null;
1173
- }
1174
- },
1175
- _getDirection: function _getDirection(evt, target) {
1176
- return typeof this.options.direction === 'function' ? this.options.direction.call(this, evt, target, dragEl) : this.options.direction;
1177
- },
1178
- _onTapStart: function _onTapStart( /** Event|TouchEvent */evt) {
1179
- if (!evt.cancelable) return;
1180
- var _this = this,
1181
- el = this.el,
1182
- options = this.options,
1183
- preventOnFilter = options.preventOnFilter,
1184
- type = evt.type,
1185
- touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt,
1186
- target = (touch || evt).target,
1187
- originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target,
1188
- filter = options.filter;
1189
- _saveInputCheckedState(el);
1190
-
1191
- // Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group.
1192
- if (dragEl) {
1193
- return;
1194
- }
1195
- if (/mousedown|pointerdown/.test(type) && evt.button !== 0 || options.disabled) {
1196
- return; // only left button and enabled
1197
- }
1198
-
1199
- // cancel dnd if original target is content editable
1200
- if (originalTarget.isContentEditable) {
1201
- return;
1202
- }
1203
-
1204
- // Safari ignores further event handling after mousedown
1205
- if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') {
1206
- return;
1207
- }
1208
- target = closest(target, options.draggable, el, false);
1209
- if (target && target.animated) {
1210
- return;
1211
- }
1212
- if (lastDownEl === target) {
1213
- // Ignoring duplicate `down`
1214
- return;
1215
- }
1216
-
1217
- // Get the index of the dragged element within its parent
1218
- oldIndex = index(target);
1219
- oldDraggableIndex = index(target, options.draggable);
1220
-
1221
- // Check filter
1222
- if (typeof filter === 'function') {
1223
- if (filter.call(this, evt, target, this)) {
1224
- _dispatchEvent({
1225
- sortable: _this,
1226
- rootEl: originalTarget,
1227
- name: 'filter',
1228
- targetEl: target,
1229
- toEl: el,
1230
- fromEl: el
1231
- });
1232
- pluginEvent('filter', _this, {
1233
- evt: evt
1234
- });
1235
- preventOnFilter && evt.cancelable && evt.preventDefault();
1236
- return; // cancel dnd
1237
- }
1238
- } else if (filter) {
1239
- filter = filter.split(',').some(function (criteria) {
1240
- criteria = closest(originalTarget, criteria.trim(), el, false);
1241
- if (criteria) {
1242
- _dispatchEvent({
1243
- sortable: _this,
1244
- rootEl: criteria,
1245
- name: 'filter',
1246
- targetEl: target,
1247
- fromEl: el,
1248
- toEl: el
1249
- });
1250
- pluginEvent('filter', _this, {
1251
- evt: evt
1252
- });
1253
- return true;
1254
- }
1255
- });
1256
- if (filter) {
1257
- preventOnFilter && evt.cancelable && evt.preventDefault();
1258
- return; // cancel dnd
1259
- }
1260
- }
1261
- if (options.handle && !closest(originalTarget, options.handle, el, false)) {
1262
- return;
1263
- }
1264
-
1265
- // Prepare `dragstart`
1266
- this._prepareDragStart(evt, touch, target);
1267
- },
1268
- _prepareDragStart: function _prepareDragStart( /** Event */evt, /** Touch */touch, /** HTMLElement */target) {
1269
- var _this = this,
1270
- el = _this.el,
1271
- options = _this.options,
1272
- ownerDocument = el.ownerDocument,
1273
- dragStartFn;
1274
- if (target && !dragEl && target.parentNode === el) {
1275
- var dragRect = getRect(target);
1276
- rootEl = el;
1277
- dragEl = target;
1278
- parentEl = dragEl.parentNode;
1279
- nextEl = dragEl.nextSibling;
1280
- lastDownEl = target;
1281
- activeGroup = options.group;
1282
- Sortable.dragged = dragEl;
1283
- tapEvt = {
1284
- target: dragEl,
1285
- clientX: (touch || evt).clientX,
1286
- clientY: (touch || evt).clientY
1287
- };
1288
- tapDistanceLeft = tapEvt.clientX - dragRect.left;
1289
- tapDistanceTop = tapEvt.clientY - dragRect.top;
1290
- this._lastX = (touch || evt).clientX;
1291
- this._lastY = (touch || evt).clientY;
1292
- dragEl.style['will-change'] = 'all';
1293
- dragStartFn = function dragStartFn() {
1294
- pluginEvent('delayEnded', _this, {
1295
- evt: evt
1296
- });
1297
- if (Sortable.eventCanceled) {
1298
- _this._onDrop();
1299
- return;
1300
- }
1301
- // Delayed drag has been triggered
1302
- // we can re-enable the events: touchmove/mousemove
1303
- _this._disableDelayedDragEvents();
1304
- if (!FireFox && _this.nativeDraggable) {
1305
- dragEl.draggable = true;
1306
- }
1307
-
1308
- // Bind the events: dragstart/dragend
1309
- _this._triggerDragStart(evt, touch);
1310
-
1311
- // Drag start event
1312
- _dispatchEvent({
1313
- sortable: _this,
1314
- name: 'choose',
1315
- originalEvent: evt
1316
- });
1317
-
1318
- // Chosen item
1319
- toggleClass(dragEl, options.chosenClass, true);
1320
- };
1321
-
1322
- // Disable "draggable"
1323
- options.ignore.split(',').forEach(function (criteria) {
1324
- find(dragEl, criteria.trim(), _disableDraggable);
1325
- });
1326
- on(ownerDocument, 'dragover', nearestEmptyInsertDetectEvent);
1327
- on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent);
1328
- on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent);
1329
- on(ownerDocument, 'mouseup', _this._onDrop);
1330
- on(ownerDocument, 'touchend', _this._onDrop);
1331
- on(ownerDocument, 'touchcancel', _this._onDrop);
1332
-
1333
- // Make dragEl draggable (must be before delay for FireFox)
1334
- if (FireFox && this.nativeDraggable) {
1335
- this.options.touchStartThreshold = 4;
1336
- dragEl.draggable = true;
1337
- }
1338
- pluginEvent('delayStart', this, {
1339
- evt: evt
1340
- });
1341
-
1342
- // Delay is impossible for native DnD in Edge or IE
1343
- if (options.delay && (!options.delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) {
1344
- if (Sortable.eventCanceled) {
1345
- this._onDrop();
1346
- return;
1347
- }
1348
- // If the user moves the pointer or let go the click or touch
1349
- // before the delay has been reached:
1350
- // disable the delayed drag
1351
- on(ownerDocument, 'mouseup', _this._disableDelayedDrag);
1352
- on(ownerDocument, 'touchend', _this._disableDelayedDrag);
1353
- on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);
1354
- on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler);
1355
- on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler);
1356
- options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler);
1357
- _this._dragStartTimer = setTimeout(dragStartFn, options.delay);
1358
- } else {
1359
- dragStartFn();
1360
- }
1361
- }
1362
- },
1363
- _delayedDragTouchMoveHandler: function _delayedDragTouchMoveHandler( /** TouchEvent|PointerEvent **/e) {
1364
- var touch = e.touches ? e.touches[0] : e;
1365
- if (Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1))) {
1366
- this._disableDelayedDrag();
1367
- }
1368
- },
1369
- _disableDelayedDrag: function _disableDelayedDrag() {
1370
- dragEl && _disableDraggable(dragEl);
1371
- clearTimeout(this._dragStartTimer);
1372
- this._disableDelayedDragEvents();
1373
- },
1374
- _disableDelayedDragEvents: function _disableDelayedDragEvents() {
1375
- var ownerDocument = this.el.ownerDocument;
1376
- off(ownerDocument, 'mouseup', this._disableDelayedDrag);
1377
- off(ownerDocument, 'touchend', this._disableDelayedDrag);
1378
- off(ownerDocument, 'touchcancel', this._disableDelayedDrag);
1379
- off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler);
1380
- off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler);
1381
- off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler);
1382
- },
1383
- _triggerDragStart: function _triggerDragStart( /** Event */evt, /** Touch */touch) {
1384
- touch = touch || evt.pointerType == 'touch' && evt;
1385
- if (!this.nativeDraggable || touch) {
1386
- if (this.options.supportPointer) {
1387
- on(document, 'pointermove', this._onTouchMove);
1388
- } else if (touch) {
1389
- on(document, 'touchmove', this._onTouchMove);
1390
- } else {
1391
- on(document, 'mousemove', this._onTouchMove);
1392
- }
1393
- } else {
1394
- on(dragEl, 'dragend', this);
1395
- on(rootEl, 'dragstart', this._onDragStart);
1396
- }
1397
- try {
1398
- if (document.selection) {
1399
- // Timeout neccessary for IE9
1400
- _nextTick(function () {
1401
- document.selection.empty();
1402
- });
1403
- } else {
1404
- window.getSelection().removeAllRanges();
1405
- }
1406
- } catch (err) {}
1407
- },
1408
- _dragStarted: function _dragStarted(fallback, evt) {
1409
- awaitingDragStarted = false;
1410
- if (rootEl && dragEl) {
1411
- pluginEvent('dragStarted', this, {
1412
- evt: evt
1413
- });
1414
- if (this.nativeDraggable) {
1415
- on(document, 'dragover', _checkOutsideTargetEl);
1416
- }
1417
- var options = this.options;
1418
-
1419
- // Apply effect
1420
- !fallback && toggleClass(dragEl, options.dragClass, false);
1421
- toggleClass(dragEl, options.ghostClass, true);
1422
- Sortable.active = this;
1423
- fallback && this._appendGhost();
1424
-
1425
- // Drag start event
1426
- _dispatchEvent({
1427
- sortable: this,
1428
- name: 'start',
1429
- originalEvent: evt
1430
- });
1431
- } else {
1432
- this._nulling();
1433
- }
1434
- },
1435
- _emulateDragOver: function _emulateDragOver() {
1436
- if (touchEvt) {
1437
- this._lastX = touchEvt.clientX;
1438
- this._lastY = touchEvt.clientY;
1439
- _hideGhostForTarget();
1440
- var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY);
1441
- var parent = target;
1442
- while (target && target.shadowRoot) {
1443
- target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY);
1444
- if (target === parent) break;
1445
- parent = target;
1446
- }
1447
- dragEl.parentNode[expando]._isOutsideThisEl(target);
1448
- if (parent) {
1449
- do {
1450
- if (parent[expando]) {
1451
- var inserted = void 0;
1452
- inserted = parent[expando]._onDragOver({
1453
- clientX: touchEvt.clientX,
1454
- clientY: touchEvt.clientY,
1455
- target: target,
1456
- rootEl: parent
1457
- });
1458
- if (inserted && !this.options.dragoverBubble) {
1459
- break;
1460
- }
1461
- }
1462
- target = parent; // store last element
1463
- }
1464
- /* jshint boss:true */ while (parent = getParentOrHost(parent));
1465
- }
1466
- _unhideGhostForTarget();
1467
- }
1468
- },
1469
- _onTouchMove: function _onTouchMove( /**TouchEvent*/evt) {
1470
- if (tapEvt) {
1471
- var options = this.options,
1472
- fallbackTolerance = options.fallbackTolerance,
1473
- fallbackOffset = options.fallbackOffset,
1474
- touch = evt.touches ? evt.touches[0] : evt,
1475
- ghostMatrix = ghostEl && matrix(ghostEl, true),
1476
- scaleX = ghostEl && ghostMatrix && ghostMatrix.a,
1477
- scaleY = ghostEl && ghostMatrix && ghostMatrix.d,
1478
- relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent),
1479
- dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1),
1480
- dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1);
1481
-
1482
- // only set the status to dragging, when we are actually dragging
1483
- if (!Sortable.active && !awaitingDragStarted) {
1484
- if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) {
1485
- return;
1486
- }
1487
- this._onDragStart(evt, true);
1488
- }
1489
- if (ghostEl) {
1490
- if (ghostMatrix) {
1491
- ghostMatrix.e += dx - (lastDx || 0);
1492
- ghostMatrix.f += dy - (lastDy || 0);
1493
- } else {
1494
- ghostMatrix = {
1495
- a: 1,
1496
- b: 0,
1497
- c: 0,
1498
- d: 1,
1499
- e: dx,
1500
- f: dy
1501
- };
1502
- }
1503
- var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")");
1504
- css(ghostEl, 'webkitTransform', cssMatrix);
1505
- css(ghostEl, 'mozTransform', cssMatrix);
1506
- css(ghostEl, 'msTransform', cssMatrix);
1507
- css(ghostEl, 'transform', cssMatrix);
1508
- lastDx = dx;
1509
- lastDy = dy;
1510
- touchEvt = touch;
1511
- }
1512
- evt.cancelable && evt.preventDefault();
1513
- }
1514
- },
1515
- _appendGhost: function _appendGhost() {
1516
- // Bug if using scale(): https://stackoverflow.com/questions/2637058
1517
- // Not being adjusted for
1518
- if (!ghostEl) {
1519
- var container = this.options.fallbackOnBody ? document.body : rootEl,
1520
- rect = getRect(dragEl, true, PositionGhostAbsolutely, true, container),
1521
- options = this.options;
1522
-
1523
- // Position absolutely
1524
- if (PositionGhostAbsolutely) {
1525
- // Get relatively positioned parent
1526
- ghostRelativeParent = container;
1527
- while (css(ghostRelativeParent, 'position') === 'static' && css(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) {
1528
- ghostRelativeParent = ghostRelativeParent.parentNode;
1529
- }
1530
- if (ghostRelativeParent !== document.body && ghostRelativeParent !== document.documentElement) {
1531
- if (ghostRelativeParent === document) ghostRelativeParent = getWindowScrollingElement();
1532
- rect.top += ghostRelativeParent.scrollTop;
1533
- rect.left += ghostRelativeParent.scrollLeft;
1534
- } else {
1535
- ghostRelativeParent = getWindowScrollingElement();
1536
- }
1537
- ghostRelativeParentInitialScroll = getRelativeScrollOffset(ghostRelativeParent);
1538
- }
1539
- ghostEl = dragEl.cloneNode(true);
1540
- toggleClass(ghostEl, options.ghostClass, false);
1541
- toggleClass(ghostEl, options.fallbackClass, true);
1542
- toggleClass(ghostEl, options.dragClass, true);
1543
- css(ghostEl, 'transition', '');
1544
- css(ghostEl, 'transform', '');
1545
- css(ghostEl, 'box-sizing', 'border-box');
1546
- css(ghostEl, 'margin', 0);
1547
- css(ghostEl, 'top', rect.top);
1548
- css(ghostEl, 'left', rect.left);
1549
- css(ghostEl, 'width', rect.width);
1550
- css(ghostEl, 'height', rect.height);
1551
- css(ghostEl, 'opacity', '0.8');
1552
- css(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed');
1553
- css(ghostEl, 'zIndex', '100000');
1554
- css(ghostEl, 'pointerEvents', 'none');
1555
- Sortable.ghost = ghostEl;
1556
- container.appendChild(ghostEl);
1557
-
1558
- // Set transform-origin
1559
- css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%');
1560
- }
1561
- },
1562
- _onDragStart: function _onDragStart( /**Event*/evt, /**boolean*/fallback) {
1563
- var _this = this;
1564
- var dataTransfer = evt.dataTransfer;
1565
- var options = _this.options;
1566
- pluginEvent('dragStart', this, {
1567
- evt: evt
1568
- });
1569
- if (Sortable.eventCanceled) {
1570
- this._onDrop();
1571
- return;
1572
- }
1573
- pluginEvent('setupClone', this);
1574
- if (!Sortable.eventCanceled) {
1575
- cloneEl = clone(dragEl);
1576
- cloneEl.removeAttribute("id");
1577
- cloneEl.draggable = false;
1578
- cloneEl.style['will-change'] = '';
1579
- this._hideClone();
1580
- toggleClass(cloneEl, this.options.chosenClass, false);
1581
- Sortable.clone = cloneEl;
1582
- }
1583
-
1584
- // #1143: IFrame support workaround
1585
- _this.cloneId = _nextTick(function () {
1586
- pluginEvent('clone', _this);
1587
- if (Sortable.eventCanceled) return;
1588
- if (!_this.options.removeCloneOnHide) {
1589
- rootEl.insertBefore(cloneEl, dragEl);
1590
- }
1591
- _this._hideClone();
1592
- _dispatchEvent({
1593
- sortable: _this,
1594
- name: 'clone'
1595
- });
1596
- });
1597
- !fallback && toggleClass(dragEl, options.dragClass, true);
1598
-
1599
- // Set proper drop events
1600
- if (fallback) {
1601
- ignoreNextClick = true;
1602
- _this._loopId = setInterval(_this._emulateDragOver, 50);
1603
- } else {
1604
- // Undo what was set in _prepareDragStart before drag started
1605
- off(document, 'mouseup', _this._onDrop);
1606
- off(document, 'touchend', _this._onDrop);
1607
- off(document, 'touchcancel', _this._onDrop);
1608
- if (dataTransfer) {
1609
- dataTransfer.effectAllowed = 'move';
1610
- options.setData && options.setData.call(_this, dataTransfer, dragEl);
1611
- }
1612
- on(document, 'drop', _this);
1613
-
1614
- // #1276 fix:
1615
- css(dragEl, 'transform', 'translateZ(0)');
1616
- }
1617
- awaitingDragStarted = true;
1618
- _this._dragStartId = _nextTick(_this._dragStarted.bind(_this, fallback, evt));
1619
- on(document, 'selectstart', _this);
1620
- moved = true;
1621
- if (Safari) {
1622
- css(document.body, 'user-select', 'none');
1623
- }
1624
- },
1625
- // Returns true - if no further action is needed (either inserted or another condition)
1626
- _onDragOver: function _onDragOver( /**Event*/evt) {
1627
- var el = this.el,
1628
- target = evt.target,
1629
- dragRect,
1630
- targetRect,
1631
- revert,
1632
- options = this.options,
1633
- group = options.group,
1634
- activeSortable = Sortable.active,
1635
- isOwner = activeGroup === group,
1636
- canSort = options.sort,
1637
- fromSortable = putSortable || activeSortable,
1638
- vertical,
1639
- _this = this,
1640
- completedFired = false;
1641
- if (_silent) return;
1642
- function dragOverEvent(name, extra) {
1643
- pluginEvent(name, _this, _objectSpread2({
1644
- evt: evt,
1645
- isOwner: isOwner,
1646
- axis: vertical ? 'vertical' : 'horizontal',
1647
- revert: revert,
1648
- dragRect: dragRect,
1649
- targetRect: targetRect,
1650
- canSort: canSort,
1651
- fromSortable: fromSortable,
1652
- target: target,
1653
- completed: completed,
1654
- onMove: function onMove(target, after) {
1655
- return _onMove(rootEl, el, dragEl, dragRect, target, getRect(target), evt, after);
1656
- },
1657
- changed: changed
1658
- }, extra));
1659
- }
1660
-
1661
- // Capture animation state
1662
- function capture() {
1663
- dragOverEvent('dragOverAnimationCapture');
1664
- _this.captureAnimationState();
1665
- if (_this !== fromSortable) {
1666
- fromSortable.captureAnimationState();
1667
- }
1668
- }
1669
-
1670
- // Return invocation when dragEl is inserted (or completed)
1671
- function completed(insertion) {
1672
- dragOverEvent('dragOverCompleted', {
1673
- insertion: insertion
1674
- });
1675
- if (insertion) {
1676
- // Clones must be hidden before folding animation to capture dragRectAbsolute properly
1677
- if (isOwner) {
1678
- activeSortable._hideClone();
1679
- } else {
1680
- activeSortable._showClone(_this);
1681
- }
1682
- if (_this !== fromSortable) {
1683
- // Set ghost class to new sortable's ghost class
1684
- toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : activeSortable.options.ghostClass, false);
1685
- toggleClass(dragEl, options.ghostClass, true);
1686
- }
1687
- if (putSortable !== _this && _this !== Sortable.active) {
1688
- putSortable = _this;
1689
- } else if (_this === Sortable.active && putSortable) {
1690
- putSortable = null;
1691
- }
1692
-
1693
- // Animation
1694
- if (fromSortable === _this) {
1695
- _this._ignoreWhileAnimating = target;
1696
- }
1697
- _this.animateAll(function () {
1698
- dragOverEvent('dragOverAnimationComplete');
1699
- _this._ignoreWhileAnimating = null;
1700
- });
1701
- if (_this !== fromSortable) {
1702
- fromSortable.animateAll();
1703
- fromSortable._ignoreWhileAnimating = null;
1704
- }
1705
- }
1706
-
1707
- // Null lastTarget if it is not inside a previously swapped element
1708
- if (target === dragEl && !dragEl.animated || target === el && !target.animated) {
1709
- lastTarget = null;
1710
- }
1711
-
1712
- // no bubbling and not fallback
1713
- if (!options.dragoverBubble && !evt.rootEl && target !== document) {
1714
- dragEl.parentNode[expando]._isOutsideThisEl(evt.target);
1715
-
1716
- // Do not detect for empty insert if already inserted
1717
- !insertion && nearestEmptyInsertDetectEvent(evt);
1718
- }
1719
- !options.dragoverBubble && evt.stopPropagation && evt.stopPropagation();
1720
- return completedFired = true;
1721
- }
1722
-
1723
- // Call when dragEl has been inserted
1724
- function changed() {
1725
- newIndex = index(dragEl);
1726
- newDraggableIndex = index(dragEl, options.draggable);
1727
- _dispatchEvent({
1728
- sortable: _this,
1729
- name: 'change',
1730
- toEl: el,
1731
- newIndex: newIndex,
1732
- newDraggableIndex: newDraggableIndex,
1733
- originalEvent: evt
1734
- });
1735
- }
1736
- if (evt.preventDefault !== void 0) {
1737
- evt.cancelable && evt.preventDefault();
1738
- }
1739
- target = closest(target, options.draggable, el, true);
1740
- dragOverEvent('dragOver');
1741
- if (Sortable.eventCanceled) return completedFired;
1742
- if (dragEl.contains(evt.target) || target.animated && target.animatingX && target.animatingY || _this._ignoreWhileAnimating === target) {
1743
- return completed(false);
1744
- }
1745
- ignoreNextClick = false;
1746
- if (activeSortable && !options.disabled && (isOwner ? canSort || (revert = parentEl !== rootEl) // Reverting item into the original list
1747
- : putSortable === this || (this.lastPutMode = activeGroup.checkPull(this, activeSortable, dragEl, evt)) && group.checkPut(this, activeSortable, dragEl, evt))) {
1748
- vertical = this._getDirection(evt, target) === 'vertical';
1749
- dragRect = getRect(dragEl);
1750
- dragOverEvent('dragOverValid');
1751
- if (Sortable.eventCanceled) return completedFired;
1752
- if (revert) {
1753
- parentEl = rootEl; // actualization
1754
- capture();
1755
- this._hideClone();
1756
- dragOverEvent('revert');
1757
- if (!Sortable.eventCanceled) {
1758
- if (nextEl) {
1759
- rootEl.insertBefore(dragEl, nextEl);
1760
- } else {
1761
- rootEl.appendChild(dragEl);
1762
- }
1763
- }
1764
- return completed(true);
1765
- }
1766
- var elLastChild = lastChild(el, options.draggable);
1767
- if (!elLastChild || _ghostIsLast(evt, vertical, this) && !elLastChild.animated) {
1768
- // Insert to end of list
1769
-
1770
- // If already at end of list: Do not insert
1771
- if (elLastChild === dragEl) {
1772
- return completed(false);
1773
- }
1774
-
1775
- // if there is a last element, it is the target
1776
- if (elLastChild && el === evt.target) {
1777
- target = elLastChild;
1778
- }
1779
- if (target) {
1780
- targetRect = getRect(target);
1781
- }
1782
- if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) {
1783
- capture();
1784
- if (elLastChild && elLastChild.nextSibling) {
1785
- // the last draggable element is not the last node
1786
- el.insertBefore(dragEl, elLastChild.nextSibling);
1787
- } else {
1788
- el.appendChild(dragEl);
1789
- }
1790
- parentEl = el; // actualization
1791
-
1792
- changed();
1793
- return completed(true);
1794
- }
1795
- } else if (elLastChild && _ghostIsFirst(evt, vertical, this)) {
1796
- // Insert to start of list
1797
- var firstChild = getChild(el, 0, options, true);
1798
- if (firstChild === dragEl) {
1799
- return completed(false);
1800
- }
1801
- target = firstChild;
1802
- targetRect = getRect(target);
1803
- if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) {
1804
- capture();
1805
- el.insertBefore(dragEl, firstChild);
1806
- parentEl = el; // actualization
1807
-
1808
- changed();
1809
- return completed(true);
1810
- }
1811
- } else if (target.parentNode === el) {
1812
- targetRect = getRect(target);
1813
- var direction = 0,
1814
- targetBeforeFirstSwap,
1815
- differentLevel = dragEl.parentNode !== el,
1816
- differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical),
1817
- side1 = vertical ? 'top' : 'left',
1818
- scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'),
1819
- scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0;
1820
- if (lastTarget !== target) {
1821
- targetBeforeFirstSwap = targetRect[side1];
1822
- pastFirstInvertThresh = false;
1823
- isCircumstantialInvert = !differentRowCol && options.invertSwap || differentLevel;
1824
- }
1825
- direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target);
1826
- var sibling;
1827
- if (direction !== 0) {
1828
- // Check if target is beside dragEl in respective direction (ignoring hidden elements)
1829
- var dragIndex = index(dragEl);
1830
- do {
1831
- dragIndex -= direction;
1832
- sibling = parentEl.children[dragIndex];
1833
- } while (sibling && (css(sibling, 'display') === 'none' || sibling === ghostEl));
1834
- }
1835
- // If dragEl is already beside target: Do not insert
1836
- if (direction === 0 || sibling === target) {
1837
- return completed(false);
1838
- }
1839
- lastTarget = target;
1840
- lastDirection = direction;
1841
- var nextSibling = target.nextElementSibling,
1842
- after = false;
1843
- after = direction === 1;
1844
- var moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after);
1845
- if (moveVector !== false) {
1846
- if (moveVector === 1 || moveVector === -1) {
1847
- after = moveVector === 1;
1848
- }
1849
- _silent = true;
1850
- setTimeout(_unsilent, 30);
1851
- capture();
1852
- if (after && !nextSibling) {
1853
- el.appendChild(dragEl);
1854
- } else {
1855
- target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
1856
- }
1857
-
1858
- // Undo chrome's scroll adjustment (has no effect on other browsers)
1859
- if (scrolledPastTop) {
1860
- scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop);
1861
- }
1862
- parentEl = dragEl.parentNode; // actualization
1863
-
1864
- // must be done before animation
1865
- if (targetBeforeFirstSwap !== undefined && !isCircumstantialInvert) {
1866
- targetMoveDistance = Math.abs(targetBeforeFirstSwap - getRect(target)[side1]);
1867
- }
1868
- changed();
1869
- return completed(true);
1870
- }
1871
- }
1872
- if (el.contains(dragEl)) {
1873
- return completed(false);
1874
- }
1875
- }
1876
- return false;
1877
- },
1878
- _ignoreWhileAnimating: null,
1879
- _offMoveEvents: function _offMoveEvents() {
1880
- off(document, 'mousemove', this._onTouchMove);
1881
- off(document, 'touchmove', this._onTouchMove);
1882
- off(document, 'pointermove', this._onTouchMove);
1883
- off(document, 'dragover', nearestEmptyInsertDetectEvent);
1884
- off(document, 'mousemove', nearestEmptyInsertDetectEvent);
1885
- off(document, 'touchmove', nearestEmptyInsertDetectEvent);
1886
- },
1887
- _offUpEvents: function _offUpEvents() {
1888
- var ownerDocument = this.el.ownerDocument;
1889
- off(ownerDocument, 'mouseup', this._onDrop);
1890
- off(ownerDocument, 'touchend', this._onDrop);
1891
- off(ownerDocument, 'pointerup', this._onDrop);
1892
- off(ownerDocument, 'touchcancel', this._onDrop);
1893
- off(document, 'selectstart', this);
1894
- },
1895
- _onDrop: function _onDrop( /**Event*/evt) {
1896
- var el = this.el,
1897
- options = this.options;
1898
-
1899
- // Get the index of the dragged element within its parent
1900
- newIndex = index(dragEl);
1901
- newDraggableIndex = index(dragEl, options.draggable);
1902
- pluginEvent('drop', this, {
1903
- evt: evt
1904
- });
1905
- parentEl = dragEl && dragEl.parentNode;
1906
-
1907
- // Get again after plugin event
1908
- newIndex = index(dragEl);
1909
- newDraggableIndex = index(dragEl, options.draggable);
1910
- if (Sortable.eventCanceled) {
1911
- this._nulling();
1912
- return;
1913
- }
1914
- awaitingDragStarted = false;
1915
- isCircumstantialInvert = false;
1916
- pastFirstInvertThresh = false;
1917
- clearInterval(this._loopId);
1918
- clearTimeout(this._dragStartTimer);
1919
- _cancelNextTick(this.cloneId);
1920
- _cancelNextTick(this._dragStartId);
1921
-
1922
- // Unbind events
1923
- if (this.nativeDraggable) {
1924
- off(document, 'drop', this);
1925
- off(el, 'dragstart', this._onDragStart);
1926
- }
1927
- this._offMoveEvents();
1928
- this._offUpEvents();
1929
- if (Safari) {
1930
- css(document.body, 'user-select', '');
1931
- }
1932
- css(dragEl, 'transform', '');
1933
- if (evt) {
1934
- if (moved) {
1935
- evt.cancelable && evt.preventDefault();
1936
- !options.dropBubble && evt.stopPropagation();
1937
- }
1938
- ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl);
1939
- if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') {
1940
- // Remove clone(s)
1941
- cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl);
1942
- }
1943
- if (dragEl) {
1944
- if (this.nativeDraggable) {
1945
- off(dragEl, 'dragend', this);
1946
- }
1947
- _disableDraggable(dragEl);
1948
- dragEl.style['will-change'] = '';
1949
-
1950
- // Remove classes
1951
- // ghostClass is added in dragStarted
1952
- if (moved && !awaitingDragStarted) {
1953
- toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : this.options.ghostClass, false);
1954
- }
1955
- toggleClass(dragEl, this.options.chosenClass, false);
1956
-
1957
- // Drag stop event
1958
- _dispatchEvent({
1959
- sortable: this,
1960
- name: 'unchoose',
1961
- toEl: parentEl,
1962
- newIndex: null,
1963
- newDraggableIndex: null,
1964
- originalEvent: evt
1965
- });
1966
- if (rootEl !== parentEl) {
1967
- if (newIndex >= 0) {
1968
- // Add event
1969
- _dispatchEvent({
1970
- rootEl: parentEl,
1971
- name: 'add',
1972
- toEl: parentEl,
1973
- fromEl: rootEl,
1974
- originalEvent: evt
1975
- });
1976
-
1977
- // Remove event
1978
- _dispatchEvent({
1979
- sortable: this,
1980
- name: 'remove',
1981
- toEl: parentEl,
1982
- originalEvent: evt
1983
- });
1984
-
1985
- // drag from one list and drop into another
1986
- _dispatchEvent({
1987
- rootEl: parentEl,
1988
- name: 'sort',
1989
- toEl: parentEl,
1990
- fromEl: rootEl,
1991
- originalEvent: evt
1992
- });
1993
- _dispatchEvent({
1994
- sortable: this,
1995
- name: 'sort',
1996
- toEl: parentEl,
1997
- originalEvent: evt
1998
- });
1999
- }
2000
- putSortable && putSortable.save();
2001
- } else {
2002
- if (newIndex !== oldIndex) {
2003
- if (newIndex >= 0) {
2004
- // drag & drop within the same list
2005
- _dispatchEvent({
2006
- sortable: this,
2007
- name: 'update',
2008
- toEl: parentEl,
2009
- originalEvent: evt
2010
- });
2011
- _dispatchEvent({
2012
- sortable: this,
2013
- name: 'sort',
2014
- toEl: parentEl,
2015
- originalEvent: evt
2016
- });
2017
- }
2018
- }
2019
- }
2020
- if (Sortable.active) {
2021
- /* jshint eqnull:true */
2022
- if (newIndex == null || newIndex === -1) {
2023
- newIndex = oldIndex;
2024
- newDraggableIndex = oldDraggableIndex;
2025
- }
2026
- _dispatchEvent({
2027
- sortable: this,
2028
- name: 'end',
2029
- toEl: parentEl,
2030
- originalEvent: evt
2031
- });
2032
-
2033
- // Save sorting
2034
- this.save();
2035
- }
2036
- }
2037
- }
2038
- this._nulling();
2039
- },
2040
- _nulling: function _nulling() {
2041
- pluginEvent('nulling', this);
2042
- rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null;
2043
- savedInputChecked.forEach(function (el) {
2044
- el.checked = true;
2045
- });
2046
- savedInputChecked.length = lastDx = lastDy = 0;
2047
- },
2048
- handleEvent: function handleEvent( /**Event*/evt) {
2049
- switch (evt.type) {
2050
- case 'drop':
2051
- case 'dragend':
2052
- this._onDrop(evt);
2053
- break;
2054
- case 'dragenter':
2055
- case 'dragover':
2056
- if (dragEl) {
2057
- this._onDragOver(evt);
2058
- _globalDragOver(evt);
2059
- }
2060
- break;
2061
- case 'selectstart':
2062
- evt.preventDefault();
2063
- break;
2064
- }
2065
- },
2066
- /**
2067
- * Serializes the item into an array of string.
2068
- * @returns {String[]}
2069
- */
2070
- toArray: function toArray() {
2071
- var order = [],
2072
- el,
2073
- children = this.el.children,
2074
- i = 0,
2075
- n = children.length,
2076
- options = this.options;
2077
- for (; i < n; i++) {
2078
- el = children[i];
2079
- if (closest(el, options.draggable, this.el, false)) {
2080
- order.push(el.getAttribute(options.dataIdAttr) || _generateId(el));
2081
- }
2082
- }
2083
- return order;
2084
- },
2085
- /**
2086
- * Sorts the elements according to the array.
2087
- * @param {String[]} order order of the items
2088
- */
2089
- sort: function sort(order, useAnimation) {
2090
- var items = {},
2091
- rootEl = this.el;
2092
- this.toArray().forEach(function (id, i) {
2093
- var el = rootEl.children[i];
2094
- if (closest(el, this.options.draggable, rootEl, false)) {
2095
- items[id] = el;
2096
- }
2097
- }, this);
2098
- useAnimation && this.captureAnimationState();
2099
- order.forEach(function (id) {
2100
- if (items[id]) {
2101
- rootEl.removeChild(items[id]);
2102
- rootEl.appendChild(items[id]);
2103
- }
2104
- });
2105
- useAnimation && this.animateAll();
2106
- },
2107
- /**
2108
- * Save the current sorting
2109
- */
2110
- save: function save() {
2111
- var store = this.options.store;
2112
- store && store.set && store.set(this);
2113
- },
2114
- /**
2115
- * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
2116
- * @param {HTMLElement} el
2117
- * @param {String} [selector] default: `options.draggable`
2118
- * @returns {HTMLElement|null}
2119
- */
2120
- closest: function closest$1(el, selector) {
2121
- return closest(el, selector || this.options.draggable, this.el, false);
2122
- },
2123
- /**
2124
- * Set/get option
2125
- * @param {string} name
2126
- * @param {*} [value]
2127
- * @returns {*}
2128
- */
2129
- option: function option(name, value) {
2130
- var options = this.options;
2131
- if (value === void 0) {
2132
- return options[name];
2133
- } else {
2134
- var modifiedValue = PluginManager.modifyOption(this, name, value);
2135
- if (typeof modifiedValue !== 'undefined') {
2136
- options[name] = modifiedValue;
2137
- } else {
2138
- options[name] = value;
2139
- }
2140
- if (name === 'group') {
2141
- _prepareGroup(options);
2142
- }
2143
- }
2144
- },
2145
- /**
2146
- * Destroy
2147
- */
2148
- destroy: function destroy() {
2149
- pluginEvent('destroy', this);
2150
- var el = this.el;
2151
- el[expando] = null;
2152
- off(el, 'mousedown', this._onTapStart);
2153
- off(el, 'touchstart', this._onTapStart);
2154
- off(el, 'pointerdown', this._onTapStart);
2155
- if (this.nativeDraggable) {
2156
- off(el, 'dragover', this);
2157
- off(el, 'dragenter', this);
2158
- }
2159
- // Remove draggable attributes
2160
- Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) {
2161
- el.removeAttribute('draggable');
2162
- });
2163
- this._onDrop();
2164
- this._disableDelayedDragEvents();
2165
- sortables.splice(sortables.indexOf(this.el), 1);
2166
- this.el = el = null;
2167
- },
2168
- _hideClone: function _hideClone() {
2169
- if (!cloneHidden) {
2170
- pluginEvent('hideClone', this);
2171
- if (Sortable.eventCanceled) return;
2172
- css(cloneEl, 'display', 'none');
2173
- if (this.options.removeCloneOnHide && cloneEl.parentNode) {
2174
- cloneEl.parentNode.removeChild(cloneEl);
2175
- }
2176
- cloneHidden = true;
2177
- }
2178
- },
2179
- _showClone: function _showClone(putSortable) {
2180
- if (putSortable.lastPutMode !== 'clone') {
2181
- this._hideClone();
2182
- return;
2183
- }
2184
- if (cloneHidden) {
2185
- pluginEvent('showClone', this);
2186
- if (Sortable.eventCanceled) return;
2187
-
2188
- // show clone at dragEl or original position
2189
- if (dragEl.parentNode == rootEl && !this.options.group.revertClone) {
2190
- rootEl.insertBefore(cloneEl, dragEl);
2191
- } else if (nextEl) {
2192
- rootEl.insertBefore(cloneEl, nextEl);
2193
- } else {
2194
- rootEl.appendChild(cloneEl);
2195
- }
2196
- if (this.options.group.revertClone) {
2197
- this.animate(dragEl, cloneEl);
2198
- }
2199
- css(cloneEl, 'display', '');
2200
- cloneHidden = false;
2201
- }
2202
- }
2203
- };
2204
- function _globalDragOver( /**Event*/evt) {
2205
- if (evt.dataTransfer) {
2206
- evt.dataTransfer.dropEffect = 'move';
2207
- }
2208
- evt.cancelable && evt.preventDefault();
2209
- }
2210
- function _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect, originalEvent, willInsertAfter) {
2211
- var evt,
2212
- sortable = fromEl[expando],
2213
- onMoveFn = sortable.options.onMove,
2214
- retVal;
2215
- // Support for new CustomEvent feature
2216
- if (window.CustomEvent && !IE11OrLess && !Edge) {
2217
- evt = new CustomEvent('move', {
2218
- bubbles: true,
2219
- cancelable: true
2220
- });
2221
- } else {
2222
- evt = document.createEvent('Event');
2223
- evt.initEvent('move', true, true);
2224
- }
2225
- evt.to = toEl;
2226
- evt.from = fromEl;
2227
- evt.dragged = dragEl;
2228
- evt.draggedRect = dragRect;
2229
- evt.related = targetEl || toEl;
2230
- evt.relatedRect = targetRect || getRect(toEl);
2231
- evt.willInsertAfter = willInsertAfter;
2232
- evt.originalEvent = originalEvent;
2233
- fromEl.dispatchEvent(evt);
2234
- if (onMoveFn) {
2235
- retVal = onMoveFn.call(sortable, evt, originalEvent);
2236
- }
2237
- return retVal;
2238
- }
2239
- function _disableDraggable(el) {
2240
- el.draggable = false;
2241
- }
2242
- function _unsilent() {
2243
- _silent = false;
2244
- }
2245
- function _ghostIsFirst(evt, vertical, sortable) {
2246
- var firstElRect = getRect(getChild(sortable.el, 0, sortable.options, true));
2247
- var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl);
2248
- var spacer = 10;
2249
- return vertical ? evt.clientX < childContainingRect.left - spacer || evt.clientY < firstElRect.top && evt.clientX < firstElRect.right : evt.clientY < childContainingRect.top - spacer || evt.clientY < firstElRect.bottom && evt.clientX < firstElRect.left;
2250
- }
2251
- function _ghostIsLast(evt, vertical, sortable) {
2252
- var lastElRect = getRect(lastChild(sortable.el, sortable.options.draggable));
2253
- var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl);
2254
- var spacer = 10;
2255
- return vertical ? evt.clientX > childContainingRect.right + spacer || evt.clientY > lastElRect.bottom && evt.clientX > lastElRect.left : evt.clientY > childContainingRect.bottom + spacer || evt.clientX > lastElRect.right && evt.clientY > lastElRect.top;
2256
- }
2257
- function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget) {
2258
- var mouseOnAxis = vertical ? evt.clientY : evt.clientX,
2259
- targetLength = vertical ? targetRect.height : targetRect.width,
2260
- targetS1 = vertical ? targetRect.top : targetRect.left,
2261
- targetS2 = vertical ? targetRect.bottom : targetRect.right,
2262
- invert = false;
2263
- if (!invertSwap) {
2264
- // Never invert or create dragEl shadow when target movemenet causes mouse to move past the end of regular swapThreshold
2265
- if (isLastTarget && targetMoveDistance < targetLength * swapThreshold) {
2266
- // multiplied only by swapThreshold because mouse will already be inside target by (1 - threshold) * targetLength / 2
2267
- // check if past first invert threshold on side opposite of lastDirection
2268
- if (!pastFirstInvertThresh && (lastDirection === 1 ? mouseOnAxis > targetS1 + targetLength * invertedSwapThreshold / 2 : mouseOnAxis < targetS2 - targetLength * invertedSwapThreshold / 2)) {
2269
- // past first invert threshold, do not restrict inverted threshold to dragEl shadow
2270
- pastFirstInvertThresh = true;
2271
- }
2272
- if (!pastFirstInvertThresh) {
2273
- // dragEl shadow (target move distance shadow)
2274
- if (lastDirection === 1 ? mouseOnAxis < targetS1 + targetMoveDistance // over dragEl shadow
2275
- : mouseOnAxis > targetS2 - targetMoveDistance) {
2276
- return -lastDirection;
2277
- }
2278
- } else {
2279
- invert = true;
2280
- }
2281
- } else {
2282
- // Regular
2283
- if (mouseOnAxis > targetS1 + targetLength * (1 - swapThreshold) / 2 && mouseOnAxis < targetS2 - targetLength * (1 - swapThreshold) / 2) {
2284
- return _getInsertDirection(target);
2285
- }
2286
- }
2287
- }
2288
- invert = invert || invertSwap;
2289
- if (invert) {
2290
- // Invert of regular
2291
- if (mouseOnAxis < targetS1 + targetLength * invertedSwapThreshold / 2 || mouseOnAxis > targetS2 - targetLength * invertedSwapThreshold / 2) {
2292
- return mouseOnAxis > targetS1 + targetLength / 2 ? 1 : -1;
2293
- }
2294
- }
2295
- return 0;
2296
- }
2297
-
2298
- /**
2299
- * Gets the direction dragEl must be swapped relative to target in order to make it
2300
- * seem that dragEl has been "inserted" into that element's position
2301
- * @param {HTMLElement} target The target whose position dragEl is being inserted at
2302
- * @return {Number} Direction dragEl must be swapped
2303
- */
2304
- function _getInsertDirection(target) {
2305
- if (index(dragEl) < index(target)) {
2306
- return 1;
2307
- } else {
2308
- return -1;
2309
- }
2310
- }
2311
-
2312
- /**
2313
- * Generate id
2314
- * @param {HTMLElement} el
2315
- * @returns {String}
2316
- * @private
2317
- */
2318
- function _generateId(el) {
2319
- var str = el.tagName + el.className + el.src + el.href + el.textContent,
2320
- i = str.length,
2321
- sum = 0;
2322
- while (i--) {
2323
- sum += str.charCodeAt(i);
2324
- }
2325
- return sum.toString(36);
2326
- }
2327
- function _saveInputCheckedState(root) {
2328
- savedInputChecked.length = 0;
2329
- var inputs = root.getElementsByTagName('input');
2330
- var idx = inputs.length;
2331
- while (idx--) {
2332
- var el = inputs[idx];
2333
- el.checked && savedInputChecked.push(el);
2334
- }
2335
- }
2336
- function _nextTick(fn) {
2337
- return setTimeout(fn, 0);
2338
- }
2339
- function _cancelNextTick(id) {
2340
- return clearTimeout(id);
2341
- }
2342
-
2343
- // Fixed #973:
2344
- if (documentExists) {
2345
- on(document, 'touchmove', function (evt) {
2346
- if ((Sortable.active || awaitingDragStarted) && evt.cancelable) {
2347
- evt.preventDefault();
2348
- }
2349
- });
2350
- }
2351
-
2352
- // Export utils
2353
- Sortable.utils = {
2354
- on: on,
2355
- off: off,
2356
- css: css,
2357
- find: find,
2358
- is: function is(el, selector) {
2359
- return !!closest(el, selector, el, false);
2360
- },
2361
- extend: extend,
2362
- throttle: throttle,
2363
- closest: closest,
2364
- toggleClass: toggleClass,
2365
- clone: clone,
2366
- index: index,
2367
- nextTick: _nextTick,
2368
- cancelNextTick: _cancelNextTick,
2369
- detectDirection: _detectDirection,
2370
- getChild: getChild,
2371
- expando: expando
2372
- };
2373
-
2374
- /**
2375
- * Get the Sortable instance of an element
2376
- * @param {HTMLElement} element The element
2377
- * @return {Sortable|undefined} The instance of Sortable
2378
- */
2379
- Sortable.get = function (element) {
2380
- return element[expando];
2381
- };
2382
-
2383
- /**
2384
- * Mount a plugin to Sortable
2385
- * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted
2386
- */
2387
- Sortable.mount = function () {
2388
- for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) {
2389
- plugins[_key] = arguments[_key];
2390
- }
2391
- if (plugins[0].constructor === Array) plugins = plugins[0];
2392
- plugins.forEach(function (plugin) {
2393
- if (!plugin.prototype || !plugin.prototype.constructor) {
2394
- throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(plugin));
2395
- }
2396
- if (plugin.utils) Sortable.utils = _objectSpread2(_objectSpread2({}, Sortable.utils), plugin.utils);
2397
- PluginManager.mount(plugin);
2398
- });
2399
- };
2400
-
2401
- /**
2402
- * Create sortable instance
2403
- * @param {HTMLElement} el
2404
- * @param {Object} [options]
2405
- */
2406
- Sortable.create = function (el, options) {
2407
- return new Sortable(el, options);
2408
- };
2409
-
2410
- // Export
2411
- Sortable.version = version;
2412
-
2413
- var autoScrolls = [],
2414
- scrollEl,
2415
- scrollRootEl,
2416
- scrolling = false,
2417
- lastAutoScrollX,
2418
- lastAutoScrollY,
2419
- touchEvt$1,
2420
- pointerElemChangedInterval;
2421
- function AutoScrollPlugin() {
2422
- function AutoScroll() {
2423
- this.defaults = {
2424
- scroll: true,
2425
- forceAutoScrollFallback: false,
2426
- scrollSensitivity: 30,
2427
- scrollSpeed: 10,
2428
- bubbleScroll: true
2429
- };
2430
-
2431
- // Bind all private methods
2432
- for (var fn in this) {
2433
- if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
2434
- this[fn] = this[fn].bind(this);
2435
- }
2436
- }
2437
- }
2438
- AutoScroll.prototype = {
2439
- dragStarted: function dragStarted(_ref) {
2440
- var originalEvent = _ref.originalEvent;
2441
- if (this.sortable.nativeDraggable) {
2442
- on(document, 'dragover', this._handleAutoScroll);
2443
- } else {
2444
- if (this.options.supportPointer) {
2445
- on(document, 'pointermove', this._handleFallbackAutoScroll);
2446
- } else if (originalEvent.touches) {
2447
- on(document, 'touchmove', this._handleFallbackAutoScroll);
2448
- } else {
2449
- on(document, 'mousemove', this._handleFallbackAutoScroll);
2450
- }
2451
- }
2452
- },
2453
- dragOverCompleted: function dragOverCompleted(_ref2) {
2454
- var originalEvent = _ref2.originalEvent;
2455
- // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached)
2456
- if (!this.options.dragOverBubble && !originalEvent.rootEl) {
2457
- this._handleAutoScroll(originalEvent);
2458
- }
2459
- },
2460
- drop: function drop() {
2461
- if (this.sortable.nativeDraggable) {
2462
- off(document, 'dragover', this._handleAutoScroll);
2463
- } else {
2464
- off(document, 'pointermove', this._handleFallbackAutoScroll);
2465
- off(document, 'touchmove', this._handleFallbackAutoScroll);
2466
- off(document, 'mousemove', this._handleFallbackAutoScroll);
2467
- }
2468
- clearPointerElemChangedInterval();
2469
- clearAutoScrolls();
2470
- cancelThrottle();
2471
- },
2472
- nulling: function nulling() {
2473
- touchEvt$1 = scrollRootEl = scrollEl = scrolling = pointerElemChangedInterval = lastAutoScrollX = lastAutoScrollY = null;
2474
- autoScrolls.length = 0;
2475
- },
2476
- _handleFallbackAutoScroll: function _handleFallbackAutoScroll(evt) {
2477
- this._handleAutoScroll(evt, true);
2478
- },
2479
- _handleAutoScroll: function _handleAutoScroll(evt, fallback) {
2480
- var _this = this;
2481
- var x = (evt.touches ? evt.touches[0] : evt).clientX,
2482
- y = (evt.touches ? evt.touches[0] : evt).clientY,
2483
- elem = document.elementFromPoint(x, y);
2484
- touchEvt$1 = evt;
2485
-
2486
- // IE does not seem to have native autoscroll,
2487
- // Edge's autoscroll seems too conditional,
2488
- // MACOS Safari does not have autoscroll,
2489
- // Firefox and Chrome are good
2490
- if (fallback || this.options.forceAutoScrollFallback || Edge || IE11OrLess || Safari) {
2491
- autoScroll(evt, this.options, elem, fallback);
2492
-
2493
- // Listener for pointer element change
2494
- var ogElemScroller = getParentAutoScrollElement(elem, true);
2495
- if (scrolling && (!pointerElemChangedInterval || x !== lastAutoScrollX || y !== lastAutoScrollY)) {
2496
- pointerElemChangedInterval && clearPointerElemChangedInterval();
2497
- // Detect for pointer elem change, emulating native DnD behaviour
2498
- pointerElemChangedInterval = setInterval(function () {
2499
- var newElem = getParentAutoScrollElement(document.elementFromPoint(x, y), true);
2500
- if (newElem !== ogElemScroller) {
2501
- ogElemScroller = newElem;
2502
- clearAutoScrolls();
2503
- }
2504
- autoScroll(evt, _this.options, newElem, fallback);
2505
- }, 10);
2506
- lastAutoScrollX = x;
2507
- lastAutoScrollY = y;
2508
- }
2509
- } else {
2510
- // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll
2511
- if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) {
2512
- clearAutoScrolls();
2513
- return;
2514
- }
2515
- autoScroll(evt, this.options, getParentAutoScrollElement(elem, false), false);
2516
- }
2517
- }
2518
- };
2519
- return _extends(AutoScroll, {
2520
- pluginName: 'scroll',
2521
- initializeByDefault: true
2522
- });
2523
- }
2524
- function clearAutoScrolls() {
2525
- autoScrolls.forEach(function (autoScroll) {
2526
- clearInterval(autoScroll.pid);
2527
- });
2528
- autoScrolls = [];
2529
- }
2530
- function clearPointerElemChangedInterval() {
2531
- clearInterval(pointerElemChangedInterval);
2532
- }
2533
- var autoScroll = throttle(function (evt, options, rootEl, isFallback) {
2534
- // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521
2535
- if (!options.scroll) return;
2536
- var x = (evt.touches ? evt.touches[0] : evt).clientX,
2537
- y = (evt.touches ? evt.touches[0] : evt).clientY,
2538
- sens = options.scrollSensitivity,
2539
- speed = options.scrollSpeed,
2540
- winScroller = getWindowScrollingElement();
2541
- var scrollThisInstance = false,
2542
- scrollCustomFn;
2543
-
2544
- // New scroll root, set scrollEl
2545
- if (scrollRootEl !== rootEl) {
2546
- scrollRootEl = rootEl;
2547
- clearAutoScrolls();
2548
- scrollEl = options.scroll;
2549
- scrollCustomFn = options.scrollFn;
2550
- if (scrollEl === true) {
2551
- scrollEl = getParentAutoScrollElement(rootEl, true);
2552
- }
2553
- }
2554
- var layersOut = 0;
2555
- var currentParent = scrollEl;
2556
- do {
2557
- var el = currentParent,
2558
- rect = getRect(el),
2559
- top = rect.top,
2560
- bottom = rect.bottom,
2561
- left = rect.left,
2562
- right = rect.right,
2563
- width = rect.width,
2564
- height = rect.height,
2565
- canScrollX = void 0,
2566
- canScrollY = void 0,
2567
- scrollWidth = el.scrollWidth,
2568
- scrollHeight = el.scrollHeight,
2569
- elCSS = css(el),
2570
- scrollPosX = el.scrollLeft,
2571
- scrollPosY = el.scrollTop;
2572
- if (el === winScroller) {
2573
- canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll' || elCSS.overflowX === 'visible');
2574
- canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll' || elCSS.overflowY === 'visible');
2575
- } else {
2576
- canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll');
2577
- canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll');
2578
- }
2579
- var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX);
2580
- var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY);
2581
- if (!autoScrolls[layersOut]) {
2582
- for (var i = 0; i <= layersOut; i++) {
2583
- if (!autoScrolls[i]) {
2584
- autoScrolls[i] = {};
2585
- }
2586
- }
2587
- }
2588
- if (autoScrolls[layersOut].vx != vx || autoScrolls[layersOut].vy != vy || autoScrolls[layersOut].el !== el) {
2589
- autoScrolls[layersOut].el = el;
2590
- autoScrolls[layersOut].vx = vx;
2591
- autoScrolls[layersOut].vy = vy;
2592
- clearInterval(autoScrolls[layersOut].pid);
2593
- if (vx != 0 || vy != 0) {
2594
- scrollThisInstance = true;
2595
- /* jshint loopfunc:true */
2596
- autoScrolls[layersOut].pid = setInterval(function () {
2597
- // emulate drag over during autoscroll (fallback), emulating native DnD behaviour
2598
- if (isFallback && this.layer === 0) {
2599
- Sortable.active._onTouchMove(touchEvt$1); // To move ghost if it is positioned absolutely
2600
- }
2601
- var scrollOffsetY = autoScrolls[this.layer].vy ? autoScrolls[this.layer].vy * speed : 0;
2602
- var scrollOffsetX = autoScrolls[this.layer].vx ? autoScrolls[this.layer].vx * speed : 0;
2603
- if (typeof scrollCustomFn === 'function') {
2604
- if (scrollCustomFn.call(Sortable.dragged.parentNode[expando], scrollOffsetX, scrollOffsetY, evt, touchEvt$1, autoScrolls[this.layer].el) !== 'continue') {
2605
- return;
2606
- }
2607
- }
2608
- scrollBy(autoScrolls[this.layer].el, scrollOffsetX, scrollOffsetY);
2609
- }.bind({
2610
- layer: layersOut
2611
- }), 24);
2612
- }
2613
- }
2614
- layersOut++;
2615
- } while (options.bubbleScroll && currentParent !== winScroller && (currentParent = getParentAutoScrollElement(currentParent, false)));
2616
- scrolling = scrollThisInstance; // in case another function catches scrolling as false in between when it is not
2617
- }, 30);
2618
-
2619
- var drop = function drop(_ref) {
2620
- var originalEvent = _ref.originalEvent,
2621
- putSortable = _ref.putSortable,
2622
- dragEl = _ref.dragEl,
2623
- activeSortable = _ref.activeSortable,
2624
- dispatchSortableEvent = _ref.dispatchSortableEvent,
2625
- hideGhostForTarget = _ref.hideGhostForTarget,
2626
- unhideGhostForTarget = _ref.unhideGhostForTarget;
2627
- if (!originalEvent) return;
2628
- var toSortable = putSortable || activeSortable;
2629
- hideGhostForTarget();
2630
- var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent;
2631
- var target = document.elementFromPoint(touch.clientX, touch.clientY);
2632
- unhideGhostForTarget();
2633
- if (toSortable && !toSortable.el.contains(target)) {
2634
- dispatchSortableEvent('spill');
2635
- this.onSpill({
2636
- dragEl: dragEl,
2637
- putSortable: putSortable
2638
- });
2639
- }
2640
- };
2641
- function Revert() {}
2642
- Revert.prototype = {
2643
- startIndex: null,
2644
- dragStart: function dragStart(_ref2) {
2645
- var oldDraggableIndex = _ref2.oldDraggableIndex;
2646
- this.startIndex = oldDraggableIndex;
2647
- },
2648
- onSpill: function onSpill(_ref3) {
2649
- var dragEl = _ref3.dragEl,
2650
- putSortable = _ref3.putSortable;
2651
- this.sortable.captureAnimationState();
2652
- if (putSortable) {
2653
- putSortable.captureAnimationState();
2654
- }
2655
- var nextSibling = getChild(this.sortable.el, this.startIndex, this.options);
2656
- if (nextSibling) {
2657
- this.sortable.el.insertBefore(dragEl, nextSibling);
2658
- } else {
2659
- this.sortable.el.appendChild(dragEl);
2660
- }
2661
- this.sortable.animateAll();
2662
- if (putSortable) {
2663
- putSortable.animateAll();
2664
- }
2665
- },
2666
- drop: drop
2667
- };
2668
- _extends(Revert, {
2669
- pluginName: 'revertOnSpill'
2670
- });
2671
- function Remove() {}
2672
- Remove.prototype = {
2673
- onSpill: function onSpill(_ref4) {
2674
- var dragEl = _ref4.dragEl,
2675
- putSortable = _ref4.putSortable;
2676
- var parentSortable = putSortable || this.sortable;
2677
- parentSortable.captureAnimationState();
2678
- dragEl.parentNode && dragEl.parentNode.removeChild(dragEl);
2679
- parentSortable.animateAll();
2680
- },
2681
- drop: drop
2682
- };
2683
- _extends(Remove, {
2684
- pluginName: 'removeOnSpill'
2685
- });
2686
- var OnSpill = [Remove, Revert];
2687
-
2688
- var lastSwapEl;
2689
- function SwapPlugin() {
2690
- function Swap() {
2691
- this.defaults = {
2692
- swapClass: 'sortable-swap-highlight'
2693
- };
2694
- }
2695
- Swap.prototype = {
2696
- dragStart: function dragStart(_ref) {
2697
- var dragEl = _ref.dragEl;
2698
- lastSwapEl = dragEl;
2699
- },
2700
- dragOverValid: function dragOverValid(_ref2) {
2701
- var completed = _ref2.completed,
2702
- target = _ref2.target,
2703
- onMove = _ref2.onMove,
2704
- activeSortable = _ref2.activeSortable,
2705
- changed = _ref2.changed,
2706
- cancel = _ref2.cancel;
2707
- if (!activeSortable.options.swap) return;
2708
- var el = this.sortable.el,
2709
- options = this.options;
2710
- if (target && target !== el) {
2711
- var prevSwapEl = lastSwapEl;
2712
- if (onMove(target) !== false) {
2713
- toggleClass(target, options.swapClass, true);
2714
- lastSwapEl = target;
2715
- } else {
2716
- lastSwapEl = null;
2717
- }
2718
- if (prevSwapEl && prevSwapEl !== lastSwapEl) {
2719
- toggleClass(prevSwapEl, options.swapClass, false);
2720
- }
2721
- }
2722
- changed();
2723
- completed(true);
2724
- cancel();
2725
- },
2726
- drop: function drop(_ref3) {
2727
- var activeSortable = _ref3.activeSortable,
2728
- putSortable = _ref3.putSortable,
2729
- dragEl = _ref3.dragEl;
2730
- var toSortable = putSortable || this.sortable;
2731
- var options = this.options;
2732
- lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false);
2733
- if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) {
2734
- if (dragEl !== lastSwapEl) {
2735
- toSortable.captureAnimationState();
2736
- if (toSortable !== activeSortable) activeSortable.captureAnimationState();
2737
- swapNodes(dragEl, lastSwapEl);
2738
- toSortable.animateAll();
2739
- if (toSortable !== activeSortable) activeSortable.animateAll();
2740
- }
2741
- }
2742
- },
2743
- nulling: function nulling() {
2744
- lastSwapEl = null;
2745
- }
2746
- };
2747
- return _extends(Swap, {
2748
- pluginName: 'swap',
2749
- eventProperties: function eventProperties() {
2750
- return {
2751
- swapItem: lastSwapEl
2752
- };
2753
- }
2754
- });
2755
- }
2756
- function swapNodes(n1, n2) {
2757
- var p1 = n1.parentNode,
2758
- p2 = n2.parentNode,
2759
- i1,
2760
- i2;
2761
- if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return;
2762
- i1 = index(n1);
2763
- i2 = index(n2);
2764
- if (p1.isEqualNode(p2) && i1 < i2) {
2765
- i2++;
2766
- }
2767
- p1.insertBefore(n2, p1.children[i1]);
2768
- p2.insertBefore(n1, p2.children[i2]);
2769
- }
2770
-
2771
- var multiDragElements = [],
2772
- multiDragClones = [],
2773
- lastMultiDragSelect,
2774
- // for selection with modifier key down (SHIFT)
2775
- multiDragSortable,
2776
- initialFolding = false,
2777
- // Initial multi-drag fold when drag started
2778
- folding = false,
2779
- // Folding any other time
2780
- dragStarted = false,
2781
- dragEl$1,
2782
- clonesFromRect,
2783
- clonesHidden;
2784
- function MultiDragPlugin() {
2785
- function MultiDrag(sortable) {
2786
- // Bind all private methods
2787
- for (var fn in this) {
2788
- if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
2789
- this[fn] = this[fn].bind(this);
2790
- }
2791
- }
2792
- if (!sortable.options.avoidImplicitDeselect) {
2793
- if (sortable.options.supportPointer) {
2794
- on(document, 'pointerup', this._deselectMultiDrag);
2795
- } else {
2796
- on(document, 'mouseup', this._deselectMultiDrag);
2797
- on(document, 'touchend', this._deselectMultiDrag);
2798
- }
2799
- }
2800
- on(document, 'keydown', this._checkKeyDown);
2801
- on(document, 'keyup', this._checkKeyUp);
2802
- this.defaults = {
2803
- selectedClass: 'sortable-selected',
2804
- multiDragKey: null,
2805
- avoidImplicitDeselect: false,
2806
- setData: function setData(dataTransfer, dragEl) {
2807
- var data = '';
2808
- if (multiDragElements.length && multiDragSortable === sortable) {
2809
- multiDragElements.forEach(function (multiDragElement, i) {
2810
- data += (!i ? '' : ', ') + multiDragElement.textContent;
2811
- });
2812
- } else {
2813
- data = dragEl.textContent;
2814
- }
2815
- dataTransfer.setData('Text', data);
2816
- }
2817
- };
2818
- }
2819
- MultiDrag.prototype = {
2820
- multiDragKeyDown: false,
2821
- isMultiDrag: false,
2822
- delayStartGlobal: function delayStartGlobal(_ref) {
2823
- var dragged = _ref.dragEl;
2824
- dragEl$1 = dragged;
2825
- },
2826
- delayEnded: function delayEnded() {
2827
- this.isMultiDrag = ~multiDragElements.indexOf(dragEl$1);
2828
- },
2829
- setupClone: function setupClone(_ref2) {
2830
- var sortable = _ref2.sortable,
2831
- cancel = _ref2.cancel;
2832
- if (!this.isMultiDrag) return;
2833
- for (var i = 0; i < multiDragElements.length; i++) {
2834
- multiDragClones.push(clone(multiDragElements[i]));
2835
- multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex;
2836
- multiDragClones[i].draggable = false;
2837
- multiDragClones[i].style['will-change'] = '';
2838
- toggleClass(multiDragClones[i], this.options.selectedClass, false);
2839
- multiDragElements[i] === dragEl$1 && toggleClass(multiDragClones[i], this.options.chosenClass, false);
2840
- }
2841
- sortable._hideClone();
2842
- cancel();
2843
- },
2844
- clone: function clone(_ref3) {
2845
- var sortable = _ref3.sortable,
2846
- rootEl = _ref3.rootEl,
2847
- dispatchSortableEvent = _ref3.dispatchSortableEvent,
2848
- cancel = _ref3.cancel;
2849
- if (!this.isMultiDrag) return;
2850
- if (!this.options.removeCloneOnHide) {
2851
- if (multiDragElements.length && multiDragSortable === sortable) {
2852
- insertMultiDragClones(true, rootEl);
2853
- dispatchSortableEvent('clone');
2854
- cancel();
2855
- }
2856
- }
2857
- },
2858
- showClone: function showClone(_ref4) {
2859
- var cloneNowShown = _ref4.cloneNowShown,
2860
- rootEl = _ref4.rootEl,
2861
- cancel = _ref4.cancel;
2862
- if (!this.isMultiDrag) return;
2863
- insertMultiDragClones(false, rootEl);
2864
- multiDragClones.forEach(function (clone) {
2865
- css(clone, 'display', '');
2866
- });
2867
- cloneNowShown();
2868
- clonesHidden = false;
2869
- cancel();
2870
- },
2871
- hideClone: function hideClone(_ref5) {
2872
- var _this = this;
2873
- var sortable = _ref5.sortable,
2874
- cloneNowHidden = _ref5.cloneNowHidden,
2875
- cancel = _ref5.cancel;
2876
- if (!this.isMultiDrag) return;
2877
- multiDragClones.forEach(function (clone) {
2878
- css(clone, 'display', 'none');
2879
- if (_this.options.removeCloneOnHide && clone.parentNode) {
2880
- clone.parentNode.removeChild(clone);
2881
- }
2882
- });
2883
- cloneNowHidden();
2884
- clonesHidden = true;
2885
- cancel();
2886
- },
2887
- dragStartGlobal: function dragStartGlobal(_ref6) {
2888
- var sortable = _ref6.sortable;
2889
- if (!this.isMultiDrag && multiDragSortable) {
2890
- multiDragSortable.multiDrag._deselectMultiDrag();
2891
- }
2892
- multiDragElements.forEach(function (multiDragElement) {
2893
- multiDragElement.sortableIndex = index(multiDragElement);
2894
- });
2895
-
2896
- // Sort multi-drag elements
2897
- multiDragElements = multiDragElements.sort(function (a, b) {
2898
- return a.sortableIndex - b.sortableIndex;
2899
- });
2900
- dragStarted = true;
2901
- },
2902
- dragStarted: function dragStarted(_ref7) {
2903
- var _this2 = this;
2904
- var sortable = _ref7.sortable;
2905
- if (!this.isMultiDrag) return;
2906
- if (this.options.sort) {
2907
- // Capture rects,
2908
- // hide multi drag elements (by positioning them absolute),
2909
- // set multi drag elements rects to dragRect,
2910
- // show multi drag elements,
2911
- // animate to rects,
2912
- // unset rects & remove from DOM
2913
-
2914
- sortable.captureAnimationState();
2915
- if (this.options.animation) {
2916
- multiDragElements.forEach(function (multiDragElement) {
2917
- if (multiDragElement === dragEl$1) return;
2918
- css(multiDragElement, 'position', 'absolute');
2919
- });
2920
- var dragRect = getRect(dragEl$1, false, true, true);
2921
- multiDragElements.forEach(function (multiDragElement) {
2922
- if (multiDragElement === dragEl$1) return;
2923
- setRect(multiDragElement, dragRect);
2924
- });
2925
- folding = true;
2926
- initialFolding = true;
2927
- }
2928
- }
2929
- sortable.animateAll(function () {
2930
- folding = false;
2931
- initialFolding = false;
2932
- if (_this2.options.animation) {
2933
- multiDragElements.forEach(function (multiDragElement) {
2934
- unsetRect(multiDragElement);
2935
- });
2936
- }
2937
-
2938
- // Remove all auxiliary multidrag items from el, if sorting enabled
2939
- if (_this2.options.sort) {
2940
- removeMultiDragElements();
2941
- }
2942
- });
2943
- },
2944
- dragOver: function dragOver(_ref8) {
2945
- var target = _ref8.target,
2946
- completed = _ref8.completed,
2947
- cancel = _ref8.cancel;
2948
- if (folding && ~multiDragElements.indexOf(target)) {
2949
- completed(false);
2950
- cancel();
2951
- }
2952
- },
2953
- revert: function revert(_ref9) {
2954
- var fromSortable = _ref9.fromSortable,
2955
- rootEl = _ref9.rootEl,
2956
- sortable = _ref9.sortable,
2957
- dragRect = _ref9.dragRect;
2958
- if (multiDragElements.length > 1) {
2959
- // Setup unfold animation
2960
- multiDragElements.forEach(function (multiDragElement) {
2961
- sortable.addAnimationState({
2962
- target: multiDragElement,
2963
- rect: folding ? getRect(multiDragElement) : dragRect
2964
- });
2965
- unsetRect(multiDragElement);
2966
- multiDragElement.fromRect = dragRect;
2967
- fromSortable.removeAnimationState(multiDragElement);
2968
- });
2969
- folding = false;
2970
- insertMultiDragElements(!this.options.removeCloneOnHide, rootEl);
2971
- }
2972
- },
2973
- dragOverCompleted: function dragOverCompleted(_ref10) {
2974
- var sortable = _ref10.sortable,
2975
- isOwner = _ref10.isOwner,
2976
- insertion = _ref10.insertion,
2977
- activeSortable = _ref10.activeSortable,
2978
- parentEl = _ref10.parentEl,
2979
- putSortable = _ref10.putSortable;
2980
- var options = this.options;
2981
- if (insertion) {
2982
- // Clones must be hidden before folding animation to capture dragRectAbsolute properly
2983
- if (isOwner) {
2984
- activeSortable._hideClone();
2985
- }
2986
- initialFolding = false;
2987
- // If leaving sort:false root, or already folding - Fold to new location
2988
- if (options.animation && multiDragElements.length > 1 && (folding || !isOwner && !activeSortable.options.sort && !putSortable)) {
2989
- // Fold: Set all multi drag elements's rects to dragEl's rect when multi-drag elements are invisible
2990
- var dragRectAbsolute = getRect(dragEl$1, false, true, true);
2991
- multiDragElements.forEach(function (multiDragElement) {
2992
- if (multiDragElement === dragEl$1) return;
2993
- setRect(multiDragElement, dragRectAbsolute);
2994
-
2995
- // Move element(s) to end of parentEl so that it does not interfere with multi-drag clones insertion if they are inserted
2996
- // while folding, and so that we can capture them again because old sortable will no longer be fromSortable
2997
- parentEl.appendChild(multiDragElement);
2998
- });
2999
- folding = true;
3000
- }
3001
-
3002
- // Clones must be shown (and check to remove multi drags) after folding when interfering multiDragElements are moved out
3003
- if (!isOwner) {
3004
- // Only remove if not folding (folding will remove them anyways)
3005
- if (!folding) {
3006
- removeMultiDragElements();
3007
- }
3008
- if (multiDragElements.length > 1) {
3009
- var clonesHiddenBefore = clonesHidden;
3010
- activeSortable._showClone(sortable);
3011
-
3012
- // Unfold animation for clones if showing from hidden
3013
- if (activeSortable.options.animation && !clonesHidden && clonesHiddenBefore) {
3014
- multiDragClones.forEach(function (clone) {
3015
- activeSortable.addAnimationState({
3016
- target: clone,
3017
- rect: clonesFromRect
3018
- });
3019
- clone.fromRect = clonesFromRect;
3020
- clone.thisAnimationDuration = null;
3021
- });
3022
- }
3023
- } else {
3024
- activeSortable._showClone(sortable);
3025
- }
3026
- }
3027
- }
3028
- },
3029
- dragOverAnimationCapture: function dragOverAnimationCapture(_ref11) {
3030
- var dragRect = _ref11.dragRect,
3031
- isOwner = _ref11.isOwner,
3032
- activeSortable = _ref11.activeSortable;
3033
- multiDragElements.forEach(function (multiDragElement) {
3034
- multiDragElement.thisAnimationDuration = null;
3035
- });
3036
- if (activeSortable.options.animation && !isOwner && activeSortable.multiDrag.isMultiDrag) {
3037
- clonesFromRect = _extends({}, dragRect);
3038
- var dragMatrix = matrix(dragEl$1, true);
3039
- clonesFromRect.top -= dragMatrix.f;
3040
- clonesFromRect.left -= dragMatrix.e;
3041
- }
3042
- },
3043
- dragOverAnimationComplete: function dragOverAnimationComplete() {
3044
- if (folding) {
3045
- folding = false;
3046
- removeMultiDragElements();
3047
- }
3048
- },
3049
- drop: function drop(_ref12) {
3050
- var evt = _ref12.originalEvent,
3051
- rootEl = _ref12.rootEl,
3052
- parentEl = _ref12.parentEl,
3053
- sortable = _ref12.sortable,
3054
- dispatchSortableEvent = _ref12.dispatchSortableEvent,
3055
- oldIndex = _ref12.oldIndex,
3056
- putSortable = _ref12.putSortable;
3057
- var toSortable = putSortable || this.sortable;
3058
- if (!evt) return;
3059
- var options = this.options,
3060
- children = parentEl.children;
3061
-
3062
- // Multi-drag selection
3063
- if (!dragStarted) {
3064
- if (options.multiDragKey && !this.multiDragKeyDown) {
3065
- this._deselectMultiDrag();
3066
- }
3067
- toggleClass(dragEl$1, options.selectedClass, !~multiDragElements.indexOf(dragEl$1));
3068
- if (!~multiDragElements.indexOf(dragEl$1)) {
3069
- multiDragElements.push(dragEl$1);
3070
- dispatchEvent({
3071
- sortable: sortable,
3072
- rootEl: rootEl,
3073
- name: 'select',
3074
- targetEl: dragEl$1,
3075
- originalEvent: evt
3076
- });
3077
-
3078
- // Modifier activated, select from last to dragEl
3079
- if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) {
3080
- var lastIndex = index(lastMultiDragSelect),
3081
- currentIndex = index(dragEl$1);
3082
- if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) {
3083
- // Must include lastMultiDragSelect (select it), in case modified selection from no selection
3084
- // (but previous selection existed)
3085
- var n, i;
3086
- if (currentIndex > lastIndex) {
3087
- i = lastIndex;
3088
- n = currentIndex;
3089
- } else {
3090
- i = currentIndex;
3091
- n = lastIndex + 1;
3092
- }
3093
- for (; i < n; i++) {
3094
- if (~multiDragElements.indexOf(children[i])) continue;
3095
- toggleClass(children[i], options.selectedClass, true);
3096
- multiDragElements.push(children[i]);
3097
- dispatchEvent({
3098
- sortable: sortable,
3099
- rootEl: rootEl,
3100
- name: 'select',
3101
- targetEl: children[i],
3102
- originalEvent: evt
3103
- });
3104
- }
3105
- }
3106
- } else {
3107
- lastMultiDragSelect = dragEl$1;
3108
- }
3109
- multiDragSortable = toSortable;
3110
- } else {
3111
- multiDragElements.splice(multiDragElements.indexOf(dragEl$1), 1);
3112
- lastMultiDragSelect = null;
3113
- dispatchEvent({
3114
- sortable: sortable,
3115
- rootEl: rootEl,
3116
- name: 'deselect',
3117
- targetEl: dragEl$1,
3118
- originalEvent: evt
3119
- });
3120
- }
3121
- }
3122
-
3123
- // Multi-drag drop
3124
- if (dragStarted && this.isMultiDrag) {
3125
- folding = false;
3126
- // Do not "unfold" after around dragEl if reverted
3127
- if ((parentEl[expando].options.sort || parentEl !== rootEl) && multiDragElements.length > 1) {
3128
- var dragRect = getRect(dragEl$1),
3129
- multiDragIndex = index(dragEl$1, ':not(.' + this.options.selectedClass + ')');
3130
- if (!initialFolding && options.animation) dragEl$1.thisAnimationDuration = null;
3131
- toSortable.captureAnimationState();
3132
- if (!initialFolding) {
3133
- if (options.animation) {
3134
- dragEl$1.fromRect = dragRect;
3135
- multiDragElements.forEach(function (multiDragElement) {
3136
- multiDragElement.thisAnimationDuration = null;
3137
- if (multiDragElement !== dragEl$1) {
3138
- var rect = folding ? getRect(multiDragElement) : dragRect;
3139
- multiDragElement.fromRect = rect;
3140
-
3141
- // Prepare unfold animation
3142
- toSortable.addAnimationState({
3143
- target: multiDragElement,
3144
- rect: rect
3145
- });
3146
- }
3147
- });
3148
- }
3149
-
3150
- // Multi drag elements are not necessarily removed from the DOM on drop, so to reinsert
3151
- // properly they must all be removed
3152
- removeMultiDragElements();
3153
- multiDragElements.forEach(function (multiDragElement) {
3154
- if (children[multiDragIndex]) {
3155
- parentEl.insertBefore(multiDragElement, children[multiDragIndex]);
3156
- } else {
3157
- parentEl.appendChild(multiDragElement);
3158
- }
3159
- multiDragIndex++;
3160
- });
3161
-
3162
- // If initial folding is done, the elements may have changed position because they are now
3163
- // unfolding around dragEl, even though dragEl may not have his index changed, so update event
3164
- // must be fired here as Sortable will not.
3165
- if (oldIndex === index(dragEl$1)) {
3166
- var update = false;
3167
- multiDragElements.forEach(function (multiDragElement) {
3168
- if (multiDragElement.sortableIndex !== index(multiDragElement)) {
3169
- update = true;
3170
- return;
3171
- }
3172
- });
3173
- if (update) {
3174
- dispatchSortableEvent('update');
3175
- dispatchSortableEvent('sort');
3176
- }
3177
- }
3178
- }
3179
-
3180
- // Must be done after capturing individual rects (scroll bar)
3181
- multiDragElements.forEach(function (multiDragElement) {
3182
- unsetRect(multiDragElement);
3183
- });
3184
- toSortable.animateAll();
3185
- }
3186
- multiDragSortable = toSortable;
3187
- }
3188
-
3189
- // Remove clones if necessary
3190
- if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') {
3191
- multiDragClones.forEach(function (clone) {
3192
- clone.parentNode && clone.parentNode.removeChild(clone);
3193
- });
3194
- }
3195
- },
3196
- nullingGlobal: function nullingGlobal() {
3197
- this.isMultiDrag = dragStarted = false;
3198
- multiDragClones.length = 0;
3199
- },
3200
- destroyGlobal: function destroyGlobal() {
3201
- this._deselectMultiDrag();
3202
- off(document, 'pointerup', this._deselectMultiDrag);
3203
- off(document, 'mouseup', this._deselectMultiDrag);
3204
- off(document, 'touchend', this._deselectMultiDrag);
3205
- off(document, 'keydown', this._checkKeyDown);
3206
- off(document, 'keyup', this._checkKeyUp);
3207
- },
3208
- _deselectMultiDrag: function _deselectMultiDrag(evt) {
3209
- if (typeof dragStarted !== "undefined" && dragStarted) return;
3210
-
3211
- // Only deselect if selection is in this sortable
3212
- if (multiDragSortable !== this.sortable) return;
3213
-
3214
- // Only deselect if target is not item in this sortable
3215
- if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return;
3216
-
3217
- // Only deselect if left click
3218
- if (evt && evt.button !== 0) return;
3219
- while (multiDragElements.length) {
3220
- var el = multiDragElements[0];
3221
- toggleClass(el, this.options.selectedClass, false);
3222
- multiDragElements.shift();
3223
- dispatchEvent({
3224
- sortable: this.sortable,
3225
- rootEl: this.sortable.el,
3226
- name: 'deselect',
3227
- targetEl: el,
3228
- originalEvent: evt
3229
- });
3230
- }
3231
- },
3232
- _checkKeyDown: function _checkKeyDown(evt) {
3233
- if (evt.key === this.options.multiDragKey) {
3234
- this.multiDragKeyDown = true;
3235
- }
3236
- },
3237
- _checkKeyUp: function _checkKeyUp(evt) {
3238
- if (evt.key === this.options.multiDragKey) {
3239
- this.multiDragKeyDown = false;
3240
- }
3241
- }
3242
- };
3243
- return _extends(MultiDrag, {
3244
- // Static methods & properties
3245
- pluginName: 'multiDrag',
3246
- utils: {
3247
- /**
3248
- * Selects the provided multi-drag item
3249
- * @param {HTMLElement} el The element to be selected
3250
- */
3251
- select: function select(el) {
3252
- var sortable = el.parentNode[expando];
3253
- if (!sortable || !sortable.options.multiDrag || ~multiDragElements.indexOf(el)) return;
3254
- if (multiDragSortable && multiDragSortable !== sortable) {
3255
- multiDragSortable.multiDrag._deselectMultiDrag();
3256
- multiDragSortable = sortable;
3257
- }
3258
- toggleClass(el, sortable.options.selectedClass, true);
3259
- multiDragElements.push(el);
3260
- },
3261
- /**
3262
- * Deselects the provided multi-drag item
3263
- * @param {HTMLElement} el The element to be deselected
3264
- */
3265
- deselect: function deselect(el) {
3266
- var sortable = el.parentNode[expando],
3267
- index = multiDragElements.indexOf(el);
3268
- if (!sortable || !sortable.options.multiDrag || !~index) return;
3269
- toggleClass(el, sortable.options.selectedClass, false);
3270
- multiDragElements.splice(index, 1);
3271
- }
3272
- },
3273
- eventProperties: function eventProperties() {
3274
- var _this3 = this;
3275
- var oldIndicies = [],
3276
- newIndicies = [];
3277
- multiDragElements.forEach(function (multiDragElement) {
3278
- oldIndicies.push({
3279
- multiDragElement: multiDragElement,
3280
- index: multiDragElement.sortableIndex
3281
- });
3282
-
3283
- // multiDragElements will already be sorted if folding
3284
- var newIndex;
3285
- if (folding && multiDragElement !== dragEl$1) {
3286
- newIndex = -1;
3287
- } else if (folding) {
3288
- newIndex = index(multiDragElement, ':not(.' + _this3.options.selectedClass + ')');
3289
- } else {
3290
- newIndex = index(multiDragElement);
3291
- }
3292
- newIndicies.push({
3293
- multiDragElement: multiDragElement,
3294
- index: newIndex
3295
- });
3296
- });
3297
- return {
3298
- items: _toConsumableArray(multiDragElements),
3299
- clones: [].concat(multiDragClones),
3300
- oldIndicies: oldIndicies,
3301
- newIndicies: newIndicies
3302
- };
3303
- },
3304
- optionListeners: {
3305
- multiDragKey: function multiDragKey(key) {
3306
- key = key.toLowerCase();
3307
- if (key === 'ctrl') {
3308
- key = 'Control';
3309
- } else if (key.length > 1) {
3310
- key = key.charAt(0).toUpperCase() + key.substr(1);
3311
- }
3312
- return key;
3313
- }
3314
- }
3315
- });
3316
- }
3317
- function insertMultiDragElements(clonesInserted, rootEl) {
3318
- multiDragElements.forEach(function (multiDragElement, i) {
3319
- var target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)];
3320
- if (target) {
3321
- rootEl.insertBefore(multiDragElement, target);
3322
- } else {
3323
- rootEl.appendChild(multiDragElement);
3324
- }
3325
- });
3326
- }
3327
-
3328
- /**
3329
- * Insert multi-drag clones
3330
- * @param {[Boolean]} elementsInserted Whether the multi-drag elements are inserted
3331
- * @param {HTMLElement} rootEl
3332
- */
3333
- function insertMultiDragClones(elementsInserted, rootEl) {
3334
- multiDragClones.forEach(function (clone, i) {
3335
- var target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)];
3336
- if (target) {
3337
- rootEl.insertBefore(clone, target);
3338
- } else {
3339
- rootEl.appendChild(clone);
3340
- }
3341
- });
3342
- }
3343
- function removeMultiDragElements() {
3344
- multiDragElements.forEach(function (multiDragElement) {
3345
- if (multiDragElement === dragEl$1) return;
3346
- multiDragElement.parentNode && multiDragElement.parentNode.removeChild(multiDragElement);
3347
- });
3348
- }
3349
-
3350
- export default Sortable;
3351
- export { AutoScrollPlugin as AutoScroll, MultiDragPlugin as MultiDrag, OnSpill, Sortable, SwapPlugin as Swap };