diff options
| -rw-r--r-- | client/components/activities/activities.js | 4 | ||||
| -rw-r--r-- | client/components/boards/boardBody.jade | 35 | ||||
| -rw-r--r-- | client/components/boards/boardBody.js | 147 |
3 files changed, 98 insertions, 88 deletions
diff --git a/client/components/activities/activities.js b/client/components/activities/activities.js index 6d796199..400e3848 100644 --- a/client/components/activities/activities.js +++ b/client/components/activities/activities.js @@ -55,7 +55,7 @@ BlazeComponent.extendComponent({ cardLink: function() { var card = this.currentData().card(); - return Blaze.toHTML(HTML.A({ + return card && Blaze.toHTML(HTML.A({ href: card.absoluteUrl(), 'class': 'action-card' }, card.title)); @@ -69,7 +69,7 @@ BlazeComponent.extendComponent({ attachmentLink: function() { var attachment = this.currentData().attachment(); - return Blaze.toHTML(HTML.A({ + return attachment && Blaze.toHTML(HTML.A({ href: attachment.url(), 'class': 'js-open-attachment-viewer' }, attachment.name())); diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index 3d6667ae..6598dea9 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -1,26 +1,29 @@ template(name="board") - if Template.subscriptionsReady + if isBoardReady.get if currentBoard - .board-wrapper(class=currentBoard.colorClass) - .board-canvas( - class=currentBoard.sidebarSize - class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}" - class="{{#if draggingActive.get}}is-dragging-active{{/if}}") - if showOverlay.get - .board-overlay - .lists.js-lists - each currentBoard.lists - +list(this) - if currentCardIsInThisList - +cardDetails(currentCard) - if currentUser.isBoardMember - +addListForm - +sidebar + +boardBody else +message(label="board-no-found") else +spinner +template(name="boardBody") + .board-wrapper(class=currentBoard.colorClass) + .board-canvas( + class=currentBoard.sidebarSize + class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}" + class="{{#if draggingActive.get}}is-dragging-active{{/if}}") + if showOverlay.get + .board-overlay + .lists.js-lists + each currentBoard.lists + +list(this) + if currentCardIsInThisList + +cardDetails(currentCard) + if currentUser.isBoardMember + +addListForm + +sidebar + template(name="addListForm") .list.js-list.list-composer.js-list-composer +inlinedForm(autoclose=false) diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index 3757eff9..4ed62bdc 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -1,4 +1,4 @@ -var boardSubsManager = new SubsManager(); +var subManager = new SubsManager(); BlazeComponent.extendComponent({ template: function() { @@ -6,12 +6,19 @@ BlazeComponent.extendComponent({ }, onCreated: function() { - this.draggingActive = new ReactiveVar(false); - this.showOverlay = new ReactiveVar(false); + var self = this; + self.draggingActive = new ReactiveVar(false); + self.showOverlay = new ReactiveVar(false); + self.isBoardReady = new ReactiveVar(false); + // The pattern we use to manually handle data loading is described here: + // https://kadira.io/academy/meteor-routing-guide/content/subscriptions-and-data-management/using-subs-manager // XXX The boardId should be readed from some sort the component "props", // unfortunatly, Blaze doesn't have this notion. - boardSubsManager.subscribe('board', Session.get('currentBoard')); + self.autorun(function() { + var handle = subManager.subscribe('board', Session.get('currentBoard')); + self.isBoardReady.set(handle.ready()); + }); }, openNewListForm: function() { @@ -47,72 +54,6 @@ BlazeComponent.extendComponent({ return currentCard && currentCard.listId === listId; }, - onRendered: function() { - var self = this; - - self.scrollLeft(); - - var lists = this.find('.js-lists'); - - // We want to animate the card details window closing. We rely on CSS - // transition for the actual animation. - lists._uihooks = { - removeElement: function(node) { - var removeNode = _.once(function() { - node.parentNode.removeChild(node); - }); - if ($(node).hasClass('js-card-details')) { - $(node).css({ - flexBasis: 0, - padding: 0 - }); - $(lists).one(CSSEvents.transitionend, removeNode); - } else { - removeNode(); - } - } - }; - - if (! Meteor.user() || ! Meteor.user().isBoardMember()) - return; - - self.$(lists).sortable({ - tolerance: 'pointer', - helper: 'clone', - items: '.js-list:not(.js-list-composer)', - placeholder: 'list placeholder', - distance: 7, - start: function(evt, ui) { - ui.placeholder.height(ui.helper.height()); - Popup.close(); - }, - stop: function() { - self.$('.js-lists').find('.js-list:not(.js-list-composer)').each( - function(i, list) { - var data = Blaze.getData(list); - Lists.update(data._id, { - $set: { - sort: i - } - }); - } - ); - } - }); - - // Disable drag-dropping while in multi-selection mode - self.autorun(function() { - self.$(lists).sortable('option', 'disabled', MultiSelection.isActive()); - }); - - // If there is no data in the board (ie, no lists) we autofocus the list - // creation form by clicking on the corresponding element. - var currentBoard = Boards.findOne(Session.get('currentBoard')); - if (currentBoard.lists().count() === 0) { - this.openNewListForm(); - } - }, - sidebarSize: function() { var sidebar = this.componentChildren('sidebar')[0]; if (sidebar && sidebar.isOpen()) @@ -130,6 +71,72 @@ BlazeComponent.extendComponent({ } }).register('board'); +Template.boardBody.onRendered(function() { + var self = BlazeComponent.getComponentForElement(this.firstNode); + + self.scrollLeft(); + + var lists = this.find('.js-lists'); + + // We want to animate the card details window closing. We rely on CSS + // transition for the actual animation. + lists._uihooks = { + removeElement: function(node) { + var removeNode = _.once(function() { + node.parentNode.removeChild(node); + }); + if ($(node).hasClass('js-card-details')) { + $(node).css({ + flexBasis: 0, + padding: 0 + }); + $(lists).one(CSSEvents.transitionend, removeNode); + } else { + removeNode(); + } + } + }; + + if (! Meteor.user() || ! Meteor.user().isBoardMember()) + return; + + self.$(lists).sortable({ + tolerance: 'pointer', + helper: 'clone', + items: '.js-list:not(.js-list-composer)', + placeholder: 'list placeholder', + distance: 7, + start: function(evt, ui) { + ui.placeholder.height(ui.helper.height()); + Popup.close(); + }, + stop: function() { + self.$('.js-lists').find('.js-list:not(.js-list-composer)').each( + function(i, list) { + var data = Blaze.getData(list); + Lists.update(data._id, { + $set: { + sort: i + } + }); + } + ); + } + }); + + // Disable drag-dropping while in multi-selection mode + self.autorun(function() { + self.$(lists).sortable('option', 'disabled', MultiSelection.isActive()); + }); + + // If there is no data in the board (ie, no lists) we autofocus the list + // creation form by clicking on the corresponding element. + var currentBoard = Boards.findOne(Session.get('currentBoard')); + if (currentBoard.lists().count() === 0) { + self.openNewListForm(); + } +}); + BlazeComponent.extendComponent({ template: function() { return 'addListForm'; |