2019-02-05 08:33:14 +00:00
|
|
|
import 'document-register-element';
|
2017-06-27 05:10:17 +00:00
|
|
|
import isEmojiUnicodeSupported from '../emoji/support';
|
2019-03-07 09:33:03 +00:00
|
|
|
import { initEmojiMap, getEmojiInfo, emojiFallbackImageSrc, emojiImageTag } from '../emoji';
|
2017-02-28 04:44:34 +00:00
|
|
|
|
2019-02-05 08:33:14 +00:00
|
|
|
class GlEmoji extends HTMLElement {
|
|
|
|
constructor() {
|
|
|
|
super();
|
2017-02-28 04:44:34 +00:00
|
|
|
|
2019-03-07 09:33:03 +00:00
|
|
|
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));
|
2017-06-27 06:27:06 +00:00
|
|
|
} else {
|
2019-03-07 09:33:03 +00:00
|
|
|
emojiUnicode = emojiInfo.e;
|
|
|
|
this.innerHTML = emojiInfo.e;
|
2017-06-27 06:27:06 +00:00
|
|
|
}
|
2019-03-07 09:33:03 +00:00
|
|
|
|
|
|
|
this.title = emojiInfo.d;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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 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;
|
|
|
|
});
|
2019-02-05 08:33:14 +00:00
|
|
|
}
|
|
|
|
}
|
2017-02-28 04:44:34 +00:00
|
|
|
|
2019-02-05 08:33:14 +00:00
|
|
|
export default function installGlEmojiElement() {
|
|
|
|
if (!customElements.get('gl-emoji')) {
|
|
|
|
customElements.define('gl-emoji', GlEmoji);
|
|
|
|
}
|
2017-02-28 04:44:34 +00:00
|
|
|
}
|