-
Notifications
You must be signed in to change notification settings - Fork 4
/
firebase-demo.html
75 lines (65 loc) · 2.17 KB
/
firebase-demo.html
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
<!doctype html>
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src='js/polychat-firebase.js'></script>
<style>
#messages {float: left;}
#users {float: right;}
#input {position:absolute; bottom:20px; left: 20px;}
</style>
</head>
<body>
<select id="languages">
<option value="en">English</option>
<option value="ja">Japanese</option>
<option value="fa">Persian</option>
</select>
<div id="messages"></div>
<div id="users"></div>
<input type="text" id="input" placeholder="Message">
<script>
var polychat = new Polychat();
polychat.name = prompt('Enter your name');
polychat.language = 'en';
var languages = $('#languages');
languages.change(function() {
polychat.language = languages.val();
});
var displayMessage = function(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name + ': ')).appendTo($('#messages'));
};
polychat.onMessage = function(name, text, language) {
if (language != polychat.language) {
$.get('https://www.googleapis.com/language/translate/v2?key=AIzaSyCvmuME4nuAt6dsYwM6SKSvpYyn3a_DcnU&source='
+ language + '&target=' + polychat.language + '&q=' + text, function(response) {
displayMessage(name, response.data.translations[0].translatedText);
});
} else {
displayMessage(name, text);
}
};
polychat.onUsers = function(users) {
var output = '';
for (var name in users) {
output += '<li>' + name;
if (users[name]) {
output += ' (typing)';
}
output += '</li>';
}
$('#users').html('<ul>' + output + '</ul>');
};
polychat.connect();
$('#input').keypress(function (e) {
var enter = e.keyCode == 13;
if (enter) {
polychat.send($('#input').val());
$('#input').val('').focus();
}
polychat.typing(!enter);
});
</script>
</body>
</html>