author | ymh <ymh.work@gmail.com> |
Mon, 14 Oct 2019 17:39:30 +0200 | |
changeset 7 | cf61fcea0001 |
parent 5 | 5e2f62d02dcd |
child 9 | 177826044cd9 |
permissions | -rw-r--r-- |
5 | 1 |
( function( window, document, settings ) { |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
2 |
var src, ready, ii, tests; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
3 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
4 |
/* |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
5 |
* Create a canvas element for testing native browser support |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
6 |
* of emoji. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
7 |
*/ |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
8 |
var canvas = document.createElement( 'canvas' ); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
9 |
var context = canvas.getContext && canvas.getContext( '2d' ); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
10 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
11 |
/** |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
12 |
* Check if two sets of Emoji characters render the same. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
13 |
* |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
14 |
* @param set1 array Set of Emoji characters. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
15 |
* @param set2 array Set of Emoji characters. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
16 |
* @returns {boolean} True if the two sets render the same. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
17 |
*/ |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
18 |
function emojiSetsRenderIdentically( set1, set2 ) { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
19 |
var stringFromCharCode = String.fromCharCode; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
20 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
21 |
// Cleanup from previous test. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
22 |
context.clearRect( 0, 0, canvas.width, canvas.height ); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
23 |
context.fillText( stringFromCharCode.apply( this, set1 ), 0, 0 ); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
24 |
var rendered1 = canvas.toDataURL(); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
25 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
26 |
// Cleanup from previous test. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
27 |
context.clearRect( 0, 0, canvas.width, canvas.height ); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
28 |
context.fillText( stringFromCharCode.apply( this, set2 ), 0, 0 ); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
29 |
var rendered2 = canvas.toDataURL(); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
30 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
31 |
return rendered1 === rendered2; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
32 |
} |
5 | 33 |
|
34 |
/** |
|
35 |
* Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph |
|
36 |
* made of two characters, so some browsers (notably, Firefox OS X) don't support them. |
|
37 |
* |
|
38 |
* @since 4.2.0 |
|
39 |
* |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
40 |
* @param type {String} Whether to test for support of "flag" or "emoji". |
5 | 41 |
* @return {Boolean} True if the browser can render emoji, false if it cannot. |
42 |
*/ |
|
43 |
function browserSupportsEmoji( type ) { |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
44 |
var isIdentical; |
5 | 45 |
|
46 |
if ( ! context || ! context.fillText ) { |
|
47 |
return false; |
|
48 |
} |
|
49 |
||
50 |
/* |
|
51 |
* Chrome on OS X added native emoji rendering in M41. Unfortunately, |
|
52 |
* it doesn't work when the font is bolder than 500 weight. So, we |
|
53 |
* check for bold rendering support to avoid invisible emoji in Chrome. |
|
54 |
*/ |
|
55 |
context.textBaseline = 'top'; |
|
56 |
context.font = '600 32px Arial'; |
|
57 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
58 |
switch ( type ) { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
59 |
case 'flag': |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
60 |
/* |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
61 |
* Test for UN flag compatibility. This is the least supported of the letter locale flags, |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
62 |
* so gives us an easy test for full support. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
63 |
* |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
64 |
* To test for support, we try to render it, and compare the rendering to how it would look if |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
65 |
* the browser doesn't render it correctly ([U] + [N]). |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
66 |
*/ |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
67 |
isIdentical = emojiSetsRenderIdentically( |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
68 |
[ 55356, 56826, 55356, 56819 ], |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
69 |
[ 55356, 56826, 8203, 55356, 56819 ] |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
70 |
); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
71 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
72 |
if ( isIdentical ) { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
73 |
return false; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
74 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
75 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
76 |
/* |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
77 |
* Test for English flag compatibility. England is a country in the United Kingdom, it |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
78 |
* does not have a two letter locale code but rather an five letter sub-division code. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
79 |
* |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
80 |
* To test for support, we try to render it, and compare the rendering to how it would look if |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
81 |
* the browser doesn't render it correctly (black flag emoji + [G] + [B] + [E] + [N] + [G]). |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
82 |
*/ |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
83 |
isIdentical = emojiSetsRenderIdentically( |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
84 |
[ 55356, 57332, 56128, 56423, 56128, 56418, 56128, 56421, 56128, 56430, 56128, 56423, 56128, 56447 ], |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
85 |
[ 55356, 57332, 8203, 56128, 56423, 8203, 56128, 56418, 8203, 56128, 56421, 8203, 56128, 56430, 8203, 56128, 56423, 8203, 56128, 56447 ] |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
86 |
); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
87 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
88 |
return ! isIdentical; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
89 |
case 'emoji': |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
90 |
/* |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
91 |
* She's the hero Emoji deserves, but not the one it needs right now. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
92 |
* |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
93 |
* To test for support, try to render a new emoji (female superhero), |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
94 |
* then compare it to how it would look if the browser doesn't render it correctly |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
95 |
* (superhero + female sign). |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
96 |
*/ |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
97 |
isIdentical = emojiSetsRenderIdentically( |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
98 |
[55358, 56760, 9792, 65039], |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
99 |
[55358, 56760, 8203, 9792, 65039] |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
100 |
); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
101 |
return ! isIdentical; |
5 | 102 |
} |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
103 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
104 |
return false; |
5 | 105 |
} |
106 |
||
107 |
function addScript( src ) { |
|
108 |
var script = document.createElement( 'script' ); |
|
109 |
||
110 |
script.src = src; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
111 |
script.defer = script.type = 'text/javascript'; |
5 | 112 |
document.getElementsByTagName( 'head' )[0].appendChild( script ); |
113 |
} |
|
114 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
115 |
tests = Array( 'flag', 'emoji' ); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
116 |
|
5 | 117 |
settings.supports = { |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
118 |
everything: true, |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
119 |
everythingExceptFlag: true |
5 | 120 |
}; |
121 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
122 |
for( ii = 0; ii < tests.length; ii++ ) { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
123 |
settings.supports[ tests[ ii ] ] = browserSupportsEmoji( tests[ ii ] ); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
124 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
125 |
settings.supports.everything = settings.supports.everything && settings.supports[ tests[ ii ] ]; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
126 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
127 |
if ( 'flag' !== tests[ ii ] ) { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
128 |
settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && settings.supports[ tests[ ii ] ]; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
129 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
130 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
131 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
132 |
settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && ! settings.supports.flag; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
133 |
|
5 | 134 |
settings.DOMReady = false; |
135 |
settings.readyCallback = function() { |
|
136 |
settings.DOMReady = true; |
|
137 |
}; |
|
138 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
139 |
if ( ! settings.supports.everything ) { |
5 | 140 |
ready = function() { |
141 |
settings.readyCallback(); |
|
142 |
}; |
|
143 |
||
144 |
if ( document.addEventListener ) { |
|
145 |
document.addEventListener( 'DOMContentLoaded', ready, false ); |
|
146 |
window.addEventListener( 'load', ready, false ); |
|
147 |
} else { |
|
148 |
window.attachEvent( 'onload', ready ); |
|
149 |
document.attachEvent( 'onreadystatechange', function() { |
|
150 |
if ( 'complete' === document.readyState ) { |
|
151 |
settings.readyCallback(); |
|
152 |
} |
|
153 |
} ); |
|
154 |
} |
|
155 |
||
156 |
src = settings.source || {}; |
|
157 |
||
158 |
if ( src.concatemoji ) { |
|
159 |
addScript( src.concatemoji ); |
|
160 |
} else if ( src.wpemoji && src.twemoji ) { |
|
161 |
addScript( src.twemoji ); |
|
162 |
addScript( src.wpemoji ); |
|
163 |
} |
|
164 |
} |
|
165 |
||
166 |
} )( window, document, window._wpemojiSettings ); |