@get-set/gs-sortable 0.0.19 → 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/actions/afterAllImagesLoad.js +53 -43
- package/dist/actions/calculate.js +140 -145
- package/dist/actions/calculateOnSort.js +247 -278
- package/dist/actions/checkItemInContainer.js +26 -28
- package/dist/actions/destroy.js +33 -22
- package/dist/actions/general.js +90 -81
- package/dist/actions/getCurrentParams.js +35 -32
- package/dist/actions/init.js +33 -24
- package/dist/actions/initDraggable.js +88 -87
- package/dist/actions/initMouseMove.js +102 -117
- package/dist/actions/initScroll.js +26 -23
- package/dist/actions/initSortEnd.js +73 -84
- package/dist/components/GSSortable.js +155 -161
- package/dist/constants/constParams.js +10 -5
- package/dist/constants/defaultParams.js +24 -19
- package/dist/constants/types.js +12 -7
- package/dist/helpers/uihelpers.js +56 -52
- package/package.json +3 -3
|
@@ -1,117 +1,102 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
info.$el.
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
)
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
placeholder.
|
|
59
|
-
placeholder.style.
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
const maxX = containerInnerWidth - $el.offsetWidth;
|
|
104
|
-
tranlateX = Math.min(Math.max(tranlateX, minX), maxX);
|
|
105
|
-
tranlateY = Math.min(Math.max(tranlateY, minY), maxY);
|
|
106
|
-
}
|
|
107
|
-
$el.style.transform = `translate(${tranlateX}px, ${tranlateY}px)`;
|
|
108
|
-
|
|
109
|
-
if (findedRef != "") {
|
|
110
|
-
calculateOnSort(window.GSSortableConfigue.overInItemRef);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
window.scrollY = document.documentElement.scrollTop;
|
|
114
|
-
window.scrollX = document.documentElement.scrollLeft;
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
export default initMouseMove;
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _general = require("./general");
|
|
8
|
+
var _checkItemInContainer = _interopRequireDefault(require("./checkItemInContainer"));
|
|
9
|
+
var _calculate = _interopRequireDefault(require("./calculate"));
|
|
10
|
+
var _constParams = _interopRequireDefault(require("../constants/constParams"));
|
|
11
|
+
var _calculateOnSort = _interopRequireDefault(require("./calculateOnSort"));
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
|
+
var initMouseMove = function initMouseMove(event) {
|
|
14
|
+
var info = window.GSSortableConfigue.draggableInfo;
|
|
15
|
+
if (info != undefined) {
|
|
16
|
+
info.moved = true;
|
|
17
|
+
var allRefs = [window.GSSortableConfigue.takeFrom];
|
|
18
|
+
window.GSSortableConfigue.references.map(function (item) {
|
|
19
|
+
if (item.ref.currentParams.acceptFrom.includes(window.GSSortableConfigue.takeFrom.currentParams.reference)) {
|
|
20
|
+
allRefs.push(item.ref);
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
var findedRef = "";
|
|
24
|
+
allRefs.map(function (item) {
|
|
25
|
+
if ((0, _checkItemInContainer["default"])(item.grid, info.$el)) {
|
|
26
|
+
findedRef = item.currentParams.reference;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
if (findedRef !== "") {
|
|
30
|
+
var newRef = window.GSSortableConfigue.instance(findedRef);
|
|
31
|
+
if (newRef != undefined && info.ref.currentParams.reference !== newRef.currentParams.reference) {
|
|
32
|
+
if (document.querySelector(".gs-sortable-placeholder") != null) {
|
|
33
|
+
document.querySelector(".gs-sortable-placeholder").remove();
|
|
34
|
+
(0, _calculate["default"])(window.GSSortableConfigue.overInItemRef);
|
|
35
|
+
}
|
|
36
|
+
window.GSSortableConfigue.overInItemRef = newRef;
|
|
37
|
+
info.$el.style.width = window.GSSortableConfigue.overInItemRef.itemWidth;
|
|
38
|
+
var newWidth = info.$el.clientWidth;
|
|
39
|
+
var newHeight = info.$el.clientHeight;
|
|
40
|
+
var newContainerOffset = (0, _general.getOffsetFromWindow)(window.GSSortableConfigue.takeFrom.grid);
|
|
41
|
+
var translateY = event.clientY - newContainerOffset.top - newHeight * info.fromTop;
|
|
42
|
+
var translateX = event.clientX - newContainerOffset.left - newWidth * info.fromLeft;
|
|
43
|
+
var elStyles = getComputedStyle(info.$el);
|
|
44
|
+
var top = parseFloat(elStyles.top);
|
|
45
|
+
var left = parseFloat(elStyles.left);
|
|
46
|
+
if (!window.GSSortableConfigue.overInItemRef.currentParams.takeClone) {
|
|
47
|
+
var placeholder = document.createElement("div");
|
|
48
|
+
placeholder.classList.add("gs-sortable-placeholder");
|
|
49
|
+
placeholder.style.position = elStyles.position;
|
|
50
|
+
info.$el.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
|
|
51
|
+
placeholder.style.transition = "left ".concat(_constParams["default"].animateionSpeed, "ms, top ").concat(_constParams["default"].animateionSpeed, "ms, transform ").concat(_constParams["default"].animateionSpeed, "ms, opacity ").concat(_constParams["default"].animateionSpeed, "ms, opacity ").concat(_constParams["default"].animateionSpeed, "ms");
|
|
52
|
+
placeholder.style.top = "".concat(top, "px");
|
|
53
|
+
placeholder.style.left = "".concat(left, "px");
|
|
54
|
+
placeholder.style.border = elStyles.border;
|
|
55
|
+
placeholder.style.borderRadius = elStyles.borderRadius;
|
|
56
|
+
info.placeholder = placeholder;
|
|
57
|
+
info.ref = newRef;
|
|
58
|
+
placeholder.style.width = "".concat(info.$el.offsetWidth, "px");
|
|
59
|
+
placeholder.style.height = "".concat(info.$el.offsetHeight, "px");
|
|
60
|
+
newRef.grid.append(placeholder);
|
|
61
|
+
(0, _calculate["default"])(newRef);
|
|
62
|
+
return;
|
|
63
|
+
} else {
|
|
64
|
+
info.ref = newRef;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
var params = info.ref.currentParams;
|
|
69
|
+
var clientX = event.clientX;
|
|
70
|
+
var clientY = event.clientY;
|
|
71
|
+
var $el = info.$el;
|
|
72
|
+
var containerStyles = getComputedStyle(info.ref.grid);
|
|
73
|
+
var paddingLeft = parseFloat(containerStyles.paddingLeft);
|
|
74
|
+
var paddingTop = parseFloat(containerStyles.paddingTop);
|
|
75
|
+
var paddingRight = parseFloat(containerStyles.paddingRight);
|
|
76
|
+
var paddingBottom = parseFloat(containerStyles.paddingBottom);
|
|
77
|
+
var containerInnerHeight = info.ref.grid.clientHeight - paddingTop - paddingBottom;
|
|
78
|
+
var containerInnerWidth = info.ref.grid.clientWidth - paddingLeft - paddingRight;
|
|
79
|
+
var moveX = clientX - info.clientX;
|
|
80
|
+
var moveY = clientY - info.clientY;
|
|
81
|
+
var coord = (0, _general.getTranslateCoord)($el);
|
|
82
|
+
info.clientX = clientX;
|
|
83
|
+
info.clientY = clientY;
|
|
84
|
+
var tranlateX = moveX + coord.x;
|
|
85
|
+
var tranlateY = moveY + coord.y;
|
|
86
|
+
if (!params.allowOutOfBox) {
|
|
87
|
+
var minY = 0;
|
|
88
|
+
var minX = 0;
|
|
89
|
+
var maxY = containerInnerHeight - $el.offsetHeight;
|
|
90
|
+
var maxX = containerInnerWidth - $el.offsetWidth;
|
|
91
|
+
tranlateX = Math.min(Math.max(tranlateX, minX), maxX);
|
|
92
|
+
tranlateY = Math.min(Math.max(tranlateY, minY), maxY);
|
|
93
|
+
}
|
|
94
|
+
$el.style.transform = "translate(".concat(tranlateX, "px, ").concat(tranlateY, "px)");
|
|
95
|
+
if (findedRef != "") {
|
|
96
|
+
(0, _calculateOnSort["default"])(window.GSSortableConfigue.overInItemRef);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
window.scrollY = document.documentElement.scrollTop;
|
|
100
|
+
window.scrollX = document.documentElement.scrollLeft;
|
|
101
|
+
};
|
|
102
|
+
var _default = exports["default"] = initMouseMove;
|
|
@@ -1,23 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _general = require("./general");
|
|
8
|
+
var initScroll = function initScroll() {
|
|
9
|
+
var info = window.GSSortableConfigue.draggableInfo;
|
|
10
|
+
if (info != undefined) {
|
|
11
|
+
var $el = info.$el;
|
|
12
|
+
var coord = (0, _general.getTranslateCoord)(info.$el);
|
|
13
|
+
var translateX = coord.x;
|
|
14
|
+
var translateY = coord.y;
|
|
15
|
+
var scrollY = document.documentElement.scrollTop;
|
|
16
|
+
var scrollX = document.documentElement.scrollLeft;
|
|
17
|
+
var scrollYDist = scrollY - window.scrollY;
|
|
18
|
+
var scrollXDist = scrollX - window.scrollX;
|
|
19
|
+
translateX = translateX + scrollXDist;
|
|
20
|
+
translateY = translateY + scrollYDist;
|
|
21
|
+
window.scrollY = scrollY;
|
|
22
|
+
window.scrollX = scrollX;
|
|
23
|
+
info.$el.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
var _default = exports["default"] = initScroll;
|
|
@@ -1,84 +1,73 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
info.$el.classList.
|
|
33
|
-
|
|
34
|
-
info
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
)
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
window.GSSortableConfigue.takeFrom.currentParams.
|
|
54
|
-
|
|
55
|
-
window.GSSortableConfigue.takeFrom.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
);
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
const placeholder = info.placeholder;
|
|
75
|
-
info.$el.style.top = `${info.newTop}px`;
|
|
76
|
-
info.$el.style.left = `${info.newLeft}px`;
|
|
77
|
-
info.$el.style.removeProperty("transform");
|
|
78
|
-
placeholder.remove();
|
|
79
|
-
window.GSSortableConfigue.draggableInfo = undefined;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
export default initSortEnd;
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _constParams = _interopRequireDefault(require("../constants/constParams"));
|
|
8
|
+
var _calculate = _interopRequireDefault(require("./calculate"));
|
|
9
|
+
var _general = require("./general");
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
12
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
15
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
16
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
17
|
+
var initSortEnd = function initSortEnd(event) {
|
|
18
|
+
var info = _objectSpread({}, window.GSSortableConfigue.draggableInfo);
|
|
19
|
+
if (window.GSSortableConfigue.draggableInfo != undefined) {
|
|
20
|
+
if (info.moved) {
|
|
21
|
+
var containerDifX = 0;
|
|
22
|
+
var containerDifY = 0;
|
|
23
|
+
if (info.ref.currentParams.reference !== window.GSSortableConfigue.takeFrom.currentParams.reference) {
|
|
24
|
+
var fromCoord = (0, _general.getOffsetFromBody)(window.GSSortableConfigue.takeFrom.grid);
|
|
25
|
+
var toCoord = (0, _general.getOffsetFromBody)(info.ref.grid);
|
|
26
|
+
containerDifY = toCoord.top - fromCoord.top;
|
|
27
|
+
containerDifX = toCoord.left - fromCoord.left;
|
|
28
|
+
}
|
|
29
|
+
info.ref.isAddjusting = true;
|
|
30
|
+
var $el = info.$el;
|
|
31
|
+
var placeholder = info.placeholder;
|
|
32
|
+
info.$el.classList.remove("gs-sortable-item-inmove");
|
|
33
|
+
info.ref.grid.classList.remove("gs-sortable-active");
|
|
34
|
+
if (info.ref.grid.closest(".gs-sortable-item-active-parent") != null) {
|
|
35
|
+
info.ref.grid.closest(".gs-sortable-item-active-parent").classList.remove("gs-sortable-item-active-parent");
|
|
36
|
+
}
|
|
37
|
+
info.$el.classList.add("gs-sortable-item-addjusting");
|
|
38
|
+
window.GSSortableConfigue.draggableInfo = undefined;
|
|
39
|
+
info.$el.style.top = "".concat(info.newTop + containerDifY, "px");
|
|
40
|
+
info.$el.style.left = "".concat(info.newLeft + containerDifX, "px");
|
|
41
|
+
info.$el.style.removeProperty("transform");
|
|
42
|
+
setTimeout(function () {
|
|
43
|
+
$el.classList.remove("gs-sortable-item-addjusting");
|
|
44
|
+
if (info.ref.currentParams.reference === window.GSSortableConfigue.takeFrom.currentParams.reference && window.GSSortableConfigue.takeFrom.currentParams.takeClone) {
|
|
45
|
+
info.$el.remove();
|
|
46
|
+
} else {
|
|
47
|
+
if (info.index != undefined) {
|
|
48
|
+
(0, _general.moveChildToIndex)(info.ref.grid, info.$el, info.index);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
placeholder.remove();
|
|
52
|
+
if (info.ref.currentParams.reference !== window.GSSortableConfigue.takeFrom.currentParams.reference) {
|
|
53
|
+
window.GSSortableConfigue.takeFrom.currentParams.afterSort(window.GSSortableConfigue.takeFrom.grid.querySelectorAll(".gs-sortable-item"));
|
|
54
|
+
info.ref.currentParams.afterSort(info.ref.grid.querySelectorAll(".gs-sortable-item"));
|
|
55
|
+
window.GSSortableConfigue.takeFrom.refresh();
|
|
56
|
+
info.ref.refresh();
|
|
57
|
+
} else {
|
|
58
|
+
(0, _calculate["default"])(info.ref);
|
|
59
|
+
info.ref.currentParams.afterSort(info.ref.grid.querySelectorAll(".gs-sortable-item"));
|
|
60
|
+
}
|
|
61
|
+
info.ref.isAddjusting = false;
|
|
62
|
+
}, _constParams["default"].animateionSpeed);
|
|
63
|
+
} else {
|
|
64
|
+
var _placeholder = info.placeholder;
|
|
65
|
+
info.$el.style.top = "".concat(info.newTop, "px");
|
|
66
|
+
info.$el.style.left = "".concat(info.newLeft, "px");
|
|
67
|
+
info.$el.style.removeProperty("transform");
|
|
68
|
+
_placeholder.remove();
|
|
69
|
+
window.GSSortableConfigue.draggableInfo = undefined;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
var _default = exports["default"] = initSortEnd;
|