sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.

Browse Source 
Props pento, azaozz.

Fixes #31701.



git-svn-id: https://develop.svn.wordpress.org/trunk@31875 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Gary Pendergast 2015-03-24 23:32:23 +00:00
parent 8bbb5869e9
commit 5a0564bb8f
7 changed files with 207 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
Gruntfile.js
View File

@ -464,6 +464,19 @@ module.exports = function(grunt) {
BUILD_DIR + 'wp-includes/js/tinymce/plugins/*/plugin.min.js'
],
dest: BUILD_DIR + 'wp-includes/js/tinymce/wp-tinymce.js'
},
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'
}
},
compress: {
@ -502,6 +515,12 @@ module.exports = function(grunt) {
dest: SOURCE_DIR
}
},
includes: {
emoji: {
src: BUILD_DIR + 'wp-includes/formatting.php',
dest: '.'
}
},
_watch: {
all: {
files: [
@ -615,6 +634,8 @@ module.exports = function(grunt) {
'concat:tinymce',
'compress:tinymce',
'clean:tinymce',
'concat:emoji',
'includes:emoji',
'jsvalidate:build'
] );

1
package.json
View File

@ -22,6 +22,7 @@
"grunt-contrib-qunit": "~0.5.2",
"grunt-contrib-uglify": "~0.8.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-includes": "~0.4.5",
"grunt-jsvalidate": "~0.2.2",
"grunt-legacy-util": "^0.2.0",
"grunt-patch-wordpress": "~0.3.0",

1
src/wp-includes/default-filters.php
View File

@ -213,6 +213,7 @@ add_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
add_action( 'wp_head', 'locale_stylesheet' );
add_action( 'publish_future_post', 'check_and_publish_future_post', 10, 1 );
add_action( 'wp_head', 'noindex', 1 );
add_action( 'wp_head', 'print_emoji_detection_script', 7 );
add_action( 'wp_head', 'wp_print_styles', 8 );
add_action( 'wp_head', 'wp_print_head_scripts', 9 );
add_action( 'wp_head', 'wp_generator' );

69
src/wp-includes/formatting.php
View File

@ -4082,6 +4082,13 @@ function wp_spaces_regexp() {
* @since 4.2.0
*/
function print_emoji_styles() {
static $printed = false;
if ( $printed ) {
return;
}
$printed = true;
?>
<style type="text/css">
img.wp-smiley,
@ -4100,6 +4107,64 @@ img.emoji {
<?php
}
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
}
}
/**
* Convert any 4 byte emoji in a string to their equivalent HTML entity.
*
@ -4163,10 +4228,10 @@ function wp_staticize_emoji( $text ) {
return $text;
}
/** This filter is documented in wp-includes/script-loader.php */
/** This filter is documented in wp-includes/formatting.php */
$cdn_url = apply_filters( 'emoji_url', set_url_scheme( '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72/' ) );
/** This filter is documented in wp-includes/script-loader.php */
/** This filter is documented in wp-includes/formatting.php */
$ext = apply_filters( 'emoji_ext', '.png' );
$output = '';

76
src/wp-includes/js/wp-emoji-loader.js Executable file
View File

@ -0,0 +1,76 @@
( 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 );

100
src/wp-includes/js/wp-emoji.js
View File

@ -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 );

23
src/wp-includes/script-loader.php
View File

@ -424,29 +424,6 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'media-audiovideo', "/wp-includes/js/media/audio-video$suffix.js", array( 'media-editor' ), false, 1 );
$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models', 'media-audiovideo', 'wp-playlist' ), false, 1 );
$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' );
if ( is_admin() ) {
$scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array( 'jquery', 'wp-ajax-response' ), false, 1 );
did_action( 'init' ) && $scripts->localize( 'admin-tags', 'tagsl10n', array(