New version

1 files changed, 47 insertions, 24 deletions

diff --git a/static/pichat.js b/static/pichat.js
index 99bf1b5..aeef1bd 100755
--- a/static/pichat.js
+++ b/static/pichat.js
@@ -51,28 +51,52 @@ function join() {
     });
 }
 
+function escapeHtml(txt) {
+    return $("<span>").text(txt).html();
+}
+
 function buildUserDiv(user) {
-    return '<div>' + user + '</div>';
+    return '<div>' + escapeHtml(user) + '</div>';
+}
+
+// http://rickyrosario.com/blog/converting-a-url-into-a-link-in-javascript-linkify-function
+function linkify(text){
+    if (text) {
+        text = text.replace(
+            /((https?\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi,
+            function(url){
+                var full_url = url;
+                if (!full_url.match('^https?:\/\/')) {
+                    full_url = 'http://' + full_url;
+                }
+                return '<a href="' + full_url + '" target="_blank">' + url + '</a>';
+            }
+        );
+    }
+    return text;
 }
 
 // http://snippets.dzone.com/posts/show/6995
 var URLRegex = /((http\:\/\/|https\:\/\/|ftp\:\/\/)|(www\.))+(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/i;
+var PicRegex = /\.(jpg|jpeg|png|gif|bmp)$/i;
 
 function buildMessageDiv(msg) {
-    var match = URLRegex.exec(msg.content)
-    if (match) {
-        return '<div class="msgDev"><b>' + msg.nick + ': </b>'
-            + '<a href="' + match[0] + '" target="_blank">'
-            + '<img height="150" width="150" src="'
-            + match[0] + '" /></a></div>';
-    } else {
-        return '<div class="msgDiv"><b>' + msg.nick + ": </b>"
-            + msg.content + "</div>";
-    }
+    function buildContent(content) {
+        var match = URLRegex.exec(content)
+        if (match && PicRegex.test(match[0])) {
+            return '<a href="' + match[0] + '" target="_blank">'
+                + '<img height="150" width="150" src="'
+                + match[0] + '" /></a>';            
+        } else {
+            return linkify(escapeHtml(msg.content));
+        }
+    }    
+    return '<div class="msgDev"><b>' + escapeHtml(msg.nick) + ': </b>'
+        + buildContent(msg.content) + '</div>';
 }
 
 function buildChatInterface(users, messages) {
-    var userList = '<div id="userlist">'
+    var userList = '<div id="userList">'
         + $.map(users, buildUserDiv).join('') + '</div>';
     var messageList = '<div id="messagePane">'
         + '<div id="messageList">'
@@ -133,21 +157,20 @@ function scrollToBottom(div) {
 
 function refresh() {
     var onSuccess = function(json) {
-        if (json.messages.length == 0) {
-            return;
-        }
-        
-        var shouldScroll = isScrolledToBottom($('#messageList')[0]);
+        if (json.messages.length > 0) {
+            var shouldScroll = isScrolledToBottom($('#messageList')[0]);
 
-        // Ignore our own messages
-        var filterFunc = function(m) { return m.nick != Nick };
-        var msgStr = $.map($.grep(json.messages, filterFunc),
-                           buildMessageDiv).join('');
-        $('#messageList').append(msgStr);
+            // Ignore our own messages
+            var filterFunc = function(m) { return m.nick != Nick };
+            var msgStr = $.map($.grep(json.messages, filterFunc),
+                               buildMessageDiv).join('');
+            $('#messageList').append(msgStr);
 
-        if (shouldScroll) {
-            scrollToBottom($('#messageList')[0]);
+            if (shouldScroll) {
+                scrollToBottom($('#messageList')[0]);
+            }
         }
+        $("#userList").html($.map(json.users, buildUserDiv).join(''));
     };
 
     var onError = function(resp, textStatus, errorThrown) {};