1 | import { findReorderItem, indexForItem } from './item-reorder-util';
|
2 | import { pointerCoord } from '../../util/dom';
|
3 | import { UIEventManager } from '../../gestures/ui-event-manager';
|
4 |
|
5 |
|
6 |
|
7 | var ItemReorderGesture = (function () {
|
8 | function ItemReorderGesture(plt, reorderList) {
|
9 | this.plt = plt;
|
10 | this.reorderList = reorderList;
|
11 | this.selectedItemEle = null;
|
12 | this.events = new UIEventManager(plt);
|
13 | this.events.pointerEvents({
|
14 | element: this.reorderList.getNativeElement(),
|
15 | pointerDown: this.onDragStart.bind(this),
|
16 | pointerMove: this.onDragMove.bind(this),
|
17 | pointerUp: this.onDragEnd.bind(this),
|
18 | zone: false
|
19 | });
|
20 | }
|
21 | ItemReorderGesture.prototype.onDragStart = function (ev) {
|
22 | if (this.selectedItemEle) {
|
23 | return false;
|
24 | }
|
25 | var reorderElement = ev.target;
|
26 | if (reorderElement.nodeName !== 'ION-REORDER') {
|
27 | return false;
|
28 | }
|
29 | var reorderMark = reorderElement['$ionComponent'];
|
30 | if (!reorderMark) {
|
31 | console.error('ion-reorder does not contain $ionComponent');
|
32 | return false;
|
33 | }
|
34 | this.reorderList._reorderPrepare();
|
35 | var item = reorderMark.getReorderNode();
|
36 | if (!item) {
|
37 | console.error('reorder node not found');
|
38 | return false;
|
39 | }
|
40 | ev.preventDefault();
|
41 |
|
42 | this.selectedItemEle = item;
|
43 | this.selectedItemHeight = item.offsetHeight;
|
44 | this.lastYcoord = -100;
|
45 | this.lastToIndex = indexForItem(item);
|
46 | this.windowHeight = this.plt.height() - AUTO_SCROLL_MARGIN;
|
47 | this.lastScrollPosition = this.reorderList._scrollContent(0);
|
48 | this.offset = pointerCoord(ev);
|
49 | this.offset.y += this.lastScrollPosition;
|
50 | item.classList.add(ITEM_REORDER_ACTIVE);
|
51 | this.reorderList._reorderStart();
|
52 | return true;
|
53 | };
|
54 | ItemReorderGesture.prototype.onDragMove = function (ev) {
|
55 | var selectedItem = this.selectedItemEle;
|
56 | if (!selectedItem) {
|
57 | return;
|
58 | }
|
59 | ev.preventDefault();
|
60 |
|
61 | var coord = pointerCoord(ev);
|
62 | var posY = coord.y;
|
63 |
|
64 | var scrollPosition = this.scroll(posY);
|
65 |
|
66 | if (Math.abs(posY - this.lastYcoord) > 30) {
|
67 | var overItem = this.itemForCoord(coord);
|
68 | if (overItem) {
|
69 | var toIndex = indexForItem(overItem);
|
70 | if (toIndex !== undefined && (toIndex !== this.lastToIndex || this.emptyZone)) {
|
71 | var fromIndex = indexForItem(selectedItem);
|
72 | this.lastToIndex = toIndex;
|
73 | this.lastYcoord = posY;
|
74 | this.emptyZone = false;
|
75 | this.reorderList._reorderMove(fromIndex, toIndex, this.selectedItemHeight);
|
76 | }
|
77 | }
|
78 | else {
|
79 | this.emptyZone = true;
|
80 | }
|
81 | }
|
82 |
|
83 | var ydiff = Math.round(posY - this.offset.y + scrollPosition);
|
84 | selectedItem.style[this.plt.Css.transform] = "translateY(" + ydiff + "px)";
|
85 | };
|
86 | ItemReorderGesture.prototype.onDragEnd = function (ev) {
|
87 | var _this = this;
|
88 | var selectedItem = this.selectedItemEle;
|
89 | if (!selectedItem) {
|
90 | return;
|
91 | }
|
92 | if (ev) {
|
93 | ev.preventDefault();
|
94 | ev.stopPropagation();
|
95 | }
|
96 | var toIndex = this.lastToIndex;
|
97 | var fromIndex = indexForItem(selectedItem);
|
98 | var reorderInactive = function () {
|
99 | _this.selectedItemEle.style.transition = '';
|
100 | _this.selectedItemEle.classList.remove(ITEM_REORDER_ACTIVE);
|
101 | _this.selectedItemEle = null;
|
102 | };
|
103 | if (toIndex === fromIndex) {
|
104 | selectedItem.style.transition = 'transform 200ms ease-in-out';
|
105 | setTimeout(reorderInactive, 200);
|
106 | }
|
107 | else {
|
108 | reorderInactive();
|
109 | }
|
110 | this.reorderList._reorderEmit(fromIndex, toIndex);
|
111 | };
|
112 | ItemReorderGesture.prototype.itemForCoord = function (coord) {
|
113 | var sideOffset = this.reorderList._isStart === this.plt.isRTL ? -100 : 100;
|
114 | var x = this.offset.x + sideOffset;
|
115 | var y = coord.y;
|
116 | var element = this.plt.getElementFromPoint(x, y);
|
117 | return findReorderItem(element, this.reorderList.getNativeElement());
|
118 | };
|
119 | ItemReorderGesture.prototype.scroll = function (posY) {
|
120 | if (posY < AUTO_SCROLL_MARGIN) {
|
121 | this.lastScrollPosition = this.reorderList._scrollContent(-SCROLL_JUMP);
|
122 | }
|
123 | else if (posY > this.windowHeight) {
|
124 | this.lastScrollPosition = this.reorderList._scrollContent(SCROLL_JUMP);
|
125 | }
|
126 | return this.lastScrollPosition;
|
127 | };
|
128 | |
129 |
|
130 |
|
131 | ItemReorderGesture.prototype.destroy = function () {
|
132 | this.onDragEnd(null);
|
133 | this.events.destroy();
|
134 | this.events = null;
|
135 | this.reorderList = null;
|
136 | };
|
137 | return ItemReorderGesture;
|
138 | }());
|
139 | export { ItemReorderGesture };
|
140 | var AUTO_SCROLL_MARGIN = 60;
|
141 | var SCROLL_JUMP = 10;
|
142 | var ITEM_REORDER_ACTIVE = 'reorder-active';
|
143 |
|
\ | No newline at end of file |