Commit 0da1b444 authored by JC Brand's avatar JC Brand

Various javascript improvements

- Rename createChat to getChat and make it also return existing chats.
- Make getChat deferrable.
- Create a task buffer that can execute tasks sequentially while waiting for
  them to finish.
- Create chats from the open chats cookie via the taskbuffer.
parent 6ab9ddc0
...@@ -30,7 +30,7 @@ var xmppchat = (function ($, console) { ...@@ -30,7 +30,7 @@ var xmppchat = (function ($, console) {
var open_chats = 0, var open_chats = 0,
offset; offset;
for (var i=0; i<xmppchat.chats.length; i++) { for (var i=0; i<xmppchat.chats.length; i++) {
if ($("#"+xmppchat.hash(xmppchat.chats[i])).css('display') != 'none') { if ($("#"+xmppchat.hash(xmppchat.chats[i])).is(':visible')) {
open_chats++; open_chats++;
} }
} }
...@@ -58,7 +58,7 @@ var xmppchat = (function ($, console) { ...@@ -58,7 +58,7 @@ var xmppchat = (function ($, console) {
}); });
var chatbox = $("#"+chat_id); var chatbox = $("#"+chat_id);
chatbox.click(function () { chatbox.click(function () {
if (chatbox.find('.chat-content').css('display') != 'none') { if (chatbox.find('.chat-content').is(':visible')) {
chatbox.find('.chat-textarea').focus(); chatbox.find('.chat-textarea').focus();
} }
}); });
...@@ -90,7 +90,7 @@ var xmppchat = (function ($, console) { ...@@ -90,7 +90,7 @@ var xmppchat = (function ($, console) {
jarnxmpp.connection.sendIQ(iq, this.handleCollectionRetrieval, this.handleError); jarnxmpp.connection.sendIQ(iq, this.handleCollectionRetrieval, this.handleError);
}; };
obj.createChatBox = function (jid) { obj.createChatbox = function (jid, callback) {
var path = xmppchat.sanitizePath('/@@render_chat_box'), var path = xmppchat.sanitizePath('/@@render_chat_box'),
chat_id = this.hash(jid), chat_id = this.hash(jid),
that = this; that = this;
...@@ -111,7 +111,9 @@ var xmppchat = (function ($, console) { ...@@ -111,7 +111,9 @@ var xmppchat = (function ($, console) {
return; return;
}, },
success: function(data) { success: function(data) {
$('body').append(data).find('.chat-message .time').each(function (){ var chat_id = $(data).attr('id');
var $chat = $('body').append(data).find('#'+chat_id);
$chat.find('.chat-message .time').each(function () {
var jthis = $(this); var jthis = $(this);
var time = jthis.text().split(':'); var time = jthis.text().split(':');
var hour = time[0]; var hour = time[0];
...@@ -121,69 +123,95 @@ var xmppchat = (function ($, console) { ...@@ -121,69 +123,95 @@ var xmppchat = (function ($, console) {
date.setMinutes(minutes); date.setMinutes(minutes);
jthis.replaceWith(date.toLocaleTimeString().substring(0,5)); jthis.replaceWith(date.toLocaleTimeString().substring(0,5));
}); });
that.retrieveCollections(); callback($chat);
} }
}); });
return $('#'+chat_id);
}; };
obj.createChat = function (jid) { obj.prepNewChat = function (chat, jid) {
if (typeof(jid) === undefined) { // Some operations that need to be applied on a chatbox
return; // after it has been created.
var chat_content = $(chat).find('.chat-content');
$(chat).find(".chat-textarea").focus();
if (chat_content.length > 0) {
chat_content.scrollTop(chat_content[0].scrollHeight);
}
if (!(jid in this.oc(this.chats))) {
this.chats.push(jid);
} }
var chat_content,
chatbox,
chat_id = this.hash(jid);
this.addChatToCookie(jid); this.addChatToCookie(jid);
};
chatbox = $("#"+chat_id); obj.getChatbox = function (jid, callback) {
if (chatbox.length > 0) { // Get a chatbox. Either it exists, then just ensure
// The chatbox exists, merely hidden // that it's visible and return it. Otherwise, create it.
if (chatbox.css('display') == 'none') { //
chatbox.css('display','block'); // This method can be deferred.
this.reorderChats(); // http://www.erichynds.com/jquery/using-deferreds-in-jquery/
} var chat_content,
chatbox.find(".chat-textarea").focus(); chat_id = this.hash(jid),
chat_content = chatbox.find('.chat-content'); $chat = $("#"+chat_id),
if (chat_content.length > 0) { that = this,
chat_content.scrollTop(chat_content[0].scrollHeight); dfd = $.Deferred();
}
if (!(jid in this.oc(this.chats))) { if (callback === undefined) {
// Initially the chat status box won't be in this.chats. callback = function () {};
this.chats.push(jid);
}
return;
} }
chatbox = this.createChatBox(jid); if ($chat.length > 0) {
this.positionNewChat(chatbox); if ($chat.is(':visible')) {
this.chats.push(jid); callback($chat);
this.handleChatEvents(chat_id); dfd.resolve();
chatbox.show(); } else {
chat_content = chatbox.find('.chat-content'); // The chatbox exists, merely hidden
if (chat_content.length) { $chat.show('fast', function () {
chat_content.scrollTop(chat_content[0].scrollHeight); that.reorderChats();
that.prepNewChat(this, jid);
callback(this);
dfd.resolve();
});
}
} else {
this.createChatbox(jid, function ($chat) {
// that.retrieveCollections();
that.positionNewChat($chat);
$chat.show('fast', function () {
that.prepNewChat(this, jid);
that.handleChatEvents(chat_id);
callback(this);
dfd.resolve();
});
});
} }
return chatbox; return dfd.promise();
};
obj.startChat = function (jid) {
this.createChat(jid, 0);
$("#"+this.hash(jid)+" .chat-textarea").focus();
}; };
obj.reorderChats = function () { obj.reorderChats = function () {
var index = 0, var index = 0,
offset; chat_id,
offset,
$chat;
if ('online-users-container' in this.oc(this.chats)) {
index = 1;
$chat = $("#"+this.hash(this.oc(this.chats)['online-users-container']));
if ($chat.is(':visible')) {
$chat.css('right', '15px');
}
}
for (var i=0; i < this.chats.length; i++) { for (var i=0; i < this.chats.length; i++) {
var chatbox = $("#"+this.hash(this.chats[i])); chat_id = this.chats[i];
if (chatbox.css('display') != 'none') { if (chat_id === 'online-users-container') {
continue;
}
$chat = $("#"+this.hash(this.chats[i]));
if ($chat.is(':visible')) {
if (index === 0) { if (index === 0) {
chatbox.css('right', '15px'); $chat.css('right', '15px');
} }
else { else {
offset = (index)*(this.chatbox_width+7)+15; offset = (index)*(this.chatbox_width+7)+15;
chatbox.css('right', offset +'px'); $chat.css('right', offset +'px');
} }
index++; index++;
} }
...@@ -219,39 +247,33 @@ var xmppchat = (function ($, console) { ...@@ -219,39 +247,33 @@ var xmppchat = (function ($, console) {
that = this; that = this;
jarnxmpp.Presence.getUserInfo(user_id, function (data) { jarnxmpp.Presence.getUserInfo(user_id, function (data) {
var chat = $('#'+that.hash(jid)), that.getChatbox(jid, function () {
chat_content = chat.find(".chat-content"), var chat_content = $chat.find(".chat-content"),
now = new Date(), now = new Date(),
time = now.toLocaleTimeString().substring(0,5); time = now.toLocaleTimeString().substring(0,5);
if (chat.length <= 0) {
chat = that.createChat(jid, 0); if (user_id == that.username) {
} message_html = '<div class="chat-message">' +
if (chat.css('display') == 'none') { '<span class="chat-message-me">'+time+' me:&nbsp;&nbsp;</span>' +
chat.css('display','block'); '<span class="chat-message-content">'+text+'</span>' +
that.reorderChats(); '</div>';
} } else {
if (user_id == that.username) { message_html = '<div class="chat-message">' +
message_html = '<div class="chat-message">' + '<span class="chat-message-them">'+time+' '+data.fullname+':&nbsp;&nbsp;</span>' +
'<span class="chat-message-me">'+time+' me:&nbsp;&nbsp;</span>' + '<span class="chat-message-content">'+text+'</span>' +
'<span class="chat-message-content">'+text+'</span>' + '</div>';
'</div>'; }
} chat_content.append(message_html);
else { chat_content.scrollTop(chat_content[0].scrollHeight);
message_html = '<div class="chat-message">' + jarnxmpp.UI.msg_counter += 1;
'<span class="chat-message-them">'+time+' '+data.fullname+':&nbsp;&nbsp;</span>' + jarnxmpp.UI.updateMsgCounter();
'<span class="chat-message-content">'+text+'</span>' + });
'</div>';
}
chat_content.append(message_html);
chat_content.scrollTop(chat_content[0].scrollHeight);
jarnxmpp.UI.msg_counter += 1;
jarnxmpp.UI.updateMsgCounter();
}); });
}; };
obj.closeChat = function (jid) { obj.closeChat = function (jid) {
var chat_id = this.hash(jid); var chat_id = this.hash(jid);
jQuery('#'+chat_id).css('display','none'); jQuery('#'+chat_id).hide('fast');
xmppchat.reorderChats(); xmppchat.reorderChats();
var cookie = jQuery.cookie('chats-open-'+xmppchat.username), var cookie = jQuery.cookie('chats-open-'+xmppchat.username),
open_chats = [], open_chats = [],
...@@ -280,7 +302,7 @@ var xmppchat = (function ($, console) { ...@@ -280,7 +302,7 @@ var xmppchat = (function ($, console) {
var form = textbox.parent(); var form = textbox.parent();
form.submit(); form.submit();
message = message.replace(/^\s+|\s+jQuery/g,""); message = message.replace(/^\s+|\s+jQuery/g,"");
textbox.val('').focus().css('height','44px'); textbox.val('').focus();
if (message !== '') { if (message !== '') {
message = message.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&quot;"); message = message.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&quot;");
list = message.match(/\b(http:\/\/www\.\S+\.\w+|www\.\S+\.\w+|http:\/\/(?=[^w]){3}\S+[\.:]\S+)[^ ]+\b/g); list = message.match(/\b(http:\/\/www\.\S+\.\w+|www\.\S+\.\w+|http:\/\/(?=[^w]){3}\S+[\.:]\S+)[^ ]+\b/g);
...@@ -329,6 +351,27 @@ $(document).bind('xmppchat.send_presence', function (event, jid, type) { ...@@ -329,6 +351,27 @@ $(document).bind('xmppchat.send_presence', function (event, jid, type) {
jarnxmpp.connection.send($pres({'type':type})); jarnxmpp.connection.send($pres({'type':type}));
}); });
xmppchat.taskbuffer = (function ($) {
obj = {};
obj.tasks = [];
obj.deferred = $.when();
obj.handleTasks = function () {
var task;
// If the current deferred task is resolved and there are more tasks
if (obj.deferred.isResolved() && obj.tasks.length > 0) {
// Get the next task in the queue and set the new deferred.
task = obj.tasks.shift();
obj.deferred = $.when(task.method.apply(xmppchat, task.parameters));
if (obj.tasks.length > 0) {
obj.deferred.done(obj.handleTasks);
}
}
};
return obj;
})(jQuery);
$(document).bind('jarnxmpp.connected', function() { $(document).bind('jarnxmpp.connected', function() {
var chatdata = jQuery('span#babble-client-chatdata'), var chatdata = jQuery('span#babble-client-chatdata'),
cookie = jQuery.cookie('chats-open-'+chatdata.attr('username')), cookie = jQuery.cookie('chats-open-'+chatdata.attr('username')),
...@@ -341,21 +384,24 @@ $(document).bind('jarnxmpp.connected', function() { ...@@ -341,21 +384,24 @@ $(document).bind('jarnxmpp.connected', function() {
$("div#online-users-container") $("div#online-users-container")
.bind('onaftershow', function (e) { .bind('onaftershow', function (e) {
xmppchat.addChatToCookie('online-users-container'); xmppchat.addChatToCookie('online-users-container');
xmppchat.chats.push('online-users-container');
}); });
$('a.user-details-toggle').live('click', function (e) { $('a.user-details-toggle').live('click', function (e) {
var $field = $('[name="message"]:input', $(this).parent()[0]), var $field = $('[name="message"]:input', $(this).parent()[0]),
recipient = $field.attr('data-recipient'); jid = $field.attr('data-recipient');
xmppchat.startChat(recipient);
e.preventDefault(); e.preventDefault();
xmppchat.getChatbox(jid, function() {});
}); });
jQuery.cookie('chats-open-'+xmppchat.username, null, {path: '/'}); jQuery.cookie('chats-open-'+xmppchat.username, null, {path: '/'});
if (cookie) { if (cookie) {
// We need to wait for chatbox creation to finish before we create the
// next, so we use a task buffer to make sure the next task is only
// executed after the previous is done.
open_chats = cookie.split('|'); open_chats = cookie.split('|');
for (var i=0; i<open_chats.length; i++) { for (var i=0; i<open_chats.length; i++) {
xmppchat.createChat(open_chats[i], 1); xmppchat.taskbuffer.tasks.push({'method':xmppchat.getChatbox, 'parameters':[open_chats[i]]});
} }
xmppchat.taskbuffer.handleTasks();
} }
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment