Make WordPress Core

Ticket #31242: 31242.19.patch

File 31242.19.patch, 12.8 KB (added by azaozz, 9 years ago)
  • src/wp-includes/js/tinymce/plugins/wpemoji/css/editor.css

     
    1 .emoji-wrapper,
    2 .emoji-spacer {
    3         -moz-user-select: none;
    4         -webkit-user-select: none;
    5         -ms-user-select: none;
    6         user-select: none;
    7 }
    8 img.emoji {
    9         height: 1em;
    10         width: 1em;
    11         margin: 0 .05em 0 .1em;
    12         vertical-align: -0.1em;
    13         border: none;
    14         padding: 0;
    15 }
  • src/wp-includes/js/tinymce/plugins/wpemoji/css/rtl/editor-rtl.css

     
    1 /* This file was automatically generated on Nov 19 2014 05:08:11 */
    2 
    3 .emoji-wrapper,
    4 .emoji-spacer {
    5         -moz-user-select: none;
    6         -webkit-user-select: none;
    7         -ms-user-select: none;
    8         user-select: none;
    9 }
    10 img.emoji {
    11         height: 1em;
    12         width: 1em;
    13         margin: 0 .1em 0 .05em;
    14         vertical-align: -0.1em;
    15         border: none;
    16         padding: 0;
    17 }
  • src/wp-includes/js/tinymce/plugins/wpemoji/css/editor.css

     
    1 .emoji-wrapper,
    2 .emoji-spacer {
    3         -moz-user-select: none;
    4         -webkit-user-select: none;
    5         -ms-user-select: none;
    6         user-select: none;
    7 }
    8 img.emoji {
    9         height: 1em;
    10         width: 1em;
    11         margin: 0 .05em 0 .1em;
    12         vertical-align: -0.1em;
    13         border: none;
    14         padding: 0;
    15 }
  • src/wp-includes/js/tinymce/plugins/wpemoji/css/rtl/editor-rtl.css

     
    1 /* This file was automatically generated on Nov 19 2014 05:08:11 */
    2 
    3 .emoji-wrapper,
    4 .emoji-spacer {
    5         -moz-user-select: none;
    6         -webkit-user-select: none;
    7         -ms-user-select: none;
    8         user-select: none;
    9 }
    10 img.emoji {
    11         height: 1em;
    12         width: 1em;
    13         margin: 0 .1em 0 .05em;
    14         vertical-align: -0.1em;
    15         border: none;
    16         padding: 0;
    17 }
  • src/wp-includes/js/tinymce/plugins/wpemoji/css/rtl/editor-rtl.css

     
    1 /* This file was automatically generated on Nov 19 2014 05:08:11 */
    2 
    3 .emoji-wrapper,
    4 .emoji-spacer {
    5         -moz-user-select: none;
    6         -webkit-user-select: none;
    7         -ms-user-select: none;
    8         user-select: none;
    9 }
    10 img.emoji {
    11         height: 1em;
    12         width: 1em;
    13         margin: 0 .1em 0 .05em;
    14         vertical-align: -0.1em;
    15         border: none;
    16         padding: 0;
    17 }
  • src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js

     
    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                }
    99
    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                 } );
    20 
    2110                editor.on( 'keydown keyup', function( event ) {
    2211                        typing = event.type === 'keydown';
    2312                } );
    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' ) {
    2918                                return;
     
    3625                                bookmark = selection.getBookmark();
    3726                        }
    3827
    39                         wp.emoji.parse( node );
     28                        wp.emoji.parse( node, { className: '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 = '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
    5139                        // In IE all content in the editor is left selected aftrer wp.emoji.parse()...
  • src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

     
    5757        font-size: inherit;
    5858}
    5959
     60/* For emoji replacement images */
     61img.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;
     70}
     71
    6072/* DFW mode */
    6173html.wp-fullscreen,
    6274html.wp-fullscreen body#tinymce {
  • src/wp-includes/js/wp-emoji.js

     
    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.
    98                 *
     
    1110                 *
    1211                 * @var Boolean
    1312                 */
    14                 parseAllEmoji: false,
     13                parseAllEmoji = false,
    1514
    1615                /**
    1716                 * Flag to determine if we should consider parsing emoji characters into Twemoji images.
     
    2019                 *
    2120                 * @var Boolean
    2221                 */
    23                 parseEmoji: false,
     22                parseEmoji = false,
    2423
    2524                /**
    2625                 * Flag to determine if we should parse flag characters into Twemoji images.
     
    2928                 *
    3029                 * @var Boolean
    3130                 */
    32                 parseFlags: false,
     31                parseFlags = false;
    3332
    3433                /**
    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                 },
    50 
    51                 /**
    5234                 * Runs when the document load event is fired, so we can do our first parse of the page.
    5335                 *
    5436                 * @since 4.2.0
    5537                 */
    56                 load: function() {
     38                function load() {
    5739                        if ( MutationObserver ) {
    5840                                new MutationObserver( function( mutationRecords ) {
    5941                                        var i = mutationRecords.length,
     
    7153                                                        }
    7254
    7355                                                        if ( node && node.nodeType === 1 ) {
    74                                                                 emoji.parse( node );
     56                                                                parse( node );
    7557                                                        }
    7658                                                }
    7759                                        }
     
    8365                                } );
    8466                        }
    8567
    86                         emoji.parse( document.body );
    87                 },
     68                        parse( document.body );
     69                }
    8870
    8971                /**
    90                  * Detect if the browser supports rendering emoji.
     72                 * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
     73                 * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
    9174                 *
    9275                 * @since 4.2.0
    9376                 *
     77                 * @param flagEmoji {Boolean} Whether to test for support of flag emoji.
    9478                 * @return {Boolean} True if the browser can render emoji, false if it cannot.
    9579                 */
    96                 browserSupportsEmoji: function() {
     80                function browserSupportsEmoji( type ) {
    9781                        var canvas = document.createElement( 'canvas' ),
    9882                                context = canvas.getContext && canvas.getContext( '2d' );
    9983
     
    10185                                return false;
    10286                        }
    10387
    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                          */
    10988                        context.textBaseline = 'top';
    11089                        context.font = '600 32px Arial';
    111                         context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
    11290
    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
    118                  * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
    119                  *
    120                  * @since 4.2.0
    121                  *
    122                  * @return {Boolean} True if the browser renders flag characters as a flag glyph, false if it does not.
    123                  */
    124                 browserSupportsFlagEmoji: function() {
    125                         var canvas = document.createElement( 'canvas' ),
    126                                 context = canvas.getContext && canvas.getContext( '2d' );
    127 
    128                         if ( ! context || ! context.fillText ) {
    129                                 return false;
     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;
    130111                        }
     112                }
    131113
    132                         context.textBaseline = 'top';
    133                         context.font = '32px Arial';
    134                         context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
    135 
    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                 },
    147 
    148114                /**
    149115                 * Given an element or string, parse any emoji characters into Twemoji images.
    150116                 *
     
    152118                 *
    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                        }
    159125
     
    160126                        return twemoji.parse( object, {
    161127                                base: settings.baseUrl,
    162128                                ext: settings.ext,
     129                                className: options && ( options.className || null ),
    163130                                callback: function( icon, options ) {
    164131                                        // Ignore some standard characters that TinyMCE recommends in its character map.
    165132                                        switch ( icon ) {
     
    174141                                                        return false;
    175142                                        }
    176143
    177                                         if ( emoji.parseFlags && ! emoji.parseAllEmoji &&
     144                                        if ( parseFlags && ! parseAllEmoji &&
    178145                                                ! /^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test( icon ) ) {
    179146
    180147                                                return false;
     
    184151                                }
    185152                        } );
    186153                }
     154
     155                if ( ! twemoji || ! settings ) {
     156                        return;
     157                }               
     158
     159                /**
     160                 * Initialize our emoji support, and set up listeners.
     161                 */
     162                parseAllEmoji = ! browserSupportsEmoji();
     163                parseFlags = ! browserSupportsEmoji( 'flag' );
     164                parseEmoji = parseAllEmoji || parseFlags;
     165
     166                if ( window.addEventListener ) {
     167                        window.addEventListener( 'load', load, false );
     168                } else if ( window.attachEvent ) {
     169                        window.attachEvent( 'onload', load );
     170                }
     171
     172                return {
     173                        browserSupportsEmoji: browserSupportsEmoji,
     174                        parse: parse
     175                }
    187176        };
    188177
    189         emoji.init();
     178        window.wp = window.wp || {};
     179        window.wp.emoji = new wpEmoji;
    190180
    191         wp.emoji = emoji;
    192 } )( window, window.wp, window.twemoji, window._wpemojiSettings );
     181} )( window, window.twemoji, window._wpemojiSettings );