diff options
| author | ThibG <thib@sitedethib.com> | 2020-06-09 10:28:23 +0200 |
|---|---|---|
| committer | Thibaut Girka <thib@sitedethib.com> | 2020-06-09 11:07:32 +0200 |
| commit | 304721edc1b0f07bed54b969cb15169aa975f6e0 (patch) | |
| tree | 9bc39fcf2df83edef0f9808038646c2cc1706225 /app/javascript/flavours/glitch/util | |
| parent | 4657c1a1cad743d3d4b7d2540d598d92db4eaba7 (diff) | |
[Glitch] Improve rendering of emoji which do not contrast with background
Port db319c0fdc8a81718a64e0ff905d5ba628551fd2 to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/util')
| -rw-r--r-- | app/javascript/flavours/glitch/util/emoji/index.js | 11 |
1 files changed, 10 insertions, 1 deletions
diff --git a/app/javascript/flavours/glitch/util/emoji/index.js b/app/javascript/flavours/glitch/util/emoji/index.js index e1a244127..bd3c083e3 100644 --- a/app/javascript/flavours/glitch/util/emoji/index.js +++ b/app/javascript/flavours/glitch/util/emoji/index.js @@ -6,6 +6,15 @@ const trie = new Trie(Object.keys(unicodeMapping)); const assetHost = process.env.CDN_HOST || ''; +// Emoji requiring extra borders depending on theme +const darkEmoji = '🎱🐜⚫🖤⬛◼️◾◼️✒️▪️💣🎳📷📸♣️🕶️✴️🔌💂♀️📽️🍳🦍💂🔪🕳️🕹️🕋🖊️🖋️💂♂️🎤🎓🎥🎼♠️🎩🦃📼📹🎮🐃🏴'; +const lightEmoji = '👽⚾🐔☁️💨🕊️👀🍥👻🐐❕❔⛸️🌩️🔊🔇📃🌧️🐏🍚🍙🐓🐑💀☠️🌨️🔉🔈💬💭🏐🏳️⚪⬜◽◻️▫️'; + +const emojiFilename = (filename, match) => { + const borderedEmoji = document.body.classList.contains('skin-mastodon-light') ? lightEmoji : darkEmoji; + return borderedEmoji.includes(match) ? (filename + '_border') : filename; +}; + const emojify = (str, customEmojis = {}) => { const tagCharsWithoutEmojis = '<&'; const tagCharsWithEmojis = Object.keys(customEmojis).length ? '<&:' : '<&'; @@ -60,7 +69,7 @@ const emojify = (str, customEmojis = {}) => { } else if (!useSystemEmojiFont) { // matched to unicode emoji const { filename, shortCode } = unicodeMapping[match]; const title = shortCode ? `:${shortCode}:` : ''; - replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${assetHost}/emoji/${filename}.svg" />`; + replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${assetHost}/emoji/${emojiFilename(filename, match)}.svg" />`; rend = i + match.length; // If the matched character was followed by VS15 (for selecting text presentation), skip it. if (str.codePointAt(rend) === 65038) { |