Changeset 31750

Timestamp:

03/12/2015 12:51:06 PM (10 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:

• Gruntfile.js (modified) (1 diff)
• src/wp-admin/js/inline-edit-post.js (modified) (1 diff)
• src/wp-admin/js/inline-edit-tax.js (modified) (1 diff)
• src/wp-admin/js/post.js (modified) (1 diff)
• src/wp-admin/js/tags.js (modified) (1 diff)
• src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js (modified) (1 diff)
• src/wp-includes/js/wp-emoji.js (modified) (11 diffs)
• src/wp-includes/script-loader.php (modified) (4 diffs)

trunk/Gruntfile.js

@@ -303 +303 @@
                     '!wp-includes/js/json2.js',
                     '!wp-includes/js/tw-sack.js',
+                    '!wp-includes/js/twemoji.js',
                     '!**/*.min.js'
                 ],

trunk/src/wp-admin/js/inline-edit-post.js

@@ -273 +273 @@
                         $(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
                         $('#edit-'+id).before(r).remove();
-                        wp.emoji.parse( $( inlineEditPost.what + id ).get( 0 ) );
                         $(inlineEditPost.what+id).hide().fadeIn();
                     } else {

trunk/src/wp-admin/js/inline-edit-tax.js

@@ -118 +118 @@
                         $( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
 
-                        wp.emoji.parse( row.get( 0 ) );
-
                         row.hide().fadeIn();
                     } else {

trunk/src/wp-admin/js/post.js

@@ -742 +742 @@
                 }
 
-                wp.emoji.parse( box.get( 0 ) );
-
                 b.html(revert_b);
                 real_slug.val(new_slug);

trunk/src/wp-admin/js/tags.js

@@ -50 +50 @@
                 $( '.tags' ).prepend( res.responses[0].supplemental.parents ); // As the parent is not visible, Insert the version with Parent - Child - ThisTerm
 
-            wp.emoji.parse( $( '.tags' ).get( 0 ) );
-
             $('.tags .no-items').remove();
 

trunk/src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js

@@ -22 +22 @@
         } );
 
