-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
156 lines (136 loc) · 4.88 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Firebase Chat</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src='https://cdn.firebase.com/js/client/2.4.0/firebase.js'></script>
<style>
body {
font-family: 'HelveticaNeue-Light';
}
.msg {
margin: 10px 0;
padding: 10px;
width: 400px;
background-color: #efefef;
}
#username, #text {
margin: 5px 0px;
}
#post {
padding: 0.5em 1em;
background-color: #50b1ff;
border: none;
color: #FFF;
}
</style>
</head>
<body>
<textarea id="text" rows="4" cols="70">Message</textarea> <br/>
<input id="image" type="text" placeholder="Image Url" size=100><br/><br/>
<button id="post">Post</button><br/>
<div id="results"></div>
<div id="debug"><div>
<script>
var debug = function(str) {
console.log(str);
}
debug("URL:"+window.location.href);
var url = new URL(window.location.href);
var user = url.searchParams.get("user");
var chatroom = url.searchParams.get("room");
var myFirebase = new Firebase('https://david-chat-app.firebaseio.com/rooms/'+chatroom);
var textInput = document.querySelector('#text');
var imageInput = document.querySelector('#image');
var postButton = document.querySelector('#post');
postButton.addEventListener("click", function() {
var msgText = textInput.value;
var msgImage = imageInput.value;
var err;
var onComplete = function(error) {
if (error) {
debug("Write Error:" + error.code + ":" +error.message);
}
};
myFirebase.push({username:user, text:msgText, image:msgImage}, onComplete);
textInput.value = "";
});
/** Function to add a data listener **/
var startListening = function() {
myFirebase.on('child_added', function(snapshot) {
debug("childAdded 10");
var msg = snapshot.val();
var msgRefForCommenting = snapshot.ref();
debug(msg.toString());
var msgUsernameElement = document.createElement("b");
msgUsernameElement.textContent = msg.username;
var msgTextElement = document.createElement("p");
msgTextElement.textContent = msg.text;
var msgElement = document.createElement("div");
msgElement.appendChild(msgUsernameElement);
msgElement.appendChild(msgTextElement);
if (msg.image) {
var msgImageElement = document.createElement("img");
msgImageElement.src = msg.image;
msgElement.appendChild(msgImageElement);
msgElement.appendChild(document.createElement("br"));
}
if (msg.comments) {
var commentsContainer = document.createElement("ul");
}
for (commentKey in msg.comments) {
var comment = msg.comments[commentKey];
var commentUsernameElement = document.createElement("b");
commentUsernameElement.textContent = comment.username;
var commentTextElement = document.createElement("p");
commentTextElement.textContent = comment.text;
var commentElement = document.createElement("li");
commentElement.appendChild(commentUsernameElement);
commentElement.appendChild(commentTextElement);
commentsContainer.appendChild(commentElement);
}
if (msg.comments) {
msgElement.appendChild(commentsContainer);
}
var showRespondElement = document.createElement("a");
showRespondElement.textContent = "Respond";
showRespondElement.href = "#";
showRespondElement.onclick = function() {
debug("onclick");
showRespondElement.style.display = "none";
var commentElement = document.createElement("textarea");
commentElement.rows = 4;
commentElement.cols = 50;
commentElement.placeholder = "Say something.";
msgElement.appendChild(commentElement);
msgElement.appendChild(document.createElement("br"));
var postCommentElement = document.createElement("input");
postCommentElement.value = "Post";
postCommentElement.type = "button";
postCommentElement.addEventListener("click", function() {
var msgText = commentElement.value;
var err;
var onComplete = function(error) {
if (error) {
debug("Write Error:" + error.code + ":" +error.message);
}
window.location.reload();
}
var databaseEntry = msgRefForCommenting.child("comments");
databaseEntry.push({username:user, text:msgText}, onComplete);
commentElement.value = "";
});
msgElement.appendChild(postCommentElement);
}
msgElement.appendChild(showRespondElement);
msgElement.className = "msg";
document.getElementById("results").appendChild(msgElement);
debug("childAdded 20");
});
}
// Begin listening for data
startListening();
</script>
</body>
</html>