forked from iamcal/js-emoji
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdemo.htm
99 lines (74 loc) · 2.61 KB
/
demo.htm
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
<!DOCTYPE html>
<html>
<head>
<title>Emoji translation demo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=420, user-scalable=no" />
<link href="emoji.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Automatic mode detection</h2>
<div id="rm1"></div>
<div id="out1"></div>
<hr />
<h2>Manual mode selection</h2>
<select id="mode" onchange="return go2();">
<option value="unified">Unified (iOS 6, OSX 7)</option>
<option value="softbank">Softbank (iOS 5)</option>
<option value="google">Google (Android)</option>
<option value="css">CSS (Modern browsers)</option>
<option value="img">Image (fallback)</option>
<option value="text">Text mode</option>
</select>
<div id="out2"></div>
<hr />
<h2>Live translation</h2>
<p>Input:</p>
<textarea id="input" style="width: 400px; height: 150px" onkeyup="go()" onchange="go()">foo :heart: bar :cinema: baz</textarea>
<p>Styled output:</p>
<div id="out3" style="width: 400px; min-height: 150px; background-color: #eee; padding: 4px;"></div>
<p>HTML output:</p>
<div id="out4" style="width: 400px; min-height: 150px; background-color: #eee; padding: 4px;"></div>
<hr />
<h2>jQuery Wrapper</h2>
<div id="jout1" style="width: 400px; min-height: 150px; background-color: #eee; padding: 4px;">
<p>foo :smile: bar</p>
<p>woo :+1: :-1:</p>
</div>
<script src="emoji.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.emoji.js" type="text/javascript"></script>
<script>
emoji.img_path = '/emoji-data/gemoji/images/emoji/unicode/';
emoji.sheet_path = '/emoji-data/sheet_64.png';
emoji.use_sheet = true;
emoji.init_env();
var auto_mode = emoji.replace_mode;
document.getElementById('rm1').innerHTML = "Detected replace mode : "+emoji.replace_mode;
document.getElementById('out1').innerHTML = emoji.replace_colons("hello :smile: world");
go();
go2();
go3();
function go(){
var text = document.getElementById('input').value;
emoji.replace_mode = auto_mode;
var out = emoji.replace_colons(text);
document.getElementById('out3').innerHTML = out;
document.getElementById('out4').innerText = out;
document.getElementById('out4').textContent = out;
}
function go2(){
var s = document.getElementById('mode');
var mode = s.options[s.selectedIndex].value;
emoji.text_mode = mode == 'text';
emoji.replace_mode = mode;
document.getElementById('out2').innerHTML = emoji.replace_colons("hello :smile: world");
return false;
}
function go3(){
emoji.replace_mode = auto_mode;
$("#jout1").emoji();
}
</script>
</body>
</html>