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 | |
parent | 27a1348f20dee09758e053b465a2d2ff37ffb649 (diff) | |
download | gitlab-ce-9d6bbc92c978beeec70bec1f2d4a65791fa3f985.tar.gz |
move glEmojiTag method to emoji helper
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/awards_handler.js | 5 | ||||
-rw-r--r-- | app/assets/javascripts/behaviors/gl_emoji.js | 67 | ||||
-rw-r--r-- | app/assets/javascripts/behaviors/index.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/emoji/index.js | 76 | ||||
-rw-r--r-- | app/assets/javascripts/gfm_auto_complete.js | 3 |
5 files changed, 67 insertions, 86 deletions
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js index 0950b52caf5..6f0384ebebe 100644 --- a/app/assets/javascripts/awards_handler.js +++ b/app/assets/javascripts/awards_handler.js @@ -2,7 +2,6 @@ /* global Flash */ import Cookies from 'js-cookie'; -import { glEmojiTag } from './behaviors/gl_emoji'; import * as Emoji from './emoji'; const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd'; @@ -30,7 +29,7 @@ function renderCategory(name, emojiList, opts = {}) { ${emojiList.map(emojiName => ` <li class="emoji-menu-list-item"> <button class="emoji-menu-btn text-center js-emoji-btn" type="button"> - ${glEmojiTag(emojiName, { + ${Emoji.glEmojiTag(emojiName, { sprite: true, })} </button> @@ -369,7 +368,7 @@ export default class AwardsHandler { createAwardButtonForVotesBlock(votesBlock, emojiName) { const buttonHtml = ` <button class="btn award-control js-emoji-btn has-tooltip active" title="You" data-placement="bottom"> - ${glEmojiTag(emojiName)} + ${Emoji.glEmojiTag(emojiName)} <span class="award-control-text js-counter">1</span> </button> `; diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js index 17422f5cece..8156e491a42 100644 --- a/app/assets/javascripts/behaviors/gl_emoji.js +++ b/app/assets/javascripts/behaviors/gl_emoji.js @@ -1,66 +1,10 @@ import installCustomElements from 'document-register-element'; -import { emojiMap, normalizeEmojiName } from '../emoji'; +import { emojiImageTag, emojiFallbackImageSrc } from '../emoji'; import isEmojiUnicodeSupported from '../emoji/support'; installCustomElements(window); -function emojiImageTag(name, src) { - return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`; -} - -function assembleFallbackImageSrc(inputName) { - let name = normalizeEmojiName(inputName); - let emojiInfo = emojiMap[name]; - // Fallback to question mark for unknown emojis - if (!emojiInfo) { - name = 'grey_question'; - emojiInfo = emojiMap[name]; - } - const fallbackImageSrc = `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${emojiInfo.digest}.png`; - - return fallbackImageSrc; -} - -function glEmojiTag(inputName, options) { - const opts = { sprite: false, forceFallback: false, ...options }; - let name = normalizeEmojiName(inputName); - let emojiInfo = emojiMap[name]; - // Fallback to question mark for unknown emojis - if (!emojiInfo) { - name = 'grey_question'; - emojiInfo = emojiMap[name]; - } - - const fallbackImageSrc = assembleFallbackImageSrc(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> - `; -} - -function installGlEmojiElement() { +export default function installGlEmojiElement() { const GlEmojiElementProto = Object.create(HTMLElement.prototype); GlEmojiElementProto.createdCallback = function createdCallback() { const emojiUnicode = this.textContent.trim(); @@ -91,7 +35,7 @@ function installGlEmojiElement() { } else if (hasImageFallback) { this.innerHTML = emojiImageTag(name, fallbackSrc); } else { - const src = assembleFallbackImageSrc(name); + const src = emojiFallbackImageSrc(name); this.innerHTML = emojiImageTag(name, src); } } @@ -101,8 +45,3 @@ function installGlEmojiElement() { prototype: GlEmojiElementProto, }); } - -export { - installGlEmojiElement, - glEmojiTag, -}; diff --git a/app/assets/javascripts/behaviors/index.js b/app/assets/javascripts/behaviors/index.js index 5b931e6cfa6..44b2c974b9e 100644 --- a/app/assets/javascripts/behaviors/index.js +++ b/app/assets/javascripts/behaviors/index.js @@ -1,7 +1,7 @@ import './autosize'; import './bind_in_out'; import './details_behavior'; -import { installGlEmojiElement } from './gl_emoji'; +import installGlEmojiElement from './gl_emoji'; import './quick_submit'; import './requires_input'; import './toggler_behavior'; 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> + `; +} diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js index 9d057fd22a8..f99bac7da1a 100644 --- a/app/assets/javascripts/gfm_auto_complete.js +++ b/app/assets/javascripts/gfm_auto_complete.js @@ -1,5 +1,4 @@ -import { glEmojiTag } from './behaviors/gl_emoji'; -import { validEmojiNames } from './emoji'; +import { validEmojiNames, glEmojiTag } from './emoji'; import glRegexp from './lib/utils/regexp'; import AjaxCache from './lib/utils/ajax_cache'; |