diff options
author | bonespiked <dngreene@gmail.com> | 2017-03-24 09:09:51 -0400 |
---|---|---|
committer | Jason Blais <jason@spinpunch.com> | 2017-03-24 09:09:51 -0400 |
commit | 28ad645153b206ba84ddc4935280eaed94bb0138 (patch) | |
tree | a5ddcc228b5cfdbd479078873a1bfede9f11cb1f /webapp/stores/emoji_store.jsx | |
parent | d0af931e6e57b78432d5527b6e7b0be36c538144 (diff) | |
download | chat-28ad645153b206ba84ddc4935280eaed94bb0138.tar.gz chat-28ad645153b206ba84ddc4935280eaed94bb0138.tar.bz2 chat-28ad645153b206ba84ddc4935280eaed94bb0138.zip |
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
Diffstat (limited to 'webapp/stores/emoji_store.jsx')
-rw-r--r-- | webapp/stores/emoji_store.jsx | 49 |
1 files changed, 48 insertions, 1 deletions
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; } } } |