Rewrote the status dropdown with backbone and store user status via store.js
This commit is contained in:
JC Brand
parent
f9bb840dec
commit
5eb0f1c7cf
99
chat.js
99
chat.js
|
|
@ -143,13 +143,6 @@ var xmppchat = (function (jarnxmpp, $, console) {
|
|||
return xmppchat.ChatPartners.getTotal();
|
||||
};
|
||||
|
||||
ob.Presence.sendPresence = function (type) {
|
||||
if (type === undefined) {
|
||||
type = this.getOwnStatus() || 'online';
|
||||
}
|
||||
xmppchat.connection.send($pres({'type':type}));
|
||||
};
|
||||
|
||||
ob.Taskbuffer = (function ($) {
|
||||
// Executes tasks one after another (i.e next task is started only when
|
||||
// the previous one has been completed).
|
||||
|
|
@ -568,7 +561,7 @@ xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
|
|||
},
|
||||
|
||||
addResource: function (bare_jid, resource) {
|
||||
var item = this.getItem(bare_jid);
|
||||
var item = this.getItem(bare_jid),
|
||||
resources;
|
||||
if (item) {
|
||||
resources = item.get('resources');
|
||||
|
|
@ -641,7 +634,9 @@ xmppchat.RosterClass = (function (stropheRoster, _, $, console) {
|
|||
ptype = $(presence).attr('type'),
|
||||
status = '';
|
||||
|
||||
if (ob.isSelf(bare_jid)) { return true; }
|
||||
if (ob.isSelf(bare_jid)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (ptype === 'subscribe') {
|
||||
// FIXME: User wants to subscribe to us. Always approve and
|
||||
|
|
@ -716,6 +711,81 @@ xmppchat.RosterView= (function (roster, _, $, console) {
|
|||
return view;
|
||||
});
|
||||
|
||||
xmppchat.XMPPStatus = Backbone.Model.extend({
|
||||
|
||||
sendPresence: function (type) {
|
||||
if (type === undefined) {
|
||||
type = this.getOwnStatus() || 'online';
|
||||
}
|
||||
xmppchat.connection.send($pres({'type':type}));
|
||||
},
|
||||
|
||||
getOwnStatus: function () {
|
||||
return store.get(xmppchat.connection.bare_jid+'-xmpp-status');
|
||||
},
|
||||
|
||||
setOwnStatus: function (value) {
|
||||
this.sendPresence(value);
|
||||
store.set(xmppchat.connection.bare_jid+'-xmpp-status', value);
|
||||
}
|
||||
});
|
||||
|
||||
xmppchat.XMPPStatusView = Backbone.View.extend({
|
||||
el: "span#xmpp-status-holder",
|
||||
|
||||
events: {
|
||||
"click #fancy-xmpp-status-select": "toggleOptions",
|
||||
"click .dropdown dd ul li a": "setOwnStatus"
|
||||
},
|
||||
|
||||
toggleOptions: function (ev) {
|
||||
ev.preventDefault();
|
||||
$(ev.target).parent().siblings('dd').find('ul').toggle('fast');
|
||||
},
|
||||
|
||||
setOwnStatus: function (ev) {
|
||||
ev.preventDefault();
|
||||
var $el = $(ev.target).find('span'),
|
||||
value = $el.text();
|
||||
$(this.el).find(".dropdown dt a").html('I am ' + value).attr('class', value);
|
||||
$(this.el).find(".dropdown dd ul").hide();
|
||||
$(this.el).find("#source").val($($el).find("span.value").html());
|
||||
this.model.setOwnStatus(value);
|
||||
},
|
||||
|
||||
choose_template: _.template('<dl id="target" class="dropdown">' +
|
||||
'<dt id="fancy-xmpp-status-select">'+
|
||||
'<a href="#" title="Click to change your chat status" class="<%= chat_status %>">' +
|
||||
'I am <%= chat_status %> <span class="value"><%= chat_status %></span>' +
|
||||
'</a></dt>' +
|
||||
'<dd><ul></ul></dd>'),
|
||||
|
||||
option_template: _.template(
|
||||
'<li>' +
|
||||
'<a href="#" class="<%= value %>">' +
|
||||
'<%= text %>' +
|
||||
'<span class="value"><%= value %></span>' +
|
||||
'</a>' +
|
||||
'</li>'),
|
||||
|
||||
initialize: function () {
|
||||
var $select = $(this.el).find('select#select-xmpp-status'),
|
||||
chat_status = this.model.getOwnStatus() || 'offline',
|
||||
options = $('option', $select),
|
||||
that = this;
|
||||
|
||||
$(this.el).html(this.choose_template({'chat_status': chat_status}));
|
||||
|
||||
// iterate through all the <option> elements and create UL
|
||||
options.each(function(){
|
||||
$(that.el).find("#target dd ul").append(that.option_template({
|
||||
'value': $(this).val(),
|
||||
'text': $(this).text()
|
||||
})).hide();
|
||||
});
|
||||
$select.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Event handlers
|
||||
// --------------
|
||||
|
|
@ -732,6 +802,7 @@ $(document).ready(function () {
|
|||
$(document).bind('jarnxmpp.connected', function () {
|
||||
// FIXME: Need to get some convention going for naming classes and instances of
|
||||
// models and views.
|
||||
xmppchat.connection.bare_jid = Strophe.getBareJidFromJid(xmppchat.connection.jid);
|
||||
|
||||
// Messages
|
||||
xmppchat.connection.addHandler(xmppchat.Messages.messageReceived, null, 'message', 'chat');
|
||||
|
|
@ -742,7 +813,6 @@ $(document).ready(function () {
|
|||
|
||||
xmppchat.Roster.registerCallback(xmppchat.Roster.updateHandler);
|
||||
xmppchat.Roster.getRoster();
|
||||
xmppchat.Presence.sendPresence();
|
||||
|
||||
xmppchat.chatboxes = new xmppchat.ChatBoxes();
|
||||
|
||||
|
|
@ -750,6 +820,15 @@ $(document).ready(function () {
|
|||
'model': xmppchat.chatboxes
|
||||
});
|
||||
|
||||
// XMPP Status
|
||||
xmppchat.xmppstatus = new xmppchat.XMPPStatus();
|
||||
xmppchat.xmppstatusview = new xmppchat.XMPPStatusView({
|
||||
'model': xmppchat.xmppstatus
|
||||
});
|
||||
|
||||
xmppchat.xmppstatus.sendPresence();
|
||||
|
||||
// Controlbox toggler
|
||||
$toggle.bind('click', function (e) {
|
||||
e.preventDefault();
|
||||
if ($("div#online-users-container").is(':visible')) {
|
||||
|
|
|
|||
102
chatui.js
102
chatui.js
|
|
@ -8,13 +8,7 @@ xmppchat.UI = (function (xmppUI, $, console) {
|
|||
return xmppchat.base_url + call;
|
||||
};
|
||||
|
||||
ob.addUserToRosterUI = function (user_id, bare_jid, fullname, userstatus) {
|
||||
if ($('#online-users-' + user_id).length > 0) { return; }
|
||||
var li = $('<li></li>').addClass(userstatus).attr('id', 'online-users-'+user_id).attr('data-recipient', bare_jid);
|
||||
li.append($('<a title="Click to chat with this contact"></a>').addClass('user-details-toggle').text(fullname));
|
||||
li.append($('<a title="Click to remove this contact" href="#"></a>').addClass('remove-xmpp-contact'));
|
||||
$('#xmpp-contacts').append(li);
|
||||
};
|
||||
ob.addUserToRosterUI = function (user_id, bare_jid, fullname, userstatus) {};
|
||||
|
||||
ob.updateOnPresence = function (jid, status, presence) {
|
||||
var user_id = Strophe.getNodeFromJid(jid),
|
||||
|
|
@ -60,22 +54,7 @@ xmppchat.UI = (function (xmppUI, $, console) {
|
|||
$('#online-count').text(xmppchat.Presence.onlineCount());
|
||||
};
|
||||
|
||||
ob.positionNewChat = function ($chat) {
|
||||
var open_chats = 0,
|
||||
offset;
|
||||
for (var i=0; i<this.chats.length; i++) {
|
||||
if ($("#"+helpers.hash(this.chats[i])).is(':visible')) {
|
||||
open_chats++;
|
||||
}
|
||||
}
|
||||
if (open_chats === 0) {
|
||||
$chat.animate({'right':'15px'});
|
||||
}
|
||||
else {
|
||||
offset = (open_chats)*(this.chatbox_width+7)+15;
|
||||
$chat.animate({'right': (offset+'px')});
|
||||
}
|
||||
};
|
||||
ob.positionNewChat = function ($chat) {};
|
||||
|
||||
ob.handleChatEvents = function (chat_id) {
|
||||
var chat_area = $("#"+chat_id+" .chat-textarea"),
|
||||
|
|
@ -157,28 +136,7 @@ xmppchat.UI = (function (xmppUI, $, console) {
|
|||
});
|
||||
};
|
||||
|
||||
ob.createChatbox = function (bare_jid, callback) {
|
||||
var user_id = Strophe.getNodeFromJid(bare_jid),
|
||||
that = this;
|
||||
xmppchat.Presence.getUserInfo(user_id, function (data) {
|
||||
var chat_id = helpers.hash(bare_jid);
|
||||
var $chat = $('<div class="chatbox"></div>').attr('id', chat_id).hide();
|
||||
var $head = $('<div class="chat-head chat-head-chatbox"></div>')
|
||||
.append($('<div class="chat-title"></div>').text(data.fullname))
|
||||
.append($('<a href="javascript:void(0)" class="chatbox-button close-chatbox-button">X</a>')
|
||||
.attr('data-recipient', bare_jid))
|
||||
.append('<br clear="all"/>');
|
||||
var $content = $('<div class="chat-content"></div>');
|
||||
var $form = $('<form class="sendXMPPMessage" action="" method="post">')
|
||||
.append(
|
||||
$('<textarea type="text" ' +
|
||||
'class="chat-textarea" ' +
|
||||
'placeholder="Personal message"/>').attr('data-recipient', bare_jid));
|
||||
$chat.append($head).append($content).append($form);
|
||||
$('body').append($chat);
|
||||
callback($chat);
|
||||
});
|
||||
};
|
||||
ob.createChatbox = function (bare_jid, callback) {};
|
||||
/*
|
||||
$chat.find('.chat-message .time').each(function () {
|
||||
var jthis = $(this);
|
||||
|
|
@ -212,6 +170,7 @@ xmppchat.UI = (function (xmppUI, $, console) {
|
|||
if (_.indexOf(this.chats, jid) == -1) {
|
||||
this.chats.push(jid);
|
||||
}
|
||||
this.addChatToCookie(jid);
|
||||
};
|
||||
|
||||
ob.getChatbox = function (jid, callback) {
|
||||
|
|
@ -262,8 +221,9 @@ xmppchat.UI = (function (xmppUI, $, console) {
|
|||
return dfd.promise();
|
||||
};
|
||||
|
||||
ob.reorderChats = function () {
|
||||
};
|
||||
ob.reorderChats = function () {};
|
||||
|
||||
ob.addChatToCookie = function (jid) {};
|
||||
|
||||
ob.addMessageToChatbox = function (event) {
|
||||
/* XXX: event.mtype should be 'xhtml' for XHTML-IM messages,
|
||||
|
|
@ -367,42 +327,6 @@ xmppchat.UI = (function (xmppUI, $, console) {
|
|||
}
|
||||
};
|
||||
|
||||
ob.setOwnStatus = function (el) {
|
||||
var jid = xmppchat.connection.jid,
|
||||
value = $(el).find('span').text();
|
||||
|
||||
$(".dropdown dt a").html('I am ' + value);
|
||||
$(".dropdown dt a").attr('class', value);
|
||||
$(".dropdown dd ul").hide();
|
||||
$("#source").val($(el).find("span.value").html());
|
||||
|
||||
xmppchat.Presence.sendPresence(value);
|
||||
xmppchat.Storage.set(xmppchat.username+'-xmpp-status', value);
|
||||
};
|
||||
|
||||
ob.createStatusSelectWidget = function () {
|
||||
var select = $('select#select-xmpp-status'),
|
||||
selected = select.find('option[selected]'),
|
||||
chat_status = selected.val() || xmppchat.Presence.getOwnStatus() || 'online';
|
||||
options = $('option', select);
|
||||
|
||||
// create <dl> and <dt> with selected value inside it
|
||||
select.parent().append('<dl id="target" class="dropdown"></dl>');
|
||||
|
||||
$("#target").append('<dt id="fancy-xmpp-status-select"><a href="#" title="Click to change your chat status" class="' +
|
||||
chat_status+'">I am ' + chat_status +
|
||||
'<span class="value">' + chat_status + '</span></a></dt>');
|
||||
|
||||
$("#target").append('<dd><ul></ul></dd>');
|
||||
// iterate through all the <option> elements and create UL
|
||||
options.each(function(){
|
||||
$("#target dd ul").append('<li><a href="#" class="'+$(this).val()+'">' +
|
||||
$(this).text() + '<span class="value">' +
|
||||
$(this).val() + '</span></a></li>').hide();
|
||||
});
|
||||
select.remove();
|
||||
};
|
||||
|
||||
return ob;
|
||||
})(xmppchat.UI || {}, jQuery, console || {log: function(){}} );
|
||||
|
||||
|
|
@ -410,8 +334,6 @@ xmppchat.UI = (function (xmppUI, $, console) {
|
|||
// Event handlers
|
||||
// --------------
|
||||
$(document).ready(function () {
|
||||
xmppchat.UI.createStatusSelectWidget();
|
||||
|
||||
$(document).unbind('jarnxmpp.message');
|
||||
$(document).bind('jarnxmpp.message', function (event) {
|
||||
xmppchat.UI.addMessageToChatbox(event);
|
||||
|
|
@ -432,11 +354,6 @@ $(document).ready(function () {
|
|||
|
||||
$('ul.tabs').tabs('div.panes > div');
|
||||
|
||||
$('#fancy-xmpp-status-select').click(function (ev) {
|
||||
ev.preventDefault();
|
||||
$(this).siblings('dd').find('ul').toggle('fast');
|
||||
});
|
||||
|
||||
$('div.add-xmpp-contact').click(function (ev) {
|
||||
ev.preventDefault();
|
||||
$(this).parent().find('form.search-xmpp-contact').toggle().find('input.username').focus();
|
||||
|
|
@ -497,11 +414,6 @@ $(document).ready(function () {
|
|||
$('form.search-xmpp-contact').hide();
|
||||
});
|
||||
|
||||
$(".dropdown dd ul li a").click(function(ev) {
|
||||
ev.preventDefault();
|
||||
xmppchat.UI.setOwnStatus(this);
|
||||
});
|
||||
|
||||
$('select#select-xmpp-status').bind('change', function (ev) {
|
||||
var jid = xmppchat.connection.jid,
|
||||
value = ev.target.value;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user