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