import 'document-register-element'; import isEmojiUnicodeSupported from '../emoji/support'; class GlEmoji extends HTMLElement { constructor() { super(); 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; } // 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); } }) .catch(() => { // do nothing }); } } } } export default function installGlEmojiElement() { if (!customElements.get('gl-emoji')) { customElements.define('gl-emoji', GlEmoji); } }