Make WordPress Core

Changeset 31750


Ignore:
Timestamp:
03/12/2015 12:51:06 PM (9 years ago)
Author:
pento
Message:

Emoji: Instead of having custom hooks for Ajax callbacks, use MutationObserver to re-parse any changed elements in the DOM.

Props iseulde

See #31242

Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/Gruntfile.js

    r31629 r31750  
    303303                    '!wp-includes/js/json2.js',
    304304                    '!wp-includes/js/tw-sack.js',
     305                    '!wp-includes/js/twemoji.js',
    305306                    '!**/*.min.js'
    306307                ],
  • trunk/src/wp-admin/js/inline-edit-post.js

    r31744 r31750  
    273273                        $(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
    274274                        $('#edit-'+id).before(r).remove();
    275                         wp.emoji.parse( $( inlineEditPost.what + id ).get( 0 ) );
    276275                        $(inlineEditPost.what+id).hide().fadeIn();
    277276                    } else {
  • trunk/src/wp-admin/js/inline-edit-tax.js

    r31744 r31750  
    118118                        $( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
    119119
    120                         wp.emoji.parse( row.get( 0 ) );
    121 
    122120                        row.hide().fadeIn();
    123121                    } else {
  • trunk/src/wp-admin/js/post.js

    r31744 r31750  
    742742                }
    743743
    744                 wp.emoji.parse( box.get( 0 ) );
    745 
    746744                b.html(revert_b);
    747745                real_slug.val(new_slug);
  • trunk/src/wp-admin/js/tags.js

    r31744 r31750  
    5050                $( '.tags' ).prepend( res.responses[0].supplemental.parents ); // As the parent is not visible, Insert the version with Parent - Child - ThisTerm
    5151
    52             wp.emoji.parse( $( '.tags' ).get( 0 ) );
    53 
    5452            $('.tags .no-items').remove();
    5553
  • trunk/src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js

    r31744 r31750  
    2222        } );
    2323
    24         editor.on( 'input setcontent', function() {
     24        editor.on( 'input setcontent', function( event ) {
    2525            var selection, node, bookmark, imgs;
    2626
    27             if ( typing ) {
     27            if ( typing && event.type === 'input' ) {
    2828                return;
    2929            }
  • trunk/src/wp-includes/js/wp-emoji.js

    r31744 r31750  
    1 /* global _wpemojiSettings, twemoji */
    21window.wp = window.wp || {};
    32
    4 (function() {
    5     var emoji;
    6 
    7     wp.emoji = emoji = {
    8         /**
    9          * The CDN URL for where emoji files are hosted.
    10          *
    11          * @since 4.2.0
    12          *
    13          * @var string
    14          */
    15         baseUrl: '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72',
    16 
    17         /**
    18          * The extension of the hosted emoji files.
    19          *
    20          * @since 4.2.0
    21          *
    22          * @var string
    23          */
    24         ext: '.png',
    25 
     3( function( window, wp, twemoji, settings ) {
     4    var emoji = {
    265        /**
    276         * Flag to determine if we should parse all emoji characters into Twemoji images.
     
    298         * @since 4.2.0
    309         *
    31          * @var bool
     10         * @var Boolean
    3211         */
    3312        parseAllEmoji: false,
     
    3817         * @since 4.2.0
    3918         *
    40          * @var bool
     19         * @var Boolean
    4120         */
    4221        parseEmoji: false,
     
    4726         * @since 4.2.0
    4827         *
    49          * @var bool
     28         * @var Boolean
    5029         */
    5130        parseFlags: false,
     
    5736         */
    5837        init: function() {
    59             if ( typeof _wpemojiSettings !== 'undefined' ) {
    60                 emoji.baseUrl = _wpemojiSettings.baseUrl || emoji.baseUrl;
    61                 emoji.ext = _wpemojiSettings.ext || emoji.ext;
    62             }
    63 
    6438            emoji.parseAllEmoji = ! emoji.browserSupportsEmoji();
    6539            emoji.parseFlags = ! emoji.browserSupportsFlagEmoji();
    6640            emoji.parseEmoji = emoji.parseAllEmoji || emoji.parseFlags;
    6741
    68             if ( ! emoji.parseEmoji ) {
    69                 return;
     42            if ( window.addEventListener ) {
     43                window.addEventListener( 'load', emoji.load, false );
     44            } else if ( window.attachEvent ) {
     45                window.attachEvent( 'onload', emoji.load );
    7046            }
    7147        },
     
    7753         */
    7854        load: function() {
     55            if ( MutationObserver ) {
     56                new MutationObserver( function( mutationRecords ) {
     57                    var i = mutationRecords.length,
     58                        ii,
     59                        node;
     60
     61                    while ( i-- ) {
     62                        ii = mutationRecords[ i ].addedNodes.length;
     63
     64                        while ( ii-- ) {
     65                            node = mutationRecords[ i ].addedNodes[ ii ];
     66
     67                            if ( node.nodeType === 3 ) {
     68                                node = node.parentNode;
     69                            }
     70
     71                            if ( node.nodeType === 1 ) {
     72                                emoji.parse( node );
     73                            }
     74                        }
     75                    }
     76                } )
     77
     78                .observe( document.body, {
     79                    childList: true,
     80                    subtree: true
     81                } );
     82            }
     83
    7984            emoji.parse( document.body );
    8085        },
     
    8590         * @since 4.2.0
    8691         *
    87          * @return {bool} True if the browser can render emoji, false if it cannot.
     92         * @return {Boolean} True if the browser can render emoji, false if it cannot.
    8893         */
    8994        browserSupportsEmoji: function() {
    90             var context, smile;
     95            var canvas = document.createElement( 'canvas' ),
     96                context = canvas.getContext && canvas.getContext( '2d' );
    9197
    92             if ( ! document.createElement( 'canvas' ).getContext ) {
    93                 return;
     98            if ( ! context.fillText ) {
     99                return false;
    94100            }
    95 
    96             context = document.createElement( 'canvas' ).getContext( '2d' );
    97             if ( typeof context.fillText != 'function' ) {
    98                 return;
    99             }
    100 
    101             smile = String.fromCharCode( 55357 ) + String.fromCharCode( 56835 );
    102101
    103102            /*
     
    108107            context.textBaseline = 'top';
    109108            context.font = '600 32px Arial';
    110             context.fillText( smile, 0, 0 );
     109            context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
    111110
    112111            return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
     
    118117         *
    119118         * @since 4.2.0
    120          * @return {bool} True if the browser renders flag characters as a flag glyph, false if it does not.
     119         *
     120         * @return {Boolean} True if the browser renders flag characters as a flag glyph, false if it does not.
    121121         */
    122122        browserSupportsFlagEmoji: function() {
    123             var context, flag, canvas;
     123            var canvas = document.createElement( 'canvas' ),
     124                context = canvas.getContext && canvas.getContext( '2d' );
    124125
    125             canvas = document.createElement( 'canvas' );
    126 
    127             if ( ! canvas.getContext ) {
    128                 return;
     126            if ( ! context.fillText ) {
     127                return false;
    129128            }
    130 
    131             context = canvas.getContext( '2d' );
    132 
    133             if ( typeof context.fillText != 'function' ) {
    134                 return;
    135             }
    136 
    137             flag =  String.fromCharCode(55356) + String.fromCharCode(56812); // [G]
    138             flag += String.fromCharCode(55356) + String.fromCharCode(56807); // [B]
    139129
    140130            context.textBaseline = 'top';
    141131            context.font = '32px Arial';
    142             context.fillText( flag, 0, 0 );
     132            context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
    143133
    144134            /*
     
    152142             */
    153143            return canvas.toDataURL().length > 3000;
    154 
    155144        },
    156145
    157146        /**
    158          * Given a DOM node, parse any emoji characters into Twemoji images.
     147         * Given an element or string, parse any emoji characters into Twemoji images.
    159148         *
    160149         * @since 4.2.0
    161150         *
    162          * @param {Element} element The DOM node to parse.
     151         * @param {HTMLElement|String} object The element or string to parse.
    163152         */
    164         parse: function( element ) {
     153        parse: function( object ) {
    165154            if ( ! emoji.parseEmoji ) {
    166                 return;
     155                return object;
    167156            }
    168157
    169             return twemoji.parse( element, {
    170                 base:     emoji.baseUrl,
    171                 ext:      emoji.ext,
     158            return twemoji.parse( object, {
     159                base: settings.baseUrl,
     160                ext: settings.ext,
    172161                callback: function( icon, options ) {
    173162                    // Ignore some standard characters that TinyMCE recommends in its character map.
     
    194183    };
    195184
    196     if ( window.addEventListener ) {
    197         window.addEventListener( 'load', emoji.load, false );
    198     } else if ( window.attachEvent ) {
    199         window.attachEvent( 'onload', emoji.load );
    200     }
     185    emoji.init();
    201186
    202     emoji.init();
    203 })();
     187    wp.emoji = emoji;
     188} )( window, window.wp, window.twemoji, window._wpemojiSettings );
  • trunk/src/wp-includes/script-loader.php

    r31749 r31750  
    448448
    449449    if ( is_admin() ) {
    450         $scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array( 'jquery', 'wp-ajax-response', 'emoji' ), false, 1 );
     450        $scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array( 'jquery', 'wp-ajax-response' ), false, 1 );
    451451        did_action( 'init' ) && $scripts->localize( 'admin-tags', 'tagsl10n', array(
    452452            'noPerm' => __('You do not have permission to do that.'),
     
    471471        ) );
    472472
    473         $scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'emoji' ), false, 1 );
     473        $scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box' ), false, 1 );
    474474        did_action( 'init' ) && $scripts->localize( 'post', 'postL10n', array(
    475475            'ok' => __('OK'),
     
    523523        $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone' ), false, 1 );
    524524
    525         $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest', 'emoji' ), false, 1 );
     525        $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
    526526        did_action( 'init' ) && $scripts->localize( 'inline-edit-post', 'inlineEditL10n', array(
    527527            'error' => __('Error while saving the changes.'),
     
    531531        ) );
    532532
    533         $scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery', 'emoji' ), false, 1 );
     533        $scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery' ), false, 1 );
    534534        did_action( 'init' ) && $scripts->localize( 'inline-edit-tax', 'inlineEditL10n', array(
    535535            'error' => __('Error while saving the changes.')
Note: See TracChangeset for help on using the changeset viewer.