Emoji: Clean up the emoji browser support tests.

As new sets of emoji are added to Unicode, and browsers add support for them at random intervals, we'll inevitably need to add new tests to the emoji loader. This change makes it much easier to add new tests as they're needed.

Fixes #35300.


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


git-svn-id: http://core.svn.wordpress.org/trunk@36783 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Gary Pendergast 2016-03-03 05:17:26 +00:00
parent f1f2c682d6
commit 2c277e3952
7 changed files with 56 additions and 46 deletions

View File

@ -4582,7 +4582,7 @@ function print_emoji_detection_script() {
?> ?>
<script type="text/javascript"> <script type="text/javascript">
window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>; window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
!function(a,b,c){function d(a){var c,d=b.createElement("canvas"),e=d.getContext&&d.getContext("2d"),f=String.fromCharCode;return e&&e.fillText?(e.textBaseline="top",e.font="600 32px Arial","flag"===a?(e.fillText(f(55356,56806,55356,56826),0,0),d.toDataURL().length>3e3):"diversity"===a?(e.fillText(f(55356,57221),0,0),c=e.getImageData(16,16,1,1).data.toString(),e.fillText(f(55356,57221,55356,57343),0,0),c!==e.getImageData(16,16,1,1).data.toString()):("simple"===a?e.fillText(f(55357,56835),0,0):e.fillText(f(55356,57135),0,0),0!==e.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,g;c.supports={simple:d("simple"),flag:d("flag"),unicode8:d("unicode8"),diversity:d("diversity")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag&&c.supports.unicode8&&c.supports.diversity||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings); !function(a,b,c){function d(a){var c,d=b.createElement("canvas"),e=d.getContext&&d.getContext("2d"),f=String.fromCharCode;if(!e||!e.fillText)return!1;switch(e.textBaseline="top",e.font="600 32px Arial",a){case"flag":return e.fillText(f(55356,56806,55356,56826),0,0),d.toDataURL().length>3e3;case"diversity":return e.fillText(f(55356,57221),0,0),c=e.getImageData(16,16,1,1).data.toString(),e.fillText(f(55356,57221,55356,57343),0,0),c!==e.getImageData(16,16,1,1).data.toString();case"simple":return e.fillText(f(55357,56835),0,0),0!==e.getImageData(16,16,1,1).data[0];case"unicode8":return e.fillText(f(55356,57135),0,0),0!==e.getImageData(16,16,1,1).data[0]}return!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity"),c.supports={everything:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script> </script>
<?php <?php
} }

View File

@ -1,5 +1,5 @@
( function( window, document, settings ) { ( function( window, document, settings ) {
var src, ready; var src, ready, ii, tests;
/** /**
* Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
@ -7,7 +7,7 @@
* *
* @since 4.2.0 * @since 4.2.0
* *
* @param type {String} Whether to test for support of "simple" or "flag" emoji. * @param type {String} Whether to test for support of "simple", "flag", "diversity" or "unicode8" emoji.
* @return {Boolean} True if the browser can render emoji, false if it cannot. * @return {Boolean} True if the browser can render emoji, false if it cannot.
*/ */
function browserSupportsEmoji( type ) { function browserSupportsEmoji( type ) {
@ -28,46 +28,48 @@
context.textBaseline = 'top'; context.textBaseline = 'top';
context.font = '600 32px Arial'; context.font = '600 32px Arial';
if ( 'flag' === type ) { switch ( type ) {
/* case 'flag':
* This works because the image will be one of three things: /*
* - Two empty squares, if the browser doesn't render emoji * This works because the image will be one of three things:
* - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji * - Two empty squares, if the browser doesn't render emoji
* - The Australian flag * - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji
* * - The Australian 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). * 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( stringFromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 ); */
return canvas.toDataURL().length > 3000; context.fillText( stringFromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 );
} else if ( 'diversity' === type ) { return canvas.toDataURL().length > 3000;
/* case 'diversity':
* This tests if the browser supports the Emoji Diversity specification, by rendering an /*
* emoji with no skin tone specified (in this case, Santa). It then adds a skin tone, and * This tests if the browser supports the Emoji Diversity specification, by rendering an
* compares if the emoji rendering has changed. * emoji with no skin tone specified (in this case, Santa). It then adds a skin tone, and
*/ * compares if the emoji rendering has changed.
context.fillText( stringFromCharCode( 55356, 57221 ), 0, 0 ); */
tone = context.getImageData( 16, 16, 1, 1 ).data.toString(); context.fillText( stringFromCharCode( 55356, 57221 ), 0, 0 );
context.fillText( stringFromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 ); tone = context.getImageData( 16, 16, 1, 1 ).data.toString();
// Chrome has issues comparing arrays, so we compare it as a string, instead. context.fillText( stringFromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 );
return tone !== context.getImageData( 16, 16, 1, 1 ).data.toString(); // Chrome has issues comparing arrays, so we compare it as a string, instead.
} else { return tone !== context.getImageData( 16, 16, 1, 1 ).data.toString();
if ( 'simple' === type ) { case 'simple':
/* /*
* This creates a smiling emoji, and checks to see if there is any image data in the * 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 * 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. * as an empty square, so the center pixel will be blank.
*/ */
context.fillText( stringFromCharCode( 55357, 56835 ), 0, 0 ); context.fillText( stringFromCharCode( 55357, 56835 ), 0, 0 );
} else { return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
case 'unicode8':
/* /*
* To check for Unicode 8 support, let's try rendering the most important advancement * To check for Unicode 8 support, let's try rendering the most important advancement
* that the Unicode Consortium have made in years: the burrito. * that the Unicode Consortium have made in years: the burrito.
*/ */
context.fillText( stringFromCharCode( 55356, 57135 ), 0, 0 ); context.fillText( stringFromCharCode( 55356, 57135 ), 0, 0 );
} return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
} }
return false;
} }
function addScript( src ) { function addScript( src ) {
@ -78,19 +80,30 @@
document.getElementsByTagName( 'head' )[0].appendChild( script ); document.getElementsByTagName( 'head' )[0].appendChild( script );
} }
tests = Array( 'simple', 'flag', 'unicode8', 'diversity' );
settings.supports = { settings.supports = {
simple: browserSupportsEmoji( 'simple' ), everything: true
flag: browserSupportsEmoji( 'flag' ),
unicode8: browserSupportsEmoji( 'unicode8' ),
diversity: browserSupportsEmoji( 'diversity' )
}; };
for( ii = 0; ii < tests.length; ii++ ) {
settings.supports[ tests[ ii ] ] = browserSupportsEmoji( tests[ ii ] );
settings.supports.everything = settings.supports.everything && settings.supports[ tests[ ii ] ];
if ( 'flag' !== tests[ ii ] ) {
settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && settings.supports[ tests[ ii ] ];
}
}
settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && ! settings.supports.flag;
settings.DOMReady = false; settings.DOMReady = false;
settings.readyCallback = function() { settings.readyCallback = function() {
settings.DOMReady = true; settings.DOMReady = true;
}; };
if ( ! settings.supports.simple || ! settings.supports.flag || ! settings.supports.unicode8 || ! settings.supports.diversity ) { if ( ! settings.supports.everything ) {
ready = function() { ready = function() {
settings.readyCallback(); settings.readyCallback();
}; };

View File

@ -1 +1 @@
!function(a,b,c){function d(a){var c,d=b.createElement("canvas"),e=d.getContext&&d.getContext("2d"),f=String.fromCharCode;return e&&e.fillText?(e.textBaseline="top",e.font="600 32px Arial","flag"===a?(e.fillText(f(55356,56806,55356,56826),0,0),d.toDataURL().length>3e3):"diversity"===a?(e.fillText(f(55356,57221),0,0),c=e.getImageData(16,16,1,1).data.toString(),e.fillText(f(55356,57221,55356,57343),0,0),c!==e.getImageData(16,16,1,1).data.toString()):("simple"===a?e.fillText(f(55357,56835),0,0):e.fillText(f(55356,57135),0,0),0!==e.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,g;c.supports={simple:d("simple"),flag:d("flag"),unicode8:d("unicode8"),diversity:d("diversity")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag&&c.supports.unicode8&&c.supports.diversity||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings); !function(a,b,c){function d(a){var c,d=b.createElement("canvas"),e=d.getContext&&d.getContext("2d"),f=String.fromCharCode;if(!e||!e.fillText)return!1;switch(e.textBaseline="top",e.font="600 32px Arial",a){case"flag":return e.fillText(f(55356,56806,55356,56826),0,0),d.toDataURL().length>3e3;case"diversity":return e.fillText(f(55356,57221),0,0),c=e.getImageData(16,16,1,1).data.toString(),e.fillText(f(55356,57221,55356,57343),0,0),c!==e.getImageData(16,16,1,1).data.toString();case"simple":return e.fillText(f(55357,56835),0,0),0!==e.getImageData(16,16,1,1).data[0];case"unicode8":return e.fillText(f(55356,57135),0,0),0!==e.getImageData(16,16,1,1).data[0]}return!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity"),c.supports={everything:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),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

View File

@ -124,7 +124,7 @@
function parse( object, args ) { function parse( object, args ) {
var params; var params;
if ( ! replaceEmoji || ! twemoji || ! object || if ( settings.supports.everything || ! twemoji || ! object ||
( 'string' !== typeof object && ( ! object.childNodes || ! object.childNodes.length ) ) ) { ( 'string' !== typeof object && ( ! object.childNodes || ! object.childNodes.length ) ) ) {
return object; return object;
@ -136,6 +136,7 @@
ext: settings.ext, ext: settings.ext,
className: args.className || 'emoji', className: args.className || 'emoji',
callback: function( icon, options ) { callback: function( icon, options ) {
var keys, ii;
// Ignore some standard characters that TinyMCE recommends in its character map. // Ignore some standard characters that TinyMCE recommends in its character map.
switch ( icon ) { switch ( icon ) {
case 'a9': case 'a9':
@ -149,8 +150,7 @@
return false; return false;
} }
if ( ! settings.supports.flag && settings.supports.simple && settings.supports.unicode8 && settings.supports.diversity && if ( settings.supports.everythingExceptFlag && ! /^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test( icon ) ) {
! /^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test( icon ) ) {
return false; return false;
} }
@ -178,8 +178,6 @@
* Initialize our emoji support, and set up listeners. * Initialize our emoji support, and set up listeners.
*/ */
if ( settings ) { if ( settings ) {
replaceEmoji = ! settings.supports.simple || ! settings.supports.flag || ! settings.supports.unicode8 || ! settings.supports.diversity;
if ( settings.DOMReady ) { if ( settings.DOMReady ) {
load(); load();
} else { } else {
@ -188,7 +186,6 @@
} }
return { return {
replaceEmoji: replaceEmoji,
parse: parse, parse: parse,
test: test test: test
}; };

View File

@ -1 +1 @@
!function(a,b){function c(){function c(){if(!j){if("undefined"==typeof a.twemoji){if(k>600)return;return a.clearTimeout(g),g=a.setTimeout(c,50),void k++}f=a.twemoji,j=!0,h&&new h(function(a){for(var b,c,f,g,h=a.length;h--;){if(b=a[h].addedNodes,c=a[h].removedNodes,f=b.length,1===f&&1===c.length&&3===b[0].nodeType&&"IMG"===c[0].nodeName&&b[0].data===c[0].alt&&"load-failed"===c[0].getAttribute("data-error"))return;for(;f--;)g=b[f],3===g.nodeType&&(g=g.parentNode),!g||1!==g.nodeType||g.className&&"string"==typeof g.className&&-1!==g.className.indexOf("wp-exclude-emoji")||d(g.textContent)&&e(g)}}).observe(document.body,{childList:!0,subtree:!0}),e(document.body)}}function d(a){var b=/[\u203C\u2049\u20E3\u2122\u2139\u2194-\u2199\u21A9\u21AA\u2300\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u261D\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638\u2639\u263A\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267B\u267F\u2692\u2693\u2694\u2696\u2697\u2699\u269B\u269C\u26A0\u26A1\u26AA\u26AB\u26B0\u26B1\u26BD\u26BE\u26C4\u26C5\u26C8\u26CE\u26CF\u26D1\u26D3\u26D4\u26E9\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753\u2754\u2755\u2757\u2763\u2764\u2795\u2796\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05\u2B06\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]/,c=/[\uDC00-\uDFFF]/;return a?c.test(a)||b.test(a):!1}function e(a,c){var d;return i&&f&&a&&("string"==typeof a||a.childNodes&&a.childNodes.length)?(c=c||{},d={base:b.baseUrl,ext:b.ext,className:c.className||"emoji",callback:function(a,c){switch(a){case"a9":case"ae":case"2122":case"2194":case"2660":case"2663":case"2665":case"2666":return!1}return!b.supports.flag&&b.supports.simple&&b.supports.unicode8&&b.supports.diversity&&!/^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test(a)?!1:"".concat(c.base,a,c.ext)},onerror:function(){f.parentNode&&(this.setAttribute("data-error","load-failed"),f.parentNode.replaceChild(document.createTextNode(f.alt),f))}},"object"==typeof c.imgAttr&&(d.attributes=function(){return c.imgAttr}),f.parse(a,d)):a}var f,g,h=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,i=!1,j=!1,k=0;return b&&(i=!(b.supports.simple&&b.supports.flag&&b.supports.unicode8&&b.supports.diversity),b.DOMReady?c():b.readyCallback=c),{replaceEmoji:i,parse:e,test:d}}a.wp=a.wp||{},a.wp.emoji=new c}(window,window._wpemojiSettings); !function(a,b){function c(){function c(){if(!i){if("undefined"==typeof a.twemoji){if(j>600)return;return a.clearTimeout(g),g=a.setTimeout(c,50),void j++}f=a.twemoji,i=!0,h&&new h(function(a){for(var b,c,f,g,h=a.length;h--;){if(b=a[h].addedNodes,c=a[h].removedNodes,f=b.length,1===f&&1===c.length&&3===b[0].nodeType&&"IMG"===c[0].nodeName&&b[0].data===c[0].alt&&"load-failed"===c[0].getAttribute("data-error"))return;for(;f--;)g=b[f],3===g.nodeType&&(g=g.parentNode),!g||1!==g.nodeType||g.className&&"string"==typeof g.className&&-1!==g.className.indexOf("wp-exclude-emoji")||d(g.textContent)&&e(g)}}).observe(document.body,{childList:!0,subtree:!0}),e(document.body)}}function d(a){var b=/[\u203C\u2049\u20E3\u2122\u2139\u2194-\u2199\u21A9\u21AA\u2300\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u261D\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638\u2639\u263A\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267B\u267F\u2692\u2693\u2694\u2696\u2697\u2699\u269B\u269C\u26A0\u26A1\u26AA\u26AB\u26B0\u26B1\u26BD\u26BE\u26C4\u26C5\u26C8\u26CE\u26CF\u26D1\u26D3\u26D4\u26E9\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753\u2754\u2755\u2757\u2763\u2764\u2795\u2796\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05\u2B06\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]/,c=/[\uDC00-\uDFFF]/;return a?c.test(a)||b.test(a):!1}function e(a,c){var d;return!b.supports.everything&&f&&a&&("string"==typeof a||a.childNodes&&a.childNodes.length)?(c=c||{},d={base:b.baseUrl,ext:b.ext,className:c.className||"emoji",callback:function(a,c){switch(a){case"a9":case"ae":case"2122":case"2194":case"2660":case"2663":case"2665":case"2666":return!1}return b.supports.everythingExceptFlag&&!/^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test(a)?!1:"".concat(c.base,a,c.ext)},onerror:function(){f.parentNode&&(this.setAttribute("data-error","load-failed"),f.parentNode.replaceChild(document.createTextNode(f.alt),f))}},"object"==typeof c.imgAttr&&(d.attributes=function(){return c.imgAttr}),f.parse(a,d)):a}var f,g,h=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,i=!1,j=0;return b&&(b.DOMReady?c():b.readyCallback=c),{parse:e,test:d}}a.wp=a.wp||{},a.wp.emoji=new c}(window,window._wpemojiSettings);

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.5-beta2-36815'; $wp_version = '4.5-beta2-36816';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.