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
This commit is contained in:
Gary Pendergast
parent
64f1a8a992
commit
b53b12ff8c
|
|
@ -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' );
|
||||
|
|
|
|||
|
|
@ -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 ); ?>;
|
||||
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f;c.supports={simple:d("simple"),flag:d("flag")},c.supports.simple&&c.supports.flag||(f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
|
||||
</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 = '';
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
|
|
@ -0,0 +1 @@
|
|||
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f;c.supports={simple:d("simple"),flag:d("flag")},c.supports.simple&&c.supports.flag||(f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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 );
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
!function(a,b,c){function d(){function d(){g&&new g(function(a){for(var b,c,d=a.length;d--;)for(b=a[d].addedNodes.length;b--;)c=a[d].addedNodes[b],3===c.nodeType&&(c=c.parentNode),c&&1===c.nodeType&&f(c)}).observe(document.body,{childList:!0,subtree:!0}),f(document.body)}function e(a){var b=document.createElement("canvas"),c=b.getContext&&b.getContext("2d");return c&&c.fillText?(c.textBaseline="top",c.font="600 32px Arial","flag"===a?(c.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),b.toDataURL().length>3e3):(c.fillText(String.fromCharCode(55357,56835),0,0),0!==c.getImageData(16,16,1,1).data[0])):!1}function f(a,d){if(!j)return a;var e=d&&d.className||"emoji";return b.parse(a,{base:c.baseUrl,ext:c.ext,className:e,callback:function(a,b){switch(a){case"a9":case"ae":case"2122":case"2194":case"2660":case"2663":case"2665":case"2666":return!1}return i||!h||/^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test(a)?"".concat(b.base,"/",a,b.ext):!1}})}var g=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,h=!1,i=!1,j=!1;return b&&c&&(h=e(),i=e("flag"),j=!h||!i,a.addEventListener?a.addEventListener("load",d,!1):a.attachEvent&&a.attachEvent("onload",d)),{browserSupportsEmoji:e,replaceEmoji:j,parse:f}}a.wp=a.wp||{},a.wp.emoji=new d}(window,window.twemoji,window._wpemojiSettings);
|
||||
!function(a,b){function c(){function c(){if("undefined"==typeof a.twemoji){if(l>600)return;return a.clearTimeout(g),g=a.setTimeout(c,50),void l++}f=a.twemoji,h&&new h(function(a){for(var b,c,e=a.length;e--;)for(b=a[e].addedNodes.length;b--;)c=a[e].addedNodes[b],3===c.nodeType&&(c=c.parentNode),c&&1===c.nodeType&&d(c)}).observe(document.body,{childList:!0,subtree:!0}),d(document.body)}function d(a,c){if(!k)return a;var d=c&&c.className||"emoji";return f.parse(a,{base:b.baseUrl,ext:b.ext,className:d,callback:function(a,b){switch(a){case"a9":case"ae":case"2122":case"2194":case"2660":case"2663":case"2665":case"2666":return!1}return j||!i||/^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test(a)?"".concat(b.base,"/",a,b.ext):!1}})}function e(){"interactive"===document.readyState&&c()}var f,g,h=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,i=!1,j=!1,k=!1,l=0;return b&&(i=a._wpemojiSettings.supports.simple,j=a._wpemojiSettings.supports.flag,k=!i||!j,"loading"==document.readyState?document.addEventListener?document.addEventListener("readystatechange",e,!1):document.attachEvent&&document.attachEvent("onreadystatechange",e):c()),{replaceEmoji:k,parse:d}}a.wp=a.wp||{},a.wp.emoji=new c}(window,window._wpemojiSettings);
|
||||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.2-beta2-31874';
|
||||
$wp_version = '4.2-beta2-31875';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue