From 8455e8c481425ffa661c82fb9cffe3c053035fb5 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Sat, 24 Jun 2017 02:25:04 -0500 Subject: move emoji category index to helper method --- app/assets/javascripts/awards_handler.js | 35 ++++++++------------------------ app/assets/javascripts/emoji/index.js | 24 ++++++++++++++++++++++ 2 files changed, 32 insertions(+), 27 deletions(-) diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js index 677f997895a..c363afc09b6 100644 --- a/app/assets/javascripts/awards_handler.js +++ b/app/assets/javascripts/awards_handler.js @@ -3,15 +3,18 @@ import Cookies from 'js-cookie'; import { glEmojiTag } from './behaviors/gl_emoji'; -import { emojiMap, filterEmojiNamesByAlias, isEmojiNameValid, normalizeEmojiName } from './emoji'; +import { + filterEmojiNamesByAlias, + getEmojiByCategory, + isEmojiNameValid, + normalizeEmojiName, +} from './emoji'; const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd'; const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd'; const FROM_SENTENCE_REGEX = /(?:, and | and |, )/; // For separating lists produced by ruby's Array#toSentence -let categoryMap = null; - const categoryLabelMap = { activity: 'Activity', people: 'People', @@ -23,26 +26,6 @@ const categoryLabelMap = { flags: 'Flags', }; -function buildCategoryMap() { - return Object.keys(emojiMap).reduce((currentCategoryMap, emojiNameKey) => { - const emojiInfo = emojiMap[emojiNameKey]; - if (currentCategoryMap[emojiInfo.category]) { - currentCategoryMap[emojiInfo.category].push(emojiNameKey); - } - - return currentCategoryMap; - }, { - activity: [], - people: [], - nature: [], - food: [], - travel: [], - objects: [], - symbols: [], - flags: [], - }); -} - function renderCategory(name, emojiList, opts = {}) { return `
@@ -71,8 +54,6 @@ export default class AwardsHandler { if ($menu.length === 0) { setTimeout(() => this.createEmojiMenu()); } - // Prebuild the categoryMap - categoryMap = categoryMap || buildCategoryMap(); }); this.registerEventListener('on', $(document), 'click', '.js-add-award', (e) => { e.stopPropagation(); @@ -158,7 +139,7 @@ export default class AwardsHandler { this.isCreatingEmojiMenu = true; // Render the first category - categoryMap = categoryMap || buildCategoryMap(); + const categoryMap = getEmojiByCategory(); const categoryNameKey = Object.keys(categoryMap)[0]; const emojisInCategory = categoryMap[categoryNameKey]; const firstCategory = renderCategory(categoryLabelMap[categoryNameKey], emojisInCategory); @@ -198,7 +179,7 @@ export default class AwardsHandler { } this.isAddingRemainingEmojiMenuCategories = true; - categoryMap = categoryMap || buildCategoryMap(); + const categoryMap = getEmojiByCategory(); // Avoid the jank and render the remaining categories separately // This will take more time, but makes UI more responsive diff --git a/app/assets/javascripts/emoji/index.js b/app/assets/javascripts/emoji/index.js index e1edf376936..09ceca58e9c 100644 --- a/app/assets/javascripts/emoji/index.js +++ b/app/assets/javascripts/emoji/index.js @@ -22,12 +22,36 @@ function filterEmojiNamesByAlias(filter) { return _.uniq(filterEmojiNames(filter).map(name => normalizeEmojiName(name))); } +let emojiByCategory; +function getEmojiByCategory(category = null) { + if (!emojiByCategory) { + emojiByCategory = { + activity: [], + people: [], + nature: [], + food: [], + travel: [], + objects: [], + symbols: [], + flags: [], + }; + Object.keys(emojiMap).forEach((name) => { + const emoji = emojiMap[name]; + if (emojiByCategory[emoji.category]) { + emojiByCategory[emoji.category].push(name); + } + }); + } + return category ? emojiByCategory[category] : emojiByCategory; +} + export { emojiMap, emojiAliases, normalizeEmojiName, filterEmojiNames, filterEmojiNamesByAlias, + getEmojiByCategory, getUnicodeSupportMap, isEmojiNameValid, isEmojiUnicodeSupported, -- cgit v1.2.1