cardDetails.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. BlazeComponent.extendComponent({
  2. mixins() {
  3. return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar];
  4. },
  5. calculateNextPeak() {
  6. const cardElement = this.find('.js-card-details');
  7. if (cardElement) {
  8. const altitude = cardElement.scrollHeight;
  9. this.callFirstWith(this, 'setNextPeak', altitude);
  10. }
  11. },
  12. reachNextPeak() {
  13. const activitiesComponent = this.childComponents('activities')[0];
  14. activitiesComponent.loadNextPage();
  15. },
  16. onCreated() {
  17. this.isLoaded = new ReactiveVar(false);
  18. this.parentComponent().showOverlay.set(true);
  19. this.parentComponent().mouseHasEnterCardDetails = false;
  20. this.calculateNextPeak();
  21. },
  22. isWatching() {
  23. const card = this.currentData();
  24. return card.findWatcher(Meteor.userId());
  25. },
  26. hiddenSystemMessages() {
  27. return Meteor.user().hasHiddenSystemMessages();
  28. },
  29. canModifyCard() {
  30. return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
  31. },
  32. scrollParentContainer() {
  33. const cardPanelWidth = 510;
  34. const bodyBoardComponent = this.parentComponent();
  35. const $cardContainer = bodyBoardComponent.$('.js-lists');
  36. const $cardView = this.$(this.firstNode());
  37. const cardContainerScroll = $cardContainer.scrollLeft();
  38. const cardContainerWidth = $cardContainer.width();
  39. const cardViewStart = $cardView.offset().left;
  40. const cardViewEnd = cardViewStart + cardPanelWidth;
  41. let offset = false;
  42. if (cardViewStart < 0) {
  43. offset = cardViewStart;
  44. } else if (cardViewEnd > cardContainerWidth) {
  45. offset = cardViewEnd - cardContainerWidth;
  46. }
  47. if (offset) {
  48. bodyBoardComponent.scrollLeft(cardContainerScroll + offset);
  49. }
  50. },
  51. onRendered() {
  52. if (!Utils.isMiniScreen()) this.scrollParentContainer();
  53. },
  54. onDestroyed() {
  55. this.parentComponent().showOverlay.set(false);
  56. },
  57. events() {
  58. const events = {
  59. [`${CSSEvents.transitionend} .js-card-details`]() {
  60. this.isLoaded.set(true);
  61. },
  62. [`${CSSEvents.animationend} .js-card-details`]() {
  63. this.isLoaded.set(true);
  64. },
  65. };
  66. return [{
  67. ...events,
  68. 'click .js-close-card-details' () {
  69. Utils.goBoardId(this.data().boardId);
  70. },
  71. 'click .js-open-card-details-menu': Popup.open('cardDetailsActions'),
  72. 'submit .js-card-description' (evt) {
  73. evt.preventDefault();
  74. const description = this.currentComponent().getValue();
  75. this.data().setDescription(description);
  76. },
  77. 'submit .js-card-details-title' (evt) {
  78. evt.preventDefault();
  79. const title = this.currentComponent().getValue().trim();
  80. if (title) {
  81. this.data().setTitle(title);
  82. }
  83. },
  84. 'click .js-member': Popup.open('cardMember'),
  85. 'click .js-add-members': Popup.open('cardMembers'),
  86. 'click .js-add-labels': Popup.open('cardLabels'),
  87. 'mouseenter .js-card-details' () {
  88. this.parentComponent().showOverlay.set(true);
  89. this.parentComponent().mouseHasEnterCardDetails = true;
  90. },
  91. 'click #toggleButton'() {
  92. Meteor.call('toggleSystemMessages');
  93. },
  94. }];
  95. },
  96. }).register('cardDetails');
  97. // We extends the normal InlinedForm component to support UnsavedEdits draft
  98. // feature.
  99. (class extends InlinedForm {
  100. _getUnsavedEditKey() {
  101. return {
  102. fieldName: 'cardDescription',
  103. // XXX Recovering the currentCard identifier form a session variable is
  104. // fragile because this variable may change for instance if the route
  105. // change. We should use some component props instead.
  106. docId: Session.get('currentCard'),
  107. };
  108. }
  109. close(isReset = false) {
  110. if (this.isOpen.get() && !isReset) {
  111. const draft = this.getValue().trim();
  112. if (draft !== Cards.findOne(Session.get('currentCard')).description) {
  113. UnsavedEdits.set(this._getUnsavedEditKey(), this.getValue());
  114. }
  115. }
  116. super.close();
  117. }
  118. reset() {
  119. UnsavedEdits.reset(this._getUnsavedEditKey());
  120. this.close(true);
  121. }
  122. events() {
  123. const parentEvents = InlinedForm.prototype.events()[0];
  124. return [{
  125. ...parentEvents,
  126. 'click .js-close-inlined-form': this.reset,
  127. }];
  128. }
  129. }).register('inlinedCardDescription');
  130. Template.cardDetailsActionsPopup.helpers({
  131. isWatching() {
  132. return this.findWatcher(Meteor.userId());
  133. },
  134. canModifyCard() {
  135. return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
  136. },
  137. });
  138. Template.cardDetailsActionsPopup.events({
  139. 'click .js-members': Popup.open('cardMembers'),
  140. 'click .js-labels': Popup.open('cardLabels'),
  141. 'click .js-attachments': Popup.open('cardAttachments'),
  142. 'click .js-start-date': Popup.open('editCardStartDate'),
  143. 'click .js-due-date': Popup.open('editCardDueDate'),
  144. 'click .js-move-card': Popup.open('moveCard'),
  145. 'click .js-copy-card': Popup.open('copyCard'),
  146. 'click .js-move-card-to-top' (evt) {
  147. evt.preventDefault();
  148. const minOrder = _.min(this.list().cards().map((c) => c.sort));
  149. this.move(this.listId, minOrder - 1);
  150. },
  151. 'click .js-move-card-to-bottom' (evt) {
  152. evt.preventDefault();
  153. const maxOrder = _.max(this.list().cards().map((c) => c.sort));
  154. this.move(this.listId, maxOrder + 1);
  155. },
  156. 'click .js-archive' (evt) {
  157. evt.preventDefault();
  158. this.archive();
  159. Popup.close();
  160. },
  161. 'click .js-more': Popup.open('cardMore'),
  162. 'click .js-toggle-watch-card' () {
  163. const currentCard = this;
  164. const level = currentCard.findWatcher(Meteor.userId()) ? null : 'watching';
  165. Meteor.call('watch', 'card', currentCard._id, level, (err, ret) => {
  166. if (!err && ret) Popup.close();
  167. });
  168. },
  169. });
  170. Template.editCardTitleForm.onRendered(function () {
  171. autosize(this.$('.js-edit-card-title'));
  172. });
  173. Template.editCardTitleForm.events({
  174. 'keydown .js-edit-card-title' (evt) {
  175. // If enter key was pressed, submit the data
  176. // Unless the shift key is also being pressed
  177. if (evt.keyCode === 13 && !event.shiftKey) {
  178. $('.js-submit-edit-card-title-form').click();
  179. }
  180. },
  181. });
  182. Template.moveCardPopup.events({
  183. 'click .js-select-list' () {
  184. // XXX We should *not* get the currentCard from the global state, but
  185. // instead from a “component” state.
  186. const card = Cards.findOne(Session.get('currentCard'));
  187. const newListId = this._id;
  188. card.move(newListId);
  189. Popup.close();
  190. },
  191. });
  192. Template.copyCardPopup.events({
  193. 'click .js-select-list' (evt) {
  194. const card = Cards.findOne(Session.get('currentCard'));
  195. const oldId = card._id;
  196. card._id = null;
  197. card.listId = this._id;
  198. const textarea = $(evt.currentTarget).parents('.content').find('textarea');
  199. const title = textarea.val().trim();
  200. // insert new card to the bottom of new list
  201. card.sort = Lists.findOne(this._id).cards().count();
  202. if (title) {
  203. card.title = title;
  204. card.coverId = '';
  205. const _id = Cards.insert(card);
  206. // In case the filter is active we need to add the newly inserted card in
  207. // the list of exceptions -- cards that are not filtered. Otherwise the
  208. // card will disappear instantly.
  209. // See https://github.com/wekan/wekan/issues/80
  210. Filter.addException(_id);
  211. // copy checklists
  212. let cursor = Checklists.find({cardId: oldId});
  213. cursor.forEach(function() {
  214. 'use strict';
  215. const checklist = arguments[0];
  216. checklist.cardId = _id;
  217. checklist._id = null;
  218. Checklists.insert(checklist);
  219. });
  220. // copy card comments
  221. cursor = CardComments.find({cardId: oldId});
  222. cursor.forEach(function () {
  223. 'use strict';
  224. const comment = arguments[0];
  225. comment.cardId = _id;
  226. comment._id = null;
  227. CardComments.insert(comment);
  228. });
  229. Popup.close();
  230. }
  231. },
  232. });
  233. Template.cardMorePopup.events({
  234. 'click .js-copy-card-link-to-clipboard' () {
  235. // Clipboard code from:
  236. // https://stackoverflow.com/questions/6300213/copy-selected-text-to-the-clipboard-without-using-flash-must-be-cross-browser
  237. const StringToCopyElement = document.getElementById('cardURL');
  238. StringToCopyElement.select();
  239. if (document.execCommand('copy')) {
  240. StringToCopyElement.blur();
  241. } else {
  242. document.getElementById('cardURL').selectionStart = 0;
  243. document.getElementById('cardURL').selectionEnd = 999;
  244. document.execCommand('copy');
  245. if (window.getSelection) {
  246. if (window.getSelection().empty) { // Chrome
  247. window.getSelection().empty();
  248. } else if (window.getSelection().removeAllRanges) { // Firefox
  249. window.getSelection().removeAllRanges();
  250. }
  251. } else if (document.selection) { // IE?
  252. document.selection.empty();
  253. }
  254. }
  255. },
  256. 'click .js-delete': Popup.afterConfirm('cardDelete', function () {
  257. Popup.close();
  258. Cards.remove(this._id);
  259. Utils.goBoardId(this.boardId);
  260. }),
  261. });
  262. // Close the card details pane by pressing escape
  263. EscapeActions.register('detailsPane',
  264. () => {
  265. Utils.goBoardId(Session.get('currentBoard'));
  266. },
  267. () => {
  268. return !Session.equals('currentCard', null);
  269. }, {
  270. noClickEscapeOn: '.js-card-details,.board-sidebar,#header',
  271. }
  272. );