UI for Zipcoin Blue

item-reorder-gesture.js 5.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. import { findReorderItem, indexForItem } from './item-reorder-util';
  2. import { pointerCoord } from '../../util/dom';
  3. import { UIEventManager } from '../../gestures/ui-event-manager';
  4. /**
  5. * @hidden
  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. // Preparing state
  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. // Get coordinate
  61. var coord = pointerCoord(ev);
  62. var posY = coord.y;
  63. // Scroll if we reach the scroll margins
  64. var scrollPosition = this.scroll(posY);
  65. // Only perform hit test if we moved at least 30px from previous position
  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. // Update selected item position
  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. * @hidden
  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. //# sourceMappingURL=item-reorder-gesture.js.map