github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-31 16:14:16 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

PERF: make emoji picker faster

Browse Source
This commit is contained in:
Sam 2018-04-30 18:42:17 +10:00
parent 2f0b3afa05
commit f1168db1c8
1 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/assets/javascripts/discourse/components/emoji-picker.js.es6
View File

@ -46,11 +46,11 @@ export default Ember.Component.extend({
run.scheduleOnce("afterRender", this, function() {
this._bindEvents();
this._sectionLoadingCheck();
this._loadCategoriesEmojis();
this._positionPicker();
this._scrollTo();
this._updateSelectedDiversity();
this._checkVisibleSection();
});
},
@ -147,11 +147,6 @@ export default Ember.Component.extend({
.addClass("selected");
},
_sectionLoadingCheck() {
this._checkTimeout = setTimeout(() => { this._sectionLoadingCheck(); }, 500);
run.throttle(this, this._checkVisibleSection, 100);
},
_loadCategoriesEmojis() {
$.each(this.$picker.find(".categories-column button.emoji"), (_, button) => {
const $button = $(button);
@ -322,7 +317,7 @@ export default Ember.Component.extend({
_bindSectionsScroll() {
this.$list.on("scroll", () => {
this.scrollPosition = this.$list.scrollTop();
run.throttle(this, this._checkVisibleSection, 150);
run.debounce(this, this._checkVisibleSection, 50);
});
},
@ -364,15 +359,19 @@ export default Ember.Component.extend({
}
const listHeight = this.$list.innerHeight();
this.$visibleSections.forEach(visibleSection => {
const $unloadedEmojis = $(visibleSection).find("button.emoji[data-loaded!='1']");
$.each($unloadedEmojis, (_, button) => {
const $button = $(button);
const buttonTop = $button.position().top;
const buttonHeight = $button.height();
if(buttonTop + buttonHeight > 0 && buttonTop - buttonHeight < listHeight) {
this._setButtonBackground($button);
let offsetTop = button.offsetTop;
if (offsetTop < this.scrollPosition + listHeight + 200) {
if (offsetTop + 200 > this.scrollPosition) {
const $button = $(button);
this._setButtonBackground($button);
}
}
});
});