wp-emoji-loader.js
4.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
( function( window, document, settings ) {
var src, ready, ii, tests;
/**
* Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
* made of two characters, so some browsers (notably, Firefox OS X) don't support them.
*
* @since 4.2.0
*
* @param type {String} Whether to test for support of "simple", "flag", "diversity" or "unicode8" emoji.
* @return {Boolean} True if the browser can render emoji, false if it cannot.
*/
function browserSupportsEmoji( type ) {
var canvas = document.createElement( 'canvas' ),
context = canvas.getContext && canvas.getContext( '2d' ),
stringFromCharCode = String.fromCharCode,
tonedata, tone, tone2;
if ( ! context || ! context.fillText ) {
return false;
}
/*
* Chrome on OS X added native emoji rendering in M41. Unfortunately,
* it doesn't work when the font is bolder than 500 weight. So, we
* check for bold rendering support to avoid invisible emoji in Chrome.
*/
context.textBaseline = 'top';
context.font = '600 32px Arial';
switch ( type ) {
case 'flag':
/*
* This works because the image will be one of three things:
* - Two empty squares, if the browser doesn't render emoji
* - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji
* - The Australian flag
*
* The first two will encode to small images (1-2KB data URLs), the third will encode
* to a larger image (4-5KB data URL).
*/
context.fillText( stringFromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 );
return canvas.toDataURL().length > 3000;
case 'diversity':
/*
* This tests if the browser supports the Emoji Diversity specification, by rendering an
* emoji with no skin tone specified (in this case, Santa). It then adds a skin tone, and
* compares if the emoji rendering has changed.
*/
context.fillText( stringFromCharCode( 55356, 57221 ), 0, 0 );
tonedata = context.getImageData( 16, 16, 1, 1 ).data;
tone = tonedata[0] + ',' + tonedata[1] + ',' + tonedata[2] + ',' + tonedata[3];
context.fillText( stringFromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 );
// Chrome has issues comparing arrays, and Safari has issues converting arrays to strings.
// So, we create our own string and compare that, instead.
tonedata = context.getImageData( 16, 16, 1, 1 ).data;
tone2 = tonedata[0] + ',' + tonedata[1] + ',' + tonedata[2] + ',' + tonedata[3];
return tone !== tone2;
case 'simple':
/*
* This creates a smiling emoji, and checks to see if there is any image data in the
* center pixel. In browsers that don't support emoji, the character will be rendered
* as an empty square, so the center pixel will be blank.
*/
context.fillText( stringFromCharCode( 55357, 56835 ), 0, 0 );
return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
case 'unicode8':
/*
* To check for Unicode 8 support, let's try rendering the most important advancement
* that the Unicode Consortium have made in years: the burrito.
*/
context.fillText( stringFromCharCode( 55356, 57135 ), 0, 0 );
return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
}
return false;
}
function addScript( src ) {
var script = document.createElement( 'script' );
script.src = src;
script.type = 'text/javascript';
document.getElementsByTagName( 'head' )[0].appendChild( script );
}
tests = Array( 'simple', 'flag', 'unicode8', 'diversity' );
settings.supports = {
everything: true,
everythingExceptFlag: true
};
for( ii = 0; ii < tests.length; ii++ ) {
settings.supports[ tests[ ii ] ] = browserSupportsEmoji( tests[ ii ] );
settings.supports.everything = settings.supports.everything && settings.supports[ tests[ ii ] ];
if ( 'flag' !== tests[ ii ] ) {
settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && settings.supports[ tests[ ii ] ];
}
}
settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && ! settings.supports.flag;
settings.DOMReady = false;
settings.readyCallback = function() {
settings.DOMReady = true;
};
if ( ! settings.supports.everything ) {
ready = function() {
settings.readyCallback();
};
if ( document.addEventListener ) {
document.addEventListener( 'DOMContentLoaded', ready, false );
window.addEventListener( 'load', ready, false );
} else {
window.attachEvent( 'onload', ready );
document.attachEvent( 'onreadystatechange', function() {
if ( 'complete' === document.readyState ) {
settings.readyCallback();
}
} );
}
src = settings.source || {};
if ( src.concatemoji ) {
addScript( src.concatemoji );
} else if ( src.wpemoji && src.twemoji ) {
addScript( src.twemoji );
addScript( src.wpemoji );
}
}
} )( window, document, window._wpemojiSettings );