Gitiles
Code Review Sign In
review.jami.net / jami-client-gnome / 1f731219ebd50e617209e617ea85ebd9b0a3ce39 / . / web / chatview.html
blob: bbe3f9db1f719c52181791f26188f9f2c8138f42 [file] [log] [blame]
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]1<html>
2
3
4<!-- Empty head might be needed for setSenderImage -->
5<head>
Frederic Guimontd8343e62016-11-01 23:31:25 -0400[diff] [blame]6 <meta name="viewport" content="width=device-width, initial-scale=1" />
Frédéric Guimont13778a62016-11-02 21:21:21 -0400[diff] [blame]7 <meta charset=“utf-8”>
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]8</head>
9
10<body>
11 <div id="messages">
12 </div>
13</body>
14
Frederic Guimontd8343e62016-11-01 23:31:25 -0400[diff] [blame]15<!--
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]16<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 -0400[diff] [blame]20<script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-html.min.js"></script>
aviaue52afa22016-11-08 13:27:31 -0500[diff] [blame]21<link rel="stylesheet" type="text/css" href="chatview.css">
Frederic Guimontd8343e62016-11-01 23:31:25 -0400[diff] [blame]22-->
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]23
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]24<script>
25var ring = {}; // ring namespace
26
27ring.chatview = (function(){
28 var dev = {}; // ring.chatview.dev namespace
29
30 /**
31 * Clears all messages
32 */
33 function clearMessages()
34 {
35 $( "#messages" ).empty();
36 }
37
38 /**
39 * Converts text to HTML
40 */
41 function escapeHtml(html)
42 {
43 var text = document.createTextNode(html);
44 var div = document.createElement('div');
45 div.appendChild(text);
46 return div.innerHTML;
47 }
48
49 /**
50 * Returns HTML message from the message text.
51 * Cleaned and linkified.
52 */
53 function getMessageHtml(message_text)
54 {
aviauef36cb22016-11-08 16:02:51 -0500[diff] [blame]55 var escaped_message = escapeHtml(message_text);
56 var linkified_message = linkifyHtml(escaped_message, {});
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]57 return linkified_message;
58 }
59
60 /**
61 * Returns the message status, formatted for display
62 */
63 function getMessageDeliveryStatusText(message_delivery_status)
64 {
65 var formatted_delivery_status = message_delivery_status;
66
67 switch(message_delivery_status)
68 {
69 case "unknown":
70 formatted_delivery_status = "";
71 break;
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]72 case "sending":
Frédéric Guimont13778a62016-11-02 21:21:21 -0400[diff] [blame]73 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>"
74 break;
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]75 case "read":
Frédéric Guimont13778a62016-11-02 21:21:21 -0400[diff] [blame]76 break;
77 case "failure":
78 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>"
79 break;
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]80 case "sent":
Frédéric Guimont13778a62016-11-02 21:21:21 -0400[diff] [blame]81 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 -0400[diff] [blame]82 break;
83 default:
84 console.log("getMessageDeliveryStatusText: unknown delivery status: " + message_delivery_status);
85 break;
86 }
87
88 return formatted_delivery_status;
89 }
90
91 /**
92 * Returns the message date, formatted for display
93 */
94 function getMessageTimestampText(message_timestamp)
95 {
96 return new Date(1000 * message_timestamp).toLocaleString();
97 }
98
99 /**
100 * Adds a message to the buffer, or update it if new_message is
101 * TRUE
102 */
103 function addOrUpdateMessage(message_object, new_message)
104 {
105 // Properties of the message object
aviauef36cb22016-11-08 16:02:51 -0500[diff] [blame]106 var message_id = message_object["id"];
107 var message_text = message_object["text"];
108 var message_sender = message_object["sender"];
109 var message_sender_contact_method = message_object["sender_contact_method"];
110 var message_timestamp = message_object["timestamp"];
111 var message_direction = message_object["direction"];
112 var message_delivery_status = message_object["delivery_status"];
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]113
114 if (new_message)
115 {
aviauef36cb22016-11-08 16:02:51 -0500[diff] [blame]116 var message_div_classes = [
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]117 "message",
118 "message_" + message_direction
119 ];
120
aviauef36cb22016-11-08 16:02:51 -0500[diff] [blame]121 var $message_div = $(
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]122 "<div>",
123 {
124 id: "message_" + message_id,
125 class: message_div_classes.join(" "),
126 }
127 );
128
aviauef36cb22016-11-08 16:02:51 -0500[diff] [blame]129 var $message_wrapper = $("<div>", { class: "message_wrapper"});
Frederic Guimontd8343e62016-11-01 23:31:25 -0400[diff] [blame]130
aviauef36cb22016-11-08 16:02:51 -0500[diff] [blame]131 var $message_text = $("<span>", { class: "message_text" });
132 var $message_sender = $("<span>", { class: "message_sender" });
133 var $message_delivery_status = $("<span>", { class: "message_delivery_status" });
134 var $message_timestamp = $("<span>", { class: "message_timestamp" });
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]135
Frederic Guimontd8343e62016-11-01 23:31:25 -0400[diff] [blame]136 $message_wrapper.append($message_text);
137 $message_wrapper.append($message_sender);
138
139
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]140 // Sender image
aviauef36cb22016-11-08 16:02:51 -0500[diff] [blame]141 var $message_sender_span = $("<span>", { class: "message_sender_image" });
142 var $message_sender_image = $("<span>", { class: "sender_image sender_image_" + message_sender_contact_method });
Frederic Guimontd8343e62016-11-01 23:31:25 -0400[diff] [blame]143
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]144
145 $message_div.append($message_sender_image);
Frederic Guimontd8343e62016-11-01 23:31:25 -0400[diff] [blame]146 $message_div.append($message_wrapper);
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]147 $message_div.append($message_delivery_status);
Frederic Guimontd8343e62016-11-01 23:31:25 -0400[diff] [blame]148
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]149 $("#messages").append($message_div);
150 }
151 else
152 {
aviauef36cb22016-11-08 16:02:51 -0500[diff] [blame]153 var message_selector = "#message_" + message_id;
154 var $message_text = $(message_selector + " .message_text");
155 var $message_sender_image = $(message_selector + " .message_sender_image");
156 var $message_sender = $(message_selector + " .message_sender");
157 var $message_delivery_status = $(message_selector + " .message_delivery_status");
158 var $message_timestamp = $(message_selector + " .message_timestamp");
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]159 }
160
161 // Set the variables
162 $message_text.html(getMessageHtml(message_text));
163 $message_sender.text(message_sender + ": ");
Frédéric Guimont13778a62016-11-02 21:21:21 -0400[diff] [blame]164 $message_delivery_status.html(getMessageDeliveryStatusText(message_delivery_status));
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]165 $message_timestamp.text(getMessageTimestampText(message_timestamp));
Frederic Guimontd8343e62016-11-01 23:31:25 -0400[diff] [blame]166 $message_div.find($message_wrapper).append($message_timestamp);
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]167
168 }
169
170
171 /**
172 * Add a message to the buffer
173 */
174 function addMessage(message_object)
175 {
176 addOrUpdateMessage(message_object, true);
177
178 // Scroll to bottom
179 window.scrollTo(0, document.body.scrollHeight);
180 }
181
182 /**
183 * Updated a message that was previously added with addMessage
184 */
185 function updateMessage(message_object)
186 {
187 addOrUpdateMessage(message_object, false);
188 }
189
190 /**
191 * Sets the image for a given sender
192 * set_sender_image object should contain the following keys:
193 * - sender: the name of the sender
194 * - sender_image: base64 png encoding of the sender image
195 */
196 function setSenderImage(set_sender_image_object)
197 {
aviauef36cb22016-11-08 16:02:51 -0500[diff] [blame]198 var sender_contact_method = set_sender_image_object['sender_contact_method'];
199 var sender_image = set_sender_image_object['sender_image'];
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]200
aviauef36cb22016-11-08 16:02:51 -0500[diff] [blame]201 var sender_image_id = "sender_image_" + sender_contact_method;
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]202
203 // Remove the currently set sender image
204 $("#" + sender_image_id).remove();
205
206 // Create a new style element
207 var style = document.createElement('style');
208 style.type = 'text/css';
209 style.id = sender_image_id
Frederic Guimontd8343e62016-11-01 23:31:25 -0400[diff] [blame]210 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 -0400[diff] [blame]211 document.getElementsByTagName('head')[0].appendChild(style);
212 }
213
214 function clearSenderImages()
215 {
216 document.getElementsByTagName('head')[0].innerHTML = "";
217 }
218
219 return {
220 addMessage: addMessage,
221 updateMessage: updateMessage,
222 setSenderImage: setSenderImage,
223 dev: dev,
224 clearMessages: clearMessages,
225 clearSenderImages: clearSenderImages,
226 }
227
228})();
229
230/* DEV functions */
231ring.chatview.dev = (function(){
232
233
234
235 /**
236 * Fills the backlog with bogus messages
237 */
238 function fillMessages()
239 {
240 ring.chatview.clearMessages();
241
aviauef36cb22016-11-08 16:02:51 -0500[diff] [blame]242 var profile_picture = "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";
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]243
244 // Set the profile pictures
245 ring.chatview.setSenderImage(
246 {
aviaue52afa22016-11-08 13:27:31 -0500[diff] [blame]247 "sender_contact_method": "self",
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]248 "sender_image": profile_picture,
249 }
250 );
251
252 ring.chatview.setSenderImage(
253 {
aviaue52afa22016-11-08 13:27:31 -0500[diff] [blame]254 "sender_contact_method": "0x3345",
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]255 "sender_image": profile_picture,
256 }
257 )
258
259
260 // Create messages
261 ring.chatview.addMessage(
262 {
263 "id": 0,
264 "text": "Hello! This message's status will be updated to sent.",
265 "sender": "Me",
aviaue52afa22016-11-08 13:27:31 -0500[diff] [blame]266 "sender_contact_method": "self",
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]267 "timestamp": 1475275399,
268 "direction": "out",
269 "delivery_status": "sending",
270 }
271 );
272
273 ring.chatview.updateMessage(
274 {
275 "id": 0,
276 "text": "Hello! This message's status will be updated to sent.",
277 "sender": "Me",
aviaue52afa22016-11-08 13:27:31 -0500[diff] [blame]278 "sender_contact_method": "self",
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]279 "timestamp": 1475275399,
280 "direction": "out",
Frédéric Guimont13778a62016-11-02 21:21:21 -0400[diff] [blame]281 "delivery_status": "sending",
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]282 }
283 );
284
285 ring.chatview.addMessage(
286 {
287 "id": 1,
288 "text": "Hey! This message's status is 'Unknown', we shouldn't display that to the user.",
289 "sender": "Other Guy",
aviaue52afa22016-11-08 13:27:31 -0500[diff] [blame]290 "sender_contact_method": "0x3345",
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]291 "timestamp": 1475275399,
292 "direction": "in",
293 "delivery_status": "unknown",
294 }
295 );
296
297 ring.chatview.addMessage(
298 {
Frédéric Guimont13778a62016-11-02 21:21:21 -0400[diff] [blame]299 "id": 1,
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]300 "text": "This is the second message in a row from me. Don't bother displaying my profile picture twice.",
301 "sender": "Other Guy",
aviaue52afa22016-11-08 13:27:31 -0500[diff] [blame]302 "sender_contact_method": "0x3345",
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]303 "timestamp": 1475275399,
304 "direction": "in",
305 "delivery_status": "unknown",
306 }
307 );
308
309 ring.chatview.addMessage(
310 {
311 "id": 0,
312 "text": "Now its my turn to speak!",
313 "sender": "Me",
aviaue52afa22016-11-08 13:27:31 -0500[diff] [blame]314 "sender_contact_method": "self",
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]315 "timestamp": 1475275399,
316 "direction": "out",
Frédéric Guimont13778a62016-11-02 21:21:21 -0400[diff] [blame]317 "delivery_status": "sent",
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]318 }
319 );
320
Frédéric Guimont13778a62016-11-02 21:21:21 -0400[diff] [blame]321 ring.chatview.addMessage(
322 {
323 "id": 5,
324 "text": "Hello! This message's status will be updated to sent.",
325 "sender": "Me",
aviaue52afa22016-11-08 13:27:31 -0500[diff] [blame]326 "sender_contact_method": "self",
Frédéric Guimont13778a62016-11-02 21:21:21 -0400[diff] [blame]327 "timestamp": 1475275399,
328 "direction": "out",
329 "delivery_status": "sending",
330 }
331 );
332
333
334 ring.chatview.updateMessage(
335 {
336 "id": 5,
337 "text": "Hello! This message's status will be updated to sent.",
338 "sender": "Me",
aviaue52afa22016-11-08 13:27:31 -0500[diff] [blame]339 "sender_contact_method": "self",
Frédéric Guimont13778a62016-11-02 21:21:21 -0400[diff] [blame]340 "timestamp": 1475275399,
341 "direction": "out",
342 "delivery_status": "failure",
343 }
344 );
aviau039001d2016-09-29 16:39:05 -0400[diff] [blame]345
346 }
347
348 return {
349 fillMessages: fillMessages,
350 }
351
352})();
353
354</script>
355
356</html>