diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2019-03-07 09:33:03 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-03-07 09:33:03 +0000 |
commit | d07919de90e8212673adb47a4e60514c2573f2ce (patch) | |
tree | a45262773f31061182db9fe39700fea726b6cfc2 /app/assets/javascripts/emoji/index.js | |
parent | b7998f60f63a4b85db7b835ef152a9042db5e791 (diff) | |
download | gitlab-ce-d07919de90e8212673adb47a4e60514c2573f2ce.tar.gz |
Moved all emojis to the public folder
Created new emojis map in public folder
Renamed folder to emojis
Loading now the emojis from Localstorage or from Server
Moved all emojis to the public folder
Loading the emojis.json file now through AJAX
Loads now the map in the web element instead when building the emoji tag
Updated the custom Element Setup to modern method
Fixed Emoji Karma Specs for async loading
Loading now the emojis from Localstorage or from Server
Loads now the map in the web element instead when building the emoji tag
Fixed problem with FIXTURE_PATH for emojis fixtures
Fixes Linting Error in gemojione.rake
Fixed Emoji Karma Specs
Fix static type check in gemojione and check if already registered
Testing if the Emoji Support Check is failing Rspec
Change of CLass Name, returning true on check to test
Fixes failing Emoji RSpec Tests
Moved Emojis into public/-/emojis/1/
Fixed Linting Errors in gl_emoji
Fix to fixtures creation for emojis
Fixed path spec for new subdirectory -/emojis
Optimized emojis.json output
Fix for Emoji Spec failure due to unicode dataset
Better catch handling for emojis
Diffstat (limited to 'app/assets/javascripts/emoji/index.js')
-rw-r--r-- | app/assets/javascripts/emoji/index.js | 72 |
1 files changed, 56 insertions, 16 deletions
diff --git a/app/assets/javascripts/emoji/index.js b/app/assets/javascripts/emoji/index.js index cd8dff40b88..36542315c4c 100644 --- a/app/assets/javascripts/emoji/index.js +++ b/app/assets/javascripts/emoji/index.js @@ -1,13 +1,58 @@ import _ from 'underscore'; -import emojiMap from 'emojis/digests.json'; +import createFlash from '~/flash'; +import { s__ } from '~/locale'; import emojiAliases from 'emojis/aliases.json'; +import axios from '../lib/utils/axios_utils'; -export const validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)]; +import AccessorUtilities from '../lib/utils/accessor'; + +let emojiMap = null; +let validEmojiNames = null; + +export const EMOJI_VERSION = '1'; +const EMOJI_VERSION_LOCALSTORAGE = `EMOJIS_${EMOJI_VERSION}`; + +const isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe(); + +export function initEmojiMap() { + return new Promise((resolve, reject) => { + if (emojiMap) { + resolve(emojiMap); + } else if (isLocalStorageAvailable && window.localStorage.getItem(EMOJI_VERSION_LOCALSTORAGE)) { + emojiMap = JSON.parse(window.localStorage.getItem(EMOJI_VERSION_LOCALSTORAGE)); + validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)]; + resolve(emojiMap); + } else { + // We load the JSON from server + axios + .get( + `${gon.asset_host || ''}${gon.relative_url_root || + ''}/-/emojis/${EMOJI_VERSION}/emojis.json`, + ) + .then(({ data }) => { + emojiMap = data; + validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)]; + resolve(emojiMap); + if (isLocalStorageAvailable) { + window.localStorage.setItem(EMOJI_VERSION_LOCALSTORAGE, JSON.stringify(emojiMap)); + } + }) + .catch(err => { + createFlash(s__('Emojis|Something went wrong while loading emojis.')); + reject(err); + }); + } + }); +} export function normalizeEmojiName(name) { return Object.prototype.hasOwnProperty.call(emojiAliases, name) ? emojiAliases[name] : name; } +export function getValidEmojiNames() { + return validEmojiNames; +} + export function isEmojiNameValid(name) { return validEmojiNames.indexOf(name) >= 0; } @@ -36,8 +81,8 @@ export function getEmojiCategoryMap() { }; Object.keys(emojiMap).forEach(name => { const emoji = emojiMap[name]; - if (emojiCategoryMap[emoji.category]) { - emojiCategoryMap[emoji.category].push(name); + if (emojiCategoryMap[emoji.c]) { + emojiCategoryMap[emoji.c].push(name); } }); } @@ -58,8 +103,9 @@ export function getEmojiInfo(query) { } export function emojiFallbackImageSrc(inputName) { - const { name, digest } = getEmojiInfo(inputName); - return `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${digest}.png`; + const { name } = getEmojiInfo(inputName); + return `${gon.asset_host || ''}${gon.relative_url_root || + ''}/-/emojis/${EMOJI_VERSION}/${name}.png`; } export function emojiImageTag(name, src) { @@ -68,9 +114,8 @@ export function emojiImageTag(name, src) { export function glEmojiTag(inputName, options) { const opts = { sprite: false, forceFallback: false, ...options }; - const { name, ...emojiInfo } = getEmojiInfo(inputName); + const name = normalizeEmojiName(inputName); - const fallbackImageSrc = emojiFallbackImageSrc(name); const fallbackSpriteClass = `emoji-${name}`; const classList = []; @@ -79,24 +124,19 @@ export function glEmojiTag(inputName, options) { classList.push(fallbackSpriteClass); } const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : ''; + const fallbackSpriteAttribute = opts.sprite ? `data-fallback-sprite-class="${fallbackSpriteClass}"` : ''; - let contents = emojiInfo.moji; - if (opts.forceFallback && !opts.sprite) { - contents = emojiImageTag(name, fallbackImageSrc); - } + const forceFallbackAttribute = opts.forceFallback ? 'data-force-fallback="true"' : ''; return ` <gl-emoji ${classAttribute} data-name="${name}" - data-fallback-src="${fallbackImageSrc}" ${fallbackSpriteAttribute} - data-unicode-version="${emojiInfo.unicodeVersion}" - title="${emojiInfo.description}" + ${forceFallbackAttribute} > - ${contents} </gl-emoji> `; } |