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

emoji: Remember scroll position when rerendering the emoji picker

Browse Source
This commit is contained in:
JC Brand 2017-07-16 11:36:31 +02:00
parent 9a5f2fce61
commit 3ebe41384d
1 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/converse-chatview.js
View File

@ -116,7 +116,8 @@
_converse.EmojiPicker = Backbone.Model.extend({ _converse.EmojiPicker = Backbone.Model.extend({
defaults: { defaults: {
'current_category': 'people', 'current_category': 'people',
'current_skintone': '' 'current_skintone': '',
'scroll_position': 0
} }
}); });
@ -124,11 +125,13 @@
className: 'emoji-picker-container toolbar-menu collapsed', className: 'emoji-picker-container toolbar-menu collapsed',
events: { events: {
'click .emoji-category-picker li a.pick-category': 'chooseCategory', 'click .emoji-category-picker li a.pick-category': 'chooseCategory',
'click .emoji-category-picker li a.pick-skintone': 'chooseSkinTone', 'click .emoji-category-picker li a.pick-skintone': 'chooseSkinTone'
}, },
initialize: function () { initialize () {
this.model.on('change', this.render, this); this.model.on('change:current_skintone', this.render, this);
this.model.on('change:current_category', this.render, this);
this.setScrollPosition = _.debounce(this.setScrollPosition, 50);
}, },
render: function () { render: function () {
@ -142,21 +145,45 @@
} }
)); ));
this.el.innerHTML = emojis_html; this.el.innerHTML = emojis_html;
this.el.querySelectorAll('.emoji-picker').forEach((el) => {
el.addEventListener(
'scroll', this.setScrollPosition.bind(this)
);
});
this.restoreScrollPosition();
return this; return this;
}, },
chooseSkinTone: function (ev) { restoreScrollPosition () {
const current_picker = _.difference(
this.el.querySelectorAll('.emoji-picker'),
this.el.querySelectorAll('.emoji-picker.hidden')
);
if (current_picker.length === 1 && this.model.get('scroll_position')) {
current_picker[0].scrollTop = this.model.get('scroll_position');
}
},
setScrollPosition (ev, position) {
this.model.set('scroll_position', ev.target.scrollTop);
},
chooseSkinTone (ev) {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
const skintone = ev.target.parentElement.getAttribute("data-skintone").trim(); const skintone = ev.target.parentElement.getAttribute("data-skintone").trim();
this.model.set({'current_skintone': skintone}); this.model.set({'current_skintone': skintone});
}, },
chooseCategory: function (ev) { chooseCategory (ev) {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
const category = ev.target.parentElement.getAttribute("data-category").trim(); const category = ev.target.parentElement.getAttribute("data-category").trim();
this.model.set({'current_category': category}); this.model.set({
'current_category': category,
'scroll_position': 0
});
} }
}); });