diff options
| -rw-r--r-- | client/components/boards/boardBody.js | 3 | ||||
| -rw-r--r-- | client/components/lists/list.js | 81 | ||||
| -rw-r--r-- | client/components/swimlanes/swimlanes.jade | 4 | ||||
| -rw-r--r-- | client/components/swimlanes/swimlanes.js | 80 |
4 files changed, 82 insertions, 86 deletions
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index a068dd04..94f9af39 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -1,6 +1,9 @@ const subManager = new SubsManager(); BlazeComponent.extendComponent({ + openNewListForm() { + this.childComponents('addListForm')[0].open(); + }, onCreated() { this.draggingActive = new ReactiveVar(false); this.showOverlay = new ReactiveVar(false); diff --git a/client/components/lists/list.js b/client/components/lists/list.js index e922a3fd..51a9a0de 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -19,6 +19,83 @@ BlazeComponent.extendComponent({ // comment below provides further details. onRendered() { const boardComponent = this.parentComponent().parentComponent(); + const $listsDom = boardComponent.$('.js-lists'); + + if (!Session.get('currentCard')) { + boardComponent.scrollLeft(); + } + + // We want to animate the card details window closing. We rely on CSS + // transition for the actual animation. + $listsDom._uihooks = { + removeElement(node) { + const removeNode = _.once(() => { + node.parentNode.removeChild(node); + }); + if ($(node).hasClass('js-card-details')) { + $(node).css({ + flexBasis: 0, + padding: 0, + }); + $listsDom.one(CSSEvents.transitionend, removeNode); + } else { + removeNode(); + } + }, + }; + + $listsDom.sortable({ + tolerance: 'pointer', + helper: 'clone', + handle: '.js-list-header', + items: '.js-list:not(.js-list-composer)', + placeholder: 'list placeholder', + distance: 7, + start(evt, ui) { + ui.placeholder.height(ui.helper.height()); + EscapeActions.executeUpTo('popup-close'); + boardComponent.setIsDragging(true); + }, + stop(evt, ui) { + // To attribute the new index number, we need to get the DOM element + // of the previous and the following card -- if any. + const prevListDom = ui.item.prev('.js-list').get(0); + const nextListDom = ui.item.next('.js-list').get(0); + const sortIndex = calculateIndex(prevListDom, nextListDom, 1); + + $listsDom.sortable('cancel'); + const listDomElement = ui.item.get(0); + const list = Blaze.getData(listDomElement); + + Lists.update(list._id, { + $set: { + sort: sortIndex.base, + }, + }); + }, + }); + + function userIsMember() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + } + + // Disable drag-dropping while in multi-selection mode, or if the current user + // is not a board member + boardComponent.autorun(() => { + const $listDom = $listsDom; + if ($listDom.data('sortable')) { + $listsDom.sortable('option', 'disabled', + MultiSelection.isActive() || !userIsMember()); + } + }); + + // If there is no data in the board (ie, no lists) we autofocus the list + // creation form by clicking on the corresponding element. + const currentBoard = Boards.findOne(Session.get('currentBoard')); + if (userIsMember() && currentBoard.lists().count() === 0) { + boardComponent.openNewListForm(); + } + const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)'; const $cards = this.$('.js-minicards'); $cards.sortable({ @@ -79,10 +156,6 @@ BlazeComponent.extendComponent({ }, }); - function userIsMember() { - return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); - } - // Disable drag-dropping if the current user is not a board member or is comment only this.autorun(() => { $cards.sortable('option', 'disabled', !userIsMember()); diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade index 8c96dfba..0c3fc5de 100644 --- a/client/components/swimlanes/swimlanes.jade +++ b/client/components/swimlanes/swimlanes.jade @@ -36,7 +36,7 @@ template(name="listsGroup") +addListForm template(name="addListAndSwimlaneForm") - .list.js-list.list-composer.js-list-composer + .list.list-composer.js-list-composer .list-header +inlinedForm(autoclose=false) input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}" @@ -61,7 +61,7 @@ template(name="addListAndSwimlaneForm") | {{_ 'add-swimlane'}} template(name="addListForm") - .list.js-list.list-composer.js-list-composer + .list.list-composer.js-list-composer .list-header +inlinedForm(autoclose=false) input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}" diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index 9c3435d6..c121a222 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -29,7 +29,6 @@ BlazeComponent.extendComponent({ const swimlaneDomElement = ui.item.get(0); const swimlane = Blaze.getData(swimlaneDomElement); - console.log(swimlane._id); Swimlanes.update(swimlane._id, { $set: { sort: sortIndex.base, @@ -45,10 +44,6 @@ BlazeComponent.extendComponent({ this._lastDragPositionX = 0; }, - openNewListForm() { - this.childComponents('addListForm')[0].open(); - }, - id() { return this._id; }, @@ -117,81 +112,6 @@ BlazeComponent.extendComponent({ }, }).register('swimlane'); -Template.swimlane.onRendered(function() { - const self = BlazeComponent.getComponentForElement(this.firstNode); - - self.listsDom = this.find('.js-lists'); - - if (!Session.get('currentCard')) { - self.scrollLeft(); - } - - // We want to animate the card details window closing. We rely on CSS - // transition for the actual animation. - self.listsDom._uihooks = { - removeElement(node) { - const removeNode = _.once(() => { - node.parentNode.removeChild(node); - }); - if ($(node).hasClass('js-card-details')) { - $(node).css({ - flexBasis: 0, - padding: 0, - }); - $(self.listsDom).one(CSSEvents.transitionend, removeNode); - } else { - removeNode(); - } - }, - }; - - $(self.listsDom).sortable({ - tolerance: 'pointer', - helper: 'clone', - handle: '.js-list-header', - items: '.js-list:not(.js-list-composer)', - placeholder: 'list placeholder', - distance: 7, - start(evt, ui) { - ui.placeholder.height(ui.helper.height()); - Popup.close(); - }, - stop() { - $(self.listsDom).find('.js-list:not(.js-list-composer)').each( - (i, list) => { - const data = Blaze.getData(list); - Lists.update(data._id, { - $set: { - sort: i, - }, - }); - } - ); - }, - }); - - function userIsMember() { - return Meteor.user() && Meteor.user().isBoardMember(); - } - - // Disable drag-dropping while in multi-selection mode, or if the current user - // is not a board member - self.autorun(() => { - const $listDom = $(self.listsDom); - if ($listDom.data('sortable')) { - $(self.listsDom).sortable('option', 'disabled', - MultiSelection.isActive() || !userIsMember()); - } - }); - - // If there is no data in the board (ie, no lists) we autofocus the list - // creation form by clicking on the corresponding element. - const currentBoard = Boards.findOne(Session.get('currentBoard')); - if (userIsMember() && currentBoard.lists().count() === 0) { - self.openNewListForm(); - } -}); - BlazeComponent.extendComponent({ // Proxy open() { |