From 8bbc69616f91e9d09302d8a00f845b74e37d535f Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Tue, 13 Oct 2015 18:36:58 +0200 Subject: Abstract the jquery-textcomplete integration with EscapeActions We now can re-use this integration in multiple places, this will be useful for #342 for instance. --- .meteor/versions | 2 +- client/components/main/editor.js | 26 +------------------------- client/lib/textComplete.js | 30 ++++++++++++++++++++++++++++++ 3 files changed, 32 insertions(+), 26 deletions(-) create mode 100644 client/lib/textComplete.js diff --git a/.meteor/versions b/.meteor/versions index 672a85e8..f9e968c1 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -89,7 +89,7 @@ mquandalle:autofocus@1.0.0 mquandalle:collection-mutations@0.1.0 mquandalle:jade@0.4.3_1 mquandalle:jade-compiler@0.4.3 -mquandalle:jquery-textcomplete@0.3.9_1 +mquandalle:jquery-textcomplete@0.8.0_1 mquandalle:jquery-ui-drag-drop-sort@0.1.0 mquandalle:moment@1.0.0 mquandalle:mousetrap-bindglobal@0.0.1 diff --git a/client/components/main/editor.js b/client/components/main/editor.js index 1d88fe74..67b65bec 100644 --- a/client/components/main/editor.js +++ b/client/components/main/editor.js @@ -1,11 +1,9 @@ -let dropdownMenuIsOpened = false; - Template.editor.onRendered(() => { const $textarea = this.$('textarea'); autosize($textarea); - $textarea.textcomplete([ + $textarea.escapeableTextComplete([ // Emojies { match: /\B:([\-+\w]*)$/, @@ -44,30 +42,8 @@ Template.editor.onRendered(() => { index: 1, }, ]); - - // Since commit d474017 jquery-textComplete automatically closes a potential - // opened dropdown menu when the user press Escape. This behavior conflicts - // with our EscapeActions system, but it's too complicated and hacky to - // monkey-pach textComplete to disable it -- I tried. Instead we listen to - // 'open' and 'hide' events, and create a ghost escapeAction when the dropdown - // is opened (and rely on textComplete to execute the actual action). - $textarea.on({ - 'textComplete:show'() { - dropdownMenuIsOpened = true; - }, - 'textComplete:hide'() { - Tracker.afterFlush(() => { - dropdownMenuIsOpened = false; - }); - }, - }); }); -EscapeActions.register('textcomplete', - () => {}, - () => dropdownMenuIsOpened -); - // XXX I believe we should compute a HTML rendered field on the server that // would handle markdown, emojies and user mentions. We can simply have two // fields, one source, and one compiled version (in HTML) and send only the diff --git a/client/lib/textComplete.js b/client/lib/textComplete.js new file mode 100644 index 00000000..e50d7cbc --- /dev/null +++ b/client/lib/textComplete.js @@ -0,0 +1,30 @@ +// We “inherit” the jquery-textcomplete plugin to integrate with our +// EscapeActions system. You should always use `escapeableTextComplete` instead +// of the vanilla `textcomplete`. +let dropdownMenuIsOpened = false; + +$.fn.escapeableTextComplete = function(...args) { + this.textcomplete(...args); + + // Since commit d474017 jquery-textComplete automatically closes a potential + // opened dropdown menu when the user press Escape. This behavior conflicts + // with our EscapeActions system, but it's too complicated and hacky to + // monkey-pach textComplete to disable it -- I tried. Instead we listen to + // 'open' and 'hide' events, and create a ghost escapeAction when the dropdown + // is opened (and rely on textComplete to execute the actual action). + this.on({ + 'textComplete:show'() { + dropdownMenuIsOpened = true; + }, + 'textComplete:hide'() { + Tracker.afterFlush(() => { + dropdownMenuIsOpened = false; + }); + }, + }); +}; + +EscapeActions.register('textcomplete', + () => {}, + () => dropdownMenuIsOpened +); -- cgit v1.2.3-1-g7c22