From 9c2a3213eb47956aaf116209d070ccac5dcddca6 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Sat, 23 May 2015 19:57:47 +0200 Subject: Fix tab navigation in the form to add a new card --- client/components/lists/body.jade | 4 +-- client/components/lists/body.js | 73 +++++++++++++++++++++++++++------------ client/components/lists/main.js | 13 ++----- client/components/lists/menu.js | 6 ++-- 4 files changed, 57 insertions(+), 39 deletions(-) (limited to 'client') diff --git a/client/components/lists/body.jade b/client/components/lists/body.jade index 0e8efeeb..311e74cc 100644 --- a/client/components/lists/body.jade +++ b/client/components/lists/body.jade @@ -2,7 +2,7 @@ template(name="listBody") .minicards.clearfix.js-minicards if cards.count +inlinedForm(autoclose=false position="top") - +addCardForm + +addCardForm(listId=_id position="top") each cards .minicard.card.js-minicard.js-member-droppable( class="{{#if isSelected}}is-selected{{/if}}") @@ -32,7 +32,7 @@ template(name="listBody") span.badge-text= attachments.count if currentUser.isBoardMember +inlinedForm(autoclose=false position="bottom") - +addCardForm + +addCardForm(listId=_id position="bottom") else a.open-card-composer.js-open-inlined-form i.fa.fa-plus diff --git a/client/components/lists/body.js b/client/components/lists/body.js index 31e43160..1cbcf8f2 100644 --- a/client/components/lists/body.js +++ b/client/components/lists/body.js @@ -7,11 +7,25 @@ BlazeComponent.extendComponent({ return Session.equals('currentCard', this.currentData()._id); }, + openForm: function(options) { + options = options || {}; + options.position = options.position || 'top'; + + var forms = this.componentChildren('inlinedForm'); + var form = _.find(forms, function(component) { + return component.data().position === options.position; + }); + if (! form && forms.length > 0) { + form = forms[0]; + } + form.open(); + }, + addCard: function(evt) { evt.preventDefault(); var textarea = $(evt.currentTarget).find('textarea'); var title = textarea.val(); - var position = this.currentData().position; + var position = Blaze.getData(evt.currentTarget).position; var sortIndex; if (position === 'top') { sortIndex = Utils.getSortIndex(null, this.find('.js-minicard:first')); @@ -46,29 +60,44 @@ BlazeComponent.extendComponent({ events: function() { return [{ - submit: this.addCard, - 'keydown form textarea': function(evt) { - // Pressing Enter should submit the card - if (evt.keyCode === 13) { - evt.preventDefault(); - $(evt.currentTarget).parents('form:first').submit(); + submit: this.addCard + }]; + } +}).register('listBody'); - // Pressing Tab should open the form of the next column, and Maj+Tab go - // in the reverse order - } else if (evt.keyCode === 9) { - evt.preventDefault(); - var isReverse = evt.shiftKey; - var list = $('#js-list-' + this.data()._id); - var nextList = list[isReverse ? 'prev' : 'next']('.js-list').get(0) || - $('.js-list:' + (isReverse ? 'last' : 'first')).get(0); - var nextListComponent = - BlazeComponent.getComponentForElement(nextList); +BlazeComponent.extendComponent({ + template: function() { + return 'addCardForm'; + }, - // XXX Get the real position - var position = 'bottom'; - nextListComponent.openForm({position: position}); - } + pressKey: function(evt) { + // Pressing Enter should submit the card + if (evt.keyCode === 13) { + evt.preventDefault(); + $(evt.currentTarget).parents('form:first').submit(); + + // Pressing Tab should open the form of the next column, and Maj+Tab go + // 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-add-list)'; + var nextList = list[isReverse ? 'prev' : 'next'](listSelector).get(0); + // If there isn't no next list, loop back to the beginning. + if (! nextList) { + nextList = $(listSelector + (isReverse ? ':last' : ':first')).get(0); } + + BlazeComponent.getComponentForElement(nextList).openForm({ + position:this.data().position + }); + } + }, + + events: function() { + return [{ + keydown: this.pressKey }]; } -}).register('listBody'); +}).register('addCardForm'); diff --git a/client/components/lists/main.js b/client/components/lists/main.js index 243779b3..748b94d5 100644 --- a/client/components/lists/main.js +++ b/client/components/lists/main.js @@ -3,18 +3,9 @@ BlazeComponent.extendComponent({ return 'list'; }, + // Proxy openForm: function(options) { - options = options || {}; - options.position = options.position || 'top'; - - var listComponent = this.componentChildren('listBody')[0]; - var forms = listComponent.componentChildren('inlinedForm'); - - if (options.position === 'top') { - forms[0].open(); - } else { - forms[forms.length - 1].open(); - } + this.componentChildren('listBody')[0].openForm(options); }, // XXX The jQuery UI sortable plugin is far from ideal here. First we include diff --git a/client/components/lists/menu.js b/client/components/lists/menu.js index 1e1eb53f..f2abd3bf 100644 --- a/client/components/lists/menu.js +++ b/client/components/lists/menu.js @@ -1,10 +1,8 @@ Template.listActionPopup.events({ 'click .js-add-card': function() { - // XXX We need a better API and architecture here. See - // https://github.com/peerlibrary/meteor-blaze-components/issues/19 var listDom = document.getElementById('js-list-' + this._id); - var listInstance = Blaze.getView(listDom).templateInstance(); - listInstance.get('component').openForm(); + var listComponent = BlazeComponent.getComponentForElement(listDom); + listComponent.openForm({ position: 'top' }); Popup.close(); }, 'click .js-list-subscribe': function() {}, -- cgit v1.2.3-1-g7c22