Ticket #31242: 31242.19.patch
File 31242.19.patch, 12.8 KB (added by , 10 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
3 3 var typing, 4 4 isMacWebKit = tinymce.Env.mac && tinymce.Env.webkit; 5 5 6 if ( ! wp .emoji.parseEmoji ) {6 if ( ! wp || ! wp.emoji ) { 7 7 return; 8 8 } 9 9 10 // Loads stylesheet for custom styles within the editor11 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 21 10 editor.on( 'keydown keyup', function( event ) { 22 11 typing = event.type === 'keydown'; 23 12 } ); 24 13 25 14 editor.on( 'input setcontent', function( event ) { 26 var selection, node, bookmark, im gs;15 var selection, node, bookmark, images; 27 16 28 17 if ( typing && event.type === 'input' ) { 29 18 return; … … 36 25 bookmark = selection.getBookmark(); 37 26 } 38 27 39 wp.emoji.parse( node );28 wp.emoji.parse( node, { className: 'emoji new-emoji' } ); 40 29 41 im gs = editor.dom.select( 'img.emoji', node );30 images = editor.dom.select( 'img.new-emoji', node ); 42 31 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 ); 49 37 } ); 50 38 51 39 // In IE all content in the editor is left selected aftrer wp.emoji.parse()... -
src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
57 57 font-size: inherit; 58 58 } 59 59 60 /* For emoji replacement images */ 61 img.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 60 72 /* DFW mode */ 61 73 html.wp-fullscreen, 62 74 html.wp-fullscreen body#tinymce { -
src/wp-includes/js/wp-emoji.js
1 window.wp = window.wp || {};2 1 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, 5 5 6 var emoji = {7 6 /** 8 7 * Flag to determine if we should parse all emoji characters into Twemoji images. 9 8 * … … 11 10 * 12 11 * @var Boolean 13 12 */ 14 parseAllEmoji :false,13 parseAllEmoji = false, 15 14 16 15 /** 17 16 * Flag to determine if we should consider parsing emoji characters into Twemoji images. … … 20 19 * 21 20 * @var Boolean 22 21 */ 23 parseEmoji :false,22 parseEmoji = false, 24 23 25 24 /** 26 25 * Flag to determine if we should parse flag characters into Twemoji images. … … 29 28 * 30 29 * @var Boolean 31 30 */ 32 parseFlags : false,31 parseFlags = false; 33 32 34 33 /** 35 * Initialize our emoji support, and set up listeners.36 *37 * @since 4.2.038 */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 /**52 34 * Runs when the document load event is fired, so we can do our first parse of the page. 53 35 * 54 36 * @since 4.2.0 55 37 */ 56 load: function() {38 function load() { 57 39 if ( MutationObserver ) { 58 40 new MutationObserver( function( mutationRecords ) { 59 41 var i = mutationRecords.length, … … 71 53 } 72 54 73 55 if ( node && node.nodeType === 1 ) { 74 emoji.parse( node );56 parse( node ); 75 57 } 76 58 } 77 59 } … … 83 65 } ); 84 66 } 85 67 86 emoji.parse( document.body );87 } ,68 parse( document.body ); 69 } 88 70 89 71 /** 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. 91 74 * 92 75 * @since 4.2.0 93 76 * 77 * @param flagEmoji {Boolean} Whether to test for support of flag emoji. 94 78 * @return {Boolean} True if the browser can render emoji, false if it cannot. 95 79 */ 96 browserSupportsEmoji: function() {80 function browserSupportsEmoji( type ) { 97 81 var canvas = document.createElement( 'canvas' ), 98 82 context = canvas.getContext && canvas.getContext( '2d' ); 99 83 … … 101 85 return false; 102 86 } 103 87 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, we107 * check for bold rendering support to avoid invisible emoji in Chrome.108 */109 88 context.textBaseline = 'top'; 110 89 context.font = '600 32px Arial'; 111 context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );112 90 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; 130 111 } 112 } 131 113 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 emoji139 * - Two squares with 'G' and 'B' in them, if the browser doen't render flag emoji140 * - The British flag141 *142 * The first two will encode to small images (1-2KB data URLs), the third will encode143 * to a larger image (4-5KB data URL).144 */145 return canvas.toDataURL().length > 3000;146 },147 148 114 /** 149 115 * Given an element or string, parse any emoji characters into Twemoji images. 150 116 * … … 152 118 * 153 119 * @param {HTMLElement|String} object The element or string to parse. 154 120 */ 155 parse: function( object) {156 if ( ! emoji.parseEmoji ) {121 function parse( object, options ) { 122 if ( ! parseEmoji ) { 157 123 return object; 158 124 } 159 125 … … 160 126 return twemoji.parse( object, { 161 127 base: settings.baseUrl, 162 128 ext: settings.ext, 129 className: options && ( options.className || null ), 163 130 callback: function( icon, options ) { 164 131 // Ignore some standard characters that TinyMCE recommends in its character map. 165 132 switch ( icon ) { … … 174 141 return false; 175 142 } 176 143 177 if ( emoji.parseFlags && ! emoji.parseAllEmoji &&144 if ( parseFlags && ! parseAllEmoji && 178 145 ! /^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test( icon ) ) { 179 146 180 147 return false; … … 184 151 } 185 152 } ); 186 153 } 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 } 187 176 }; 188 177 189 emoji.init(); 178 window.wp = window.wp || {}; 179 window.wp.emoji = new wpEmoji; 190 180 191 wp.emoji = emoji; 192 } )( window, window.wp, window.twemoji, window._wpemojiSettings ); 181 } )( window, window.twemoji, window._wpemojiSettings );