Skip to content

C
converse.js
Commit 7910447c authored by JC Brand's avatar JC Brand
Browse files
Options

Use `ev.key` instead of `ev.keyCode` 

Removes the need for maintaining a map of keycodes to keys
parent f8e31a7b
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 65 deletions
dist/converse.js
View file @ 7910447c
......@@ -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],
spec/autocomplete.js
View file @ 7910447c
......@@ -18,45 +18,44 @@
it("shows all autocompletion options when the user presses @",
mock.initConverse(
null, ['rosterGroupsFetched'], {},
function (done, _converse) {
test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'tom')
.then(() => {
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'
})));
});
async function (done, _converse) {
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'
})));
});
// 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);
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, _));
// 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();
}));
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);
......
src/converse-autocomplete.js
View file @ 7910447c
......@@ -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');
}
......
src/converse-muc-views.js
View file @ 7910447c
......@@ -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],
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7