Changeset 31779

Timestamp:

03/14/2015 11:49:00 PM (11 years ago)

Author:

azaozz

Message:

Emoji:

• Move the TinyMCE plugin CSS to wp-content.css.
• Change the replacement images class to wp-emoji inside the editor.
• Clean up both the plugin and wp-emoji.js, abstract and restructure a bit.

See #31242.

Location:

trunk/src/wp-includes/js

Files:

• tinymce/plugins/wpemoji/css (deleted)
• tinymce/plugins/wpemoji/plugin.js (modified) (3 diffs, 2 props)
• tinymce/skins/wordpress/wp-content.css (modified) (1 diff)
• twemoji.js (modified) (1 prop)
• wp-emoji.js (modified) (11 diffs, 1 prop)

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

@@ -1 +1 @@
 ( function( tinymce, wp ) {
-        tinymce.PluginManager.add( 'wpemoji', function( editor, url ) {
+        tinymce.PluginManager.add( 'wpemoji', function( editor ) {
                 var typing,
                         isMacWebKit = tinymce.Env.mac && tinymce.Env.webkit;
 
-                if ( ! wp.emoji.parseEmoji ) {
+                if ( ! wp || ! wp.emoji ) {
                         return;
                 }
-
-                // Loads stylesheet for custom styles within the editor
-                editor.on( 'init', function() {
-                        var cssId = editor.dom.uniqueId();
-                        var linkElm = editor.dom.create( 'link', {
-                                id:   cssId,
-                                rel:  'stylesheet',
-                                href: url + '/css/editor.css'
-                        });
-                        editor.getDoc().getElementsByTagName( 'head' )[0].appendChild( linkElm );
-                } );
 
                 editor.on( 'keydown keyup', function( event ) {
@@ -24 +13 @@
 
                 editor.on( 'input setcontent', function( event ) {
-                        var selection, node, bookmark, imgs;
+                        var selection, node, bookmark, images;
 
                         if ( typing && event.type === 'input' ) {
@@ -37 +26 @@
                         }
 
-                        wp.emoji.parse( node );
+                        wp.emoji.parse( node, { className: 'wp-emoji new-emoji' } );
 
-                        imgs = editor.dom.select( 'img.emoji', node );
+                        images = editor.dom.select( 'img.new-emoji', node );
 
-                        tinymce.each( imgs, function( elem ) {
-                                if ( ! elem.getAttribute( 'data-wp-emoji' ) ) {
-                                        elem.setAttribute( 'data-mce-resize', 'false' );
-                                        elem.setAttribute( 'data-mce-placeholder', '1' );
-                                        elem.setAttribute( 'data-wp-emoji', elem.alt );
-                                }
+                        tinymce.each( images, function( image ) {
+                                image.className = 'wp-emoji';
+                                image.setAttribute( 'data-mce-resize', 'false' );
+                                image.setAttribute( 'data-mce-placeholder', '1' );
+                                image.setAttribute( 'data-wp-emoji', image.alt );
                         } );
 

trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -56 +56 @@
         font-family: inherit;
         font-size: inherit;
+}
+
+/* For emoji replacement images */
+img.wp-emoji {
+        height: 1em !important;
+        width: 1em !important;
+        margin: 0 0.07em !important;
+        vertical-align: -0.1em !important;
+        border: none !important;
+        padding: 0 !important;
+        -webkit-box-shadow: none !important;
+        box-shadow: none !important;
 }
 

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

@@ -1 @@
-window.wp = window.wp || {};
 
-( function( window, wp, twemoji, settings ) {
-        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+( function( window, twemoji, settings ) {
+        function wpEmoji() {
+                var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
 
-        var emoji = {
                 /**
                  * Flag to determine if we should parse all emoji characters into Twemoji images.
@@ -12 +11 @@
                  * @var Boolean
                  */
-                parseAllEmoji: false,
+                parseAllEmoji = false,
 
                 /**
@@ -21 +20 @@
                  * @var Boolean
                  */
-                parseEmoji: false,
+                parseEmoji = false,
 
                 /**
@@ -30 +29 @@
                  * @var Boolean
                  */
-                parseFlags: false,
-
-                /**
-                 * Initialize our emoji support, and set up listeners.
-                 *
-                 * @since 4.2.0
-                 */
-                init: function() {
-                        emoji.parseAllEmoji = ! emoji.browserSupportsEmoji();
-                        emoji.parseFlags = ! emoji.browserSupportsFlagEmoji();
-                        emoji.parseEmoji = emoji.parseAllEmoji || emoji.parseFlags;
-
-                        if ( window.addEventListener ) {
-                                window.addEventListener( 'load', emoji.load, false );
-                        } else if ( window.attachEvent ) {
-                                window.attachEvent( 'onload', emoji.load );
-                        }
-                },
+                parseFlags = false;
 
                 /**
@@ -54 +36 @@
                  * @since 4.2.0
                  */
-                load: function() {
+                function load() {
                         if ( MutationObserver ) {
                                 new MutationObserver( function( mutationRecords ) {
@@ -72 +54 @@
 
                                                         if ( node && node.nodeType === 1 ) {
-                                                                emoji.parse( node );
+                                                                parse( node );
                                                         }
                                                 }
@@ -84 +66 @@
                         }
 
-                        emoji.parse( document.body );
-                },
+                        parse( document.body );
+                }
 
                 /**
-                 * Detect if the browser supports rendering emoji.
-                 *
-                 * @since 4.2.0
-                 *
-                 * @return {Boolean} True if the browser can render emoji, false if it cannot.
-                 */
-                browserSupportsEmoji: function() {
-                        var canvas = document.createElement( 'canvas' ),
-                                context = canvas.getContext && canvas.getContext( '2d' );
-
-                        if ( ! context || ! context.fillText ) {
-                                return false;
-                        }
-
-                        /*
-                         * Chrome on OS X added native emoji rendering in M41. Unfortunately,
-                         * it doesn't work when the font is bolder than 500 weight. So, we
-                         * check for bold rendering support to avoid invisible emoji in Chrome.
-                         */
-                        context.textBaseline = 'top';
-                        context.font = '600 32px Arial';
-                        context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
-
-                        return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
-                },
-
-                /**
-                 * Detect if the browser supports rendering flag emoji. Flag emoji are a single glyph
+                 * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
                  * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
                  *
                  * @since 4.2.0
                  *
-                 * @return {Boolean} True if the browser renders flag characters as a flag glyph, false if it does not.
+                 * @param flagEmoji {Boolean} Whether to test for support of flag emoji.
+                 * @return {Boolean} True if the browser can render emoji, false if it cannot.
                  */
-                browserSupportsFlagEmoji: function() {
+                function browserSupportsEmoji( type ) {
                         var canvas = document.createElement( 'canvas' ),
                                 context = canvas.getContext && canvas.getContext( '2d' );
@@ -131 +87 @@
 
                         context.textBaseline = 'top';
-                        context.font = '32px Arial';
-                        context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
+                        context.font = '600 32px Arial';
 
-                        /*
-                         * This works because the image will be one of three things:
-                         * - Two empty squares, if the browser doen't render emoji
-                         * - Two squares with 'G' and 'B' in them, if the browser doen't render flag emoji
-                         * - The British flag
-                         *
-                         * The first two will encode to small images (1-2KB data URLs), the third will encode
-                         * to a larger image (4-5KB data URL).
-                         */
-                        return canvas.toDataURL().length > 3000;
-                },
+                        if ( type === 'flag' ) {
+                                /*
+                                 * This works because the image will be one of three things:
+                                 * - Two empty squares, if the browser doen't render emoji
+                                 * - Two squares with 'G' and 'B' in them, if the browser doen't render flag emoji
+                                 * - The British flag
+                                 *
+                                 * The first two will encode to small images (1-2KB data URLs), the third will encode
+                                 * to a larger image (4-5KB data URL).
+                                 */
+                                context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
+                                return canvas.toDataURL().length > 3000;
+                        } else {
+                                /*
+                                 * Chrome on OS X added native emoji rendering in M41. Unfortunately,
+                                 * it doesn't work when the font is bolder than 500 weight. So, we
+                                 * check for bold rendering support to avoid invisible emoji in Chrome.
+                                 */
+                                context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
+                                return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
+                        }
+                }
 
                 /**
@@ -153 +119 @@
                  * @param {HTMLElement|String} object The element or string to parse.
                  */
-                parse: function( object ) {
-                        if ( ! emoji.parseEmoji ) {
+                function parse( object, options ) {
+                        if ( ! parseEmoji ) {
                                 return object;
                         }
+
+                        var className = ( options && options.className ) || 'emoji';
 
                         return twemoji.parse( object, {
                                 base: settings.baseUrl,
                                 ext: settings.ext,
+                                className: className,
                                 callback: function( icon, options ) {
                                         // Ignore some standard characters that TinyMCE recommends in its character map.
@@ -175 +144 @@
                                         }
 
-                                        if ( emoji.parseFlags && ! emoji.parseAllEmoji &&
+                                        if ( parseFlags && ! parseAllEmoji &&
                                                 ! /^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test( icon ) ) {
 
@@ -185 +154 @@
                         } );
                 }
-        };
 
-        emoji.init();
+                if ( ! twemoji || ! settings ) {
+                        return;
+                }               
 
-        wp.emoji = emoji;
-} )( window, window.wp, window.twemoji, window._wpemojiSettings );
+                /**
+                 * Initialize our emoji support, and set up listeners.
+                 */
+                parseAllEmoji = ! browserSupportsEmoji();
+                parseFlags = ! browserSupportsEmoji( 'flag' );
+                parseEmoji = parseAllEmoji || parseFlags;
+
+                if ( window.addEventListener ) {
+                        window.addEventListener( 'load', load, false );
+                } else if ( window.attachEvent ) {
+                        window.attachEvent( 'onload', load );
+                }
+
+                return {
+                        browserSupportsEmoji: browserSupportsEmoji,
+                        parse: parse
+                };
+        }
+
+        window.wp = window.wp || {};
+        window.wp.emoji = new wpEmoji();
+
+} )( window, window.twemoji, window._wpemojiSettings );