<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[31875] trunk: 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.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/31875">31875</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/31875","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>pento</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2015-03-24 23:32:23 +0000 (Tue, 24 Mar 2015)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/31701">#31701</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkGruntfilejs">trunk/Gruntfile.js</a></li>
<li><a href="#trunkpackagejson">trunk/package.json</a></li>
<li><a href="#trunksrcwpincludesdefaultfiltersphp">trunk/src/wp-includes/default-filters.php</a></li>
<li><a href="#trunksrcwpincludesformattingphp">trunk/src/wp-includes/formatting.php</a></li>
<li><a href="#trunksrcwpincludesjswpemojijs">trunk/src/wp-includes/js/wp-emoji.js</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesjswpemojiloaderjs">trunk/src/wp-includes/js/wp-emoji-loader.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkGruntfilejs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/Gruntfile.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/Gruntfile.js 2015-03-24 20:32:23 UTC (rev 31874)
+++ trunk/Gruntfile.js 2015-03-24 23:32:23 UTC (rev 31875)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -464,6 +464,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> BUILD_DIR + 'wp-includes/js/tinymce/plugins/*/plugin.min.js'
</span><span class="cx" style="display: block; padding: 0 10px"> ],
</span><span class="cx" style="display: block; padding: 0 10px"> dest: BUILD_DIR + 'wp-includes/js/tinymce/wp-tinymce.js'
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ },
+ emoji: {
+ options: {
+ separator: '\n',
+ process: function( src, filepath ) {
+ return '// Source: ' + filepath.replace( BUILD_DIR, '' ) + '\n' + src;
+ }
+ },
+ src: [
+ BUILD_DIR + 'wp-includes/js/twemoji.min.js',
+ BUILD_DIR + 'wp-includes/js/wp-emoji.min.js'
+ ],
+ dest: BUILD_DIR + 'wp-includes/js/wp-emoji-release.min.js'
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> compress: {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -502,6 +515,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> dest: SOURCE_DIR
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ includes: {
+ emoji: {
+ src: BUILD_DIR + 'wp-includes/formatting.php',
+ dest: '.'
+ }
+ },
</ins><span class="cx" style="display: block; padding: 0 10px"> _watch: {
</span><span class="cx" style="display: block; padding: 0 10px"> all: {
</span><span class="cx" style="display: block; padding: 0 10px"> files: [
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -615,6 +634,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'concat:tinymce',
</span><span class="cx" style="display: block; padding: 0 10px"> 'compress:tinymce',
</span><span class="cx" style="display: block; padding: 0 10px"> 'clean:tinymce',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'concat:emoji',
+ 'includes:emoji',
</ins><span class="cx" style="display: block; padding: 0 10px"> 'jsvalidate:build'
</span><span class="cx" style="display: block; padding: 0 10px"> ] );
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunkpackagejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/package.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/package.json 2015-03-24 20:32:23 UTC (rev 31874)
+++ trunk/package.json 2015-03-24 23:32:23 UTC (rev 31875)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -22,6 +22,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> "grunt-contrib-qunit": "~0.5.2",
</span><span class="cx" style="display: block; padding: 0 10px"> "grunt-contrib-uglify": "~0.8.0",
</span><span class="cx" style="display: block; padding: 0 10px"> "grunt-contrib-watch": "~0.6.1",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "grunt-includes": "~0.4.5",
</ins><span class="cx" style="display: block; padding: 0 10px"> "grunt-jsvalidate": "~0.2.2",
</span><span class="cx" style="display: block; padding: 0 10px"> "grunt-legacy-util": "^0.2.0",
</span><span class="cx" style="display: block; padding: 0 10px"> "grunt-patch-wordpress": "~0.3.0",
</span></span></pre></div>
<a id="trunksrcwpincludesdefaultfiltersphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/default-filters.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/default-filters.php 2015-03-24 20:32:23 UTC (rev 31874)
+++ trunk/src/wp-includes/default-filters.php 2015-03-24 23:32:23 UTC (rev 31875)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -213,6 +213,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_head', 'locale_stylesheet' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'publish_future_post', 'check_and_publish_future_post', 10, 1 );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_head', 'noindex', 1 );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+add_action( 'wp_head', 'print_emoji_detection_script', 7 );
</ins><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_head', 'wp_print_styles', 8 );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_head', 'wp_print_head_scripts', 9 );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_head', 'wp_generator' );
</span></span></pre></div>
<a id="trunksrcwpincludesformattingphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/formatting.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/formatting.php 2015-03-24 20:32:23 UTC (rev 31874)
+++ trunk/src/wp-includes/formatting.php 2015-03-24 23:32:23 UTC (rev 31875)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4082,6 +4082,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function print_emoji_styles() {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ static $printed = false;
+
+ if ( $printed ) {
+ return;
+ }
+
+ $printed = true;
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <style type="text/css">
</span><span class="cx" style="display: block; padding: 0 10px"> img.wp-smiley,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4100,6 +4107,64 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function print_emoji_detection_script() {
+ global $wp_version;
+ static $printed = false;
+
+ if ( $printed ) {
+ return;
+ }
+
+ $printed = true;
+
+ $settings = array(
+ /**
+ * Filter the URL where emoji images are hosted.
+ *
+ * @since 4.2.0
+ *
+ * @param string The emoji base URL.
+ */
+ 'baseUrl' => apply_filters( 'emoji_url', set_url_scheme( '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72' ) ),
+
+ /**
+ * Filter the extension of the emoji files.
+ *
+ * @since 4.2.0
+ *
+ * @param string The emoji extension. Default .png.
+ */
+ 'ext' => apply_filters( 'emoji_ext', '.png' ),
+ );
+
+ $version = 'ver=' . $wp_version;
+
+ if ( SCRIPT_DEBUG ) {
+ $settings['source'] = array(
+ 'wpemoji' => includes_url( "js/wp-emoji.js?$version" ),
+ 'twemoji' => includes_url( "js/twemoji.js?$version" ),
+ );
+
+ ?>
+ <script type="text/javascript">
+ window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
+ <?php readfile( ABSPATH . WPINC . "/js/wp-emoji-loader.js" ); ?>
+ </script>
+ <?php
+ } else {
+ $settings['source'] = array(
+ 'concatemoji' => includes_url( "js/wp-emoji-release.min.js?$version" ),
+ );
+
+ ?>
+ <script type="text/javascript">
+ window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
+ include "js/wp-emoji-loader.min.js"
+ </script>
+ <?php
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Convert any 4 byte emoji in a string to their equivalent HTML entity.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4163,10 +4228,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return $text;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /** This filter is documented in wp-includes/script-loader.php */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /** This filter is documented in wp-includes/formatting.php */
</ins><span class="cx" style="display: block; padding: 0 10px"> $cdn_url = apply_filters( 'emoji_url', set_url_scheme( '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72/' ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /** This filter is documented in wp-includes/script-loader.php */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /** This filter is documented in wp-includes/formatting.php */
</ins><span class="cx" style="display: block; padding: 0 10px"> $ext = apply_filters( 'emoji_ext', '.png' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $output = '';
</span></span></pre></div>
<a id="trunksrcwpincludesjswpemojiloaderjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-includes/js/wp-emoji-loader.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/wp-emoji-loader.js (rev 0)
+++ trunk/src/wp-includes/js/wp-emoji-loader.js 2015-03-24 23:32:23 UTC (rev 31875)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,76 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+( function( window, document, settings ) {
+ var src;
+
+ /**
+ * 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;
+ }
+ }
+
+ function addScript( src ) {
+ var script = document.createElement( 'script' );
+
+ script.src = src;
+ script.type = 'text/javascript';
+ document.getElementsByTagName( 'head' )[0].appendChild( script );
+ }
+
+ settings.supports = {
+ simple: browserSupportsEmoji( 'simple' ),
+ flag: browserSupportsEmoji( 'flag' )
+ };
+
+ if ( ! settings.supports.simple || ! settings.supports.flag ) {
+ src = settings.source || {};
+
+ if ( src.concatemoji ) {
+ addScript( src.concatemoji );
+ } else if ( src.wpemoji && src.twemoji ) {
+ addScript( src.twemoji );
+ addScript( src.wpemoji );
+ }
+ }
+
+} )( window, document, window._wpemojiSettings );
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/src/wp-includes/js/wp-emoji-loader.js
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svnexecutable"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:executable</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+*
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunksrcwpincludesjswpemojijs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/wp-emoji.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/wp-emoji.js 2015-03-24 20:32:23 UTC (rev 31874)
+++ trunk/src/wp-includes/js/wp-emoji.js 2015-03-24 23:32:23 UTC (rev 31875)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,5 +1,5 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-( function( window, twemoji, settings ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+( function( window, settings ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> function wpEmoji() {
</span><span class="cx" style="display: block; padding: 0 10px"> var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -28,14 +28,34 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @var Boolean
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- replaceEmoji = false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ replaceEmoji = false,
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Private
+ twemoji, timer,
+ count = 0;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Runs when the document load event is fired, so we can do our first parse of the page.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function load() {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( MutationObserver ) {
</span><span class="cx" style="display: block; padding: 0 10px"> new MutationObserver( function( mutationRecords ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var i = mutationRecords.length,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -66,54 +86,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * 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;
- }
- }
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * Given an element or string, parse any emoji characters into Twemoji images.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -157,23 +129,33 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Load when the readyState changes to 'interactive', not 'complete'.
+ function onLoad() {
+ if ( 'interactive' === document.readyState ) {
+ load();
+ }
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Initialize our emoji support, and set up listeners.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( twemoji && settings ) {
- supportsEmoji = browserSupportsEmoji();
- supportsFlagEmoji = browserSupportsEmoji( 'flag' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( settings ) {
+ supportsEmoji = window._wpemojiSettings.supports.simple;
+ supportsFlagEmoji = window._wpemojiSettings.supports.flag;
</ins><span class="cx" style="display: block; padding: 0 10px"> replaceEmoji = ! supportsEmoji || ! supportsFlagEmoji;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( window.addEventListener ) {
- window.addEventListener( 'load', load, false );
- } else if ( window.attachEvent ) {
- window.attachEvent( 'onload', load );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'loading' == document.readyState ) {
+ if ( document.addEventListener ) {
+ document.addEventListener( 'readystatechange', onLoad, false );
+ } else if ( document.attachEvent ) {
+ document.attachEvent( 'onreadystatechange', onLoad );
+ }
+ } else {
+ load();
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- browserSupportsEmoji: browserSupportsEmoji,
</del><span class="cx" style="display: block; padding: 0 10px"> replaceEmoji: replaceEmoji,
</span><span class="cx" style="display: block; padding: 0 10px"> parse: parse
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -182,4 +164,4 @@
</span><span class="cx" style="display: block; padding: 0 10px"> window.wp = window.wp || {};
</span><span class="cx" style="display: block; padding: 0 10px"> window.wp.emoji = new wpEmoji();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-} )( window, window.twemoji, window._wpemojiSettings );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+} )( window, window._wpemojiSettings );
</ins></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php 2015-03-24 20:32:23 UTC (rev 31874)
+++ trunk/src/wp-includes/script-loader.php 2015-03-24 23:32:23 UTC (rev 31875)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -424,29 +424,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'media-audiovideo', "/wp-includes/js/media/audio-video$suffix.js", array( 'media-editor' ), false, 1 );
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models', 'media-audiovideo', 'wp-playlist' ), false, 1 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $scripts->add( 'twemoji', "/wp-includes/js/twemoji$suffix.js", array(), '1.3.2', 1 );
- $scripts->add( 'emoji', "/wp-includes/js/wp-emoji$suffix.js", array( 'twemoji' ), false, 1 );
- did_action( 'init' ) && $scripts->localize( 'emoji', '_wpemojiSettings', array(
- /**
- * Filter the URL where emoji images are hosted.
- *
- * @since 4.2.0
- *
- * @param string The emoji base URL.
- */
- 'baseUrl' => apply_filters( 'emoji_url', '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72' ),
-
- /**
- * Filter the extension of the emoji files.
- *
- * @since 4.2.0
- *
- * @param string The emoji extension. Default .png.
- */
- 'ext' => apply_filters( 'emoji_ext', '.png' ),
- ) );
- $scripts->enqueue( 'emoji' );
-
</del><span class="cx" style="display: block; padding: 0 10px"> if ( is_admin() ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array( 'jquery', 'wp-ajax-response' ), false, 1 );
</span><span class="cx" style="display: block; padding: 0 10px"> did_action( 'init' ) && $scripts->localize( 'admin-tags', 'tagsl10n', array(
</span></span></pre>
</div>
</div>
</body>
</html>