diff --git a/chat.js b/chat.js index 416a558f7..b6ae5a7e7 100644 --- a/chat.js +++ b/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( + '
' + + '<%=time%> <%=username%>: ' + + '<%=message%>' + + '
'), + 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], ""+ list[i] + "" ); + message = message.replace(list[i], ""+ list[i] + "" ); } } if (minutes.length==1) {minutes = '0'+minutes;} time = now.toLocaleTimeString().substring(0,5); $chat_content = $(this.el).find('.chat-content'); - $chat_content.append( - '
' + - ''+time+' me:  ' + - ''+message+'' + - '
'); + $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 = $('
'), $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($('
').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(/
/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( - ''+time+' '+user_id+':  ' + - ''+text+'' - ); - $chat_content.append(message_html); - // FIXME: + $chat_content.append( + this.message_template({ + 'sender': 'them', + 'time': (new Date()).toLocaleTimeString().substring(0,5), + 'message': body.replace(/
/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(); diff --git a/chatui.js b/chatui.js index cbe362e70..4c0724ca5 100644 --- a/chatui.js +++ b/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 = $('
'); - - if (direction == 'to') { - message_html = div.append( - ''+time+' me:  ' + - ''+text+'' - ); - } else { - message_html = div.append( - ''+time+' '+recipient_name+':  ' + - ''+text+'' - ); - } - $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;