[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-includes/js/wp-emoji-loader.js
   3   */
   4  
   5  /**
   6   * Emoji Settings as exported in PHP via _print_emoji_detection_script().
   7   * @typedef WPEmojiSettings
   8   * @type {object}
   9   * @property {?object} source
  10   * @property {?string} source.concatemoji
  11   * @property {?string} source.twemoji
  12   * @property {?string} source.wpemoji
  13   * @property {?boolean} DOMReady
  14   * @property {?Function} readyCallback
  15   */
  16  
  17  /**
  18   * Support tests.
  19   * @typedef SupportTests
  20   * @type {object}
  21   * @property {?boolean} flag
  22   * @property {?boolean} emoji
  23   */
  24  
  25  /**
  26   * IIFE to detect emoji support and load Twemoji if needed.
  27   *
  28   * @param {Window} window
  29   * @param {Document} document
  30   * @param {WPEmojiSettings} settings
  31   */
  32  ( function wpEmojiLoader( window, document, settings ) {
  33      if ( typeof Promise === 'undefined' ) {
  34          return;
  35      }
  36  
  37      var sessionStorageKey = 'wpEmojiSettingsSupports';
  38      var tests = [ 'flag', 'emoji' ];
  39  
  40      /**
  41       * Checks whether the browser supports offloading to a Worker.
  42       *
  43       * @since 6.3.0
  44       *
  45       * @private
  46       *
  47       * @returns {boolean}
  48       */
  49  	function supportsWorkerOffloading() {
  50          return (
  51              typeof Worker !== 'undefined' &&
  52              typeof OffscreenCanvas !== 'undefined' &&
  53              typeof URL !== 'undefined' &&
  54              URL.createObjectURL &&
  55              typeof Blob !== 'undefined'
  56          );
  57      }
  58  
  59      /**
  60       * @typedef SessionSupportTests
  61       * @type {object}
  62       * @property {number} timestamp
  63       * @property {SupportTests} supportTests
  64       */
  65  
  66      /**
  67       * Get support tests from session.
  68       *
  69       * @since 6.3.0
  70       *
  71       * @private
  72       *
  73       * @returns {?SupportTests} Support tests, or null if not set or older than 1 week.
  74       */
  75  	function getSessionSupportTests() {
  76          try {
  77              /** @type {SessionSupportTests} */
  78              var item = JSON.parse(
  79                  sessionStorage.getItem( sessionStorageKey )
  80              );
  81              if (
  82                  typeof item === 'object' &&
  83                  typeof item.timestamp === 'number' &&
  84                  new Date().valueOf() < item.timestamp + 604800 && // Note: Number is a week in seconds.
  85                  typeof item.supportTests === 'object'
  86              ) {
  87                  return item.supportTests;
  88              }
  89          } catch ( e ) {}
  90          return null;
  91      }
  92  
  93      /**
  94       * Persist the supports in session storage.
  95       *
  96       * @since 6.3.0
  97       *
  98       * @private
  99       *
 100       * @param {SupportTests} supportTests Support tests.
 101       */
 102  	function setSessionSupportTests( supportTests ) {
 103          try {
 104              /** @type {SessionSupportTests} */
 105              var item = {
 106                  supportTests: supportTests,
 107                  timestamp: new Date().valueOf()
 108              };
 109  
 110              sessionStorage.setItem(
 111                  sessionStorageKey,
 112                  JSON.stringify( item )
 113              );
 114          } catch ( e ) {}
 115      }
 116  
 117      /**
 118       * Checks if two sets of Emoji characters render the same visually.
 119       *
 120       * This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
 121       * scope. Everything must be passed by parameters.
 122       *
 123       * @since 4.9.0
 124       *
 125       * @private
 126       *
 127       * @param {CanvasRenderingContext2D} context 2D Context.
 128       * @param {string} set1 Set of Emoji to test.
 129       * @param {string} set2 Set of Emoji to test.
 130       *
 131       * @return {boolean} True if the two sets render the same.
 132       */
 133  	function emojiSetsRenderIdentically( context, set1, set2 ) {
 134          // Cleanup from previous test.
 135          context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
 136          context.fillText( set1, 0, 0 );
 137          var rendered1 = new Uint32Array(
 138              context.getImageData(
 139                  0,
 140                  0,
 141                  context.canvas.width,
 142                  context.canvas.height
 143              ).data
 144          );
 145  
 146          // Cleanup from previous test.
 147          context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
 148          context.fillText( set2, 0, 0 );
 149          var rendered2 = new Uint32Array(
 150              context.getImageData(
 151                  0,
 152                  0,
 153                  context.canvas.width,
 154                  context.canvas.height
 155              ).data
 156          );
 157  
 158          return rendered1.every( function ( rendered2Data, index ) {
 159              return rendered2Data === rendered2[ index ];
 160          } );
 161      }
 162  
 163      /**
 164       * Determines if the browser properly renders Emoji that Twemoji can supplement.
 165       *
 166       * This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
 167       * scope. Everything must be passed by parameters.
 168       *
 169       * @since 4.2.0
 170       *
 171       * @private
 172       *
 173       * @param {CanvasRenderingContext2D} context 2D Context.
 174       * @param {string} type Whether to test for support of "flag" or "emoji".
 175       * @param {Function} emojiSetsRenderIdentically Reference to emojiSetsRenderIdentically function, needed due to minification.
 176       *
 177       * @return {boolean} True if the browser can render emoji, false if it cannot.
 178       */
 179  	function browserSupportsEmoji( context, type, emojiSetsRenderIdentically ) {
 180          var isIdentical;
 181  
 182          switch ( type ) {
 183              case 'flag':
 184                  /*
 185                   * Test for Transgender flag compatibility. Added in Unicode 13.
 186                   *
 187                   * To test for support, we try to render it, and compare the rendering to how it would look if
 188                   * the browser doesn't render it correctly (white flag emoji + transgender symbol).
 189                   */
 190                  isIdentical = emojiSetsRenderIdentically(
 191                      context,
 192                      '\uD83C\uDFF3\uFE0F\u200D\u26A7\uFE0F', // as a zero-width joiner sequence
 193                      '\uD83C\uDFF3\uFE0F\u200B\u26A7\uFE0F' // separated by a zero-width space
 194                  );
 195  
 196                  if ( isIdentical ) {
 197                      return false;
 198                  }
 199  
 200                  /*
 201                   * Test for UN flag compatibility. This is the least supported of the letter locale flags,
 202                   * so gives us an easy test for full support.
 203                   *
 204                   * To test for support, we try to render it, and compare the rendering to how it would look if
 205                   * the browser doesn't render it correctly ([U] + [N]).
 206                   */
 207                  isIdentical = emojiSetsRenderIdentically(
 208                      context,
 209                      '\uD83C\uDDFA\uD83C\uDDF3', // as the sequence of two code points
 210                      '\uD83C\uDDFA\u200B\uD83C\uDDF3' // as the two code points separated by a zero-width space
 211                  );
 212  
 213                  if ( isIdentical ) {
 214                      return false;
 215                  }
 216  
 217                  /*
 218                   * Test for English flag compatibility. England is a country in the United Kingdom, it
 219                   * does not have a two letter locale code but rather a five letter sub-division code.
 220                   *
 221                   * To test for support, we try to render it, and compare the rendering to how it would look if
 222                   * the browser doesn't render it correctly (black flag emoji + [G] + [B] + [E] + [N] + [G]).
 223                   */
 224                  isIdentical = emojiSetsRenderIdentically(
 225                      context,
 226                      // as the flag sequence
 227                      '\uD83C\uDFF4\uDB40\uDC67\uDB40\uDC62\uDB40\uDC65\uDB40\uDC6E\uDB40\uDC67\uDB40\uDC7F',
 228                      // with each code point separated by a zero-width space
 229                      '\uD83C\uDFF4\u200B\uDB40\uDC67\u200B\uDB40\uDC62\u200B\uDB40\uDC65\u200B\uDB40\uDC6E\u200B\uDB40\uDC67\u200B\uDB40\uDC7F'
 230                  );
 231  
 232                  return ! isIdentical;
 233              case 'emoji':
 234                  /*
 235                   * Rise Like a Phoenix.
 236                   *
 237                   * To test for Emoji 15.1 support, try to render a new emoji: Phoenix.
 238                   *
 239                   * A phoenix, a mythical immortal bird with flame-like feathers found in the folklore of many global
 240                   * cultures. Often used to symbolize renewal or rebirth.
 241                   *
 242                   * The Phoenix emoji is a ZWJ sequence combining 🐦 Bird, Zero Width Joiner and 🔥 Fire.
 243                   * These display as a single emoji on supported platforms.
 244                   *
 245                   * 0xD83D 0xDC26 (\uD83D\uDC26) == 🐦 Bird
 246                   * 0x200D                       == Zero-Width Joiner (ZWJ) that links the code points for the new emoji or
 247                   * 0x200B                       == Zero-Width Space (ZWS) that is rendered for clients not supporting the new emoji.
 248                   * 0xD83D 0xDD25 (\uD83D\uDD25) == 🔥 Fire
 249                   *
 250                   * When updating this test for future Emoji releases, ensure that individual emoji that make up the
 251                   * sequence come from older emoji standards.
 252                   */
 253                  isIdentical = emojiSetsRenderIdentically(
 254                      context,
 255                      '\uD83D\uDC26\u200D\uD83D\uDD25', // as the zero-width joiner sequence
 256                      '\uD83D\uDC26\u200B\uD83D\uDD25' // separated by a zero-width space
 257                  );
 258  
 259                  return ! isIdentical;
 260          }
 261  
 262          return false;
 263      }
 264  
 265      /**
 266       * Checks emoji support tests.
 267       *
 268       * This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
 269       * scope. Everything must be passed by parameters.
 270       *
 271       * @since 6.3.0
 272       *
 273       * @private
 274       *
 275       * @param {string[]} tests Tests.
 276       * @param {Function} browserSupportsEmoji Reference to browserSupportsEmoji function, needed due to minification.
 277       * @param {Function} emojiSetsRenderIdentically Reference to emojiSetsRenderIdentically function, needed due to minification.
 278       *
 279       * @return {SupportTests} Support tests.
 280       */
 281  	function testEmojiSupports( tests, browserSupportsEmoji, emojiSetsRenderIdentically ) {
 282          var canvas;
 283          if (
 284              typeof WorkerGlobalScope !== 'undefined' &&
 285              self instanceof WorkerGlobalScope
 286          ) {
 287              canvas = new OffscreenCanvas( 300, 150 ); // Dimensions are default for HTMLCanvasElement.
 288          } else {
 289              canvas = document.createElement( 'canvas' );
 290          }
 291  
 292          var context = canvas.getContext( '2d', { willReadFrequently: true } );
 293  
 294          /*
 295           * Chrome on OS X added native emoji rendering in M41. Unfortunately,
 296           * it doesn't work when the font is bolder than 500 weight. So, we
 297           * check for bold rendering support to avoid invisible emoji in Chrome.
 298           */
 299          context.textBaseline = 'top';
 300          context.font = '600 32px Arial';
 301  
 302          var supports = {};
 303          tests.forEach( function ( test ) {
 304              supports[ test ] = browserSupportsEmoji( context, test, emojiSetsRenderIdentically );
 305          } );
 306          return supports;
 307      }
 308  
 309      /**
 310       * Adds a script to the head of the document.
 311       *
 312       * @ignore
 313       *
 314       * @since 4.2.0
 315       *
 316       * @param {string} src The url where the script is located.
 317       *
 318       * @return {void}
 319       */
 320  	function addScript( src ) {
 321          var script = document.createElement( 'script' );
 322          script.src = src;
 323          script.defer = true;
 324          document.head.appendChild( script );
 325      }
 326  
 327      settings.supports = {
 328          everything: true,
 329          everythingExceptFlag: true
 330      };
 331  
 332      // Create a promise for DOMContentLoaded since the worker logic may finish after the event has fired.
 333      var domReadyPromise = new Promise( function ( resolve ) {
 334          document.addEventListener( 'DOMContentLoaded', resolve, {
 335              once: true
 336          } );
 337      } );
 338  
 339      // Obtain the emoji support from the browser, asynchronously when possible.
 340      new Promise( function ( resolve ) {
 341          var supportTests = getSessionSupportTests();
 342          if ( supportTests ) {
 343              resolve( supportTests );
 344              return;
 345          }
 346  
 347          if ( supportsWorkerOffloading() ) {
 348              try {
 349                  // Note that the functions are being passed as arguments due to minification.
 350                  var workerScript =
 351                      'postMessage(' +
 352                      testEmojiSupports.toString() +
 353                      '(' +
 354                      [
 355                          JSON.stringify( tests ),
 356                          browserSupportsEmoji.toString(),
 357                          emojiSetsRenderIdentically.toString()
 358                      ].join( ',' ) +
 359                      '));';
 360                  var blob = new Blob( [ workerScript ], {
 361                      type: 'text/javascript'
 362                  } );
 363                  var worker = new Worker( URL.createObjectURL( blob ), { name: 'wpTestEmojiSupports' } );
 364                  worker.onmessage = function ( event ) {
 365                      supportTests = event.data;
 366                      setSessionSupportTests( supportTests );
 367                      worker.terminate();
 368                      resolve( supportTests );
 369                  };
 370                  return;
 371              } catch ( e ) {}
 372          }
 373  
 374          supportTests = testEmojiSupports( tests, browserSupportsEmoji, emojiSetsRenderIdentically );
 375          setSessionSupportTests( supportTests );
 376          resolve( supportTests );
 377      } )
 378          // Once the browser emoji support has been obtained from the session, finalize the settings.
 379          .then( function ( supportTests ) {
 380              /*
 381               * Tests the browser support for flag emojis and other emojis, and adjusts the
 382               * support settings accordingly.
 383               */
 384              for ( var test in supportTests ) {
 385                  settings.supports[ test ] = supportTests[ test ];
 386  
 387                  settings.supports.everything =
 388                      settings.supports.everything && settings.supports[ test ];
 389  
 390                  if ( 'flag' !== test ) {
 391                      settings.supports.everythingExceptFlag =
 392                          settings.supports.everythingExceptFlag &&
 393                          settings.supports[ test ];
 394                  }
 395              }
 396  
 397              settings.supports.everythingExceptFlag =
 398                  settings.supports.everythingExceptFlag &&
 399                  ! settings.supports.flag;
 400  
 401              // Sets DOMReady to false and assigns a ready function to settings.
 402              settings.DOMReady = false;
 403              settings.readyCallback = function () {
 404                  settings.DOMReady = true;
 405              };
 406          } )
 407          .then( function () {
 408              return domReadyPromise;
 409          } )
 410          .then( function () {
 411              // When the browser can not render everything we need to load a polyfill.
 412              if ( ! settings.supports.everything ) {
 413                  settings.readyCallback();
 414  
 415                  var src = settings.source || {};
 416  
 417                  if ( src.concatemoji ) {
 418                      addScript( src.concatemoji );
 419                  } else if ( src.wpemoji && src.twemoji ) {
 420                      addScript( src.twemoji );
 421                      addScript( src.wpemoji );
 422                  }
 423              }
 424          } );
 425  } )( window, document, window._wpemojiSettings );