WordPress.org

Make WordPress Core

Ticket #35300: 35300.diff

File 35300.diff, 7.0 KB (added by pento, 4 years ago)
  • src/wp-includes/js/wp-emoji-loader.js

     
    11( function( window, document, settings ) {
    2         var src, ready;
     2        var src, ready, ii, tests;
    33
    44        /**
    55         * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
     
    77         *
    88         * @since 4.2.0
    99         *
    10          * @param type {String} Whether to test for support of "simple" or "flag" emoji.
     10         * @param type {String} Whether to test for support of "simple", "flag", "diversity" or "unicode8" emoji.
    1111         * @return {Boolean} True if the browser can render emoji, false if it cannot.
    1212         */
    1313        function browserSupportsEmoji( type ) {
     
    2828                context.textBaseline = 'top';
    2929                context.font = '600 32px Arial';
    3030
    31                 if ( 'flag' === type ) {
    32                         /*
    33                          * This works because the image will be one of three things:
    34                          * - Two empty squares, if the browser doesn't render emoji
    35                          * - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji
    36                          * - The Australian flag
    37                          *
    38                          * The first two will encode to small images (1-2KB data URLs), the third will encode
    39                          * to a larger image (4-5KB data URL).
    40                          */
    41                         context.fillText( stringFromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 );
    42                         return canvas.toDataURL().length > 3000;
    43                 } else if ( 'diversity' === type ) {
    44                         /*
    45                          * This tests if the browser supports the Emoji Diversity specification, by rendering an
    46                          * emoji with no skin tone specified (in this case, Santa). It then adds a skin tone, and
    47                          * compares if the emoji rendering has changed.
    48                          */
    49                         context.fillText( stringFromCharCode( 55356, 57221 ), 0, 0 );
    50                         tone = context.getImageData( 16, 16, 1, 1 ).data.toString();
    51                         context.fillText( stringFromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 );
    52                         // Chrome has issues comparing arrays, so we compare it as a  string, instead.
    53                         return tone !== context.getImageData( 16, 16, 1, 1 ).data.toString();
    54                 } else {
    55                         if ( 'simple' === type ) {
     31                switch ( type ) {
     32                        case 'flag':
    5633                                /*
     34                                 * This works because the image will be one of three things:
     35                                 * - Two empty squares, if the browser doesn't render emoji
     36                                 * - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji
     37                                 * - The Australian flag
     38                                 *
     39                                 * The first two will encode to small images (1-2KB data URLs), the third will encode
     40                                 * to a larger image (4-5KB data URL).
     41                                 */
     42                                context.fillText( stringFromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 );
     43                                return canvas.toDataURL().length > 3000;
     44                        case 'diversity':
     45                                /*
     46                                 * This tests if the browser supports the Emoji Diversity specification, by rendering an
     47                                 * emoji with no skin tone specified (in this case, Santa). It then adds a skin tone, and
     48                                 * compares if the emoji rendering has changed.
     49                                 */
     50                                context.fillText( stringFromCharCode( 55356, 57221 ), 0, 0 );
     51                                tone = context.getImageData( 16, 16, 1, 1 ).data.toString();
     52                                context.fillText( stringFromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 );
     53                                // Chrome has issues comparing arrays, so we compare it as a  string, instead.
     54                                return tone !== context.getImageData( 16, 16, 1, 1 ).data.toString();
     55                        case 'simple':
     56                                /*
    5757                                 * This creates a smiling emoji, and checks to see if there is any image data in the
    5858                                 * center pixel. In browsers that don't support emoji, the character will be rendered
    5959                                 * as an empty square, so the center pixel will be blank.
    6060                                 */
    6161                                context.fillText( stringFromCharCode( 55357, 56835 ), 0, 0 );
    62                         } else {
     62                                return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
     63                        case 'unicode8':
    6364                                /*
    6465                                 * To check for Unicode 8 support, let's try rendering the most important advancement
    6566                                 * that the Unicode Consortium have made in years: the burrito.
    6667                                 */
    6768                                context.fillText( stringFromCharCode( 55356, 57135 ), 0, 0 );
    68                         }
    69                         return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
     69                                return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
    7070                }
     71
     72                return false;
    7173        }
    7274
    7375        function addScript( src ) {
     
    7880                document.getElementsByTagName( 'head' )[0].appendChild( script );
    7981        }
    8082
     83        tests = Array( 'simple', 'flag', 'unicode8', 'diversity' );
     84
    8185        settings.supports = {
    82                 simple:    browserSupportsEmoji( 'simple' ),
    83                 flag:      browserSupportsEmoji( 'flag' ),
    84                 unicode8:  browserSupportsEmoji( 'unicode8' ),
    85                 diversity: browserSupportsEmoji( 'diversity' )
     86                everything: true
    8687        };
    8788
     89        for( ii = 0; ii < tests.length; ii++ ) {
     90                settings.supports[ tests[ ii ] ] = browserSupportsEmoji( tests[ ii ] );
     91
     92                settings.supports.everything = settings.supports.everything && settings.supports[ tests[ ii ] ];
     93
     94                if ( 'flag' !== tests[ ii ] ) {
     95                        settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && settings.supports[ tests[ ii ] ];
     96                }
     97        }
     98
     99        settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && ! settings.supports.flag;
     100
    88101        settings.DOMReady = false;
    89102        settings.readyCallback = function() {
    90103                settings.DOMReady = true;
    91104        };
    92105
    93         if ( ! settings.supports.simple || ! settings.supports.flag || ! settings.supports.unicode8 || ! settings.supports.diversity ) {
     106        if ( ! settings.supports.everything ) {
    94107                ready = function() {
    95108                        settings.readyCallback();
    96109                };
  • src/wp-includes/js/wp-emoji.js

     
    124124                function parse( object, args ) {
    125125                        var params;
    126126
    127                         if ( ! replaceEmoji || ! twemoji || ! object ||
     127                        if ( settings.supports.everything || ! twemoji || ! object ||
    128128                                ( 'string' !== typeof object && ( ! object.childNodes || ! object.childNodes.length ) ) ) {
    129129
    130130                                return object;
     
    136136                                ext: settings.ext,
    137137                                className: args.className || 'emoji',
    138138                                callback: function( icon, options ) {
     139                                        var keys, ii;
    139140                                        // Ignore some standard characters that TinyMCE recommends in its character map.
    140141                                        switch ( icon ) {
    141142                                                case 'a9':
     
    149150                                                        return false;
    150151                                        }
    151152
    152                                         if ( ! settings.supports.flag && settings.supports.simple && settings.supports.unicode8 && settings.supports.diversity &&
    153                                                 ! /^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test( icon ) ) {
     153                                        if ( settings.supports.everythingExceptFlag && ! /^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test( icon ) ) {
    154154
    155155                                                return false;
    156156                                        }
     
    178178                 * Initialize our emoji support, and set up listeners.
    179179                 */
    180180                if ( settings ) {
    181                         replaceEmoji = ! settings.supports.simple || ! settings.supports.flag || ! settings.supports.unicode8 || ! settings.supports.diversity;
    182 
    183181                        if ( settings.DOMReady ) {
    184182                                load();
    185183                        } else {
     
    188186                }
    189187
    190188                return {
    191                         replaceEmoji: replaceEmoji,
    192189                        parse: parse,
    193190                        test: test
    194191                };