details.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. BlazeComponent.extendComponent({
  2. template: function() {
  3. return 'cardDetails';
  4. },
  5. mixins: function() {
  6. return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar];
  7. },
  8. calculateNextPeak: function() {
  9. var altitude = this.find('.js-card-details').scrollHeight;
  10. this.callFirstWith(this, 'setNextPeak', altitude);
  11. },
  12. reachNextPeak: function() {
  13. var activitiesComponent = this.componentChildren('activities')[0];
  14. activitiesComponent.loadNextPage();
  15. },
  16. onRendered: function() {
  17. var bodyBoardComponent = this.componentParent();
  18. var additionalMargin = 550;
  19. var $cardDetails = this.$(this.firstNode());
  20. var scollLeft = $cardDetails.offset().left + additionalMargin;
  21. bodyBoardComponent.scrollLeft(scollLeft);
  22. },
  23. onDestroyed: function() {
  24. this.componentParent().showOverlay.set(false);
  25. },
  26. updateCard: function(modifier) {
  27. Cards.update(this.data()._id, {
  28. $set: modifier
  29. });
  30. },
  31. onCreated: function() {
  32. this.isLoaded = new ReactiveVar(false);
  33. },
  34. events: function() {
  35. var events = {
  36. [CSSEvents.animationend + ' .js-card-details']: function() {
  37. this.isLoaded.set(true);
  38. }
  39. };
  40. return [_.extend(events, {
  41. 'click .js-close-card-details': function() {
  42. Utils.goBoardId(this.data().boardId);
  43. },
  44. 'click .js-move-card': Popup.open('moveCard'),
  45. 'click .js-open-card-details-menu': Popup.open('cardDetailsActions'),
  46. 'submit .js-card-description': function(evt) {
  47. evt.preventDefault();
  48. var description = this.currentComponent().getValue();
  49. this.updateCard({ description: description });
  50. },
  51. 'submit .js-card-details-title': function(evt) {
  52. evt.preventDefault();
  53. var title = this.currentComponent().getValue();
  54. if ($.trim(title)) {
  55. this.updateCard({ title: title });
  56. }
  57. },
  58. 'click .js-member': Popup.open('cardMember'),
  59. 'click .js-add-members': Popup.open('cardMembers'),
  60. 'click .js-add-labels': Popup.open('cardLabels'),
  61. 'mouseenter .js-card-details': function() {
  62. this.componentParent().showOverlay.set(true);
  63. }
  64. })];
  65. }
  66. }).register('cardDetails');
  67. Template.cardDetailsActionsPopup.events({
  68. 'click .js-members': Popup.open('cardMembers'),
  69. 'click .js-labels': Popup.open('cardLabels'),
  70. 'click .js-attachments': Popup.open('cardAttachments'),
  71. // 'click .js-copy': Popup.open(),
  72. 'click .js-archive': function(evt) {
  73. evt.preventDefault();
  74. Cards.update(this._id, {
  75. $set: {
  76. archived: true
  77. }
  78. });
  79. Popup.close();
  80. },
  81. 'click .js-more': Popup.open('cardMore')
  82. });
  83. Template.moveCardPopup.events({
  84. 'click .js-select-list': function() {
  85. // XXX We should *not* get the currentCard from the global state, but
  86. // instead from a “component” state.
  87. var cardId = Session.get('currentCard');
  88. var newListId = this._id;
  89. Cards.update(cardId, {
  90. $set: {
  91. listId: newListId
  92. }
  93. });
  94. Popup.close();
  95. }
  96. });
  97. Template.cardMorePopup.events({
  98. 'click .js-delete': Popup.afterConfirm('cardDelete', function() {
  99. Popup.close();
  100. Cards.remove(this._id);
  101. Utils.goBoardId(this.board()._id);
  102. })
  103. });
  104. // Close the card details pane by pressing escape
  105. EscapeActions.register('detailsPane',
  106. function() { Utils.goBoardId(Session.get('currentBoard')); },
  107. function() { return ! Session.equals('currentCard', null); }, {
  108. noClickEscapeOn: '.js-card-details,.board-sidebar,#header'
  109. }
  110. );