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

Close emoji popup after insertion

Browse Source
This commit is contained in:
JC Brand 2019-08-19 13:40:21 +02:00
parent 73c8002b76
commit 9099ef89fa
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sass/_chatbox.scss
View File

@ -332,7 +332,7 @@
} }
.toolbar-menu { .toolbar-menu {
background-color: #fff; background-color: #fff;
bottom: 2rem; bottom: 1.7rem;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
height: auto; height: auto;
margin-bottom: 0; margin-bottom: 0;

16
src/converse-emoji-views.js
View File

@ -116,7 +116,7 @@ converse.plugins.add('converse-emoji-views', {
}, },
initialize () { initialize () {
this.debouncedFilter = _.debounce(input => this.filter(input), 100); this.debouncedFilter = _.debounce(input => this.filter(input), 50);
this.model.on('change:query', this.render, this); this.model.on('change:query', this.render, this);
this.model.on('change:current_skintone', this.render, this); this.model.on('change:current_skintone', this.render, this);
this.model.on('change:current_category', () => { this.model.on('change:current_category', () => {
@ -156,9 +156,8 @@ converse.plugins.add('converse-emoji-views', {
if (match) { if (match) {
// XXX: Ideally we would set `query` on the model and // XXX: Ideally we would set `query` on the model and
// then let the view re-render, instead of doing it // then let the view re-render, instead of doing it
// manually here. Unfortunately this doesn't work, the // manually here. Snabbdom supports setting properties,
// value gets set on the HTML element, but is not // Backbone.VDOMView doesn't.
// visible to the new user.
ev.target.value = match; ev.target.value = match;
this.filter(ev.target); this.filter(ev.target);
} }
@ -167,6 +166,7 @@ converse.plugins.add('converse-emoji-views', {
ev.stopPropagation(); ev.stopPropagation();
if (_converse.emoji_shortnames.includes(ev.target.value)) { if (_converse.emoji_shortnames.includes(ev.target.value)) {
this.chatview.insertIntoTextArea(ev.target.value); this.chatview.insertIntoTextArea(ev.target.value);
this.chatview.emoji_dropdown.toggle();
// XXX: See above // XXX: See above
ev.target.value = ''; ev.target.value = '';
this.filter(ev.target); this.filter(ev.target);
@ -222,7 +222,10 @@ converse.plugins.add('converse-emoji-views', {
ev.stopPropagation(); ev.stopPropagation();
const target = ev.target.nodeName === 'IMG' ? ev.target.parentElement : ev.target; const target = ev.target.nodeName === 'IMG' ? ev.target.parentElement : ev.target;
const category = target.getAttribute("data-category").trim(); const category = target.getAttribute("data-category").trim();
this.model.save({'current_category': category}); // XXX: See above
const input = this.el.querySelector('.emoji-search');
input.value = '';
this.model.save({'current_category': category, 'query': undefined});
}, },
setScrollPosition () { setScrollPosition () {
@ -236,11 +239,12 @@ converse.plugins.add('converse-emoji-views', {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
const target = ev.target.nodeName === 'IMG' ? ev.target.parentElement : ev.target; const target = ev.target.nodeName === 'IMG' ? ev.target.parentElement : ev.target;
this.chatview.insertIntoTextArea(target.getAttribute('data-emoji'));
this.chatview.emoji_dropdown.toggle();
// XXX: See above // XXX: See above
const input = this.el.querySelector('.emoji-search'); const input = this.el.querySelector('.emoji-search');
input.value = ''; input.value = '';
this.filter(input); this.filter(input);
this.chatview.insertIntoTextArea(target.getAttribute('data-emoji'));
} }
}); });