Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Use ev.key instead of ev.keyCode

Browse Source 
Removes the need for maintaining a map of keycodes to keys
This commit is contained in:
JC Brand 2019-03-04 09:42:16 +01:00
parent f8e31a7b49
commit 7910447cf6
4 changed files with 50 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
dist/converse.js vendored
View File

@ -47944,9 +47944,6 @@ const _converse$env = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_
_ = _converse$env._, _ = _converse$env._,
Backbone = _converse$env.Backbone, Backbone = _converse$env.Backbone,
u = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].env.utils; 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", { _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins.add("converse-autocomplete", {
initialize() { initialize() {
const _converse = this._converse; const _converse = this._converse;
@ -48005,8 +48002,8 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
_.assignIn(this, { _.assignIn(this, {
'match_current_word': false, 'match_current_word': false,
// Match only the current word, otherwise all input is matched // Match only the current word, otherwise all input is matched
'trigger_keycodes': [], 'ac_triggers': [],
// Array of keycodes that will trigger auto-complete // Array of keys (`ev.key`) values that will trigger auto-complete
'include_triggers': [], 'include_triggers': [],
// Array of trigger keycodes which should be included in the returned value // Array of trigger keycodes which should be included in the returned value
'min_chars': 2, 'min_chars': 2,
@ -48245,8 +48242,8 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
return; return;
} }
if (this.trigger_keycodes.includes(ev.keyCode)) { if (this.ac_triggers.includes(ev.key)) {
if (ev.keyCode === _converse.keycodes.TAB) { if (ev.key === "Tab") {
ev.preventDefault(); 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 value = this.match_current_word ? u.getCurrentWord(this.input) : this.input.value;
let ignore_min_chars = false; 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; ignore_min_chars = true;
value = value.slice('1'); 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 ul.emoji-picker li': 'insertEmoji',
'click .toggle-smiley': 'toggleEmojiMenu', 'click .toggle-smiley': 'toggleEmojiMenu',
'click .upload-file': 'toggleFileUpload', 'click .upload-file': 'toggleFileUpload',
'keydown .chat-textarea': 'keyPressed', 'keypress .chat-textarea': 'keyPressed',
'keyup .chat-textarea': 'keyUp', 'keyup .chat-textarea': 'keyUp',
'input .chat-textarea': 'inputChanged' 'input .chat-textarea': 'inputChanged'
}, },
@ -54022,7 +54019,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
'value': `@${o.getDisplayName()}` 'value': `@${o.getDisplayName()}`
})), })),
'filter': _converse.FILTER_STARTSWITH, 'filter': _converse.FILTER_STARTSWITH,
'trigger_keycodes': [_converse.keycodes.AT, _converse.keycodes.TAB], 'ac_triggers': ["Tab", "@"],
'include_triggers': [] 'include_triggers': []
}); });
this.auto_complete.on('suggestion-box-selectcomplete', () => this.auto_completing = false); 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'); const show = this.model.get('show');
return templates_occupant_html__WEBPACK_IMPORTED_MODULE_20___default()(_.extend({ 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': '', 'jid': '',
'show': show, 'show': show,
'hint_show': _converse.PRETTY_CHAT_STATUS[show], 'hint_show': _converse.PRETTY_CHAT_STATUS[show],

72
spec/autocomplete.js
View File

@ -18,45 +18,44 @@
it("shows all autocompletion options when the user presses @", it("shows all autocompletion options when the user presses @",
mock.initConverse( mock.initConverse(
null, ['rosterGroupsFetched'], {}, null, ['rosterGroupsFetched'], {},
function (done, _converse) { async function (done, _converse) {
test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'tom') await test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'tom');
.then(() => { const view = _converse.chatboxviews.get('lounge@localhost');
const view = _converse.chatboxviews.get('lounge@localhost');
['dick', 'harry'].forEach((nick) => { ['dick', 'harry'].forEach((nick) => {
_converse.connection._dataRecv(test_utils.createRequest( _converse.connection._dataRecv(test_utils.createRequest(
$pres({ $pres({
'to': 'tom@localhost/resource', 'to': 'tom@localhost/resource',
'from': `lounge@localhost/${nick}` 'from': `lounge@localhost/${nick}`
}) })
.c('x', {xmlns: Strophe.NS.MUC_USER}) .c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', { .c('item', {
'affiliation': 'none', 'affiliation': 'none',
'jid': `${nick}@localhost/resource`, 'jid': `${nick}@localhost/resource`,
'role': 'participant' 'role': 'participant'
}))); })));
}); });
// Test that pressing @ brings up all options // Test that pressing @ brings up all options
const textarea = view.el.querySelector('textarea.chat-textarea'); const textarea = view.el.querySelector('textarea.chat-textarea');
const at_event = { const at_event = {
'target': textarea, 'target': textarea,
'preventDefault': _.noop, 'preventDefault': _.noop,
'stopPropagation': _.noop, 'stopPropagation': _.noop,
'keyCode': 50 'keyCode': 50,
}; 'key': '@'
view.keyPressed(at_event); };
textarea.value = '@'; view.keyPressed(at_event);
view.keyUp(at_event); textarea.value = '@';
view.keyUp(at_event);
expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(3); 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[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: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(2)').textContent).toBe('dick');
expect(view.el.querySelector('.suggestion-box__results li:nth-child(3)').textContent).toBe('harry'); expect(view.el.querySelector('.suggestion-box__results li:nth-child(3)').textContent).toBe('harry');
done(); done();
}).catch(_.partial(console.error, _));
})); }));
it("autocompletes when the user presses tab", it("autocompletes when the user presses tab",
@ -88,7 +87,8 @@
'target': textarea, 'target': textarea,
'preventDefault': _.noop, 'preventDefault': _.noop,
'stopPropagation': _.noop, 'stopPropagation': _.noop,
'keyCode': 9 'keyCode': 9,
'key': 'Tab'
} }
view.keyPressed(tab_event); view.keyPressed(tab_event);
view.keyUp(tab_event); view.keyUp(tab_event);

