1 files changed, 66 insertions, 33 deletions

diff --git a/static/js/pichat.js b/static/js/pichat.js
index b9e0d46..df79c17 100755
--- a/static/js/pichat.js
+++ b/static/js/pichat.js
@@ -24,20 +24,30 @@ function buildMsgContent(content) {
   return linkify(content)
 }
 
-function buildMessageDiv(msg) {
+var SpinnerImage = '<img class="spinner" src="/static/spinner.gif" />';
+
+function buildMessageDiv(msg, isLoading) {
     var nick = escapeHtml(msg.nick);
-    return '<div class="msgDiv"><b><a href="/u/' + nick + ' ">' + nick + '</a>: </b>'
-        + buildMsgContent(msg.content) + '</div>';
+    var msgId = !isLoading ? 'id="message-' + msg.message_id + '"' : '';
+    var spinnerHtml = isLoading ? SpinnerImage : '';
+    var loadingClass = isLoading ? ' loading' : '';
+    return '<div class="msgDiv ' + loadingClass + '" ' + msgId  + '>'
+        + '<b><a href="/u/' + nick + ' ">' + nick + '</a>: </b>'
+        + buildMsgContent(msg.content)
+        + spinnerHtml
+	+ '</div>';
 }
 
 function buildUserDiv(user) {
     if (user.avatar) {
-        return '<div class="username"><a href="/u/' + escapeHtml(user.nick) + '">' +
-	'<img src="' + user.avatar + '" width="50" height="50">' + 
-	escapeHtml(user.nick) + '</a></div>';
+        return '<div class="username">'
+	    + '<a href="/u/' + escapeHtml(user.nick) + '" target="_blank">'
+	    + '<img src="' + user.avatar + '" width="50" height="50">'
+	    + escapeHtml(user.nick) + '</a></div>';
     } else {
-        return '<div class="username"><a href="/u/' + escapeHtml(user.nick) + '">' +
-	escapeHtml(user.nick) + '</a></div>';
+        return '<div class="username">'
+	    + '<a href="/u/' + escapeHtml(user.nick) + '" target="_blank">'
+	    + escapeHtml(user.nick) + '</a></div>';
     }
 }
 
@@ -49,10 +59,12 @@ function buildGrowlDataAndPopDatShit(msg) {
 }
 
 function growl(user, msg) {
-	$.gritter.add({
-		title: user,
-		text: msg 
-	});
+    $.gritter.add({
+	// (string | mandatory) the heading of the notification
+	title: user,
+	// (string | mandatory) the text inside the notification
+	text: msg
+    });
 }
 
 function handleMsgError(resp) {
@@ -72,11 +84,16 @@ function submitMessage() {
     PostedMessages.push(content);
     $('#msgInput').val('');
 
-    updateUI([{ 'nick': Nick, 'content': content}], null);
+    var msg = { 'nick': Nick, 'content': content };
+    var div = addNewMessage(msg, true);
 
-    var onSuccess = function(json) {};    
-    var onError = function(resp, textStatus, errorThrown) {        
-        $('#msgInput, #msgSubmit').removeAttr('disabled');
+    var onSuccess = function(json) {
+        div.attr('id', 'message-' + json)
+            .removeClass('loading').addClass('loaded');
+	div.find('.spinner').remove();
+    };
+    var onError = function(resp, textStatus, errorThrown) {
+	div.remove();
         handleMsgError(resp);
     };
     
@@ -89,7 +106,7 @@ function submitMessage() {
 	dataType: 'json',
 	success: onSuccess,
 	error: onError
-    });  
+    });
 }
 
 function ifEnter(fn) {
@@ -112,30 +129,44 @@ function delayedScrollToBottom(delay) {
     setTimeout(scrollToBottom, delay, $('#messageList')[0]);
 }
 
+function addNewMessages(msgs) {
+    var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]);
+    var msgStr = $.map(msgs, buildMessageDiv).join('');
+    $('#messageList').append(msgStr);
+
+    if (wasScrolledToBottom) { delayedScrollToBottom(500); }
+}
+
+function addNewMessage(msg, isLoading) {
+    var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]);
+    var msgStr = buildMessageDiv(msg, isLoading);
+    var div = $(msgStr).appendTo('#messageList');
+    if (wasScrolledToBottom) { delayedScrollToBottom(500); }
+    return div;
+}
+
+function setUserList(users) {
+    $("#userList").html($.map(users, buildUserDiv).join(''));
+}
+
 function updateUI(msgs, users) {
-	if (window['growlize'] && msgs !== null) {
-		$.map(msgs, buildGrowlDataAndPopDatShit)
-	}
-    else if (msgs !== null) {
-        var msgStr = $.map(msgs, buildMessageDiv).join('');
-        var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]);
-        $('#messageList').append(msgStr);
-        
-        if (wasScrolledToBottom) {
-            delayedScrollToBottom(500);
-        }
+    if (window['growlize'] && msgs && msgs.length > 0) {
+	$.map(msgs, buildGrowlDataAndPopDatShit)
+    } else if (msgs && msgs.length > 0) {
+	addNewMessages(msgs);
     }
     if (users !== null) {
-      var flattened = users.sort().join(",")
-      if (!('userlist' in cache) || flattened != cache.userlist){
-        $("#userList").html($.map(users, buildUserDiv).join(''));
-      }
-      cache.userlist = flattened
+        var flattened = users.sort().join(",")
+	if (!('userlist' in cache) || flattened != cache.userlist) {
+            $("#userList").html($.map(users, buildUserDiv).join(''));
+        }
+        cache.userlist = flattened
     }
 }
 
 // A duplicate message is a message that was likely to have
 // originated from this browser.
+// TODO: replace w/ msg_id checks.
 function isDuplicateMessage(m) {
     if (m.nick != Nick || $.inArray(m.content, PostedMessages) == -1) {
         return false;
@@ -240,3 +271,5 @@ function initLog() {
     });
 
 }
+
+function favoriteImage() {};