Emoji: Instead of having custom hooks for Ajax callbacks, use MutationObserver to re-parse any changed elements in the DOM.
Props iseulde See #31242 git-svn-id: https://develop.svn.wordpress.org/trunk@31750 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
b857ff6083
commit
37bee1ed3a
|
@ -302,6 +302,7 @@ module.exports = function(grunt) {
|
||||||
'!wp-includes/js/hoverIntent.js',
|
'!wp-includes/js/hoverIntent.js',
|
||||||
'!wp-includes/js/json2.js',
|
'!wp-includes/js/json2.js',
|
||||||
'!wp-includes/js/tw-sack.js',
|
'!wp-includes/js/tw-sack.js',
|
||||||
|
'!wp-includes/js/twemoji.js',
|
||||||
'!**/*.min.js'
|
'!**/*.min.js'
|
||||||
],
|
],
|
||||||
// Remove once other JSHint errors are resolved
|
// Remove once other JSHint errors are resolved
|
||||||
|
|
|
@ -272,7 +272,6 @@ inlineEditPost = {
|
||||||
if ( -1 !== r.indexOf( '<tr' ) ) {
|
if ( -1 !== r.indexOf( '<tr' ) ) {
|
||||||
$(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
|
$(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
|
||||||
$('#edit-'+id).before(r).remove();
|
$('#edit-'+id).before(r).remove();
|
||||||
wp.emoji.parse( $( inlineEditPost.what + id ).get( 0 ) );
|
|
||||||
$(inlineEditPost.what+id).hide().fadeIn();
|
$(inlineEditPost.what+id).hide().fadeIn();
|
||||||
} else {
|
} else {
|
||||||
r = r.replace( /<.[^<>]*?>/g, '' );
|
r = r.replace( /<.[^<>]*?>/g, '' );
|
||||||
|
|
|
@ -117,8 +117,6 @@ inlineEditTax = {
|
||||||
// Update the value in the Parent dropdown.
|
// Update the value in the Parent dropdown.
|
||||||
$( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
|
$( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
|
||||||
|
|
||||||
wp.emoji.parse( row.get( 0 ) );
|
|
||||||
|
|
||||||
row.hide().fadeIn();
|
row.hide().fadeIn();
|
||||||
} else {
|
} else {
|
||||||
$('#edit-'+id+' .inline-edit-save .error').html(r).show();
|
$('#edit-'+id+' .inline-edit-save .error').html(r).show();
|
||||||
|
|
|
@ -741,8 +741,6 @@ jQuery(document).ready( function($) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
wp.emoji.parse( box.get( 0 ) );
|
|
||||||
|
|
||||||
b.html(revert_b);
|
b.html(revert_b);
|
||||||
real_slug.val(new_slug);
|
real_slug.val(new_slug);
|
||||||
$('#view-post-btn').show();
|
$('#view-post-btn').show();
|
||||||
|
|
|
@ -49,8 +49,6 @@ jQuery(document).ready(function($) {
|
||||||
else
|
else
|
||||||
$( '.tags' ).prepend( res.responses[0].supplemental.parents ); // As the parent is not visible, Insert the version with Parent - Child - ThisTerm
|
$( '.tags' ).prepend( res.responses[0].supplemental.parents ); // As the parent is not visible, Insert the version with Parent - Child - ThisTerm
|
||||||
|
|
||||||
wp.emoji.parse( $( '.tags' ).get( 0 ) );
|
|
||||||
|
|
||||||
$('.tags .no-items').remove();
|
$('.tags .no-items').remove();
|
||||||
|
|
||||||
if ( form.find('select#parent') ) {
|
if ( form.find('select#parent') ) {
|
||||||
|
|
|
@ -21,10 +21,10 @@
|
||||||
typing = event.type === 'keydown';
|
typing = event.type === 'keydown';
|
||||||
} );
|
} );
|
||||||
|
|
||||||
editor.on( 'input setcontent', function() {
|
editor.on( 'input setcontent', function( event ) {
|
||||||
var selection, node, bookmark, imgs;
|
var selection, node, bookmark, imgs;
|
||||||
|
|
||||||
if ( typing ) {
|
if ( typing && event.type === 'input' ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,34 +1,13 @@
|
||||||
/* global _wpemojiSettings, twemoji */
|
|
||||||
window.wp = window.wp || {};
|
window.wp = window.wp || {};
|
||||||
|
|
||||||
(function() {
|
( function( window, wp, twemoji, settings ) {
|
||||||
var emoji;
|
var emoji = {
|
||||||
|
|
||||||
wp.emoji = emoji = {
|
|
||||||
/**
|
|
||||||
* The CDN URL for where emoji files are hosted.
|
|
||||||
*
|
|
||||||
* @since 4.2.0
|
|
||||||
*
|
|
||||||
* @var string
|
|
||||||
*/
|
|
||||||
baseUrl: '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72',
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The extension of the hosted emoji files.
|
|
||||||
*
|
|
||||||
* @since 4.2.0
|
|
||||||
*
|
|
||||||
* @var string
|
|
||||||
*/
|
|
||||||
ext: '.png',
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Flag to determine if we should parse all emoji characters into Twemoji images.
|
* Flag to determine if we should parse all emoji characters into Twemoji images.
|
||||||
*
|
*
|
||||||
* @since 4.2.0
|
* @since 4.2.0
|
||||||
*
|
*
|
||||||
* @var bool
|
* @var Boolean
|
||||||
*/
|
*/
|
||||||
parseAllEmoji: false,
|
parseAllEmoji: false,
|
||||||
|
|
||||||
|
@ -37,7 +16,7 @@ window.wp = window.wp || {};
|
||||||
*
|
*
|
||||||
* @since 4.2.0
|
* @since 4.2.0
|
||||||
*
|
*
|
||||||
* @var bool
|
* @var Boolean
|
||||||
*/
|
*/
|
||||||
parseEmoji: false,
|
parseEmoji: false,
|
||||||
|
|
||||||
|
@ -46,7 +25,7 @@ window.wp = window.wp || {};
|
||||||
*
|
*
|
||||||
* @since 4.2.0
|
* @since 4.2.0
|
||||||
*
|
*
|
||||||
* @var bool
|
* @var Boolean
|
||||||
*/
|
*/
|
||||||
parseFlags: false,
|
parseFlags: false,
|
||||||
|
|
||||||
|
@ -56,17 +35,14 @@ window.wp = window.wp || {};
|
||||||
* @since 4.2.0
|
* @since 4.2.0
|
||||||
*/
|
*/
|
||||||
init: function() {
|
init: function() {
|
||||||
if ( typeof _wpemojiSettings !== 'undefined' ) {
|
|
||||||
emoji.baseUrl = _wpemojiSettings.baseUrl || emoji.baseUrl;
|
|
||||||
emoji.ext = _wpemojiSettings.ext || emoji.ext;
|
|
||||||
}
|
|
||||||
|
|
||||||
emoji.parseAllEmoji = ! emoji.browserSupportsEmoji();
|
emoji.parseAllEmoji = ! emoji.browserSupportsEmoji();
|
||||||
emoji.parseFlags = ! emoji.browserSupportsFlagEmoji();
|
emoji.parseFlags = ! emoji.browserSupportsFlagEmoji();
|
||||||
emoji.parseEmoji = emoji.parseAllEmoji || emoji.parseFlags;
|
emoji.parseEmoji = emoji.parseAllEmoji || emoji.parseFlags;
|
||||||
|
|
||||||
if ( ! emoji.parseEmoji ) {
|
if ( window.addEventListener ) {
|
||||||
return;
|
window.addEventListener( 'load', emoji.load, false );
|
||||||
|
} else if ( window.attachEvent ) {
|
||||||
|
window.attachEvent( 'onload', emoji.load );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -76,6 +52,35 @@ window.wp = window.wp || {};
|
||||||
* @since 4.2.0
|
* @since 4.2.0
|
||||||
*/
|
*/
|
||||||
load: function() {
|
load: function() {
|
||||||
|
if ( MutationObserver ) {
|
||||||
|
new MutationObserver( function( mutationRecords ) {
|
||||||
|
var i = mutationRecords.length,
|
||||||
|
ii,
|
||||||
|
node;
|
||||||
|
|
||||||
|
while ( i-- ) {
|
||||||
|
ii = mutationRecords[ i ].addedNodes.length;
|
||||||
|
|
||||||
|
while ( ii-- ) {
|
||||||
|
node = mutationRecords[ i ].addedNodes[ ii ];
|
||||||
|
|
||||||
|
if ( node.nodeType === 3 ) {
|
||||||
|
node = node.parentNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( node.nodeType === 1 ) {
|
||||||
|
emoji.parse( node );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} )
|
||||||
|
|
||||||
|
.observe( document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
emoji.parse( document.body );
|
emoji.parse( document.body );
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -84,22 +89,16 @@ window.wp = window.wp || {};
|
||||||
*
|
*
|
||||||
* @since 4.2.0
|
* @since 4.2.0
|
||||||
*
|
*
|
||||||
* @return {bool} True if the browser can render emoji, false if it cannot.
|
* @return {Boolean} True if the browser can render emoji, false if it cannot.
|
||||||
*/
|
*/
|
||||||
browserSupportsEmoji: function() {
|
browserSupportsEmoji: function() {
|
||||||
var context, smile;
|
var canvas = document.createElement( 'canvas' ),
|
||||||
|
context = canvas.getContext && canvas.getContext( '2d' );
|
||||||
|
|
||||||
if ( ! document.createElement( 'canvas' ).getContext ) {
|
if ( ! context.fillText ) {
|
||||||
return;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
context = document.createElement( 'canvas' ).getContext( '2d' );
|
|
||||||
if ( typeof context.fillText != 'function' ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
smile = String.fromCharCode( 55357 ) + String.fromCharCode( 56835 );
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Chrome OS X added native emoji rendering in M41. Unfortunately,
|
* Chrome OS X added native emoji rendering in M41. Unfortunately,
|
||||||
* it doesn't work when the font is bolder than 500 weight. So, we
|
* it doesn't work when the font is bolder than 500 weight. So, we
|
||||||
|
@ -107,7 +106,7 @@ window.wp = window.wp || {};
|
||||||
*/
|
*/
|
||||||
context.textBaseline = 'top';
|
context.textBaseline = 'top';
|
||||||
context.font = '600 32px Arial';
|
context.font = '600 32px Arial';
|
||||||
context.fillText( smile, 0, 0 );
|
context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
|
||||||
|
|
||||||
return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
|
return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
|
||||||
},
|
},
|
||||||
|
@ -117,29 +116,20 @@ window.wp = window.wp || {};
|
||||||
* made of two characters, so some browsers (notably, Firefox OS X) don't support them.
|
* made of two characters, so some browsers (notably, Firefox OS X) don't support them.
|
||||||
*
|
*
|
||||||
* @since 4.2.0
|
* @since 4.2.0
|
||||||
* @return {bool} True if the browser renders flag characters as a flag glyph, false if it does not.
|
*
|
||||||
|
* @return {Boolean} True if the browser renders flag characters as a flag glyph, false if it does not.
|
||||||
*/
|
*/
|
||||||
browserSupportsFlagEmoji: function() {
|
browserSupportsFlagEmoji: function() {
|
||||||
var context, flag, canvas;
|
var canvas = document.createElement( 'canvas' ),
|
||||||
|
context = canvas.getContext && canvas.getContext( '2d' );
|
||||||
|
|
||||||
canvas = document.createElement( 'canvas' );
|
if ( ! context.fillText ) {
|
||||||
|
return false;
|
||||||
if ( ! canvas.getContext ) {
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
context = canvas.getContext( '2d' );
|
|
||||||
|
|
||||||
if ( typeof context.fillText != 'function' ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
flag = String.fromCharCode(55356) + String.fromCharCode(56812); // [G]
|
|
||||||
flag += String.fromCharCode(55356) + String.fromCharCode(56807); // [B]
|
|
||||||
|
|
||||||
context.textBaseline = 'top';
|
context.textBaseline = 'top';
|
||||||
context.font = '32px Arial';
|
context.font = '32px Arial';
|
||||||
context.fillText( flag, 0, 0 );
|
context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* This works because the image will be one of three things:
|
* This works because the image will be one of three things:
|
||||||
|
@ -151,24 +141,23 @@ window.wp = window.wp || {};
|
||||||
* to a larger image (4-5KB data URL).
|
* to a larger image (4-5KB data URL).
|
||||||
*/
|
*/
|
||||||
return canvas.toDataURL().length > 3000;
|
return canvas.toDataURL().length > 3000;
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Given a DOM node, parse any emoji characters into Twemoji images.
|
* Given an element or string, parse any emoji characters into Twemoji images.
|
||||||
*
|
*
|
||||||
* @since 4.2.0
|
* @since 4.2.0
|
||||||
*
|
*
|
||||||
* @param {Element} element The DOM node to parse.
|
* @param {HTMLElement|String} object The element or string to parse.
|
||||||
*/
|
*/
|
||||||
parse: function( element ) {
|
parse: function( object ) {
|
||||||
if ( ! emoji.parseEmoji ) {
|
if ( ! emoji.parseEmoji ) {
|
||||||
return;
|
return object;
|
||||||
}
|
}
|
||||||
|
|
||||||
return twemoji.parse( element, {
|
return twemoji.parse( object, {
|
||||||
base: emoji.baseUrl,
|
base: settings.baseUrl,
|
||||||
ext: emoji.ext,
|
ext: settings.ext,
|
||||||
callback: function( icon, options ) {
|
callback: function( icon, options ) {
|
||||||
// Ignore some standard characters that TinyMCE recommends in its character map.
|
// Ignore some standard characters that TinyMCE recommends in its character map.
|
||||||
switch ( icon ) {
|
switch ( icon ) {
|
||||||
|
@ -193,11 +182,7 @@ window.wp = window.wp || {};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if ( window.addEventListener ) {
|
|
||||||
window.addEventListener( 'load', emoji.load, false );
|
|
||||||
} else if ( window.attachEvent ) {
|
|
||||||
window.attachEvent( 'onload', emoji.load );
|
|
||||||
}
|
|
||||||
|
|
||||||
emoji.init();
|
emoji.init();
|
||||||
})();
|
|
||||||
|
wp.emoji = emoji;
|
||||||
|
} )( window, window.wp, window.twemoji, window._wpemojiSettings );
|
||||||
|
|
|
@ -447,7 +447,7 @@ function wp_default_scripts( &$scripts ) {
|
||||||
$scripts->enqueue( 'emoji' );
|
$scripts->enqueue( 'emoji' );
|
||||||
|
|
||||||
if ( is_admin() ) {
|
if ( is_admin() ) {
|
||||||
$scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array( 'jquery', 'wp-ajax-response', 'emoji' ), false, 1 );
|
$scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array( 'jquery', 'wp-ajax-response' ), false, 1 );
|
||||||
did_action( 'init' ) && $scripts->localize( 'admin-tags', 'tagsl10n', array(
|
did_action( 'init' ) && $scripts->localize( 'admin-tags', 'tagsl10n', array(
|
||||||
'noPerm' => __('You do not have permission to do that.'),
|
'noPerm' => __('You do not have permission to do that.'),
|
||||||
'broken' => __('An unidentified error has occurred.')
|
'broken' => __('An unidentified error has occurred.')
|
||||||
|
@ -470,7 +470,7 @@ function wp_default_scripts( &$scripts ) {
|
||||||
'tagDelimiter' => _x( ',', 'tag delimiter' ),
|
'tagDelimiter' => _x( ',', 'tag delimiter' ),
|
||||||
) );
|
) );
|
||||||
|
|
||||||
$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'emoji' ), false, 1 );
|
$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box' ), false, 1 );
|
||||||
did_action( 'init' ) && $scripts->localize( 'post', 'postL10n', array(
|
did_action( 'init' ) && $scripts->localize( 'post', 'postL10n', array(
|
||||||
'ok' => __('OK'),
|
'ok' => __('OK'),
|
||||||
'cancel' => __('Cancel'),
|
'cancel' => __('Cancel'),
|
||||||
|
@ -522,7 +522,7 @@ function wp_default_scripts( &$scripts ) {
|
||||||
|
|
||||||
$scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone' ), false, 1 );
|
$scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone' ), false, 1 );
|
||||||
|
|
||||||
$scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest', 'emoji' ), false, 1 );
|
$scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
|
||||||
did_action( 'init' ) && $scripts->localize( 'inline-edit-post', 'inlineEditL10n', array(
|
did_action( 'init' ) && $scripts->localize( 'inline-edit-post', 'inlineEditL10n', array(
|
||||||
'error' => __('Error while saving the changes.'),
|
'error' => __('Error while saving the changes.'),
|
||||||
'ntdeltitle' => __('Remove From Bulk Edit'),
|
'ntdeltitle' => __('Remove From Bulk Edit'),
|
||||||
|
@ -530,7 +530,7 @@ function wp_default_scripts( &$scripts ) {
|
||||||
'comma' => trim( _x( ',', 'tag delimiter' ) ),
|
'comma' => trim( _x( ',', 'tag delimiter' ) ),
|
||||||
) );
|
) );
|
||||||
|
|
||||||
$scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery', 'emoji' ), false, 1 );
|
$scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery' ), false, 1 );
|
||||||
did_action( 'init' ) && $scripts->localize( 'inline-edit-tax', 'inlineEditL10n', array(
|
did_action( 'init' ) && $scripts->localize( 'inline-edit-tax', 'inlineEditL10n', array(
|
||||||
'error' => __('Error while saving the changes.')
|
'error' => __('Error while saving the changes.')
|
||||||
) );
|
) );
|
||||||
|
|
Loading…
Reference in New Issue