-        editor.on( 'input setcontent', function() {
+        editor.on( 'input setcontent', function( event ) {
             var selection, node, bookmark, imgs;
 
-            if ( typing ) {
+            if ( typing && event.type === 'input' ) {
                 return;
             }

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

@@ -1 @@
-/* global _wpemojiSettings, twemoji */
 window.wp = window.wp || {};
 
-(function() {
-    var emoji;
-
-    wp.emoji = emoji = {
-        /**
-         * The CDN URL for where emoji files are hosted.
-         *
-         * @since 4.2.0
-         *
-         * @var string
-         */
-        baseUrl: '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72',
-
-        /**
-         * The extension of the hosted emoji files.
-         *
-         * @since 4.2.0
-         *
-         * @var string
-         */
-        ext: '.png',
-
+( function( window, wp, twemoji, settings ) {
+    var emoji = {
         /**
          * Flag to determine if we should parse all emoji characters into Twemoji images.
@@ -29 +8 @@
          * @since 4.2.0
          *
-         * @var bool
+         * @var Boolean
          */
         parseAllEmoji: false,
@@ -38 +17 @@
          * @since 4.2.0
          *
-         * @var bool
+         * @var Boolean
          */
         parseEmoji: false,
@@ -47 +26 @@
          * @since 4.2.0
          *
-         * @var bool
+         * @var Boolean
          */
         parseFlags: false,
@@ -57 +36 @@
          */
         init: function() {
-            if ( typeof _wpemojiSettings !== 'undefined' ) {
-                emoji.baseUrl = _wpemojiSettings.baseUrl || emoji.baseUrl;
-                emoji.ext = _wpemojiSettings.ext || emoji.ext;
-            }
-
             emoji.parseAllEmoji = ! emoji.browserSupportsEmoji();
             emoji.parseFlags = ! emoji.browserSupportsFlagEmoji();
             emoji.parseEmoji = emoji.parseAllEmoji || emoji.parseFlags;
 
-            if ( ! emoji.parseEmoji ) {
-                return;
+            if ( window.addEventListener ) {
+                window.addEventListener( 'load', emoji.load, false );
+            } else if ( window.attachEvent ) {
+                window.attachEvent( 'onload', emoji.load );
             }
         },
@@ -77 +53 @@
          */
         load: function() {
+            if ( MutationObserver ) {
+                new MutationObserver( function( mutationRecords ) {
+                    var i = mutationRecords.length,
+                        ii,
+                        node;
+
+                    while ( i-- ) {
+                        ii = mutationRecords[ i ].addedNodes.length;
+
+                        while ( ii-- ) {
+                            node = mutationRecords[ i ].addedNodes[ ii ];
+
+                            if ( node.nodeType === 3 ) {
+                                node = node.parentNode;
+                            }
+
+                            if ( node.nodeType === 1 ) {
+                                emoji.parse( node );
+                            }
+                        }
+                    }
+                } )
+
+                .observe( document.body, {
+                    childList: true,
+                    subtree: true
+                } );
+            }
+
             emoji.parse( document.body );
         },
@@ -85 +90 @@
          * @since 4.2.0
          *
-         * @return {bool} True if the browser can render emoji, false if it cannot.
+         * @return {Boolean} True if the browser can render emoji, false if it cannot.
          */
         browserSupportsEmoji: function() {
-            var context, smile;
+            var canvas = document.createElement( 'canvas' ),
+                context = canvas.getContext && canvas.getContext( '2d' );
 
-            if ( ! document.createElement( 'canvas' ).getContext ) {
-                return;
+            if ( ! context.fillText ) {
+                return false;
             }
-
-            context = document.createElement( 'canvas' ).getContext( '2d' );
-            if ( typeof context.fillText != 'function' ) {
-                return;
-            }
-
-            smile = String.fromCharCode( 55357 ) + String.fromCharCode( 56835 );
 
             /*
@@ -108 +107 @@
             context.textBaseline = 'top';
             context.font = '600 32px Arial';
-            context.fillText( smile, 0, 0 );
+            context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
 
             return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
@@ -118 +117 @@
          *
          * @since 4.2.0
-         * @return {bool} True if the browser renders flag characters as a flag glyph, false if it does not.
+         *
+         * @return {Boolean} True if the browser renders flag characters as a flag glyph, false if it does not.
          */
         browserSupportsFlagEmoji: function() {
-            var context, flag, canvas;
+            var canvas = document.createElement( 'canvas' ),
+                context = canvas.getContext && canvas.getContext( '2d' );
 
-            canvas = document.createElement( 'canvas' );
-
-            if ( ! canvas.getContext ) {
-                return;
+            if ( ! context.fillText ) {
+                return false;
             }
-
-            context = canvas.getContext( '2d' );
-
-            if ( typeof context.fillText != 'function' ) {
-                return;
-            }
-
-            flag =  String.fromCharCode(55356) + String.fromCharCode(56812); // [G]
-            flag += String.fromCharCode(55356) + String.fromCharCode(56807); // [B]
 
             context.textBaseline = 'top';
             context.font = '32px Arial';
-            context.fillText( flag, 0, 0 );
+            context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
 
             /*
@@ -152 +142 @@
              */
             return canvas.toDataURL().length > 3000;
-
         },
 
         /**
-         * Given a DOM node, parse any emoji characters into Twemoji images.
+         * Given an element or string, parse any emoji characters into Twemoji images.
          *
          * @since 4.2.0
          *
-         * @param {Element} element The DOM node to parse.
+         * @param {HTMLElement|String} object The element or string to parse.
          */
-        parse: function( element ) {
+        parse: function( object ) {
             if ( ! emoji.parseEmoji ) {
-                return;
+                return object;
             }
 
-            return twemoji.parse( element, {
-                base:     emoji.baseUrl,
-                ext:      emoji.ext,
+            return twemoji.parse( object, {
+                base: settings.baseUrl,
+                ext: settings.ext,
                 callback: function( icon, options ) {
                     // Ignore some standard characters that TinyMCE recommends in its character map.
@@ -194 +183 @@
     };
 
-    if ( window.addEventListener ) {
-        window.addEventListener( 'load', emoji.load, false );
-    } else if ( window.attachEvent ) {
-        window.attachEvent( 'onload', emoji.load );
-    }
+    emoji.init();
 
-    emoji.init();
-})();
+    wp.emoji = emoji;
+} )( window, window.wp, window.twemoji, window._wpemojiSettings );

trunk/src/wp-includes/script-loader.php

@@ -448 +448 @@
 
     if ( is_admin() ) {
-        $scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array( 'jquery', 'wp-ajax-response', 'emoji' ), false, 1 );
+        $scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array( 'jquery', 'wp-ajax-response' ), false, 1 );
         did_action( 'init' ) && $scripts->localize( 'admin-tags', 'tagsl10n', array(
             'noPerm' => __('You do not have permission to do that.'),
@@ -471 +471 @@
         ) );
 
-        $scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'emoji' ), false, 1 );
+        $scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box' ), false, 1 );
         did_action( 'init' ) && $scripts->localize( 'post', 'postL10n', array(
             'ok' => __('OK'),
@@ -523 +523 @@
         $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone' ), false, 1 );
 
-        $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest', 'emoji' ), false, 1 );
+        $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
         did_action( 'init' ) && $scripts->localize( 'inline-edit-post', 'inlineEditL10n', array(
             'error' => __('Error while saving the changes.'),
@@ -531 +531 @@
         ) );
 
-        $scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery', 'emoji' ), false, 1 );
+        $scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery' ), false, 1 );
         did_action( 'init' ) && $scripts->localize( 'inline-edit-tax', 'inlineEditL10n', array(
             'error' => __('Error while saving the changes.')