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.
This commit is contained in:
parent
3aa9ee1ba0
commit
f8e31a7b49
31
dist/converse.js
vendored
31
dist/converse.js
vendored
@ -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));
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user