Use ev.key instead of ev.keyCode
Removes the need for maintaining a map of keycodes to keys
This commit is contained in:
JC Brand
parent
f8e31a7b49
commit
7910447cf6
20
dist/converse.js
vendored
20
dist/converse.js
vendored
@ -47944,9 +47944,6 @@ 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;
|
||||
@ -48005,8 +48002,8 @@ _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
|
||||
'trigger_keycodes': [],
|
||||
// Array of keycodes that will trigger auto-complete
|
||||
'ac_triggers': [],
|
||||
// Array of keys (`ev.key`) values that will trigger auto-complete
|
||||
'include_triggers': [],
|
||||
// Array of trigger keycodes which should be included in the returned value
|
||||
'min_chars': 2,
|
||||
@ -48245,8 +48242,8 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.trigger_keycodes.includes(ev.keyCode)) {
|
||||
if (ev.keyCode === _converse.keycodes.TAB) {
|
||||
if (this.ac_triggers.includes(ev.key)) {
|
||||
if (ev.key === "Tab") {
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
@ -48270,7 +48267,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_keycodes.includes(KEYCODES_MAP[value[0]]) && !this.include_triggers.includes(ev.keyCode)) {
|
||||
if (this.ac_triggers.includes(value[0]) && !this.include_triggers.includes(ev.key)) {
|
||||
ignore_min_chars = true;
|
||||
value = value.slice('1');
|
||||
}
|
||||
@ -53923,7 +53920,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
|
||||
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
|
||||
'click .toggle-smiley': 'toggleEmojiMenu',
|
||||
'click .upload-file': 'toggleFileUpload',
|
||||
'keydown .chat-textarea': 'keyPressed',
|
||||
'keypress .chat-textarea': 'keyPressed',
|
||||
'keyup .chat-textarea': 'keyUp',
|
||||
'input .chat-textarea': 'inputChanged'
|
||||
},
|
||||
@ -54022,7 +54019,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
|
||||
'value': `@${o.getDisplayName()}`
|
||||
})),
|
||||
'filter': _converse.FILTER_STARTSWITH,
|
||||
'trigger_keycodes': [_converse.keycodes.AT, _converse.keycodes.TAB],
|
||||
'ac_triggers': ["Tab", "@"],
|
||||
'include_triggers': []
|
||||
});
|
||||
this.auto_complete.on('suggestion-box-selectcomplete', () => this.auto_completing = false);
|
||||
@ -55363,9 +55360,6 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
|
||||
const show = this.model.get('show');
|
||||
return templates_occupant_html__WEBPACK_IMPORTED_MODULE_20___default()(_.extend({
|
||||
'_': _,
|
||||
// XXX Normally this should already be included,
|
||||
// but with the current webpack build,
|
||||
// we only get a subset of the _ methods.
|
||||
'jid': '',
|
||||
'show': show,
|
||||
'hint_show': _converse.PRETTY_CHAT_STATUS[show],
|
||||
|
||||
@ -18,45 +18,44 @@
|
||||
it("shows all autocompletion options when the user presses @",
|
||||
mock.initConverse(
|
||||
null, ['rosterGroupsFetched'], {},
|
||||
function (done, _converse) {
|
||||
async function (done, _converse) {
|
||||
|
||||
test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'tom')
|
||||
.then(() => {
|
||||
const view = _converse.chatboxviews.get('lounge@localhost');
|
||||
await test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'tom');
|
||||
const view = _converse.chatboxviews.get('lounge@localhost');
|
||||
|
||||
['dick', 'harry'].forEach((nick) => {
|
||||
_converse.connection._dataRecv(test_utils.createRequest(
|
||||
$pres({
|
||||
'to': 'tom@localhost/resource',
|
||||
'from': `lounge@localhost/${nick}`
|
||||
})
|
||||
.c('x', {xmlns: Strophe.NS.MUC_USER})
|
||||
.c('item', {
|
||||
'affiliation': 'none',
|
||||
'jid': `${nick}@localhost/resource`,
|
||||
'role': 'participant'
|
||||
})));
|
||||
});
|
||||
['dick', 'harry'].forEach((nick) => {
|
||||
_converse.connection._dataRecv(test_utils.createRequest(
|
||||
$pres({
|
||||
'to': 'tom@localhost/resource',
|
||||
'from': `lounge@localhost/${nick}`
|
||||
})
|
||||
.c('x', {xmlns: Strophe.NS.MUC_USER})
|
||||
.c('item', {
|
||||
'affiliation': 'none',
|
||||
'jid': `${nick}@localhost/resource`,
|
||||
'role': 'participant'
|
||||
})));
|
||||
});
|
||||
|
||||
// Test that pressing @ brings up all options
|
||||
const textarea = view.el.querySelector('textarea.chat-textarea');
|
||||
const at_event = {
|
||||
'target': textarea,
|
||||
'preventDefault': _.noop,
|
||||
'stopPropagation': _.noop,
|
||||
'keyCode': 50
|
||||
};
|
||||
view.keyPressed(at_event);
|
||||
textarea.value = '@';
|
||||
view.keyUp(at_event);
|
||||
// Test that pressing @ brings up all options
|
||||
const textarea = view.el.querySelector('textarea.chat-textarea');
|
||||
const at_event = {
|
||||
'target': textarea,
|
||||
'preventDefault': _.noop,
|
||||
'stopPropagation': _.noop,
|
||||
'keyCode': 50,
|
||||
'key': '@'
|
||||
};
|
||||
view.keyPressed(at_event);
|
||||
textarea.value = '@';
|
||||
view.keyUp(at_event);
|
||||
|
||||
expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(3);
|
||||
expect(view.el.querySelector('.suggestion-box__results li[aria-selected="true"]').textContent).toBe('tom');
|
||||
expect(view.el.querySelector('.suggestion-box__results li:first-child').textContent).toBe('tom');
|
||||
expect(view.el.querySelector('.suggestion-box__results li:nth-child(2)').textContent).toBe('dick');
|
||||
expect(view.el.querySelector('.suggestion-box__results li:nth-child(3)').textContent).toBe('harry');
|
||||
done();
|
||||
}).catch(_.partial(console.error, _));
|
||||
expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(3);
|
||||
expect(view.el.querySelector('.suggestion-box__results li[aria-selected="true"]').textContent).toBe('tom');
|
||||
expect(view.el.querySelector('.suggestion-box__results li:first-child').textContent).toBe('tom');
|
||||
expect(view.el.querySelector('.suggestion-box__results li:nth-child(2)').textContent).toBe('dick');
|
||||
expect(view.el.querySelector('.suggestion-box__results li:nth-child(3)').textContent).toBe('harry');
|
||||
done();
|
||||
}));
|
||||
|
||||
it("autocompletes when the user presses tab",
|
||||
@ -88,7 +87,8 @@
|
||||
'target': textarea,
|
||||
'preventDefault': _.noop,
|
||||
'stopPropagation': _.noop,
|
||||
'keyCode': 9
|
||||
'keyCode': 9,
|
||||
'key': 'Tab'
|
||||
}
|
||||
view.keyPressed(tab_event);
|
||||
view.keyUp(tab_event);
|
||||
|
||||
@ -13,10 +13,6 @@ import converse from "@converse/headless/converse-core";
|
||||
const { _, Backbone } = converse.env,
|
||||
u = converse.env.utils;
|
||||
|
||||
const KEYCODES_MAP = {
|
||||
'@': 50
|
||||
}
|
||||
|
||||
converse.plugins.add("converse-autocomplete", {
|
||||
|
||||
initialize () {
|
||||
@ -76,7 +72,7 @@ converse.plugins.add("converse-autocomplete", {
|
||||
|
||||
_.assignIn(this, {
|
||||
'match_current_word': false, // Match only the current word, otherwise all input is matched
|
||||
'trigger_keycodes': [], // Array of keycodes that will trigger auto-complete
|
||||
'ac_triggers': [], // Array of keys (`ev.key`) values 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,
|
||||
@ -295,8 +291,8 @@ converse.plugins.add("converse-autocomplete", {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.trigger_keycodes.includes(ev.keyCode)) {
|
||||
if (ev.keyCode === _converse.keycodes.TAB) {
|
||||
if (this.ac_triggers.includes(ev.key)) {
|
||||
if (ev.key === "Tab") {
|
||||
ev.preventDefault();
|
||||
}
|
||||
this.auto_completing = true;
|
||||
@ -320,7 +316,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_keycodes.includes(KEYCODES_MAP[value[0]]) && !this.include_triggers.includes(ev.keyCode)) {
|
||||
if (this.ac_triggers.includes(value[0]) && !this.include_triggers.includes(ev.key)) {
|
||||
ignore_min_chars = true;
|
||||
value = value.slice('1');
|
||||
}
|
||||
|
||||
@ -504,7 +504,7 @@ converse.plugins.add('converse-muc-views', {
|
||||
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
|
||||
'click .toggle-smiley': 'toggleEmojiMenu',
|
||||
'click .upload-file': 'toggleFileUpload',
|
||||
'keydown .chat-textarea': 'keyPressed',
|
||||
'keypress .chat-textarea': 'keyPressed',
|
||||
'keyup .chat-textarea': 'keyUp',
|
||||
'input .chat-textarea': 'inputChanged'
|
||||
},
|
||||
@ -595,7 +595,7 @@ converse.plugins.add('converse-muc-views', {
|
||||
'match_current_word': true,
|
||||
'list': () => this.model.occupants.map(o => ({'label': o.getDisplayName(), 'value': `@${o.getDisplayName()}`})),
|
||||
'filter': _converse.FILTER_STARTSWITH,
|
||||
'trigger_keycodes': [_converse.keycodes.AT, _converse.keycodes.TAB],
|
||||
'ac_triggers': ["Tab", "@"],
|
||||
'include_triggers': []
|
||||
});
|
||||
this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
|
||||
@ -1837,9 +1837,7 @@ converse.plugins.add('converse-muc-views', {
|
||||
const show = this.model.get('show');
|
||||
return tpl_occupant(
|
||||
_.extend(
|
||||
{ '_': _, // XXX Normally this should already be included,
|
||||
// but with the current webpack build,
|
||||
// we only get a subset of the _ methods.
|
||||
{ '_': _,
|
||||
'jid': '',
|
||||
'show': show,
|
||||
'hint_show': _converse.PRETTY_CHAT_STATUS[show],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user