list.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. const { calculateIndex, enableClickOnTouch } = Utils;
  2. BlazeComponent.extendComponent({
  3. // Proxy
  4. openForm(options) {
  5. this.childComponents('listBody')[0].openForm(options);
  6. },
  7. onCreated() {
  8. this.newCardFormIsVisible = new ReactiveVar(true);
  9. },
  10. // The jquery UI sortable library is the best solution I've found so far. I
  11. // tried sortable and dragula but they were not powerful enough four our use
  12. // case. I also considered writing/forking a drag-and-drop + sortable library
  13. // but it's probably too much work.
  14. // By calling asking the sortable library to cancel its move on the `stop`
  15. // callback, we basically solve all issues related to reactive updates. A
  16. // comment below provides further details.
  17. onRendered() {
  18. const boardComponent = this.parentComponent().parentComponent();
  19. function userIsMember() {
  20. return (
  21. Meteor.user() &&
  22. Meteor.user().isBoardMember() &&
  23. !Meteor.user().isCommentOnly()
  24. );
  25. }
  26. const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
  27. const $cards = this.$('.js-minicards');
  28. if (Utils.isMiniScreen) {
  29. $('.js-minicards').sortable({
  30. handle: '.handle',
  31. });
  32. }
  33. if (!Utils.isMiniScreen && showDesktopDragHandles) {
  34. $('.js-minicards').sortable({
  35. handle: '.handle',
  36. });
  37. }
  38. if (!Utils.isMiniScreen && !showDesktopDragHandles) {
  39. $('.js-minicards').sortable({
  40. handle: 'list-header',
  41. });
  42. }
  43. $cards.sortable({
  44. connectWith: '.js-minicards:not(.js-list-full)',
  45. tolerance: 'pointer',
  46. appendTo: '.board-canvas',
  47. helper(evt, item) {
  48. const helper = item.clone();
  49. if (MultiSelection.isActive()) {
  50. const andNOthers = $cards.find('.js-minicard.is-checked').length - 1;
  51. if (andNOthers > 0) {
  52. helper.append(
  53. $(
  54. Blaze.toHTML(
  55. HTML.DIV(
  56. { class: 'and-n-other' },
  57. TAPi18n.__('and-n-other-card', { count: andNOthers }),
  58. ),
  59. ),
  60. ),
  61. );
  62. }
  63. }
  64. return helper;
  65. },
  66. distance: 7,
  67. items: itemsSelector,
  68. placeholder: 'minicard-wrapper placeholder',
  69. start(evt, ui) {
  70. ui.helper.css('z-index', 1000);
  71. ui.placeholder.height(ui.helper.height());
  72. EscapeActions.executeUpTo('popup-close');
  73. boardComponent.setIsDragging(true);
  74. },
  75. stop(evt, ui) {
  76. // To attribute the new index number, we need to get the DOM element
  77. // of the previous and the following card -- if any.
  78. const prevCardDom = ui.item.prev('.js-minicard').get(0);
  79. const nextCardDom = ui.item.next('.js-minicard').get(0);
  80. const nCards = MultiSelection.isActive() ? MultiSelection.count() : 1;
  81. const sortIndex = calculateIndex(prevCardDom, nextCardDom, nCards);
  82. const listId = Blaze.getData(ui.item.parents('.list').get(0))._id;
  83. const currentBoard = Boards.findOne(Session.get('currentBoard'));
  84. let swimlaneId = '';
  85. const boardView = (Meteor.user().profile || {}).boardView;
  86. if (
  87. boardView === 'board-view-swimlanes' ||
  88. currentBoard.isTemplatesBoard()
  89. )
  90. swimlaneId = Blaze.getData(ui.item.parents('.swimlane').get(0))._id;
  91. else if (
  92. boardView === 'board-view-lists' ||
  93. boardView === 'board-view-cal' ||
  94. !boardView
  95. )
  96. swimlaneId = currentBoard.getDefaultSwimline()._id;
  97. // Normally the jquery-ui sortable library moves the dragged DOM element
  98. // to its new position, which disrupts Blaze reactive updates mechanism
  99. // (especially when we move the last card of a list, or when multiple
  100. // users move some cards at the same time). To prevent these UX glitches
  101. // we ask sortable to gracefully cancel the move, and to put back the
  102. // DOM in its initial state. The card move is then handled reactively by
  103. // Blaze with the below query.
  104. $cards.sortable('cancel');
  105. if (MultiSelection.isActive()) {
  106. Cards.find(MultiSelection.getMongoSelector()).forEach((card, i) => {
  107. card.move(
  108. currentBoard._id,
  109. swimlaneId,
  110. listId,
  111. sortIndex.base + i * sortIndex.increment,
  112. );
  113. });
  114. } else {
  115. const cardDomElement = ui.item.get(0);
  116. const card = Blaze.getData(cardDomElement);
  117. card.move(currentBoard._id, swimlaneId, listId, sortIndex.base);
  118. }
  119. boardComponent.setIsDragging(false);
  120. },
  121. });
  122. // ugly touch event hotfix
  123. enableClickOnTouch(itemsSelector);
  124. // Disable drag-dropping if the current user is not a board member or is comment only
  125. this.autorun(() => {
  126. $cards.sortable('option', 'disabled', !userIsMember());
  127. });
  128. // We want to re-run this function any time a card is added.
  129. this.autorun(() => {
  130. const currentBoardId = Tracker.nonreactive(() => {
  131. return Session.get('currentBoard');
  132. });
  133. Cards.find({ boardId: currentBoardId }).fetch();
  134. Tracker.afterFlush(() => {
  135. $cards.find(itemsSelector).droppable({
  136. hoverClass: 'draggable-hover-card',
  137. accept: '.js-member,.js-label',
  138. drop(event, ui) {
  139. const cardId = Blaze.getData(this)._id;
  140. const card = Cards.findOne(cardId);
  141. if (ui.draggable.hasClass('js-member')) {
  142. const memberId = Blaze.getData(ui.draggable.get(0)).userId;
  143. card.assignMember(memberId);
  144. } else {
  145. const labelId = Blaze.getData(ui.draggable.get(0))._id;
  146. card.addLabel(labelId);
  147. }
  148. },
  149. });
  150. });
  151. });
  152. },
  153. }).register('list');
  154. Template.list.helpers({
  155. showDesktopDragHandles() {
  156. return Meteor.user().hasShowDesktopDragHandles();
  157. },
  158. });
  159. Template.miniList.events({
  160. 'click .js-select-list'() {
  161. const listId = this._id;
  162. Session.set('currentList', listId);
  163. },
  164. });