tag
*/
// Detect emoji support by drawing the Wizard 🧙♂️ emoji onto a canvas and then seeing if the color of the canvas in that area has changed
// Borrowed from Modernizr: https://raw.githubusercontent.com/browserleaks/Modernizr/master/feature-detects/emoji.js
function hasEmojiSupport() {
var node = window.document.createElement('canvas');
var ctx = node.getContext('2d');
if (!ctx) {
return false;
}
var backingStoreRatio =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1;
var offset = 12 * backingStoreRatio;
ctx.fillStyle = '#f00';
ctx.textBaseline = 'top';
ctx.font = '32px Arial';
ctx.fillText('\uD83E\uDDD9\u200D\u2642\uFE0F', 0, 0); // WIZARD
var support = ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;
return support;
};
// if the user doesn't have emoji support, load the Twemoji library
if (!hasEmojiSupport()) {
var twemojiScriptElem = document.createElement('script');
twemojiScriptElem.src = "https://twemoji.maxcdn.com/v/latest/twemoji.min.js";
var firstScriptElem = document.getElementsByTagName('script')[0];
firstScriptElem.parentNode.insertBefore(twemojiScriptElem, firstScriptElem);
twemojiScriptElem.onload = function () {
window.twemoji.parse(document.body);
// make emoji's display as inline-block elements and align them with the surrounding text
firstScriptElem.insertAdjacentHTML("afterend", "img.emoji {display: inline-block;height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;}");
};
}
