Moved insertClientStoredMessages to the chatbox backbone view.

This commit is contained in:
JC Brand 2012-07-12 23:57:04 +02:00
parent 54667672ce
commit a20ea9d4e0
2 changed files with 75 additions and 122 deletions

99
chat.js
View File

@ -141,7 +141,6 @@ xmppchat.ChatBox = Backbone.Model.extend({
}); });
xmppchat.ChatBoxView = Backbone.View.extend({ xmppchat.ChatBoxView = Backbone.View.extend({
tagName: 'div', tagName: 'div',
className: 'chatbox', className: 'chatbox',
@ -150,6 +149,12 @@ xmppchat.ChatBoxView = Backbone.View.extend({
'keypress textarea.chat-textarea': 'keyPressed' '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) { appendMessage: function (message) {
var time, var time,
now = new Date(), now = new Date(),
@ -167,11 +172,13 @@ xmppchat.ChatBoxView = Backbone.View.extend({
if (minutes.length==1) {minutes = '0'+minutes;} if (minutes.length==1) {minutes = '0'+minutes;}
time = now.toLocaleTimeString().substring(0,5); time = now.toLocaleTimeString().substring(0,5);
$chat_content = $(this.el).find('.chat-content'); $chat_content = $(this.el).find('.chat-content');
$chat_content.append( $chat_content.append(this.message_template({
'<div class="chat-message">' + 'sender': 'me',
'<span class="chat-message-me">'+time+' me:&nbsp;&nbsp;</span>' + 'time': time,
'<span class="chat-message-content">'+message+'</span>' + 'message': message,
'</div>'); 'username': 'me',
'extra_classes': ''
}));
$chat_content.scrollTop($chat_content[0].scrollHeight); $chat_content.scrollTop($chat_content[0].scrollHeight);
}, },
@ -184,47 +191,77 @@ xmppchat.ChatBoxView = Backbone.View.extend({
var body = $(message).children('body').text(), var body = $(message).children('body').text(),
jid = $(message).attr('from'), jid = $(message).attr('from'),
composing = $(message).find('composing'), composing = $(message).find('composing'),
div = $('<div></div>'),
$chat_content = $(this.el).find('.chat-content'), $chat_content = $(this.el).find('.chat-content'),
user_id = Strophe.getNodeFromJid(jid); user_id = Strophe.getNodeFromJid(jid);
if (!body) { if (!body) {
if (composing.length > 0) { if (composing.length > 0) {
message_html = div.addClass('chat-event').text(user_id+ ' is typing...'); $chat_content.find('div.chat-event').remove().end()
$chat_content.find('div.chat-event').remove().end().append(message_html); .append($('<div class="chat-event"></div>').text(user_id+ ' is typing...'));
} }
} else { } else {
// TODO: ClientStorage // TODO: ClientStorage
xmppchat.Messages.ClientStorage.addMessage(jid, body, 'from'); xmppchat.Messages.ClientStorage.addMessage(jid, body, 'from');
if (xmppchat.xmppstatus.getOwnStatus() === 'offline') { if (xmppchat.xmppstatus.getOwnStatus() === 'offline') {
// only update the UI if the user is not offline
return; 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(); $chat_content.find('div.chat-event').remove();
message_html = div.append( $chat_content.append(
'<span class="chat-message-them">'+time+' '+user_id+':&nbsp;&nbsp;</span>' + this.message_template({
'<span class="chat-message-content">'+text+'</span>' 'sender': 'them',
); 'time': (new Date()).toLocaleTimeString().substring(0,5),
$chat_content.append(message_html); 'message': body.replace(/<br \/>/g, ""),
// FIXME: 'username': user_id,
'extra_classes': ($(message).find('delay').length > 0) && 'delayed' || ''
}));
// TODO:
// xmppchat.UI.msg_counter += 1; // xmppchat.UI.msg_counter += 1;
// xmppchat.UI.updateMsgCounter(); // xmppchat.UI.updateMsgCounter();
} }
$chat_content.scrollTop($chat_content[0].scrollHeight); $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) { 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. // 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 // if we have one resource, we sent to only that resources, if we have multiple
// we send to the bare jid. // we send to the bare jid.
// FIXME: see if @@content-transform is required
var bare_jid = this.model.get('jid'); var bare_jid = this.model.get('jid');
var message = $msg({to: bare_jid, type: 'chat'}) var message = $msg({to: bare_jid, type: 'chat'})
.c('body').t(text).up() .c('body').t(text).up()
@ -330,6 +367,7 @@ xmppchat.ChatBoxView = Backbone.View.extend({
render: function () { render: function () {
$(this.el).attr('id', this.model.get('chat_id')); $(this.el).attr('id', this.model.get('chat_id'));
$(this.el).html(this.template(this.model.toJSON())); $(this.el).html(this.template(this.model.toJSON()));
this.insertClientStoredMessages();
return this; return this;
}, },
@ -348,8 +386,12 @@ xmppchat.ChatBoxView = Backbone.View.extend({
that.focus(); that.focus();
}); });
return this; return this;
} },
scrolldown: function () {
var $content = this.$el.find('.chat-content');
$content.scrollTop($content[0].scrollHeight);
}
}); });
xmppchat.ControlBox = xmppchat.ChatBox.extend({ xmppchat.ControlBox = xmppchat.ChatBox.extend({
@ -369,6 +411,10 @@ xmppchat.ControlBoxView = xmppchat.ChatBoxView.extend({
'click a.close-controlbox-button': 'closeChat' 'click a.close-controlbox-button': 'closeChat'
}, },
initialize: function () {
// Override to avoid chatbox's initialization.
},
render: function () { render: function () {
return this; return this;
}, },
@ -439,13 +485,11 @@ xmppchat.ChatBoxesView = Backbone.View.extend({
}, },
positionNewChat: function (jid) { positionNewChat: function (jid) {
//FIXME: Sort the deferred stuff out
var view = this.views[jid], var view = this.views[jid],
that = this, that = this,
open_chats = 0, open_chats = 0,
offset; offset;
if (view.isVisible()) { if (view.isVisible()) {
view.focus(); view.focus();
} else { } else {
@ -466,6 +510,7 @@ xmppchat.ChatBoxesView = Backbone.View.extend({
$(view.el).css({'right': (offset+'px')}); $(view.el).css({'right': (offset+'px')});
$(view.el).show('fast', function () { $(view.el).show('fast', function () {
view.el.focus(); view.el.focus();
view.scrolldown();
}); });
} }
view.addChatToCookie(); view.addChatToCookie();

View File

@ -2,11 +2,6 @@ xmppchat.UI = (function (xmppUI, $, console) {
var ob = xmppUI; var ob = xmppUI;
ob.chats = []; ob.chats = [];
ob.chat_focus = []; 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) {}; 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) { 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.createChatbox = function (bare_jid, callback) {}; 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) { ob.prepNewChat = function (chat, jid) {
// Some operations that need to be applied on a chatbox // Some operations that need to be applied on a chatbox
@ -173,56 +129,8 @@ xmppchat.UI = (function (xmppUI, $, console) {
this.addChatToCookie(jid); this.addChatToCookie(jid);
}; };
ob.getChatbox = function (jid, callback) { 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.reorderChats = function () {}; ob.reorderChats = function () {};
ob.addChatToCookie = function (jid) {}; ob.addChatToCookie = function (jid) {};
return ob; return ob;