blob: dff86f179e23d28e28ec70700c533747b0002a03 [file] [log] [blame]
aviau039001d2016-09-29 16:39:05 -04001<html>
2
3
4<!-- Empty head might be needed for setSenderImage -->
5<head>
Frederic Guimontd8343e62016-11-01 23:31:25 -04006 <meta name="viewport" content="width=device-width, initial-scale=1" />
Frédéric Guimont13778a62016-11-02 21:21:21 -04007 <meta charset=“utf-8”>
aviau039001d2016-09-29 16:39:05 -04008</head>
9
10<body>
11 <div id="messages">
12 </div>
13</body>
14
Frederic Guimontd8343e62016-11-01 23:31:25 -040015<!--
aviau039001d2016-09-29 16:39:05 -040016<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
17<script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify.min.js"></script>
18<script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-string.min.js"></script>
19<script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-jquery.min.js"></script>
Frederic Guimontd8343e62016-11-01 23:31:25 -040020<script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-html.min.js"></script>
21-->
aviau039001d2016-09-29 16:39:05 -040022
aviau039001d2016-09-29 16:39:05 -040023<script>
24var ring = {}; // ring namespace
25
26ring.chatview = (function(){
27 var dev = {}; // ring.chatview.dev namespace
28
29 /**
30 * Clears all messages
31 */
32 function clearMessages()
33 {
34 $( "#messages" ).empty();
35 }
36
37 /**
38 * Converts text to HTML
39 */
40 function escapeHtml(html)
41 {
42 var text = document.createTextNode(html);
43 var div = document.createElement('div');
44 div.appendChild(text);
45 return div.innerHTML;
46 }
47
48 /**
49 * Returns HTML message from the message text.
50 * Cleaned and linkified.
51 */
52 function getMessageHtml(message_text)
53 {
54 escaped_message = escapeHtml(message_text);
55 linkified_message = linkifyHtml(escaped_message, {});
56 return linkified_message;
57 }
58
59 /**
60 * Returns the message status, formatted for display
61 */
62 function getMessageDeliveryStatusText(message_delivery_status)
63 {
64 var formatted_delivery_status = message_delivery_status;
65
66 switch(message_delivery_status)
67 {
68 case "unknown":
69 formatted_delivery_status = "";
70 break;
aviau039001d2016-09-29 16:39:05 -040071 case "sending":
Frédéric Guimont13778a62016-11-02 21:21:21 -040072 formatted_delivery_status = "Sending<svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><circle class='status_circle anim-first' cx='4' cy='12' r='1'/><circle class='status_circle anim-second' cx='8' cy='12' r='1'/><circle class='status_circle anim-third' cx='12' cy='12' r='1'/></svg>"
73 break;
aviau039001d2016-09-29 16:39:05 -040074 case "read":
Frédéric Guimont13778a62016-11-02 21:21:21 -040075 break;
76 case "failure":
77 formatted_delivery_status = "Failure <svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><path class='status-x x-first' stroke='#AA0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M4,4 L12,12'/><path class='status-x x-second' stroke='#AA0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M12,4 L4,12'/></svg>"
78 break;
aviau039001d2016-09-29 16:39:05 -040079 case "sent":
Frédéric Guimont13778a62016-11-02 21:21:21 -040080 formatted_delivery_status = "Sent <svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><path class='status-check' stroke='#008000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M2,8 L6,12 L14,4'/></svg>";
aviau039001d2016-09-29 16:39:05 -040081 break;
82 default:
83 console.log("getMessageDeliveryStatusText: unknown delivery status: " + message_delivery_status);
84 break;
85 }
86
87 return formatted_delivery_status;
88 }
89
90 /**
91 * Returns the message date, formatted for display
92 */
93 function getMessageTimestampText(message_timestamp)
94 {
95 return new Date(1000 * message_timestamp).toLocaleString();
96 }
97
98 /**
99 * Adds a message to the buffer, or update it if new_message is
100 * TRUE
101 */
102 function addOrUpdateMessage(message_object, new_message)
103 {
104 // Properties of the message object
105 message_id = message_object["id"];
106 message_text = message_object["text"];
107 message_sender = message_object["sender"];
aviaufc213552016-11-01 12:39:39 -0400108 message_sender_contact_method = message_object["sender_contact_method"];
aviau039001d2016-09-29 16:39:05 -0400109 message_timestamp = message_object["timestamp"];
110 message_direction = message_object["direction"];
111 message_delivery_status = message_object["delivery_status"];
112
113 if (new_message)
114 {
115 message_div_classes = [
116 "message",
117 "message_" + message_direction
118 ];
119
120 $message_div = $(
121 "<div>",
122 {
123 id: "message_" + message_id,
124 class: message_div_classes.join(" "),
125 }
126 );
127
Frederic Guimontd8343e62016-11-01 23:31:25 -0400128 $message_wrapper = $("<div>", { class: "message_wrapper"});
129
aviau039001d2016-09-29 16:39:05 -0400130 $message_text = $("<span>", { class: "message_text" });
131 $message_sender = $("<span>", { class: "message_sender" });
132 $message_delivery_status = $("<span>", { class: "message_delivery_status" });
133 $message_timestamp = $("<span>", { class: "message_timestamp" });
134
Frederic Guimontd8343e62016-11-01 23:31:25 -0400135 $message_wrapper.append($message_text);
136 $message_wrapper.append($message_sender);
137
138
aviau039001d2016-09-29 16:39:05 -0400139 // Sender image
140 $message_sender_span = $("<span>", { class: "message_sender_image" });
Frederic Guimontd8343e62016-11-01 23:31:25 -0400141 $message_sender_image = $("<span>", { class: "sender_image sender_image_" + message_sender_contact_method });
142
aviau039001d2016-09-29 16:39:05 -0400143
144 $message_div.append($message_sender_image);
Frederic Guimontd8343e62016-11-01 23:31:25 -0400145 $message_div.append($message_wrapper);
aviau039001d2016-09-29 16:39:05 -0400146 $message_div.append($message_delivery_status);
Frederic Guimontd8343e62016-11-01 23:31:25 -0400147
aviau039001d2016-09-29 16:39:05 -0400148 $("#messages").append($message_div);
149 }
150 else
151 {
152 message_selector = "#message_" + message_id;
153 $message_text = $(message_selector + " .message_text");
154 $message_sender_image = $(message_selector + " .message_sender_image");
155 $message_sender = $(message_selector + " .message_sender");
156 $message_delivery_status = $(message_selector + " .message_delivery_status");
157 $message_timestamp = $(message_selector + " .message_timestamp");
158 }
159
160 // Set the variables
161 $message_text.html(getMessageHtml(message_text));
162 $message_sender.text(message_sender + ": ");
Frédéric Guimont13778a62016-11-02 21:21:21 -0400163 $message_delivery_status.html(getMessageDeliveryStatusText(message_delivery_status));
aviau039001d2016-09-29 16:39:05 -0400164 $message_timestamp.text(getMessageTimestampText(message_timestamp));
Frederic Guimontd8343e62016-11-01 23:31:25 -0400165 $message_div.find($message_wrapper).append($message_timestamp);
aviau039001d2016-09-29 16:39:05 -0400166
167 }
168
169
170 /**
171 * Add a message to the buffer
172 */
173 function addMessage(message_object)
174 {
175 addOrUpdateMessage(message_object, true);
176
177 // Scroll to bottom
178 window.scrollTo(0, document.body.scrollHeight);
179 }
180
181 /**
182 * Updated a message that was previously added with addMessage
183 */
184 function updateMessage(message_object)
185 {
186 addOrUpdateMessage(message_object, false);
187 }
188
189 /**
190 * Sets the image for a given sender
191 * set_sender_image object should contain the following keys:
192 * - sender: the name of the sender
193 * - sender_image: base64 png encoding of the sender image
194 */
195 function setSenderImage(set_sender_image_object)
196 {
aviaufc213552016-11-01 12:39:39 -0400197 sender_contact_method = set_sender_image_object['sender_contact_method'];
aviau039001d2016-09-29 16:39:05 -0400198 sender_image = set_sender_image_object['sender_image'];
199
aviaufc213552016-11-01 12:39:39 -0400200 sender_image_id = "sender_image_" + sender_contact_method;
aviau039001d2016-09-29 16:39:05 -0400201
202 // Remove the currently set sender image
203 $("#" + sender_image_id).remove();
204
205 // Create a new style element
206 var style = document.createElement('style');
207 style.type = 'text/css';
208 style.id = sender_image_id
Frederic Guimontd8343e62016-11-01 23:31:25 -0400209 style.innerHTML = '.' + sender_image_id + " { \n content: url(data:image/png;base64," + sender_image + "); \n height: 35px; \n width: 35px; \n }";
aviau039001d2016-09-29 16:39:05 -0400210 document.getElementsByTagName('head')[0].appendChild(style);
211 }
212
213 function clearSenderImages()
214 {
215 document.getElementsByTagName('head')[0].innerHTML = "";
216 }
217
218 return {
219 addMessage: addMessage,
220 updateMessage: updateMessage,
221 setSenderImage: setSenderImage,
222 dev: dev,
223 clearMessages: clearMessages,
224 clearSenderImages: clearSenderImages,
225 }
226
227})();
228
229/* DEV functions */
230ring.chatview.dev = (function(){
231
232
233
234 /**
235 * Fills the backlog with bogus messages
236 */
237 function fillMessages()
238 {
239 ring.chatview.clearMessages();
240
241 profile_picture = "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";
242
243 // Set the profile pictures
244 ring.chatview.setSenderImage(
245 {
246 "sender": "Me",
247 "sender_image": profile_picture,
248 }
249 );
250
251 ring.chatview.setSenderImage(
252 {
253 "sender": "Other Guy",
254 "sender_image": profile_picture,
255 }
256 )
257
258
259 // Create messages
260 ring.chatview.addMessage(
261 {
262 "id": 0,
263 "text": "Hello! This message's status will be updated to sent.",
264 "sender": "Me",
265 "timestamp": 1475275399,
266 "direction": "out",
267 "delivery_status": "sending",
268 }
269 );
270
271 ring.chatview.updateMessage(
272 {
273 "id": 0,
274 "text": "Hello! This message's status will be updated to sent.",
275 "sender": "Me",
276 "timestamp": 1475275399,
277 "direction": "out",
Frédéric Guimont13778a62016-11-02 21:21:21 -0400278 "delivery_status": "sending",
aviau039001d2016-09-29 16:39:05 -0400279 }
280 );
281
282 ring.chatview.addMessage(
283 {
284 "id": 1,
285 "text": "Hey! This message's status is 'Unknown', we shouldn't display that to the user.",
286 "sender": "Other Guy",
287 "timestamp": 1475275399,
288 "direction": "in",
289 "delivery_status": "unknown",
290 }
291 );
292
293 ring.chatview.addMessage(
294 {
Frédéric Guimont13778a62016-11-02 21:21:21 -0400295 "id": 1,
aviau039001d2016-09-29 16:39:05 -0400296 "text": "This is the second message in a row from me. Don't bother displaying my profile picture twice.",
297 "sender": "Other Guy",
298 "timestamp": 1475275399,
299 "direction": "in",
300 "delivery_status": "unknown",
301 }
302 );
303
304 ring.chatview.addMessage(
305 {
306 "id": 0,
307 "text": "Now its my turn to speak!",
308 "sender": "Me",
309 "timestamp": 1475275399,
310 "direction": "out",
Frédéric Guimont13778a62016-11-02 21:21:21 -0400311 "delivery_status": "sent",
aviau039001d2016-09-29 16:39:05 -0400312 }
313 );
314
Frédéric Guimont13778a62016-11-02 21:21:21 -0400315 ring.chatview.addMessage(
316 {
317 "id": 5,
318 "text": "Hello! This message's status will be updated to sent.",
319 "sender": "Me",
320 "timestamp": 1475275399,
321 "direction": "out",
322 "delivery_status": "sending",
323 }
324 );
325
326
327 ring.chatview.updateMessage(
328 {
329 "id": 5,
330 "text": "Hello! This message's status will be updated to sent.",
331 "sender": "Me",
332 "timestamp": 1475275399,
333 "direction": "out",
334 "delivery_status": "failure",
335 }
336 );
aviau039001d2016-09-29 16:39:05 -0400337
338 }
339
340 return {
341 fillMessages: fillMessages,
342 }
343
344})();
345
346</script>
347
348</html>