Emoji: Use SVG in supported browsers

Use SVG images in supporting browsers, otherwise fall back to PNG images. Add the filters `emoji_svg_url` and `emoji_svg_ext`.

Introduces unit tests to check the Emoji CDN filters.

Fixes #36525

Built from https://develop.svn.wordpress.org/trunk@37471


git-svn-id: http://core.svn.wordpress.org/trunk@37439 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Peter Wilson 2016-05-20 06:03:27 +00:00
parent b777ce5b89
commit 94290a843b
5 changed files with 66 additions and 11 deletions

View File

@ -4517,12 +4517,12 @@ img.emoji {
}
/**
* Print the inline Emoji detection script if it is not already printed.
*
* @global string $wp_version
* @since 4.2.0
* @staticvar bool $printed
*/
function print_emoji_detection_script() {
global $wp_version;
static $printed = false;
if ( $printed ) {
@ -4531,24 +4531,57 @@ function print_emoji_detection_script() {
$printed = true;
_print_emoji_detection_script();
}
/**
* Print inline Emoji dection script
*
* @ignore
* @since 4.6.0
* @access private
*
* @global string $wp_version
*/
function _print_emoji_detection_script() {
global $wp_version;
$settings = array(
/**
* Filter the URL where emoji images are hosted.
* Filter the URL where emoji png images are hosted.
*
* @since 4.2.0
*
* @param string The emoji base URL.
* @param string The emoji base URL for png images.
*/
'baseUrl' => apply_filters( 'emoji_url', 'https://s.w.org/images/core/emoji/72x72/' ),
/**
* Filter the extension of the emoji files.
* Filter the extension of the emoji png files.
*
* @since 4.2.0
*
* @param string The emoji extension. Default .png.
* @param string The emoji extension for png files. Default .png.
*/
'ext' => apply_filters( 'emoji_ext', '.png' ),
/**
* Filter the URL where emoji SVG images are hosted.
*
* @since 4.2.0
*
* @param string The emoji base URL for svg images.
*/
'svgUrl' => apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/svg/' ),
/**
* Filter the extension of the emoji SVG files.
*
* @since 4.2.0
*
* @param string The emoji extension for svg files. Default .svg.
*/
'svgExt' => apply_filters( 'emoji_svg_ext', '.svg' ),
);
$version = 'ver=' . $wp_version;

File diff suppressed because one or more lines are too long

View File

@ -3,12 +3,34 @@
function wpEmoji() {
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
// Compression and maintain local scope
document = window.document,
// Private
twemoji, timer,
loaded = false,
count = 0,
ie11 = window.navigator.userAgent.indexOf( 'Trident/7.0' ) > 0;
/**
* Detect if the browser supports SVG.
*
* @since 4.6.0
*
* @return {Boolean} True if the browser supports svg, false if not.
*/
function browserSupportsSvgAsImage() {
if ( !! document.implementation.hasFeature ) {
// Source: Modernizr
// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/svg/asimg.js
return document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' );
}
// document.implementation.hasFeature is deprecated. It can be presumed
// if future browsers remove it, the browser will support SVGs as images.
return true;
}
/**
* Runs when the document load event is fired, so we can do our first parse of the page.
*
@ -141,8 +163,8 @@
args = args || {};
params = {
base: settings.baseUrl,
ext: settings.ext,
base: browserSupportsSvgAsImage() ? settings.svgUrl : settings.baseUrl,
ext: browserSupportsSvgAsImage() ? settings.svgExt : settings.ext,
className: args.className || 'emoji',
callback: function( icon, options ) {
// Ignore some standard characters that TinyMCE recommends in its character map.

View File

@ -1 +1 @@
!function(a,b){function c(){function c(){if(!i){if("undefined"==typeof a.twemoji){if(j>600)return;return a.clearTimeout(g),g=a.setTimeout(c,50),void j++}f=a.twemoji,i=!0,h&&new h(function(a){for(var b,c,f,g,h=a.length;h--;){if(b=a[h].addedNodes,c=a[h].removedNodes,f=b.length,1===f&&1===c.length&&3===b[0].nodeType&&"IMG"===c[0].nodeName&&b[0].data===c[0].alt&&"load-failed"===c[0].getAttribute("data-error"))return;for(;f--;){if(g=b[f],3===g.nodeType){if(!g.parentNode)continue;if(k)for(;g.nextSibling&&3===g.nextSibling.nodeType;)g.nodeValue=g.nodeValue+g.nextSibling.nodeValue,g.parentNode.removeChild(g.nextSibling);g=g.parentNode}!g||1!==g.nodeType||g.className&&"string"==typeof g.className&&-1!==g.className.indexOf("wp-exclude-emoji")||d(g.textContent)&&e(g)}}}).observe(document.body,{childList:!0,subtree:!0}),e(document.body)}}function d(a){var b=/[\u203C\u2049\u20E3\u2122\u2139\u2194-\u2199\u21A9\u21AA\u2300\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u261D\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638\u2639\u263A\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267B\u267F\u2692\u2693\u2694\u2696\u2697\u2699\u269B\u269C\u26A0\u26A1\u26AA\u26AB\u26B0\u26B1\u26BD\u26BE\u26C4\u26C5\u26C8\u26CE\u26CF\u26D1\u26D3\u26D4\u26E9\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753\u2754\u2755\u2757\u2763\u2764\u2795\u2796\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05\u2B06\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]/,c=/[\uDC00-\uDFFF]/;return a?c.test(a)||b.test(a):!1}function e(a,c){var d;return!b.supports.everything&&f&&a&&("string"==typeof a||a.childNodes&&a.childNodes.length)?(c=c||{},d={base:b.baseUrl,ext:b.ext,className:c.className||"emoji",callback:function(a,c){switch(a){case"a9":case"ae":case"2122":case"2194":case"2660":case"2663":case"2665":case"2666":return!1}return b.supports.everythingExceptFlag&&!/^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test(a)?!1:"".concat(c.base,a,c.ext)},onerror:function(){f.parentNode&&(this.setAttribute("data-error","load-failed"),f.parentNode.replaceChild(document.createTextNode(f.alt),f))}},"object"==typeof c.imgAttr&&(d.attributes=function(){return c.imgAttr}),f.parse(a,d)):a}var f,g,h=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,i=!1,j=0,k=a.navigator.userAgent.indexOf("Trident/7.0")>0;return b&&(b.DOMReady?c():b.readyCallback=c),{parse:e,test:d}}a.wp=a.wp||{},a.wp.emoji=new c}(window,window._wpemojiSettings);
!function(a,b){function c(){function c(){return j.implementation.hasFeature?j.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1"):!0}function d(){if(!k){if("undefined"==typeof a.twemoji){if(l>600)return;return a.clearTimeout(h),h=a.setTimeout(d,50),void l++}g=a.twemoji,k=!0,i&&new i(function(a){for(var b,c,d,g,h=a.length;h--;){if(b=a[h].addedNodes,c=a[h].removedNodes,d=b.length,1===d&&1===c.length&&3===b[0].nodeType&&"IMG"===c[0].nodeName&&b[0].data===c[0].alt&&"load-failed"===c[0].getAttribute("data-error"))return;for(;d--;){if(g=b[d],3===g.nodeType){if(!g.parentNode)continue;if(m)for(;g.nextSibling&&3===g.nextSibling.nodeType;)g.nodeValue=g.nodeValue+g.nextSibling.nodeValue,g.parentNode.removeChild(g.nextSibling);g=g.parentNode}!g||1!==g.nodeType||g.className&&"string"==typeof g.className&&-1!==g.className.indexOf("wp-exclude-emoji")||e(g.textContent)&&f(g)}}}).observe(j.body,{childList:!0,subtree:!0}),f(j.body)}}function e(a){var b=/[\u203C\u2049\u20E3\u2122\u2139\u2194-\u2199\u21A9\u21AA\u2300\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u261D\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638\u2639\u263A\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267B\u267F\u2692\u2693\u2694\u2696\u2697\u2699\u269B\u269C\u26A0\u26A1\u26AA\u26AB\u26B0\u26B1\u26BD\u26BE\u26C4\u26C5\u26C8\u26CE\u26CF\u26D1\u26D3\u26D4\u26E9\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753\u2754\u2755\u2757\u2763\u2764\u2795\u2796\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05\u2B06\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]/,c=/[\uDC00-\uDFFF]/;return a?c.test(a)||b.test(a):!1}function f(a,d){var e;return!b.supports.everything&&g&&a&&("string"==typeof a||a.childNodes&&a.childNodes.length)?(d=d||{},e={base:c()?b.svgUrl:b.baseUrl,ext:c()?b.svgExt:b.ext,className:d.className||"emoji",callback:function(a,c){switch(a){case"a9":case"ae":case"2122":case"2194":case"2660":case"2663":case"2665":case"2666":return!1}return b.supports.everythingExceptFlag&&!/^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test(a)?!1:"".concat(c.base,a,c.ext)},onerror:function(){g.parentNode&&(this.setAttribute("data-error","load-failed"),g.parentNode.replaceChild(j.createTextNode(g.alt),g))}},"object"==typeof d.imgAttr&&(e.attributes=function(){return d.imgAttr}),g.parse(a,e)):a}var g,h,i=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,j=a.document,k=!1,l=0,m=a.navigator.userAgent.indexOf("Trident/7.0")>0;return b&&(b.DOMReady?d():b.readyCallback=d),{parse:f,test:e}}a.wp=a.wp||{},a.wp.emoji=new c}(window,window._wpemojiSettings);

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.6-alpha-37470';
$wp_version = '4.6-alpha-37471';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.