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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
( function( window, document, settings ) {
var src, ready, ii, tests;
/*
* Create a canvas element for testing native browser support
* of emoji.
*/
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext && canvas.getContext( '2d' );
/**
* Check if two sets of Emoji characters render the same.
*
* @param set1 array Set of Emoji characters.
* @param set2 array Set of Emoji characters.
* @returns {boolean} True if the two sets render the same.
*/
function emojiSetsRenderIdentically( set1, set2 ) {
var stringFromCharCode = String.fromCharCode;
// Cleanup from previous test.
context.clearRect( 0, 0, canvas.width, canvas.height );
context.fillText( stringFromCharCode.apply( this, set1 ), 0, 0 );
var rendered1 = canvas.toDataURL();
// Cleanup from previous test.
context.clearRect( 0, 0, canvas.width, canvas.height );
context.fillText( stringFromCharCode.apply( this, set2 ), 0, 0 );
var rendered2 = canvas.toDataURL();
return rendered1 === rendered2;
}
/**
* 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 "flag" or "emoji".
* @return {Boolean} True if the browser can render emoji, false if it cannot.
*/
function browserSupportsEmoji( type ) {
var isIdentical;
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':
/*
* Test for UN flag compatibility. This is the least supported of the letter locale flags,
* so gives us an easy test for full support.
*
* To test for support, we try to render it, and compare the rendering to how it would look if
* the browser doesn't render it correctly ([U] + [N]).
*/
isIdentical = emojiSetsRenderIdentically(
[ 55356, 56826, 55356, 56819 ],
[ 55356, 56826, 8203, 55356, 56819 ]
);
if ( isIdentical ) {
return false;
}
/*
* Test for English flag compatibility. England is a country in the United Kingdom, it
* does not have a two letter locale code but rather an five letter sub-division code.
*
* To test for support, we try to render it, and compare the rendering to how it would look if
* the browser doesn't render it correctly (black flag emoji + [G] + [B] + [E] + [N] + [G]).
*/
isIdentical = emojiSetsRenderIdentically(
[ 55356, 57332, 56128, 56423, 56128, 56418, 56128, 56421, 56128, 56430, 56128, 56423, 56128, 56447 ],
[ 55356, 57332, 8203, 56128, 56423, 8203, 56128, 56418, 8203, 56128, 56421, 8203, 56128, 56430, 8203, 56128, 56423, 8203, 56128, 56447 ]
);
return ! isIdentical;
case 'emoji':
/*
* She's the hero Emoji deserves, but not the one it needs right now.
*
* To test for support, try to render a new emoji (female superhero),
* then compare it to how it would look if the browser doesn't render it correctly
* (superhero + female sign).
*/
isIdentical = emojiSetsRenderIdentically(
[55358, 56760, 9792, 65039],
[55358, 56760, 8203, 9792, 65039]
);
return ! isIdentical;
}
return false;
}
function addScript( src ) {
var script = document.createElement( 'script' );
script.src = src;
script.defer = script.type = 'text/javascript';
document.getElementsByTagName( 'head' )[0].appendChild( script );
}
tests = Array( 'flag', 'emoji' );
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 );
|
