From 28ad645153b206ba84ddc4935280eaed94bb0138 Mon Sep 17 00:00:00 2001 From: bonespiked Date: Fri, 24 Mar 2017 09:09:51 -0400 Subject: Ticket 4665 - Emoji Picker (#5157) * #4665 Added EmojiPicker Work primarily by @broernr-de and @harrison on pre-release.mattermost.com * Final fixes to handle custom emojis from internal review and single merge error * ESLint fixes * CSS changes and other code to support emoji picker in reply window * Fix for file upload and emoji picker icon positions on post and comment. RHS emoji picker appearing see-through at this time. * Fix for two ESLint issues. * covered most of feedback: RHS emoji picker looks correct color-wise RHS emoji picker dynamically positions against height of thread size (post + reply messages) escape closes emoji window search box focused on open ESLint fixes against other files oversized emoji preview fixes * Adding in 'outside click' eventing to dismiss the emoji window * Changing some formatting to fix mismatch between my local eslant rules and jenkins. * adding alternative import method due to downstream testing errors * yet another attempt to retain functionality and pass tests - skipping import of browser store * fix for feedback items 5 and 7: * move search to float on top with stylistic changes * whitespace in the header (+1 squashed commit) Squashed commits: [6a26d32] changes that address items 1, 2, 6, 8, and 9 of latest feedback * Fix for attachment preview location on mobile * Fix for latest rounds of feedback * fixing eslint issue * making emojipicker sprite based, fixing alignments * Fix for emoji quality, fixing some behavior (hover background and cursor settings) undoing config changes * Preview feature for emojis * Adjustments to config file, and changing layout/design of attachment and emoji icon. * manual revert from master branch for config.json * reverting paperclip and fixing alignments. Additionally fixing inadvertent display of picker on mobile. * CSS changes to try to fix the hover behavior - currently working for emoji picker (when enabled), but hover for attachment isn't working * Made suggested changes by jwilander except for jQuery removal * Adding hover for both icons * removal of some usages of jQuery * Fix for two layout issues on IE11/Edge * UI improvements for emoji picker * Fix for many minor display issues * fix for additional appearance items * fix to two minor UI items * A little extra padding for IE11 * fix for IE11 scroll issue, and removing align attribute on img tag which was throwing js error * fixes some display issues on firefox * fix for uneven sides of emojis * fix for eslint issues that I didn't introduce * fix for missing bottom edge of RHS emojipicker. also fixing text overlapping icons on text area (including RHS) * Update "emoji selector" to "emoji picker" * changes for code review - removal of ..getDOMNode - use sprite imagery for emoji preview - remove lastBlurAt from state as it wasn't used * fixes for: - fake custom emoji preview in picker - RHS scrollbar on preview * fix for minor alignment of preview emoji --- webapp/stores/emoji_store.jsx | 49 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) (limited to 'webapp/stores') diff --git a/webapp/stores/emoji_store.jsx b/webapp/stores/emoji_store.jsx index 212583ea8..444a27c72 100644 --- a/webapp/stores/emoji_store.jsx +++ b/webapp/stores/emoji_store.jsx @@ -5,12 +5,13 @@ import Client from '../client/web_client.jsx'; import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import Constants from 'utils/constants.jsx'; import EventEmitter from 'events'; - import * as Emoji from 'utils/emoji.jsx'; const ActionTypes = Constants.ActionTypes; const CHANGE_EVENT = 'changed'; +const RECENT_EMOJI_KEY = 'recentEmojis'; +const MAXIMUM_RECENT_EMOJI = 27; // Wrap the contents of the store so that we don't need to construct an ES6 map where most of the content // (the system emojis) will never change. It provides the get/has functions of a map and an iterator so @@ -139,6 +140,48 @@ class EmojiStore extends EventEmitter { return this.map.get(name); } + addRecentEmoji(rawAlias) { + const recentEmojis = this.getRecentEmojis(); + + const alias = rawAlias.split(':').join(''); + + let emoji = this.getCustomEmojiMap().get(alias); + + if (!emoji) { + const emojiIndex = Emoji.EmojiIndicesByAlias.get(alias); + emoji = Emoji.Emojis[emojiIndex]; + } + + if (!emoji) { + // something is wrong, so we return + return; + } + + // odd workaround to the lack of array.findLastIndex - reverse looping & splice + for (let i = recentEmojis.length - 1; i >= 0; i--) { + if ((emoji.name && recentEmojis[i].name === emoji.name) || + (emoji.filename && recentEmojis[i].filename === emoji.filename)) { + recentEmojis.splice(i, 1); + break; + } + } + recentEmojis.push(emoji); + + // cut off the _top_ if it's over length (since new are added to end) + if (recentEmojis.length > MAXIMUM_RECENT_EMOJI) { + recentEmojis.splice(0, recentEmojis.length - MAXIMUM_RECENT_EMOJI); + } + localStorage.setItem(RECENT_EMOJI_KEY, JSON.stringify(recentEmojis)); + } + + getRecentEmojis() { + const result = JSON.parse(localStorage.getItem(RECENT_EMOJI_KEY)); + if (!result) { + return []; + } + return result; + } + hasUnicode(codepoint) { return Emoji.EmojiIndicesByUnicode.has(codepoint); } @@ -174,6 +217,10 @@ class EmojiStore extends EventEmitter { this.removeCustomEmoji(action.id); this.emitChange(); break; + case ActionTypes.EMOJI_POSTED: + this.addRecentEmoji(action.alias); + this.emitChange(); + break; } } } -- cgit v1.2.3-1-g7c22