aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 1 | <html> |
| 2 | |
| 3 | |
| 4 | <!-- Empty head might be needed for setSenderImage --> |
| 5 | <head> |
Frederic Guimont | d8343e6 | 2016-11-01 23:31:25 -0400 | [diff] [blame] | 6 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
Frédéric Guimont | 13778a6 | 2016-11-02 21:21:21 -0400 | [diff] [blame] | 7 | <meta charset=“utf-8”> |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 8 | </head> |
| 9 | |
| 10 | <body> |
| 11 | <div id="messages"> |
| 12 | </div> |
| 13 | </body> |
| 14 | |
Frederic Guimont | d8343e6 | 2016-11-01 23:31:25 -0400 | [diff] [blame] | 15 | <!-- |
aviau | 039001d | 2016-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 Guimont | d8343e6 | 2016-11-01 23:31:25 -0400 | [diff] [blame] | 20 | <script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-html.min.js"></script> |
| 21 | --> |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 22 | |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 23 | <script> |
| 24 | var ring = {}; // ring namespace |
| 25 | |
| 26 | ring.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; |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 71 | case "sending": |
Frédéric Guimont | 13778a6 | 2016-11-02 21:21:21 -0400 | [diff] [blame] | 72 | 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; |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 74 | case "read": |
Frédéric Guimont | 13778a6 | 2016-11-02 21:21:21 -0400 | [diff] [blame] | 75 | 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; |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 79 | case "sent": |
Frédéric Guimont | 13778a6 | 2016-11-02 21:21:21 -0400 | [diff] [blame] | 80 | 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>"; |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 81 | 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"]; |
aviau | fc21355 | 2016-11-01 12:39:39 -0400 | [diff] [blame] | 108 | message_sender_contact_method = message_object["sender_contact_method"]; |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 109 | 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 Guimont | d8343e6 | 2016-11-01 23:31:25 -0400 | [diff] [blame] | 128 | $message_wrapper = $("<div>", { class: "message_wrapper"}); |
| 129 | |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 130 | $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 Guimont | d8343e6 | 2016-11-01 23:31:25 -0400 | [diff] [blame] | 135 | $message_wrapper.append($message_text); |
| 136 | $message_wrapper.append($message_sender); |
| 137 | |
| 138 | |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 139 | // Sender image |
| 140 | $message_sender_span = $("<span>", { class: "message_sender_image" }); |
Frederic Guimont | d8343e6 | 2016-11-01 23:31:25 -0400 | [diff] [blame] | 141 | $message_sender_image = $("<span>", { class: "sender_image sender_image_" + message_sender_contact_method }); |
| 142 | |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 143 | |
| 144 | $message_div.append($message_sender_image); |
Frederic Guimont | d8343e6 | 2016-11-01 23:31:25 -0400 | [diff] [blame] | 145 | $message_div.append($message_wrapper); |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 146 | $message_div.append($message_delivery_status); |
Frederic Guimont | d8343e6 | 2016-11-01 23:31:25 -0400 | [diff] [blame] | 147 | |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 148 | $("#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 Guimont | 13778a6 | 2016-11-02 21:21:21 -0400 | [diff] [blame] | 163 | $message_delivery_status.html(getMessageDeliveryStatusText(message_delivery_status)); |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 164 | $message_timestamp.text(getMessageTimestampText(message_timestamp)); |
Frederic Guimont | d8343e6 | 2016-11-01 23:31:25 -0400 | [diff] [blame] | 165 | $message_div.find($message_wrapper).append($message_timestamp); |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 166 | |
| 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 | { |
aviau | fc21355 | 2016-11-01 12:39:39 -0400 | [diff] [blame] | 197 | sender_contact_method = set_sender_image_object['sender_contact_method']; |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 198 | sender_image = set_sender_image_object['sender_image']; |
| 199 | |
aviau | fc21355 | 2016-11-01 12:39:39 -0400 | [diff] [blame] | 200 | sender_image_id = "sender_image_" + sender_contact_method; |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 201 | |
| 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 Guimont | d8343e6 | 2016-11-01 23:31:25 -0400 | [diff] [blame] | 209 | style.innerHTML = '.' + sender_image_id + " { \n content: url(data:image/png;base64," + sender_image + "); \n height: 35px; \n width: 35px; \n }"; |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 210 | 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 */ |
| 230 | ring.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 Guimont | 13778a6 | 2016-11-02 21:21:21 -0400 | [diff] [blame] | 278 | "delivery_status": "sending", |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 279 | } |
| 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 Guimont | 13778a6 | 2016-11-02 21:21:21 -0400 | [diff] [blame] | 295 | "id": 1, |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 296 | "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 Guimont | 13778a6 | 2016-11-02 21:21:21 -0400 | [diff] [blame] | 311 | "delivery_status": "sent", |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 312 | } |
| 313 | ); |
| 314 | |
Frédéric Guimont | 13778a6 | 2016-11-02 21:21:21 -0400 | [diff] [blame] | 315 | 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 | ); |
aviau | 039001d | 2016-09-29 16:39:05 -0400 | [diff] [blame] | 337 | |
| 338 | } |
| 339 | |
| 340 | return { |
| 341 | fillMessages: fillMessages, |
| 342 | } |
| 343 | |
| 344 | })(); |
| 345 | |
| 346 | </script> |
| 347 | |
| 348 | </html> |