12
src/converse-autocomplete.js
View File

@ -13,10 +13,6 @@ import converse from "@converse/headless/converse-core";
const { _, Backbone } = converse.env, const { _, Backbone } = converse.env,
u = converse.env.utils; u = converse.env.utils;
const KEYCODES_MAP = {
'@': 50
}
converse.plugins.add("converse-autocomplete", { converse.plugins.add("converse-autocomplete", {
initialize () { initialize () {
@ -76,7 +72,7 @@ converse.plugins.add("converse-autocomplete", {
_.assignIn(this, { _.assignIn(this, {
'match_current_word': false, // Match only the current word, otherwise all input is matched '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 'include_triggers': [], // Array of trigger keycodes which should be included in the returned value
'min_chars': 2, 'min_chars': 2,
'max_items': 10, 'max_items': 10,
@ -295,8 +291,8 @@ converse.plugins.add("converse-autocomplete", {
return; return;
} }
if (this.trigger_keycodes.includes(ev.keyCode)) { if (this.ac_triggers.includes(ev.key)) {
if (ev.keyCode === _converse.keycodes.TAB) { if (ev.key === "Tab") {
ev.preventDefault(); ev.preventDefault();
} }
this.auto_completing = true; 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 value = this.match_current_word ? u.getCurrentWord(this.input) : this.input.value;
let ignore_min_chars = false; 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; ignore_min_chars = true;
value = value.slice('1'); value = value.slice('1');
} }

8
src/converse-muc-views.js
View File

@ -504,7 +504,7 @@ converse.plugins.add('converse-muc-views', {
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji', 'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
'click .toggle-smiley': 'toggleEmojiMenu', 'click .toggle-smiley': 'toggleEmojiMenu',
'click .upload-file': 'toggleFileUpload', 'click .upload-file': 'toggleFileUpload',
'keydown .chat-textarea': 'keyPressed', 'keypress .chat-textarea': 'keyPressed',
'keyup .chat-textarea': 'keyUp', 'keyup .chat-textarea': 'keyUp',
'input .chat-textarea': 'inputChanged' 'input .chat-textarea': 'inputChanged'
}, },
@ -595,7 +595,7 @@ converse.plugins.add('converse-muc-views', {
'match_current_word': true, 'match_current_word': true,
'list': () => this.model.occupants.map(o => ({'label': o.getDisplayName(), 'value': `@${o.getDisplayName()}`})), 'list': () => this.model.occupants.map(o => ({'label': o.getDisplayName(), 'value': `@${o.getDisplayName()}`})),
'filter': _converse.FILTER_STARTSWITH, 'filter': _converse.FILTER_STARTSWITH,
'trigger_keycodes': [_converse.keycodes.AT, _converse.keycodes.TAB], 'ac_triggers': ["Tab", "@"],
'include_triggers': [] 'include_triggers': []
}); });
this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false)); 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'); const show = this.model.get('show');
return tpl_occupant( return tpl_occupant(
_.extend( _.extend(
{ '_': _, // XXX Normally this should already be included, { '_': _,
// but with the current webpack build,
// we only get a subset of the _ methods.
'jid': '', 'jid': '',
'show': show, 'show': show,
'hint_show': _converse.PRETTY_CHAT_STATUS[show], 'hint_show': _converse.PRETTY_CHAT_STATUS[show],