diff options
Diffstat (limited to 'app/assets/javascripts/behaviors/gl_emoji.js')
-rw-r--r-- | app/assets/javascripts/behaviors/gl_emoji.js | 97 |
1 files changed, 35 insertions, 62 deletions
diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js index 9034563d9b3..d1d75658181 100644 --- a/app/assets/javascripts/behaviors/gl_emoji.js +++ b/app/assets/javascripts/behaviors/gl_emoji.js @@ -1,74 +1,47 @@ import 'document-register-element'; import isEmojiUnicodeSupported from '../emoji/support'; -import { initEmojiMap, getEmojiInfo, emojiFallbackImageSrc, emojiImageTag } from '../emoji'; class GlEmoji extends HTMLElement { constructor() { super(); - let emojiUnicode = this.textContent.trim(); - const { fallbackSpriteClass, fallbackSrc, forceFallback } = this.dataset; - let { name, unicodeVersion } = this.dataset; - - initEmojiMap() - .then(() => { - if (!unicodeVersion) { - const emojiInfo = getEmojiInfo(name); - - if (emojiInfo) { - if (name !== emojiInfo.name) { - ({ name } = emojiInfo); - this.dataset.name = emojiInfo.name; - } - unicodeVersion = emojiInfo.u; - this.dataset.uni = unicodeVersion; - - if (forceFallback === 'true' && !fallbackSpriteClass) { - this.innerHTML = emojiImageTag(name, emojiFallbackImageSrc(name)); - } else { - emojiUnicode = emojiInfo.e; - this.innerHTML = emojiInfo.e; - } - - this.title = emojiInfo.d; - } + const emojiUnicode = this.textContent.trim(); + const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset; + + const isEmojiUnicode = + this.childNodes && + Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3); + const hasImageFallback = fallbackSrc && fallbackSrc.length > 0; + const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0; + + if (emojiUnicode && isEmojiUnicode && !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)) { + // CSS sprite fallback takes precedence over image fallback + if (hasCssSpriteFalback) { + if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) { + const emojiSpriteLinkTag = document.createElement('link'); + emojiSpriteLinkTag.setAttribute('rel', 'stylesheet'); + emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path); + document.head.appendChild(emojiSpriteLinkTag); + gon.emoji_sprites_css_added = true; } - - const isEmojiUnicode = - this.childNodes && - Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3); - const hasImageFallback = fallbackSrc && fallbackSrc.length > 0; - const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0; - - if ( - emojiUnicode && - isEmojiUnicode && - !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion) - ) { - // CSS sprite fallback takes precedence over image fallback - if (hasCssSpriteFalback) { - if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) { - const emojiSpriteLinkTag = document.createElement('link'); - emojiSpriteLinkTag.setAttribute('rel', 'stylesheet'); - emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path); - document.head.appendChild(emojiSpriteLinkTag); - gon.emoji_sprites_css_added = true; + // IE 11 doesn't like adding multiple at once :( + this.classList.add('emoji-icon'); + this.classList.add(fallbackSpriteClass); + } else { + import(/* webpackChunkName: 'emoji' */ '../emoji') + .then(({ emojiImageTag, emojiFallbackImageSrc }) => { + if (hasImageFallback) { + this.innerHTML = emojiImageTag(name, fallbackSrc); + } else { + const src = emojiFallbackImageSrc(name); + this.innerHTML = emojiImageTag(name, src); } - // IE 11 doesn't like adding multiple at once :( - this.classList.add('emoji-icon'); - this.classList.add(fallbackSpriteClass); - } else if (hasImageFallback) { - this.innerHTML = emojiImageTag(name, fallbackSrc); - } else { - const src = emojiFallbackImageSrc(name); - this.innerHTML = emojiImageTag(name, src); - } - } - }) - .catch(error => { - // Only reject is already handled in initEmojiMap - throw error; - }); + }) + .catch(() => { + // do nothing + }); + } + } } } |