Fix tab navigation in the form to add a new card

This commit is contained in:
Maxime Quandalle 2015-05-23 19:57:47 +02:00
parent 6ef9c7e95f
commit 9c2a3213eb
4 changed files with 59 additions and 41 deletions

View file

@ -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();
// 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);
// XXX Get the real position
var position = 'bottom';
nextListComponent.openForm({position: position});
}
}
submit: this.addCard
}];
}
}).register('listBody');
BlazeComponent.extendComponent({
template: function() {
return 'addCardForm';
},
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('addCardForm');