diff options
Diffstat (limited to 'client/components/lists')
| -rw-r--r-- | client/components/lists/list.js | 83 | ||||
| -rw-r--r-- | client/components/lists/listBody.js | 80 | ||||
| -rw-r--r-- | client/components/lists/listHeader.js | 62 |
3 files changed, 113 insertions, 112 deletions
diff --git a/client/components/lists/list.js b/client/components/lists/list.js index 3b602f43..1b54741c 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -1,14 +1,16 @@ +const { calculateIndex } = Utils; + BlazeComponent.extendComponent({ - template: function() { + template() { return 'list'; }, - // Proxies - openForm: function(options) { + // Proxy + openForm(options) { this.componentChildren('listBody')[0].openForm(options); }, - onCreated: function() { + onCreated() { this.newCardFormIsVisible = new ReactiveVar(true); }, @@ -19,28 +21,27 @@ BlazeComponent.extendComponent({ // By calling asking the sortable library to cancel its move on the `stop` // callback, we basically solve all issues related to reactive updates. A // comment below provides further details. - onRendered: function() { - var self = this; - if (! Meteor.user() || ! Meteor.user().isBoardMember()) + onRendered() { + if (!Meteor.user() || !Meteor.user().isBoardMember()) return; - var boardComponent = self.componentParent(); - var itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)'; - var $cards = self.$('.js-minicards'); + const boardComponent = this.componentParent(); + const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)'; + const $cards = this.$('.js-minicards'); $cards.sortable({ connectWith: '.js-minicards', tolerance: 'pointer', appendTo: 'body', - helper: function(evt, item) { - var helper = item.clone(); + helper(evt, item) { + const helper = item.clone(); if (MultiSelection.isActive()) { - var andNOthers = $cards.find('.js-minicard.is-checked').length - 1; + const andNOthers = $cards.find('.js-minicard.is-checked').length - 1; if (andNOthers > 0) { helper.append($(Blaze.toHTML(HTML.DIV( // XXX Super bad class name {'class': 'and-n-other'}, // XXX Need to translate - 'and ' + andNOthers + ' other cards.' + `and ${andNOthers} other cards.` )))); } } @@ -50,19 +51,19 @@ BlazeComponent.extendComponent({ items: itemsSelector, scroll: false, placeholder: 'minicard-wrapper placeholder', - start: function(evt, ui) { + start(evt, ui) { ui.placeholder.height(ui.helper.height()); EscapeActions.executeUpTo('popup'); boardComponent.setIsDragging(true); }, - stop: function(evt, ui) { + 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. - var prevCardDom = ui.item.prev('.js-minicard').get(0); - var nextCardDom = ui.item.next('.js-minicard').get(0); - var nCards = MultiSelection.isActive() ? MultiSelection.count() : 1; - var sortIndex = Utils.calculateIndex(prevCardDom, nextCardDom, nCards); - var listId = Blaze.getData(ui.item.parents('.list').get(0))._id; + const prevCardDom = ui.item.prev('.js-minicard').get(0); + const nextCardDom = ui.item.next('.js-minicard').get(0); + const nCards = MultiSelection.isActive() ? MultiSelection.count() : 1; + const sortIndex = calculateIndex(prevCardDom, nextCardDom, nCards); + const listId = Blaze.getData(ui.item.parents('.list').get(0))._id; // Normally the jquery-ui sortable library moves the dragged DOM element // to its new position, which disrupts Blaze reactive updates mechanism @@ -74,53 +75,53 @@ BlazeComponent.extendComponent({ $cards.sortable('cancel'); if (MultiSelection.isActive()) { - Cards.find(MultiSelection.getMongoSelector()).forEach(function(c, i) { + Cards.find(MultiSelection.getMongoSelector()).forEach((c, i) => { Cards.update(c._id, { $set: { - listId: listId, - sort: sortIndex.base + i * sortIndex.increment - } + listId, + sort: sortIndex.base + i * sortIndex.increment, + }, }); }); } else { - var cardDomElement = ui.item.get(0); - var cardId = Blaze.getData(cardDomElement)._id; + const cardDomElement = ui.item.get(0); + const cardId = Blaze.getData(cardDomElement)._id; Cards.update(cardId, { $set: { - listId: listId, - sort: sortIndex.base - } + listId, + sort: sortIndex.base, + }, }); } boardComponent.setIsDragging(false); - } + }, }); // We want to re-run this function any time a card is added. - self.autorun(function() { - var currentBoardId = Tracker.nonreactive(function() { + this.autorun(() => { + const currentBoardId = Tracker.nonreactive(() => { return Session.get('currentBoard'); }); Cards.find({ boardId: currentBoardId }).fetch(); - Tracker.afterFlush(function() { + Tracker.afterFlush(() => { $cards.find(itemsSelector).droppable({ hoverClass: 'draggable-hover-card', accept: '.js-member,.js-label', - drop: function(event, ui) { - var cardId = Blaze.getData(this)._id; - var addToSet; + drop(event, ui) { + const cardId = Blaze.getData(this)._id; + let addToSet; if (ui.draggable.hasClass('js-member')) { - var memberId = Blaze.getData(ui.draggable.get(0)).userId; + const memberId = Blaze.getData(ui.draggable.get(0)).userId; addToSet = { members: memberId }; } else { - var labelId = Blaze.getData(ui.draggable.get(0))._id; + const labelId = Blaze.getData(ui.draggable.get(0))._id; addToSet = { labelIds: labelId }; } Cards.update(cardId, { $addToSet: addToSet }); - } + }, }); }); }); - } + }, }).register('list'); diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index 2b561ae3..cc8c94cc 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -1,46 +1,46 @@ BlazeComponent.extendComponent({ - template: function() { + template() { return 'listBody'; }, - mixins: function() { + mixins() { return [Mixins.PerfectScrollbar]; }, - openForm: function(options) { + openForm(options) { options = options || {}; options.position = options.position || 'top'; - var forms = this.componentChildren('inlinedForm'); - var form = _.find(forms, function(component) { + const forms = this.componentChildren('inlinedForm'); + let form = _.find(forms, (component) => { return component.data().position === options.position; }); - if (! form && forms.length > 0) { + if (!form && forms.length > 0) { form = forms[0]; } form.open(); }, - addCard: function(evt) { + addCard(evt) { evt.preventDefault(); - var textarea = $(evt.currentTarget).find('textarea'); - var title = textarea.val(); - var position = Blaze.getData(evt.currentTarget).position; - var sortIndex; - var firstCard = this.find('.js-minicard:first'); - var lastCard = this.find('.js-minicard:last'); + const firstCardDom = this.find('.js-minicard:first'); + const lastCardDom = this.find('.js-minicard:last'); + const textarea = $(evt.currentTarget).find('textarea'); + const title = textarea.val(); + const position = Blaze.getData(evt.currentTarget).position; + let sortIndex; if (position === 'top') { - sortIndex = Utils.calculateIndex(null, firstCard).base; + sortIndex = Utils.calculateIndex(null, firstCardDom).base; } else if (position === 'bottom') { - sortIndex = Utils.calculateIndex(lastCard, null).base; + sortIndex = Utils.calculateIndex(lastCardDom, null).base; } if ($.trim(title)) { - var _id = Cards.insert({ - title: title, + const _id = Cards.insert({ + title, listId: this.data()._id, boardId: this.data().board()._id, - sort: sortIndex + sort: sortIndex, }); // In case the filter is active we need to add the newly inserted card in // the list of exceptions -- cards that are not filtered. Otherwise the @@ -56,18 +56,18 @@ BlazeComponent.extendComponent({ } }, - scrollToBottom: function() { - var container = this.firstNode(); + scrollToBottom() { + const container = this.firstNode(); $(container).animate({ - scrollTop: container.scrollHeight + scrollTop: container.scrollHeight, }); }, - clickOnMiniCard: function(evt) { + clickOnMiniCard(evt) { if (MultiSelection.isActive() || evt.shiftKey) { evt.stopImmediatePropagation(); evt.preventDefault(); - var methodName = evt.shiftKey ? 'toogleRange' : 'toogle'; + const methodName = evt.shiftKey ? 'toogleRange' : 'toogle'; MultiSelection[methodName](this.currentData()._id); // If the card is already selected, we want to de-select it. @@ -80,36 +80,36 @@ BlazeComponent.extendComponent({ } }, - cardIsSelected: function() { + cardIsSelected() { return Session.equals('currentCard', this.currentData()._id); }, - toggleMultiSelection: function(evt) { + toggleMultiSelection(evt) { evt.stopPropagation(); evt.preventDefault(); MultiSelection.toogle(this.currentData()._id); }, - events: function() { + events() { return [{ 'click .js-minicard': this.clickOnMiniCard, 'click .js-toggle-multi-selection': this.toggleMultiSelection, 'click .open-minicard-composer': this.scrollToBottom, - submit: this.addCard + submit: this.addCard, }]; - } + }, }).register('listBody'); BlazeComponent.extendComponent({ - template: function() { + template() { return 'addCardForm'; }, - pressKey: function(evt) { + pressKey(evt) { // Pressing Enter should submit the card if (evt.keyCode === 13) { evt.preventDefault(); - var $form = $(evt.currentTarget).closest('form'); + const $form = $(evt.currentTarget).closest('form'); // XXX For some reason $form.submit() does not work (it's probably a bug // of blaze-component related to the fact that the submit event is non- // bubbling). This is why we click on the submit button instead -- which @@ -120,24 +120,24 @@ BlazeComponent.extendComponent({ // in the reverse order } else if (evt.keyCode === 9) { evt.preventDefault(); - var isReverse = evt.shiftKey; - var list = $('#js-list-' + this.data().listId); - var listSelector = '.js-list:not(.js-list-composer)'; - var nextList = list[isReverse ? 'prev' : 'next'](listSelector).get(0); + const isReverse = evt.shiftKey; + const list = $(`#js-list-${this.data().listId}`); + const listSelector = '.js-list:not(.js-list-composer)'; + let nextList = list[isReverse ? 'prev' : 'next'](listSelector).get(0); // If there is no next list, loop back to the beginning. - if (! nextList) { + if (!nextList) { nextList = $(listSelector + (isReverse ? ':last' : ':first')).get(0); } BlazeComponent.getComponentForElement(nextList).openForm({ - position:this.data().position + position:this.data().position, }); } }, - events: function() { + events() { return [{ - keydown: this.pressKey + keydown: this.pressKey, }]; - } + }, }).register('addCardForm'); diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js index cd4df276..9431b461 100644 --- a/client/components/lists/listHeader.js +++ b/client/components/lists/listHeader.js @@ -1,78 +1,78 @@ BlazeComponent.extendComponent({ - template: function() { + template() { return 'listHeader'; }, - editTitle: function(evt) { + editTitle(evt) { evt.preventDefault(); - var form = this.componentChildren('inlinedForm')[0]; - var newTitle = form.getValue(); + const form = this.componentChildren('inlinedForm')[0]; + const newTitle = form.getValue(); if ($.trim(newTitle)) { Lists.update(this.currentData()._id, { $set: { - title: newTitle - } + title: newTitle, + }, }); } }, - events: function() { + events() { return [{ 'click .js-open-list-menu': Popup.open('listAction'), - submit: this.editTitle + submit: this.editTitle, }]; - } + }, }).register('listHeader'); Template.listActionPopup.events({ - 'click .js-add-card': function() { - var listDom = document.getElementById('js-list-' + this._id); - var listComponent = BlazeComponent.getComponentForElement(listDom); + 'click .js-add-card'() { + const listDom = document.getElementById(`js-list-${this._id}`); + const listComponent = BlazeComponent.getComponentForElement(listDom); listComponent.openForm({ position: 'top' }); Popup.close(); }, - 'click .js-list-subscribe': function() {}, - 'click .js-select-cards': function() { - var cardIds = Cards.find( + 'click .js-list-subscribe'() {}, + 'click .js-select-cards'() { + const cardIds = Cards.find( {listId: this._id}, {fields: { _id: 1 }} - ).map(function(card) { return card._id; }); + ).map((card) => card._id); MultiSelection.add(cardIds); Popup.close(); }, 'click .js-move-cards': Popup.open('listMoveCards'), - 'click .js-archive-cards': Popup.afterConfirm('listArchiveCards', function() { - Cards.find({listId: this._id}).forEach(function(card) { + 'click .js-archive-cards': Popup.afterConfirm('listArchiveCards', () => { + Cards.find({listId: this._id}).forEach((card) => { Cards.update(card._id, { $set: { - archived: true - } + archived: true, + }, }); }); Popup.close(); }), - 'click .js-close-list': function(evt) { + 'click .js-close-list'(evt) { evt.preventDefault(); Lists.update(this._id, { $set: { - archived: true - } + archived: true, + }, }); Popup.close(); - } + }, }); Template.listMoveCardsPopup.events({ - 'click .js-select-list': function() { - var fromList = Template.parentData(2).data._id; - var toList = this._id; - Cards.find({listId: fromList}).forEach(function(card) { + 'click .js-select-list'() { + const fromList = Template.parentData(2).data._id; + const toList = this._id; + Cards.find({ listId: fromList }).forEach((card) => { Cards.update(card._id, { $set: { - listId: toList - } + listId: toList, + }, }); }); Popup.close(); - } + }, }); |