Profiles / templates

1 files changed, 83 insertions, 109 deletions

diff --git a/static/pichat.js b/static/pichat.js
index 56dbd36..fe5beaa 100755
--- a/static/pichat.js
+++ b/static/pichat.js
@@ -1,7 +1,3 @@
-// pichat.js
-
-var Nick = null;
-
 function handleMsgError(resp) {
     var respText = resp.responseText ? resp.responseText.trim() : false;
     if (respText  == 'UNKNOWN_USER') {
@@ -14,11 +10,8 @@ function handleMsgError(resp) {
 }
 
 function escapeHtml(txt) {
-    if (!txt) {
-        return ""
-    } else {
-        return $("<span>").text(txt).html();
-    }
+    if (!txt) { return "" }
+    else { return $("<span>").text(txt).html(); }
 }
 
 function buildUserDiv(user) {
@@ -28,52 +21,40 @@ function buildUserDiv(user) {
 // http://stackoverflow.com/questions/37684/replace-url-with-html-links-javascript
 function linkify(text) {
     var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
-    return text.replace(exp,"<a href='$1'>$1</a>"); 
+    return text.replace(exp,"<a href='$1'>$1</a>");
 }
 
 // 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 buildMsgContent(content) {
+    var match = URLRegex.exec(content)
+    if (match && PicRegex.test(match[0])) {
+        return '<a href="' + match[0] + '" target="_blank">'
+            + '<img src="'+ match[0] + '" /></a>';
+    } else {
+        return linkify(escapeHtml(content));
+    }
+}    
+
 function buildMessageDiv(msg) {
-    function buildContent(content) {
-        var match = URLRegex.exec(content)
-        if (match && PicRegex.test(match[0])) {
-            return '<a href="' + match[0] + '" target="_blank">'
-                + '<img src="'+ match[0] + '" /></a>';
-        } else {
-            return linkify(escapeHtml(msg.content));
-        }
-    }    
     return '<div class="msgDiv"><b>' + escapeHtml(msg.nick) + ': </b>'
-        + buildContent(msg.content) + '</div>';
-}
-
-function setNick(nick) {
-    Nick = nick;
-    $('#nickspan').text(nick);
-    $('#welcomebar').show();
-    $('#msgInput, #msgSubmit').removeAttr('disabled');
-    $('#msgInput').keyup(ifEnter(submitMessage));
-    $('#msgSubmit').click(submitMessage);
+        + buildMsgContent(msg.content) + '</div>';
 }
 
 function submitMessage() {
     var content = $('#msgInput').val();
-    var msg = { 'nick': Nick, 'content': content,  'timestamp': new Date() };
     if (content ==  '') { return; }
+    
+    $('#msgInput, #msgSubmit').attr('disabled', 'disabled');    
+    var onSuccess = function(json) {
+        $('#msgInput, #msgSubmit').removeAttr('disabled');
+        $('#msgInput').val('');
+    };
 
-    var shouldScroll = isScrolledToBottom($('#messageList')[0]);
-
-    $('#messageList').append($(buildMessageDiv(msg)));
-    $('#msgInput').val('');
-
-    if (shouldScroll) {
-        scrollToBottom($('#messageList')[0]);
-    }
-
-    var onSuccess = function() {};
     var onError = function(resp, textStatus, errorThrown) {        
+        $('#msgInput, #msgSubmit').removeAttr('disabled');
         handleMsgError(resp);
     };
 
@@ -81,12 +62,14 @@ function submitMessage() {
        type: 'GET',
        timeout: 5000,
        url: 'msg',
-       data: {'content': content },
+       data: { 'content': content },
        cache: false,
        dataType: 'json',
        success: onSuccess,
-       error: onError       
+       error: onError
    });
+    
+    updateUI([{ 'nick': Nick || "me", 'content': content}], null);
 }
 
 function ifEnter(fn) {
@@ -95,32 +78,6 @@ function ifEnter(fn) {
     };
 }
 
-function login() {
-    var nick = $('#nickInput').val();
-    var password = $('#passwordInput').val();
-    var hash = hex_sha1(nick + '$' + password + '$dumpfm');    
-
-    var onSuccess = function(json) {
-        $('#loginbar').hide();
-        setNick(nick);
-    };
-
-    var onError = function(resp, textStatus, errorThrown) {
-        alert("Error logging in!");
-    };
-
-    $.ajax({
-        type: 'GET',
-        timeout: 5000,
-        url: 'login',
-        data: {'nick': nick, 'hash': hash },
-        cache: false,
-        dataType: 'json',
-        success: onSuccess,
-        error: onError
-    });
-};
-
 function isScrolledToBottom(div) {
     return Math.abs(div.scrollTop - (div.scrollHeight - div.offsetHeight)) <= 3;
 }
@@ -129,32 +86,33 @@ function scrollToBottom(div) {
     div.scrollTop = div.scrollHeight;
 }
 
-function updateUI(json, initialUpdate) {
-    if (json.messages.length > 0) {        
-        if (initialUpdate) {
-            var messages = json.messages;            
-        } else {
-            // Our own messages have already been displayed.
-            var filterFunc = function(m) { return m.nick != Nick };
-            var messages = $.grep(json.messages, filterFunc);            
-        }
-                
-        var msgStr = $.map(messages,
-                           buildMessageDiv).join('');
+// Give images time to start loading before scrolling.
+// Needed until server knows size of images.
+function delayedScrollToBottom(delay) {
+    setTimeout(scrollToBottom, delay, $('#messageList')[0]);
+}
+
+function updateUI(msgs, users) {
+    if (msgs && msgs.length > 0) {      
+        var msgStr = $.map(msgs, buildMessageDiv).join('');
         var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]);
         $('#messageList').append(msgStr);
         
-        if (initialUpdate || wasScrolledToBottom) {
-            // Delay scrolling by .5 seconds so images can start loading.
-            setTimeout(scrollToBottom, 500, $('#messageList')[0]);
+        if (wasScrolledToBottom) {
+            delayedScrollToBottom(500);
         }
     }
-    $("#userList").html($.map(json.users, buildUserDiv).join(''));
+    if (users && users.length > 0) {
+        $("#userList").html($.map(users, buildUserDiv).join(''));
+    }
 }
 
 function refresh() {
     var onSuccess = function(json) {
-        updateUI(json, false);
+        var messages = $.grep(
+            json.messages,
+            function(m) { return m.nick != Nick });
+        updateUI(messages, json.users);
         setTimeout(refresh, 1000);
     };
     var onError = function(resp, textStatus, errorThrown) {
@@ -168,35 +126,51 @@ function refresh() {
         cache: false,
         dataType: 'json',
         success: onSuccess,
-        error: onError       
+        error: onError
     });
 }
 
-function init() {    
-    var onSuccess = function(json) {
-        if (json.nick) {
-            setNick(json.nick);
-        } else {
-            $('#loginbar').show();
-            $('#passwordInput').keyup(ifEnter(login));
-            $('#loginSubmit').click(login);
+function initChat() {
+    $('.msgDiv .content').each(function() {
+        var t = $(this);
+        t.html(buildMsgContent(t.text()));
+    });
+
+    $('#msgInput').keyup(ifEnter(submitMessage));
+    $('msgSubmit').click(submitMessage);
+
+    delayedScrollToBottom(500);
+    setTimeout(refresh, 1000);
+}
+
+function initProfile() {
+    var onSubmit = function(original_element, edit, old) {
+        if (edit == old) { return old };
+        // Prevent entering script tags. TODO: investigate better scheme.
+        if (original_element == 'avatar' && edit.indexOf("<") != -1) {
+            return old;
         }
-        updateUI(json, true);
-        setTimeout(refresh, 1000);
-    };
-    var onError = function(resp, textStatus, errorThrown) {
-        alert("Error initializing!");
+        $.ajax({
+            type: "GET",
+            timeout: 5000,
+            url: "/update-profile",
+            data: { 'attr': original_element, 'val': edit }
+        });
+        if (original_element == 'avatar') {
+            var s = '<img id="avatarPic" src="' + edit + '" width="150" />';
+            $('#avatarPic').replaceWith(s);
+        }
+        return escapeHtml(edit);
     };
 
-    $.ajax({
-        type: 'GET',
-        timeout: 5000,
-        url: 'init',
-        cache: false,
-        dataType: 'json',
-        success: onSuccess,
-        error: onError       
-    });
+    var opt = { 'default_text': 'Enter here!',
+                'callback': onSubmit,
+                'field_type': 'text',
+                'callbackShowErrors': false };    
+    $('#avatar.editable').editInPlace(opt);
 
 
-}
+    opt['field_type'] = 'textarea';
+    $('#contact.editable, #bio.editable').editInPlace(opt);
+
+};