Changeset 31779
- Timestamp:
- 03/14/2015 11:49:00 PM (10 years ago)
- 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 1 1 ( function( tinymce, wp ) { 2 tinymce.PluginManager.add( 'wpemoji', function( editor , url) {2 tinymce.PluginManager.add( 'wpemoji', function( editor ) { 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 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 9 21 10 editor.on( 'keydown keyup', function( event ) { … … 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' ) { … … 37 26 } 38 27 39 wp.emoji.parse( node );28 wp.emoji.parse( node, { className: 'wp-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 = 'wp-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 -
trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
r31725 r31779 56 56 font-family: inherit; 57 57 font-size: inherit; 58 } 59 60 /* For emoji replacement images */ 61 img.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; 58 70 } 59 71 -
trunk/src/wp-includes/js/twemoji.js
-
Property
svn:eol-style
set to
native
-
Property
svn:eol-style
set to
-
trunk/src/wp-includes/js/wp-emoji.js
-
Property
svn:eol-style
set to
native
r31772 r31779 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. … … 12 11 * @var Boolean 13 12 */ 14 parseAllEmoji :false,13 parseAllEmoji = false, 15 14 16 15 /** … … 21 20 * @var Boolean 22 21 */ 23 parseEmoji :false,22 parseEmoji = false, 24 23 25 24 /** … … 30 29 * @var Boolean 31 30 */ 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; 50 32 51 33 /** … … 54 36 * @since 4.2.0 55 37 */ 56 load: function() {38 function load() { 57 39 if ( MutationObserver ) { 58 40 new MutationObserver( function( mutationRecords ) { … … 72 54 73 55 if ( node && node.nodeType === 1 ) { 74 emoji.parse( node );56 parse( node ); 75 57 } 76 58 } … … 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. 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 118 73 * made of two characters, so some browsers (notably, Firefox OS X) don't support them. 119 74 * 120 75 * @since 4.2.0 121 76 * 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. 123 79 */ 124 browserSupportsFlagEmoji: function() {80 function browserSupportsEmoji( type ) { 125 81 var canvas = document.createElement( 'canvas' ), 126 82 context = canvas.getContext && canvas.getContext( '2d' ); … … 131 87 132 88 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'; 135 90 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 } 147 113 148 114 /** … … 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 } 125 126 var className = ( options && options.className ) || 'emoji'; 159 127 160 128 return twemoji.parse( object, { 161 129 base: settings.baseUrl, 162 130 ext: settings.ext, 131 className: className, 163 132 callback: function( icon, options ) { 164 133 // Ignore some standard characters that TinyMCE recommends in its character map. … … 175 144 } 176 145 177 if ( emoji.parseFlags && ! emoji.parseAllEmoji &&146 if ( parseFlags && ! parseAllEmoji && 178 147 ! /^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test( icon ) ) { 179 148 … … 185 154 } ); 186 155 } 187 };188 156 189 emoji.init(); 157 if ( ! twemoji || ! settings ) { 158 return; 159 } 190 160 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 ); -
Property
svn:eol-style
set to
Note: See TracChangeset
for help on using the changeset viewer.