All files / app/assets/javascripts/behaviors gl_emoji.js

97.5% Statements 39/40
90.32% Branches 28/31
100% Functions 5/5
97.5% Lines 39/40

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84                      12x     12x 12x 12x   12x 12x 9x   9x 9x 2x       2x 2x   9x 9x   9x 9x   9x         12x 12x   12x         7x 7x     7x 2x 1x 1x 1x 1x 1x     2x 2x 5x 1x 1x   4x 4x 4x               1x 1x      
import {
  initEmojiMap,
  getEmojiInfo,
  emojiFallbackImageSrc,
  emojiImageTag,
  FALLBACK_EMOJI_KEY,
} from '../emoji';
import isEmojiUnicodeSupported from '../emoji/support';
 
class GlEmoji extends HTMLElement {
  connectedCallback() {
    this.initialize();
  }
  initialize() {
    let emojiUnicode = this.textContent.trim();
    const { fallbackSpriteClass, fallbackSrc } = this.dataset;
    let { name, unicodeVersion } = this.dataset;
 
    return initEmojiMap().then(() => {
      if (!unicodeVersion) {
        const emojiInfo = getEmojiInfo(name);
 
        Eif (emojiInfo) {
          if (name !== emojiInfo.name) {
            Iif (emojiInfo.name === FALLBACK_EMOJI_KEY && this.innerHTML) {
              return; // When fallback emoji is used, but there is a <img> provided, use the <img> instead
            }
 
            ({ name } = emojiInfo);
            this.dataset.name = emojiInfo.name;
          }
          unicodeVersion = emojiInfo.u;
          this.dataset.unicodeVersion = unicodeVersion;
 
          emojiUnicode = emojiInfo.e;
          this.textContent = emojiInfo.e;
 
          this.title = emojiInfo.d;
        }
      }
 
      const isEmojiUnicode =
        this.childNodes &&
        Array.prototype.every.call(this.childNodes, (childNode) => childNode.nodeType === 3);
 
      if (
        emojiUnicode &&
        isEmojiUnicode &&
        !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
      ) {
        const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
        const hasCssSpriteFallback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
 
        // CSS sprite fallback takes precedence over image fallback
        if (hasCssSpriteFallback) {
          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 if (hasImageFallback) {
          this.innerHTML = '';
          this.appendChild(emojiImageTag(name, fallbackSrc));
        } else {
          const src = emojiFallbackImageSrc(name);
          this.innerHTML = '';
          this.appendChild(emojiImageTag(name, src));
        }
      }
    });
  }
}
 
export default function installGlEmojiElement() {
  Eif (!customElements.get('gl-emoji')) {
    customElements.define('gl-emoji', GlEmoji);
  }
}