Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: faster successive loading of emojis

This commit is contained in:
Joffrey JAFFEUX 2017-07-21 14:18:02 +02:00
parent 1ce1953ee1
commit 79c8b505e8
2 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,12 +9,14 @@ const keyValueStore = new KeyValueStore("discourse_emojis_");
const EMOJI_USAGE = "emojiUsage";
const EMOJI_SCROLL_Y = "emojiScrollY";
const EMOJI_SELECTED_DIVERSITY = "emojiSelectedDiversity";
const EMOJI_CACHED_SECTIONS = "emojiCachedSections";
const PER_ROW = 11;
const customEmojis = _.map(_.keys(extendedEmojiList()), code => {
return { code, src: emojiUrlFor(code) };
});
export function resetCache() {
keyValueStore.setObject({ key: EMOJI_CACHED_SECTIONS, value: [] });
keyValueStore.setObject({ key: EMOJI_USAGE, value: [] });
keyValueStore.setObject({ key: EMOJI_SCROLL_Y, value: 0 });
keyValueStore.setObject({ key: EMOJI_SELECTED_DIVERSITY, value: 1 });
@ -43,6 +45,10 @@ export default Ember.Component.extend({
$picker = this.$(".emoji-picker");
if (!keyValueStore.getObject(EMOJI_CACHED_SECTIONS)) {
keyValueStore.setObject({ key: EMOJI_CACHED_SECTIONS, value: [] });
}
if (!keyValueStore.getObject(EMOJI_USAGE)) {
keyValueStore.setObject({ key: EMOJI_USAGE, value: [] });
} else if(_.isPlainObject(keyValueStore.getObject(EMOJI_USAGE))) {
@ -328,14 +334,15 @@ export default Ember.Component.extend({
}
if(selectedSection) {
const sectionTitle = selectedSection.$section.data("section");
$picker.find(".category-icon").removeClass("current");
$picker.find(`.category-icon a[title='${selectedSection.$section.data("section")}']`)
$picker.find(`.category-icon a[title='${sectionTitle}']`)
.parent()
.addClass("current");
if(!selectedSection.$section.hasClass("loaded")) {
selectedSection.$section.addClass("loaded");
this._loadVisibleEmojis(selectedSection.$section.find(".emoji[src='']"));
this._loadSection(selectedSection.$section);
}
//preload surrounding sections
@ -343,8 +350,7 @@ export default Ember.Component.extend({
const preloadedSection = sections[selectedSectionIndex + 1] || sections[selectedSectionIndex - 1];
if(preloadedSection && !preloadedSection.$section.hasClass("loaded")) {
preloadedSection.$section.addClass("loaded");
const $visibleEmojis = preloadedSection.$section.find(".emoji[src='']");
Ember.run.later(this, () => this._loadVisibleEmojis($visibleEmojis), 1500);
this._loadSection(preloadedSection.$section);
}
}
},
@ -469,8 +475,22 @@ export default Ember.Component.extend({
$picker.find(".info").css("max-width", infoMaxWidth);
},
_loadVisibleEmojis($visibleEmojis) {
$.each($visibleEmojis, (_, icon) => this._setIconSrc(icon) );
_loadSection($section) {
const sectionName = $section.data("section");
if(keyValueStore.getObject(EMOJI_CACHED_SECTIONS).indexOf(sectionName) > -1) {
$.each($section.find(".emoji[src='']"), (_, icon) => this._setIconSrc(icon) );
} else {
Ember.run.later(
this, () => {
keyValueStore.setObject({
key: EMOJI_CACHED_SECTIONS,
value: keyValueStore.getObject(EMOJI_CACHED_SECTIONS).concat(sectionName)
});
$.each($section.find(".emoji[src='']"), (_, icon) => this._setIconSrc(icon) );
},
1500
);
}
},
_codeWithDiversity(code, diversity) {

8
app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
View File

@ -48,13 +48,9 @@
<span class="title">{{i18n 'emoji_picker.<%= group["name"] %>'}}</span>
</div>
<div class='section-group'>
<% group["icons"].each.with_index do |icon, icon_index| %>
<% group["icons"].each do |icon| %>
<a title='<%= icon["name"] %>'>
<% if group_index == 0 && icon_index <= 77 %>
<img src='<%= Emoji.url_for(icon['name']) %>' class='emoji <%= "diversity" if icon["diversity"] %>'>
<% else %>
<img src='' class='emoji <%= "diversity" if icon["diversity"] %>'>
<% end %>
<img src='' class='emoji <%= "diversity" if icon["diversity"] %>'>
</a>
<% end %>
</div>