Emoji: Instead of loading the emoji JS files automatically, we now include a small JS shim in the header, to test if the user's browser needs Twemoji. It then loads the emoji JS files only if they're needed.

Props pento, azaozz.

Fixes #31701.


Built from https://develop.svn.wordpress.org/trunk@31875


git-svn-id: http://core.svn.wordpress.org/trunk@31854 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/wp-emoji.js

@@ -1,5 +1,5 @@
 
-( function( window, twemoji, settings ) {
+( function( window, settings ) {
 	function wpEmoji() {
 		var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
 
@@ -28,7 +28,11 @@
 		 *
 		 * @var Boolean
 		 */
-		replaceEmoji = false;
+		replaceEmoji = false,
+
+		// Private
+		twemoji, timer,
+		count = 0;
 
 		/**
 		 * Runs when the document load event is fired, so we can do our first parse of the page.
@@ -36,6 +40,22 @@
 		 * @since 4.2.0
 		 */
 		function load() {
+			if ( typeof window.twemoji === 'undefined' ) {
+				// Break if waiting for longer than 30 sec.
+				if ( count > 600 ) {
+					return;
+				}
+
+				// Still waiting. 
+				window.clearTimeout( timer );
+				timer = window.setTimeout( load, 50 );
+				count++;
+
+				return;
+			}
+
+			twemoji = window.twemoji;
+
 			if ( MutationObserver ) {
 				new MutationObserver( function( mutationRecords ) {
 					var i = mutationRecords.length,
@@ -65,54 +85,6 @@
 			parse( document.body );
 		}
 
-		/**
-		 * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
-		 * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
-		 *
-		 * @since 4.2.0
-		 *
-		 * @param type {String} Whether to test for support of "simple" or "flag" emoji.
-		 * @return {Boolean} True if the browser can render emoji, false if it cannot.
-		 */
-		function browserSupportsEmoji( type ) {
-			var canvas = document.createElement( 'canvas' ),
-				context = canvas.getContext && canvas.getContext( '2d' );
-
-			if ( ! context || ! context.fillText ) {
-				return false;
-			}
-
-			/*
-			 * Chrome on OS X added native emoji rendering in M41. Unfortunately,
-			 * it doesn't work when the font is bolder than 500 weight. So, we
-			 * check for bold rendering support to avoid invisible emoji in Chrome.
-			 */
-			context.textBaseline = 'top';
-			context.font = '600 32px Arial';
-
-			if ( type === 'flag' ) {
-				/*
-				 * This works because the image will be one of three things:
-				 * - Two empty squares, if the browser doesn't render emoji
-				 * - Two squares with 'G' and 'B' in them, if the browser doesn't render flag emoji
-				 * - The British flag
-				 *
-				 * The first two will encode to small images (1-2KB data URLs), the third will encode
-				 * to a larger image (4-5KB data URL).
-				 */
-				context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
-				return canvas.toDataURL().length > 3000;
-			} else {
-				/*
-				 * This creates a smiling emoji, and checks to see if there is any image data in the
-				 * center pixel. In browsers that don't support emoji, the character will be rendered
-				 * as an empty square, so the center pixel will be blank.
-				 */
-				context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
-				return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
-			}
-		}
-
 		/**
 		 * Given an element or string, parse any emoji characters into Twemoji images.
 		 *
@@ -157,23 +129,33 @@
 			} );
 		}
 
+		// Load when the readyState changes to 'interactive', not 'complete'.
+		function onLoad() {
+			if ( 'interactive' === document.readyState ) {
+				load();
+			}
+		}
+
 		/**
 		 * Initialize our emoji support, and set up listeners.
 		 */
-		if ( twemoji && settings ) {
-			supportsEmoji = browserSupportsEmoji();
-			supportsFlagEmoji = browserSupportsEmoji( 'flag' );
+		if ( settings ) {
+			supportsEmoji = window._wpemojiSettings.supports.simple;
+			supportsFlagEmoji = window._wpemojiSettings.supports.flag;
 			replaceEmoji = ! supportsEmoji || ! supportsFlagEmoji;
 
-			if ( window.addEventListener ) {
-				window.addEventListener( 'load', load, false );
-			} else if ( window.attachEvent ) {
-				window.attachEvent( 'onload', load );
+			if ( 'loading' == document.readyState ) {
+				if ( document.addEventListener ) {
+					document.addEventListener( 'readystatechange', onLoad, false );
+				} else if ( document.attachEvent ) {
+					document.attachEvent( 'onreadystatechange', onLoad );
+				}
+			} else {
+				load();
 			}
 		}
 
 		return {
-			browserSupportsEmoji: browserSupportsEmoji,
 			replaceEmoji: replaceEmoji,
 			parse: parse
 		};
@@ -182,4 +164,4 @@
 	window.wp = window.wp || {};
 	window.wp.emoji = new wpEmoji();
 
-} )( window, window.twemoji, window._wpemojiSettings );
+} )( window, window._wpemojiSettings );