diff options
author | Mike Greiling <mike@pixelcog.com> | 2017-06-27 00:54:34 -0500 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2017-06-27 00:54:34 -0500 |
commit | 9d6bbc92c978beeec70bec1f2d4a65791fa3f985 (patch) | |
tree | 8755c3f55adcfbe733d04772fe8116f4b9acebc9 /app/assets/javascripts/emoji | |
parent | 27a1348f20dee09758e053b465a2d2ff37ffb649 (diff) | |
download | gitlab-ce-9d6bbc92c978beeec70bec1f2d4a65791fa3f985.tar.gz |
move glEmojiTag method to emoji helper
Diffstat (limited to 'app/assets/javascripts/emoji')
-rw-r--r-- | app/assets/javascripts/emoji/index.js | 76 |
1 files changed, 60 insertions, 16 deletions
diff --git a/app/assets/javascripts/emoji/index.js b/app/assets/javascripts/emoji/index.js index 7c3bab1e4a9..bbecd1e41d1 100644 --- a/app/assets/javascripts/emoji/index.js +++ b/app/assets/javascripts/emoji/index.js @@ -1,27 +1,27 @@ import emojiMap from 'emojis/digests.json'; import emojiAliases from 'emojis/aliases.json'; -const validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)]; +export const validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)]; -function normalizeEmojiName(name) { +export function normalizeEmojiName(name) { return Object.prototype.hasOwnProperty.call(emojiAliases, name) ? emojiAliases[name] : name; } -function isEmojiNameValid(name) { +export function isEmojiNameValid(name) { return validEmojiNames.indexOf(name) >= 0; } -function filterEmojiNames(filter) { +export function filterEmojiNames(filter) { const match = filter.toLowerCase(); return validEmojiNames.filter(name => name.indexOf(match) >= 0); } -function filterEmojiNamesByAlias(filter) { +export function filterEmojiNamesByAlias(filter) { return _.uniq(filterEmojiNames(filter).map(name => normalizeEmojiName(name))); } let emojiByCategory; -function getEmojiByCategory(category = null) { +export function getEmojiByCategory(category = null) { if (!emojiByCategory) { emojiByCategory = { activity: [], @@ -43,13 +43,57 @@ function getEmojiByCategory(category = null) { return category ? emojiByCategory[category] : emojiByCategory; } -export { - emojiMap, - emojiAliases, - normalizeEmojiName, - filterEmojiNames, - filterEmojiNamesByAlias, - getEmojiByCategory, - isEmojiNameValid, - validEmojiNames, -}; +export function getEmojiInfo(query) { + let name = normalizeEmojiName(query); + let emojiInfo = emojiMap[name]; + + // Fallback to question mark for unknown emojis + if (!emojiInfo) { + name = 'grey_question'; + emojiInfo = emojiMap[name]; + } + + return { ...emojiInfo, name }; +} + +export function emojiFallbackImageSrc(inputName) { + const { name, digest } = getEmojiInfo(inputName); + return `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${digest}.png`; +} + +export function emojiImageTag(name, src) { + return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`; +} + +export function glEmojiTag(inputName, options) { + const opts = { sprite: false, forceFallback: false, ...options }; + const { name, ...emojiInfo } = getEmojiInfo(inputName); + + const fallbackImageSrc = emojiFallbackImageSrc(name); + const fallbackSpriteClass = `emoji-${name}`; + + const classList = []; + if (opts.forceFallback && opts.sprite) { + classList.push('emoji-icon'); + 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); + } + + return ` + <gl-emoji + ${classAttribute} + data-name="${name}" + data-fallback-src="${fallbackImageSrc}" + ${fallbackSpriteAttribute} + data-unicode-version="${emojiInfo.unicodeVersion}" + title="${emojiInfo.description}" + > + ${contents} + </gl-emoji> + `; +} |