Make WordPress Core

Changeset 31779


Ignore:
Timestamp:
03/14/2015 11:49:00 PM (10 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:
1 deleted
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js

    • Property svn:executable deleted
    • Property svn:eol-style set to native
    r31762 r31779  
    11( function( tinymce, wp ) {
    2     tinymce.PluginManager.add( 'wpemoji', function( editor, url ) {
     2    tinymce.PluginManager.add( 'wpemoji', function( editor ) {
    33        var typing,
    44            isMacWebKit = tinymce.Env.mac && tinymce.Env.webkit;
    55
    6         if ( ! wp.emoji.parseEmoji ) {
     6        if ( ! wp || ! wp.emoji ) {
    77            return;
    88        }
    9 
    10         // Loads stylesheet for custom styles within the editor
    11         editor.on( 'init', function() {
    12             var cssId = editor.dom.uniqueId();
    13             var linkElm = editor.dom.create( 'link', {
    14                 id:   cssId,
    15                 rel:  'stylesheet',
    16                 href: url + '/css/editor.css'
    17             });
    18             editor.getDoc().getElementsByTagName( 'head' )[0].appendChild( linkElm );
    19         } );
    209
    2110        editor.on( 'keydown keyup', function( event ) {
     
    2413
    2514        editor.on( 'input setcontent', function( event ) {
    26             var selection, node, bookmark, imgs;
     15            var selection, node, bookmark, images;
    2716
    2817            if ( typing && event.type === 'input' ) {
     
    3726            }
    3827
    39             wp.emoji.parse( node );
     28            wp.emoji.parse( node, { className: 'wp-emoji new-emoji' } );
    4029
    41             imgs = editor.dom.select( 'img.emoji', node );
     30            images = editor.dom.select( 'img.new-emoji', node );
    4231
    43             tinymce.each( imgs, function( elem ) {
    44                 if ( ! elem.getAttribute( 'data-wp-emoji' ) ) {
    45                     elem.setAttribute( 'data-mce-resize', 'false' );
    46                     elem.setAttribute( 'data-mce-placeholder', '1' );
    47                     elem.setAttribute( 'data-wp-emoji', elem.alt );
    48                 }
     32            tinymce.each( images, function( image ) {
     33                image.className = 'wp-emoji';
     34                image.setAttribute( 'data-mce-resize', 'false' );
     35                image.setAttribute( 'data-mce-placeholder', '1' );
     36                image.setAttribute( 'data-wp-emoji', image.alt );
    4937            } );
    5038
  • trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

    r31725 r31779  
    5656    font-family: inherit;
    5757    font-size: inherit;
     58}
     59
     60/* For emoji replacement images */
     61img.wp-emoji {
     62    height: 1em !important;
     63    width: 1em !important;
     64    margin: 0 0.07em !important;
     65    vertical-align: -0.1em !important;
     66    border: none !important;
     67    padding: 0 !important;
     68    -webkit-box-shadow: none !important;
     69    box-shadow: none !important;
    5870}
    5971
  • trunk/src/wp-includes/js/twemoji.js

    • Property svn:eol-style set to native
  • trunk/src/wp-includes/js/wp-emoji.js

    • Property svn:eol-style set to native
    r31772 r31779  
    1 window.wp = window.wp || {};
    21
    3 ( function( window, wp, twemoji, settings ) {
    4     var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
     2( function( window, twemoji, settings ) {
     3    function wpEmoji() {
     4        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
    55
    6     var emoji = {
    76        /**
    87         * Flag to determine if we should parse all emoji characters into Twemoji images.
     
    1211         * @var Boolean
    1312         */
    14         parseAllEmoji: false,
     13        parseAllEmoji = false,
    1514
    1615        /**
     
    2120         * @var Boolean
    2221         */
    23         parseEmoji: false,
     22        parseEmoji = false,
    2423
    2524        /**
     
    3029         * @var Boolean
    3130         */
    32         parseFlags: false,
    33 
    34         /**
    35          * Initialize our emoji support, and set up listeners.
    36          *
    37          * @since 4.2.0
    38          */
    39         init: function() {
    40             emoji.parseAllEmoji = ! emoji.browserSupportsEmoji();
    41             emoji.parseFlags = ! emoji.browserSupportsFlagEmoji();
    42             emoji.parseEmoji = emoji.parseAllEmoji || emoji.parseFlags;
    43 
    44             if ( window.addEventListener ) {
    45                 window.addEventListener( 'load', emoji.load, false );
    46             } else if ( window.attachEvent ) {
    47                 window.attachEvent( 'onload', emoji.load );
    48             }
    49         },
     31        parseFlags = false;
    5032
    5133        /**
     
    5436         * @since 4.2.0
    5537         */
    56         load: function() {
     38        function load() {
    5739            if ( MutationObserver ) {
    5840                new MutationObserver( function( mutationRecords ) {
     
    7254
    7355                            if ( node && node.nodeType === 1 ) {
    74                                 emoji.parse( node );
     56                                parse( node );
    7557                            }
    7658                        }
     
    8466            }
    8567
    86             emoji.parse( document.body );
    87         },
     68            parse( document.body );
     69        }
    8870
    8971        /**
    90          * Detect if the browser supports rendering emoji.
    91          *
    92          * @since 4.2.0
    93          *
    94          * @return {Boolean} True if the browser can render emoji, false if it cannot.
    95          */
    96         browserSupportsEmoji: function() {
    97             var canvas = document.createElement( 'canvas' ),
    98                 context = canvas.getContext && canvas.getContext( '2d' );
    99 
    100             if ( ! context || ! context.fillText ) {
    101                 return false;
    102             }
    103 
    104             /*
    105              * Chrome on OS X added native emoji rendering in M41. Unfortunately,
    106              * it doesn't work when the font is bolder than 500 weight. So, we
    107              * check for bold rendering support to avoid invisible emoji in Chrome.
    108              */
    109             context.textBaseline = 'top';
    110             context.font = '600 32px Arial';
    111             context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
    112 
    113             return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
    114         },
    115 
    116         /**
    117          * Detect if the browser supports rendering flag emoji. Flag emoji are a single glyph
     72         * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
    11873         * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
    11974         *
    12075         * @since 4.2.0
    12176         *
    122          * @return {Boolean} True if the browser renders flag characters as a flag glyph, false if it does not.
     77         * @param flagEmoji {Boolean} Whether to test for support of flag emoji.
     78         * @return {Boolean} True if the browser can render emoji, false if it cannot.
    12379         */
    124         browserSupportsFlagEmoji: function() {
     80        function browserSupportsEmoji( type ) {
    12581            var canvas = document.createElement( 'canvas' ),
    12682                context = canvas.getContext && canvas.getContext( '2d' );
     
    13187
    13288            context.textBaseline = 'top';
    133             context.font = '32px Arial';
    134             context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
     89            context.font = '600 32px Arial';
    13590
    136             /*
    137              * This works because the image will be one of three things:
    138              * - Two empty squares, if the browser doen't render emoji
    139              * - Two squares with 'G' and 'B' in them, if the browser doen't render flag emoji
    140              * - The British flag
    141              *
    142              * The first two will encode to small images (1-2KB data URLs), the third will encode
    143              * to a larger image (4-5KB data URL).
    144              */
    145             return canvas.toDataURL().length > 3000;
    146         },
     91            if ( type === 'flag' ) {
     92                /*
     93                 * This works because the image will be one of three things:
     94                 * - Two empty squares, if the browser doen't render emoji
     95                 * - Two squares with 'G' and 'B' in them, if the browser doen't render flag emoji
     96                 * - The British flag
     97                 *
     98                 * The first two will encode to small images (1-2KB data URLs), the third will encode
     99                 * to a larger image (4-5KB data URL).
     100                 */
     101                context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
     102                return canvas.toDataURL().length > 3000;
     103            } else {
     104                /*
     105                 * Chrome on OS X added native emoji rendering in M41. Unfortunately,
     106                 * it doesn't work when the font is bolder than 500 weight. So, we
     107                 * check for bold rendering support to avoid invisible emoji in Chrome.
     108                 */
     109                context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
     110                return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
     111            }
     112        }
    147113
    148114        /**
     
    153119         * @param {HTMLElement|String} object The element or string to parse.
    154120         */
    155         parse: function( object ) {
    156             if ( ! emoji.parseEmoji ) {
     121        function parse( object, options ) {
     122            if ( ! parseEmoji ) {
    157123                return object;
    158124            }
     125
     126            var className = ( options && options.className ) || 'emoji';
    159127
    160128            return twemoji.parse( object, {
    161129                base: settings.baseUrl,
    162130                ext: settings.ext,
     131                className: className,
    163132                callback: function( icon, options ) {
    164133                    // Ignore some standard characters that TinyMCE recommends in its character map.
     
    175144                    }
    176145
    177                     if ( emoji.parseFlags && ! emoji.parseAllEmoji &&
     146                    if ( parseFlags && ! parseAllEmoji &&
    178147                        ! /^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test( icon ) ) {
    179148
     
    185154            } );
    186155        }
    187     };
    188156
    189     emoji.init();
     157        if ( ! twemoji || ! settings ) {
     158            return;
     159        }       
    190160
    191     wp.emoji = emoji;
    192 } )( window, window.wp, window.twemoji, window._wpemojiSettings );
     161        /**
     162         * Initialize our emoji support, and set up listeners.
     163         */
     164        parseAllEmoji = ! browserSupportsEmoji();
     165        parseFlags = ! browserSupportsEmoji( 'flag' );
     166        parseEmoji = parseAllEmoji || parseFlags;
     167
     168        if ( window.addEventListener ) {
     169            window.addEventListener( 'load', load, false );
     170        } else if ( window.attachEvent ) {
     171            window.attachEvent( 'onload', load );
     172        }
     173
     174        return {
     175            browserSupportsEmoji: browserSupportsEmoji,
     176            parse: parse
     177        };
     178    }
     179
     180    window.wp = window.wp || {};
     181    window.wp.emoji = new wpEmoji();
     182
     183} )( window, window.twemoji, window._wpemojiSettings );
Note: See TracChangeset for help on using the changeset viewer.