Moved insertClientStoredMessages to the chatbox backbone view.

chat.js

@@ -141,7 +141,6 @@ xmppchat.ChatBox = Backbone.Model.extend({
 });
 
 xmppchat.ChatBoxView = Backbone.View.extend({
-
     tagName: 'div',
     className: 'chatbox',
 
@@ -150,6 +149,12 @@ xmppchat.ChatBoxView = Backbone.View.extend({
         'keypress textarea.chat-textarea': 'keyPressed'
     },
 
+    message_template: _.template(
+                        '<div class="chat-message <%=extra_classes%>">' + 
+                            '<span class="chat-message-<%=sender%>"><%=time%> <%=username%>:&nbsp;</span>' + 
+                            '<span class="chat-message-content"><%=message%></span>' + 
+                        '</div>'),
+
     appendMessage: function (message) {
         var time, 
             now = new Date(),
@@ -161,17 +166,19 @@ xmppchat.ChatBoxView = Backbone.View.extend({
         list = message.match(/\b(http:\/\/www\.\S+\.\w+|www\.\S+\.\w+|http:\/\/(?=[^w]){3}\S+[\.:]\S+)[^ ]+\b/g);
         if (list) {
             for (i = 0; i < list.length; i++) {
-                message = message.replace( list[i], "<a target='_blank' href='" + escape( list[i] ) + "'>"+ list[i] + "</a>" );
+                message = message.replace(list[i], "<a target='_blank' href='" + escape( list[i] ) + "'>"+ list[i] + "</a>" );
             }
         }
         if (minutes.length==1) {minutes = '0'+minutes;}
         time = now.toLocaleTimeString().substring(0,5);
         $chat_content = $(this.el).find('.chat-content');
-        $chat_content.append(
-            '<div class="chat-message">' + 
-                '<span class="chat-message-me">'+time+' me:&nbsp;&nbsp;</span>' + 
-                '<span class="chat-message-content">'+message+'</span>' + 
-            '</div>');
+        $chat_content.append(this.message_template({
+                            'sender': 'me', 
+                            'time': time, 
+                            'message': message, 
+                            'username': 'me',
+                            'extra_classes': ''
+                        }));
         $chat_content.scrollTop($chat_content[0].scrollHeight);
     },
 
@@ -184,47 +191,77 @@ xmppchat.ChatBoxView = Backbone.View.extend({
         var body = $(message).children('body').text(),
             jid = $(message).attr('from'),
             composing = $(message).find('composing'),
-            div = $('<div></div>'),
             $chat_content = $(this.el).find('.chat-content'),
             user_id = Strophe.getNodeFromJid(jid);
 
         if (!body) {
             if (composing.length > 0) {
-                message_html = div.addClass('chat-event').text(user_id+ ' is typing...');
-                $chat_content.find('div.chat-event').remove().end().append(message_html);
+                $chat_content.find('div.chat-event').remove().end()
+                        .append($('<div class="chat-event"></div>').text(user_id+ ' is typing...'));
             }
         } else {
             // TODO: ClientStorage 
             xmppchat.Messages.ClientStorage.addMessage(jid, body, 'from');
             if (xmppchat.xmppstatus.getOwnStatus() === 'offline') {
+                // only update the UI if the user is not offline
                 return;
             }
-            // only update the UI if the user is not offline
-            var time = (new Date()).toLocaleTimeString().substring(0,5),
-                text = body.replace(/<br \/>/g, "");
-
-            div.addClass('chat-message');
-            if (($(message).find('delay').length > 0)) {
-                div.addClass('delayed');
-            }
             $chat_content.find('div.chat-event').remove();
-            message_html = div.append( 
-                            '<span class="chat-message-them">'+time+' '+user_id+':&nbsp;&nbsp;</span>' + 
-                            '<span class="chat-message-content">'+text+'</span>'
-                            );
-            $chat_content.append(message_html);
-            // FIXME:
+            $chat_content.append(
+                    this.message_template({
+                        'sender': 'them', 
+                        'time': (new Date()).toLocaleTimeString().substring(0,5),
+                        'message': body.replace(/<br \/>/g, ""),
+                        'username': user_id,
+                        'extra_classes': ($(message).find('delay').length > 0) && 'delayed' || ''
+                    }));
+
+            // TODO:
             // xmppchat.UI.msg_counter += 1;
             // xmppchat.UI.updateMsgCounter();
         }
         $chat_content.scrollTop($chat_content[0].scrollHeight);
     },
 
+    insertClientStoredMessages: function () {
+        var that = this;
+        xmppchat.Messages.getMessages(this.model.get('jid'), function (msgs) {
+            var $content = that.$el.find('.chat-content');
+            for (var i=0; i<_.size(msgs); i++) {
+                var msg = msgs[i], 
+                    msg_array = msg.split(' ', 2),
+                    date = msg_array[0];
+
+                if (msg_array[1] == 'to') {
+                    $content.append(
+                            that.message_template({
+                                'sender': 'me', 
+                                'time': new Date(Date.parse(date)).toLocaleTimeString().substring(0,5),
+                                'message': String(msg).replace(/(.*?\s.*?\s)/, ''),
+                                'username': 'me',
+                                'extra_classes': 'delayed'
+                            }));
+                } else {
+                    $content.append(
+                            that.message_template({
+                                'sender': 'them', 
+                                'time': new Date(Date.parse(date)).toLocaleTimeString().substring(0,5),
+                                'message': String(msg).replace(/(.*?\s.*?\s)/, ''),
+                                'username': that.model.get('user_id'),
+                                'extra_classes': 'delayed'
+                            }));
+                }
+            }
+        });
+    },
+
     sendMessage: function (text) {
+        // TODO: Also send message to all my own connected resources, so that
+        // they can display it as well....
+    
         // TODO: Look in ChatPartners to see what resources we have for the recipient.
         // if we have one resource, we sent to only that resources, if we have multiple
         // we send to the bare jid.
-        // FIXME: see if @@content-transform is required
         var bare_jid = this.model.get('jid');
         var message = $msg({to: bare_jid, type: 'chat'})
             .c('body').t(text).up()
@@ -330,6 +367,7 @@ xmppchat.ChatBoxView = Backbone.View.extend({
     render: function () {
         $(this.el).attr('id', this.model.get('chat_id'));
         $(this.el).html(this.template(this.model.toJSON()));
+        this.insertClientStoredMessages();
         return this;
     },
 
@@ -348,8 +386,12 @@ xmppchat.ChatBoxView = Backbone.View.extend({
             that.focus();
         });
         return this;
-    }
+    },
 
+    scrolldown: function () {
+        var  $content = this.$el.find('.chat-content');
+        $content.scrollTop($content[0].scrollHeight);
+    }
 });
 
 xmppchat.ControlBox = xmppchat.ChatBox.extend({
@@ -369,6 +411,10 @@ xmppchat.ControlBoxView = xmppchat.ChatBoxView.extend({
         'click a.close-controlbox-button': 'closeChat'
     },
 
+    initialize: function () {
+        // Override to avoid chatbox's initialization.
+    },
+
     render: function () {
         return this;
     },
@@ -439,13 +485,11 @@ xmppchat.ChatBoxesView = Backbone.View.extend({
     },
 
     positionNewChat: function (jid) {
-        //FIXME: Sort the deferred stuff out
         var view = this.views[jid],
             that = this,
             open_chats = 0,
             offset;
 
-
         if (view.isVisible()) {
             view.focus();
         } else {
@@ -466,6 +510,7 @@ xmppchat.ChatBoxesView = Backbone.View.extend({
                 $(view.el).css({'right': (offset+'px')});
                 $(view.el).show('fast', function () {
                     view.el.focus();
+                    view.scrolldown();
                 });
             }
             view.addChatToCookie();

chatui.js

@@ -2,11 +2,6 @@ xmppchat.UI = (function (xmppUI, $, console) {
     var ob = xmppUI;
     ob.chats = [];
     ob.chat_focus  = [];
-    ob.chatbox_width = 205;
-
-    ob.sanitizePath = function (call) { 
-        return xmppchat.base_url + call; 
-    };
 
     ob.addUserToRosterUI = function (user_id, bare_jid, fullname, userstatus) {};
 
@@ -108,47 +103,8 @@ xmppchat.UI = (function (xmppUI, $, console) {
         });
     };
 
-    ob.insertClientStoredMessages = function ($chat, bare_jid, recipient_name) {
-        xmppchat.Messages.getMessages(bare_jid, function (msgs) {
-            $(msgs).each(function (idx, msg) {
-                var msg_array = msg.split(' ', 2),
-                    date = msg_array[0],
-                    time = new Date(Date.parse(date)).toLocaleTimeString().substring(0,5),
-                    direction = msg_array[1],
-                    text = String(msg).replace(/(.*?\s.*?\s)/, '');
-                    $content = $chat.find('.chat-content');
-                    div = $('<div class="chat-message delayed"></div>');
-
-                if (direction == 'to') {
-                    message_html = div.append( 
-                                        '<span class="chat-message-me">'+time+' me:&nbsp;&nbsp;</span>' + 
-                                        '<span class="chat-message-content">'+text+'</span>'
-                                        );
-                } else {
-                    message_html = div.append( 
-                                        '<span class="chat-message-them">'+time+' '+recipient_name+':&nbsp;&nbsp;</span>' + 
-                                        '<span class="chat-message-content">'+text+'</span>'
-                                        );
-                }
-                $content.append(message_html);
-                $content.scrollTop($content[0].scrollHeight);
-            });
-        });
-    };
-
+    ob.insertClientStoredMessages = function ($chat, bare_jid, recipient_name) {};
     ob.createChatbox = function (bare_jid, callback) {};
-    /*
-    $chat.find('.chat-message .time').each(function () {
-        var jthis = $(this);
-        var time = jthis.text().split(':');
-        var hour = time[0];
-        var minutes = time[1];
-        var date = new Date();
-        date.setHours(hour - date.getTimezoneOffset() / 60);
-        date.setMinutes(minutes);
-        jthis.replaceWith(date.toLocaleTimeString().substring(0,5));
-    });
-    */
 
     ob.prepNewChat = function (chat, jid) {
         // Some operations that need to be applied on a chatbox
@@ -173,56 +129,8 @@ xmppchat.UI = (function (xmppUI, $, console) {
         this.addChatToCookie(jid);
     };
 
-    ob.getChatbox =  function (jid, callback) {
-        // Get a chatbox. Either it exists, then just ensure 
-        // that it's visible and return it. Otherwise, create it.
-        //
-        // This method can be deferred.
-        // http://www.erichynds.com/jquery/using-deferreds-in-jquery/
-        var bare_jid = Strophe.getBareJidFromJid(jid),
-            chat_content, 
-            chat_id = helpers.hash(bare_jid),
-            $chat = $("#"+chat_id),
-            that = this,
-            dfd = $.Deferred();
-
-        if (callback === undefined) {
-            callback = function () {};
-        }
-        if ($chat.length > 0) {
-            if ($chat.is(':visible')) {
-                callback($chat);
-                dfd.resolve();
-            } else {
-                // The chatbox exists, merely hidden
-                $chat.show('fast', function () {
-                    that.prepNewChat(this, bare_jid);
-                    that.reorderChats();
-                    callback(this);
-                    dfd.resolve();
-                });
-            }
-        } else {
-             this.createChatbox(bare_jid, function ($chat) {
-                // that.retrieveCollections();
-                that.positionNewChat($chat);
-                $chat.show('fast', function () {
-                    that.prepNewChat(this, bare_jid);
-                    that.handleChatEvents(chat_id);
-                    callback(this);
-                    dfd.resolve();
-                    // FIXME: We need to check here whether local or remote storage
-                    // must be used. For now we just use local storage.
-                    // ob.insertCollectionMessages
-                    that.insertClientStoredMessages($chat, bare_jid, $chat.find('.chat-title').text());
-                });
-            });
-        }
-        return dfd.promise();
-    };
-
+    ob.getChatbox =  function (jid, callback) {};
     ob.reorderChats =  function () {};
-
     ob.addChatToCookie = function (jid) {};
 
     return ob;