Finish the minicard editor auto-completion feature

This commit stands on the initial support implemented in #342. We now
avoid error-prone parsing step by adding the member or the label
directly to the card object.

We also added support for `Tab` to completion on our textComplete
component.

Closes #342
This commit is contained in:
Maxime Quandalle 2015-10-31 09:26:55 -07:00
parent 2b134ff7a9
commit 5d77ad4f6b
8 changed files with 118 additions and 97 deletions

View file

@ -3,8 +3,23 @@
// of the vanilla `textcomplete`.
let dropdownMenuIsOpened = false;
$.fn.escapeableTextComplete = function(...args) {
this.textcomplete(...args);
$.fn.escapeableTextComplete = function(strategies, options, ...otherArgs) {
// When the autocomplete menu is shown we want both a press of both `Tab`
// or `Enter` to validation the auto-completion. We also need to stop the
// event propagation to prevent EscapeActions side effect, for instance the
// minicard submission (on `Enter`) or going on the next column (on `Tab`).
options = {
onKeydown(evt, commands) {
if (evt.keyCode === 9 || evt.keyCode === 13) {
evt.stopPropagation();
return commands.KEY_ENTER;
}
},
...options,
};
// Proxy to the vanilla jQuery component
this.textcomplete(strategies, options, ...otherArgs);
// Since commit d474017 jquery-textComplete automatically closes a potential
// opened dropdown menu when the user press Escape. This behavior conflicts
@ -18,7 +33,14 @@ $.fn.escapeableTextComplete = function(...args) {
},
'textComplete:hide'() {
Tracker.afterFlush(() => {
dropdownMenuIsOpened = false;
// XXX Hack. We unfortunately need to set a setTimeout here to make the
// `noClickEscapeOn` work bellow, otherwise clicking on a autocomplete
// item will close both the autocomplete menu (as expected) but also the
// next item in the stack (for example the minicard editor) which we
// don't want.
setTimeout(() => {
dropdownMenuIsOpened = false;
}, 100);
});
},
});
@ -26,5 +48,7 @@ $.fn.escapeableTextComplete = function(...args) {
EscapeActions.register('textcomplete',
() => {},
() => dropdownMenuIsOpened
() => dropdownMenuIsOpened, {
noClickEscapeOn: '.textcomplete-dropdown',
}
);