Commit f8e31a7b authored by JC Brand's avatar JC Brand

Update converse-autocomplete to make it more flexible

* Accepts other triggers besides tab or @
* More finegrained control over whether the triggering char is
  included in the returned value or not.
parent 3aa9ee1b
......@@ -47944,6 +47944,9 @@ const _converse$env = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_
_ = _converse$env._,
Backbone = _converse$env.Backbone,
u = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].env.utils;
const KEYCODES_MAP = {
'@': 50
};
_converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins.add("converse-autocomplete", {
initialize() {
const _converse = this._converse;
......@@ -48002,14 +48005,15 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
_.assignIn(this, {
'match_current_word': false,
// Match only the current word, otherwise all input is matched
'match_on_tab': false,
// Whether matching should only start when tab's pressed
'trigger_on_at': false,
// Whether @ should trigger autocomplete
'trigger_keycodes': [],
// Array of keycodes that will trigger auto-complete
'include_triggers': [],
// Array of trigger keycodes which should be included in the returned value
'min_chars': 2,
'max_items': 10,
'auto_evaluate': true,
'auto_first': false,
// Should the first element be automatically selected?
'data': _.identity,
'filter': _converse.FILTER_CONTAINS,
'sort': config.sort === false ? false : SORT_BYLENGTH,
......@@ -48241,10 +48245,11 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
return;
}
if (this.match_on_tab && ev.keyCode === _converse.keycodes.TAB) {
ev.preventDefault();
this.auto_completing = true;
} else if (this.trigger_on_at && ev.keyCode === _converse.keycodes.AT) {
if (this.trigger_keycodes.includes(ev.keyCode)) {
if (ev.keyCode === _converse.keycodes.TAB) {
ev.preventDefault();
}
this.auto_completing = true;
}
}
......@@ -48265,7 +48270,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
let value = this.match_current_word ? u.getCurrentWord(this.input) : this.input.value;
let ignore_min_chars = false;
if (this.trigger_on_at && value.startsWith('@')) {
if (this.trigger_keycodes.includes(KEYCODES_MAP[value[0]]) && !this.include_triggers.includes(ev.keyCode)) {
ignore_min_chars = true;
value = value.slice('1');
}
......@@ -53976,7 +53981,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
this.renderHeading();
this.renderChatArea();
this.renderMessageForm();
this.initAutoComplete();
this.initMentionAutoComplete();
if (this.model.get('connection_status') !== _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].ROOMSTATUS.ENTERED) {
this.showSpinner();
......@@ -54006,19 +54011,19 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
return this;
},
initAutoComplete() {
initMentionAutoComplete() {
this.auto_complete = new _converse.AutoComplete(this.el, {
'auto_first': true,
'auto_evaluate': false,
'min_chars': 1,
'match_current_word': true,
'match_on_tab': true,
'list': () => this.model.occupants.map(o => ({
'label': o.getDisplayName(),
'value': `@${o.getDisplayName()}`
})),
'filter': _converse.FILTER_STARTSWITH,
'trigger_on_at': true
'trigger_keycodes': [_converse.keycodes.AT, _converse.keycodes.TAB],
'include_triggers': []
});
this.auto_complete.on('suggestion-box-selectcomplete', () => this.auto_completing = false);
},
......@@ -13,6 +13,9 @@ import converse from "@converse/headless/converse-core";
const { _, Backbone } = converse.env,
u = converse.env.utils;
const KEYCODES_MAP = {
'@': 50
}
converse.plugins.add("converse-autocomplete", {
......@@ -73,12 +76,12 @@ converse.plugins.add("converse-autocomplete", {
_.assignIn(this, {
'match_current_word': false, // Match only the current word, otherwise all input is matched
'match_on_tab': false, // Whether matching should only start when tab's pressed
'trigger_on_at': false, // Whether @ should trigger autocomplete
'trigger_keycodes': [], // Array of keycodes that will trigger auto-complete
'include_triggers': [], // Array of trigger keycodes which should be included in the returned value
'min_chars': 2,
'max_items': 10,
'auto_evaluate': true,
'auto_first': false,
'auto_first': false, // Should the first element be automatically selected?
'data': _.identity,
'filter': _converse.FILTER_CONTAINS,
'sort': config.sort === false ? false : SORT_BYLENGTH,
......@@ -291,10 +294,11 @@ converse.plugins.add("converse-autocomplete", {
, ev.keyCode)) {
return;
}
if (this.match_on_tab && ev.keyCode === _converse.keycodes.TAB) {
ev.preventDefault();
this.auto_completing = true;
} else if (this.trigger_on_at && ev.keyCode === _converse.keycodes.AT) {
if (this.trigger_keycodes.includes(ev.keyCode)) {
if (ev.keyCode === _converse.keycodes.TAB) {
ev.preventDefault();
}
this.auto_completing = true;
}
}
......@@ -316,7 +320,7 @@ converse.plugins.add("converse-autocomplete", {
let value = this.match_current_word ? u.getCurrentWord(this.input) : this.input.value;
let ignore_min_chars = false;
if (this.trigger_on_at && value.startsWith('@')) {
if (this.trigger_keycodes.includes(KEYCODES_MAP[value[0]]) && !this.include_triggers.includes(ev.keyCode)) {
ignore_min_chars = true;
value = value.slice('1');
}
......
......@@ -560,7 +560,7 @@ converse.plugins.add('converse-muc-views', {
this.renderHeading();
this.renderChatArea();
this.renderMessageForm();
this.initAutoComplete();
this.initMentionAutoComplete();
if (this.model.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
this.showSpinner();
}
......@@ -587,16 +587,16 @@ converse.plugins.add('converse-muc-views', {
return this;
},
initAutoComplete () {
initMentionAutoComplete () {
this.auto_complete = new _converse.AutoComplete(this.el, {
'auto_first': true,
'auto_evaluate': false,
'min_chars': 1,
'match_current_word': true,
'match_on_tab': true,
'list': () => this.model.occupants.map(o => ({'label': o.getDisplayName(), 'value': `@${o.getDisplayName()}`})),
'filter': _converse.FILTER_STARTSWITH,
'trigger_on_at': true
'trigger_keycodes': [_converse.keycodes.AT, _converse.keycodes.TAB],
'include_triggers': []
});
this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
},
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment