WordPress.org
Get WordPress

Make WordPress Core

Changeset 36816


Ignore:
Timestamp:
03/03/2016 05:16:53 AM (9 years ago)
Author:
pento
Message:

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.

Location:
trunk/src/wp-includes/js
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/js/wp-emoji-loader.js

    r36359 r36816  
    11( function( window, document, settings ) {
    2     var src, ready;
     2    var src, ready, ii, tests;
    33
    44    /**
    … …  
    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     */
    … …  
    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':
     33                /*
     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':
    5656                /*
    5757                 * This creates a smiling emoji, and checks to see if there is any image data in the
    … …  
    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
    … …  
    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
    … …  
    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    };
     88
     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;
    87100
    88101    settings.DOMReady = false;
    … …  
    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();

  • trunk/src/wp-includes/js/wp-emoji.js

    r36160 r36816  
    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
    … …  
    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 ) {
    … …  
    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;
    … …  
    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();
    … …  
    189187
    190188        return {
    191             replaceEmoji: replaceEmoji,
    192189            parse: parse,
    193190            test: test
Note: See TracChangeset for help on using the changeset viewer.