BigW Consortium Gitlab

gl_emoji.js 1.71 KB
Newer Older
1
import installCustomElements from 'document-register-element';
2
import isEmojiUnicodeSupported from '../emoji/support';
3 4 5

installCustomElements(window);

6
export default function installGlEmojiElement() {
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
  const GlEmojiElementProto = Object.create(HTMLElement.prototype);
  GlEmojiElementProto.createdCallback = function createdCallback() {
    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 (
25
      emojiUnicode &&
26
      isEmojiUnicode &&
27
      !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
28 29 30 31 32 33 34
    ) {
      // CSS sprite fallback takes precedence over image fallback
      if (hasCssSpriteFalback) {
        // IE 11 doesn't like adding multiple at once :(
        this.classList.add('emoji-icon');
        this.classList.add(fallbackSpriteClass);
      } else {
35 36 37 38 39 40 41 42 43 44 45 46
        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
          });
47
      }
48
    }
49
  };
50

51 52 53
  document.registerElement('gl-emoji', {
    prototype: GlEmojiElementProto,
  });
54
}