Ticket #35412: 35412.diff
File 35412.diff, 3.8 KB (added by , 9 years ago) |
---|
-
src/wp-includes/js/wp-emoji-loader.js
1 1 ( function( window, document, settings ) { 2 2 var src, ready; 3 3 4 4 /** 5 5 * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph 6 6 * made of two characters, so some browsers (notably, Firefox OS X) don't support them. 7 7 * 8 8 * @since 4.2.0 9 9 * 10 10 * @param type {String} Whether to test for support of "simple" or "flag" emoji. 11 11 * @return {Boolean} True if the browser can render emoji, false if it cannot. 12 12 */ 13 13 function browserSupportsEmoji( type ) { 14 14 var canvas = document.createElement( 'canvas' ), 15 15 context = canvas.getContext && canvas.getContext( '2d' ), 16 stringFromCharCode = String.fromCharCode, 16 17 tone; 17 18 18 19 if ( ! context || ! context.fillText ) { 19 20 return false; 20 21 } 21 22 22 23 /* 23 24 * Chrome on OS X added native emoji rendering in M41. Unfortunately, 24 25 * it doesn't work when the font is bolder than 500 weight. So, we 25 26 * check for bold rendering support to avoid invisible emoji in Chrome. 26 27 */ 27 28 context.textBaseline = 'top'; 28 29 context.font = '600 32px Arial'; 29 30 30 31 if ( 'flag' === type ) { 31 32 /* 32 33 * This works because the image will be one of three things: 33 34 * - Two empty squares, if the browser doesn't render emoji 34 35 * - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji 35 36 * - The Australian flag 36 37 * 37 38 * The first two will encode to small images (1-2KB data URLs), the third will encode 38 39 * to a larger image (4-5KB data URL). 39 40 */ 40 context.fillText( String.fromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 );41 context.fillText( stringFromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 ); 41 42 return canvas.toDataURL().length > 3000; 42 43 } else if ( 'diversity' === type ) { 43 44 /* 44 45 * This tests if the browser supports the Emoji Diversity specification, by rendering an 45 46 * emoji with no skin tone specified (in this case, Santa). It then adds a skin tone, and 46 47 * compares if the emoji rendering has changed. 47 48 */ 48 context.fillText( String.fromCharCode( 55356, 57221 ), 0, 0 );49 context.fillText( stringFromCharCode( 55356, 57221 ), 0, 0 ); 49 50 tone = context.getImageData( 16, 16, 1, 1 ).data.toString(); 50 context.fillText( String.fromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 );51 context.fillText( stringFromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 ); 51 52 // Chrome has issues comparing arrays, so we compare it as a string, instead. 52 53 return tone !== context.getImageData( 16, 16, 1, 1 ).data.toString(); 53 54 } else { 54 55 if ( 'simple' === type ) { 55 56 /* 56 57 * This creates a smiling emoji, and checks to see if there is any image data in the 57 58 * center pixel. In browsers that don't support emoji, the character will be rendered 58 59 * as an empty square, so the center pixel will be blank. 59 60 */ 60 context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );61 context.fillText( stringFromCharCode( 55357, 56835 ), 0, 0 ); 61 62 } else { 62 63 /* 63 64 * To check for Unicode 8 support, let's try rendering the most important advancement 64 65 * that the Unicode Consortium have made in years: the burrito. 65 66 */ 66 context.fillText( String.fromCharCode( 55356, 57135 ), 0, 0 );67 context.fillText( stringFromCharCode( 55356, 57135 ), 0, 0 ); 67 68 } 68 69 return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0; 69 70 } 70 71 } 71 72 72 73 function addScript( src ) { 73 74 var script = document.createElement( 'script' ); 74 75 75 76 script.src = src; 76 77 script.type = 'text/javascript'; 77 78 document.getElementsByTagName( 'head' )[0].appendChild( script ); 78 79 } 79 80 80 81 settings.supports = { 81 82 simple: browserSupportsEmoji( 'simple' ),