wp-includes/js/wp-emoji-loader.js

   1 ( function( window, document, settings ) {
   2         var src, ready, ii, tests;
   3
   4         /*
   5          * Create a canvas element for testing native browser support
   6          * of emoji.
   7          */
   8         var canvas = document.createElement( 'canvas' );
   9         var context = canvas.getContext && canvas.getContext( '2d' );
  10
  11         /**
  12          * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
  13          * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
  14          *
  15          * @since 4.2.0
  16          *
  17          * @param type {String} Whether to test for support of "flag" or "emoji4" emoji.
  18          * @return {Boolean} True if the browser can render emoji, false if it cannot.
  19          */
  20         function browserSupportsEmoji( type ) {
  21                 var stringFromCharCode = String.fromCharCode,
  22                         flag, flag2, technologist, technologist2;
  23
  24                 if ( ! context || ! context.fillText ) {
  25                         return false;
  26                 }
  27
  28                 // Cleanup from previous test.
  29                 context.clearRect( 0, 0, canvas.width, canvas.height );
  30
  31                 /*
  32                  * Chrome on OS X added native emoji rendering in M41. Unfortunately,
  33                  * it doesn't work when the font is bolder than 500 weight. So, we
  34                  * check for bold rendering support to avoid invisible emoji in Chrome.
  35                  */
  36                 context.textBaseline = 'top';
  37                 context.font = '600 32px Arial';
  38
  39                 switch ( type ) {
  40                         case 'flag':
  41                                 /*
  42                                  * This works because the image will be one of three things:
  43                                  * - Two empty squares, if the browser doesn't render emoji
  44                                  * - Two squares with 'U' and 'N' in them, if the browser doesn't render flag emoji
  45                                  * - The United Nations flag
  46                                  *
  47                                  * The first two will encode to small images (1-2KB data URLs), the third will encode
  48                                  * to a larger image (4-5KB data URL).
  49                                  */
  50                                 context.fillText( stringFromCharCode( 55356, 56826, 55356, 56819 ), 0, 0 );
  51                                 if ( canvas.toDataURL().length < 3000 ) {
  52                                         return false;
  53                                 }
  54
  55                                 context.clearRect( 0, 0, canvas.width, canvas.height );
  56
  57                                 /*
  58                                  * Test for rainbow flag compatibility. As the rainbow flag was added out of sequence with
  59                                  * the usual Unicode release cycle, some browsers support it, and some don't, even if their
  60                                  * Unicode support is up to date.
  61                                  *
  62                                  * To test for support, we try to render it, and compare the rendering to how it would look if
  63                                  * the browser doesn't render it correctly (white flag emoji + rainbow emoji).
  64                                  */
  65                                 context.fillText( stringFromCharCode( 55356, 57331, 65039, 8205, 55356, 57096 ), 0, 0 );
  66                                 flag = canvas.toDataURL();
  67
  68                                 context.clearRect( 0, 0, canvas.width, canvas.height );
  69
  70                                 context.fillText( stringFromCharCode( 55356, 57331, 55356, 57096 ), 0, 0 );
  71                                 flag2 = canvas.toDataURL();
  72
  73                                 return flag !== flag2;
  74                         case 'emoji4':
  75                                 /*
  76                                  * Emoji 4 has the best technologists. So does WordPress!
  77                                  *
  78                                  * To test for support, try to render a new emoji (woman technologist: medium skin tone),
  79                                  * then compare it to how it would look if the browser doesn't render it correctly
  80                                  * (woman technologist: medium skin tone + personal computer).
  81                                  */
  82                                 context.fillText( stringFromCharCode( 55357, 56425, 55356, 57341, 8205, 55357, 56507), 0, 0 );
  83                                 technologist = canvas.toDataURL();
  84
  85                                 context.clearRect( 0, 0, canvas.width, canvas.height );
  86
  87                                 context.fillText( stringFromCharCode( 55357, 56425, 55356, 57341, 55357, 56507), 0, 0 );
  88                                 technologist2 = canvas.toDataURL();
  89
  90                                 return technologist !== technologist2;
  91                 }
  92
  93                 return false;
  94         }
  95
  96         function addScript( src ) {
  97                 var script = document.createElement( 'script' );
  98
  99                 script.src = src;
 100                 script.defer = script.type = 'text/javascript';
 101                 document.getElementsByTagName( 'head' )[0].appendChild( script );
 102         }
 103
 104         tests = Array( 'flag', 'emoji4' );
 105
 106         settings.supports = {
 107                 everything: true,
 108                 everythingExceptFlag: true
 109         };
 110
 111         for( ii = 0; ii < tests.length; ii++ ) {
 112                 settings.supports[ tests[ ii ] ] = browserSupportsEmoji( tests[ ii ] );
 113
 114                 settings.supports.everything = settings.supports.everything && settings.supports[ tests[ ii ] ];
 115
 116                 if ( 'flag' !== tests[ ii ] ) {
 117                         settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && settings.supports[ tests[ ii ] ];
 118                 }
 119         }
 120
 121         settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && ! settings.supports.flag;
 122
 123         settings.DOMReady = false;
 124         settings.readyCallback = function() {
 125                 settings.DOMReady = true;
 126         };
 127
 128         if ( ! settings.supports.everything ) {
 129                 ready = function() {
 130                         settings.readyCallback();
 131                 };
 132
 133                 if ( document.addEventListener ) {
 134                         document.addEventListener( 'DOMContentLoaded', ready, false );
 135                         window.addEventListener( 'load', ready, false );
 136                 } else {
 137                         window.attachEvent( 'onload', ready );
 138                         document.attachEvent( 'onreadystatechange', function() {
 139                                 if ( 'complete' === document.readyState ) {
 140                                         settings.readyCallback();
 141                                 }
 142                         } );
 143                 }
 144
 145                 src = settings.source || {};
 146
 147                 if ( src.concatemoji ) {
 148                         addScript( src.concatemoji );
 149                 } else if ( src.wpemoji && src.twemoji ) {
 150                         addScript( src.twemoji );
 151                         addScript( src.wpemoji );
 152                 }
 153         }
 154
 155 } )( window, document, window._wpemojiSettings );