From 28d71fba3404d8bf294e4daf2fc390ad9d551cee Mon Sep 17 00:00:00 2001 From: JC Brand Date: Sun, 15 Jul 2012 13:10:11 +0200 Subject: [PATCH] Refactor roster functionality with backbone. (Not done yet). --- chat.js | 232 ++++++++++++++++++++++++++++++++++++++++++++++-------- chatui.js | 64 --------------- 2 files changed, 199 insertions(+), 97 deletions(-) diff --git a/chat.js b/chat.js index fe1b320a8..62005176b 100644 --- a/chat.js +++ b/chat.js @@ -424,7 +424,48 @@ xmppchat.ControlBoxView = xmppchat.ChatBoxView.extend({ el: '#online-users-container', events: { - 'click a.close-controlbox-button': 'closeChat' + 'click a.close-controlbox-button': 'closeChat', + 'click div.add-xmpp-contact': 'toggleContactForm', + 'submit form.search-xmpp-contact': 'searchContacts', + 'click a.subscribe-to-user': 'subscribeToContact' + }, + + toggleContactForm: function (ev) { + ev.preventDefault(); + this.$el.find('form.search-xmpp-contact').fadeToggle('medium').find('input.username').focus(); + }, + + searchContacts: function (ev) { + ev.preventDefault(); + $.getJSON(portal_url + "/search-users?q=" + $(ev.target).find('input.username').val(), function (data) { + var $results_el = $('#found-users'); + $(data).each(function (idx, obj) { + if ($results_el.children().length > 0) { + $results_el.empty(); + } + $results_el.append( + $('
  • ') + .attr('id', 'found-users-'+obj.id) + .append( + $('') + .attr('data-recipient', obj.id+'@'+xmppchat.connection.domain) + .text(obj.fullname) + ) + ); + }); + }); + }, + + subscribeToContact: function (ev) { + ev.preventDefault(); + var jid = $(ev.target).attr('data-recipient'); + xmppchat.roster.stropheRoster.add(jid, '', [], function (iq) { + // XXX: We can set the name here!!! + //xmppchat.connection.send($pres({'type':'result', 'id': $(iq).attr('id')})); + xmppchat.roster.stropheRoster.subscribe(jid); + }); + $(ev.target).parent().remove(); + $('form.search-xmpp-contact').hide(); }, initialize: function () { @@ -616,7 +657,8 @@ xmppchat.RosterItemView = Backbone.View.extend({ tagName: 'li', events: { - 'click': 'openChat' + 'click a.open-chat': 'openChat', + 'click a.remove-xmpp-contact': 'removeContact' }, openChat: function (e) { @@ -625,6 +667,32 @@ xmppchat.RosterItemView = Backbone.View.extend({ xmppchat.chatboxesview.openChat(jid); }, + removeContact: function (e) { + var that = this; + e.preventDefault(); + $("").dialog({ + title: 'Are you sure you want to remove this contact?', + dialogClass: 'remove-xmpp-contact-dialog', + resizable: false, + width: 200, + position: { + my: 'center', + at: 'center', + of: '#online-users-container' + }, + modal: true, + buttons: { + "Remove": function() { + $(this).dialog( "close" ); + xmppchat.roster.unsubscribe(that.model.get('jid')); + }, + "Cancel": function() { + $(this).dialog( "close" ); + } + } + }); + }, + initialize: function () { var that = this; this.options.model.on('change', function (item, changed) { @@ -634,9 +702,9 @@ xmppchat.RosterItemView = Backbone.View.extend({ }, this); }, - template: _.template( - '<%= fullname %>' + - ''), + template: _.template( + '<%= fullname %>' + + ''), render: function () { var item = this.model; @@ -654,7 +722,7 @@ xmppchat.Roster = (function (stropheRoster, _, $, console) { stropheRoster: stropheRoster, initialize: function () { - this.stropheRoster._connection = xmppchat.connection; + this._connection = this.stropheRoster._connection = xmppchat.connection; }, comparator : function (rosteritem) { @@ -757,48 +825,131 @@ xmppchat.Roster = (function (stropheRoster, _, $, console) { _.extend(ob, Backbone.Events); ob.updateHandler = function (items) { - var model; + var model, item; for (var i=0; i").dialog({ + title: user_id+ ' wants add you as a contact.', + dialogClass: 'approve-xmpp-contact-dialog', + resizable: false, + width: 200, + position: { + my: 'center', + at: 'center', + of: '#online-users-container' + }, + modal: true, + buttons: { + "Approve": function() { + $(this).dialog( "close" ); + approve_callback(jid); + }, + "Decline": function() { + $(this).dialog( "close" ); + decline_callback(jid); + } + } + }); + }; + ob.presenceHandler = function (presence) { var jid = $(presence).attr('from'), bare_jid = Strophe.getBareJidFromJid(jid), resource = Strophe.getResourceFromJid(jid), ptype = $(presence).attr('type'), + item, status = ''; if (ob.isSelf(bare_jid)) { return true; } - if (ptype === 'subscribe') { - // FIXME: User wants to subscribe to us. Always approve and - // ask to subscribe to him - stropheRoster.authorize(bare_jid); - stropheRoster.subscribe(bare_jid); - - } else if (ptype === 'unsubscribe') { - if (_.indexOf(xmppchat.roster.getCachedJids(), bare_jid) != -1) { - stropheRoster.unauthorize(bare_jid); - stropheRoster.unsubscribe(bare_jid); + if (ob.getItem(bare_jid)) { + xmppchat.roster.authorize(bare_jid); + } else { + ob.promptUserForSubscription(bare_jid, + function () { // Approved + xmppchat.roster.authorize(bare_jid); + xmppchat.roster.subscribe(bare_jid); + }, + function () { // Declined + xmppchat.roster.unauthorize(bare_jid); + }); } - + } else if (ptype === 'subscribed') { + return true; + } else if (ptype === 'unsubscribe') { + return true; } else if (ptype === 'unsubscribed') { - return; + return true; + } else if (ptype === 'error') { + return true; } else if (ptype !== 'error') { // Presence has changed if (_.indexOf(['unavailable', 'offline', 'busy', 'away'], ptype) != -1) { @@ -827,20 +978,26 @@ xmppchat.RosterView= (function (roster, _, $, console) { var View = Backbone.View.extend({ el: $('#xmpp-contacts'), model: roster, - rosteritemviews: [], + rosteritemviews: {}, initialize: function () { this.model.on("add", function (item) { - $(this.el).append((new xmppchat.RosterItemView({model: item})).render().el); + var view = new xmppchat.RosterItemView({model: item}); + this.rosteritemviews[item.id] = view; + $(this.el).append(view.render().el); }, this); this.model.on('change', function (item) { this.render(); }, this); - this.model.on("remove", function (msg) { - console.log('roster remove handler called!!!!!'); - }); + this.model.on("remove", function (item) { + var view = this.rosteritemviews[item.id]; + if (view) { + view.remove(); + } + this.render(); + }, this); }, render: function () { @@ -948,6 +1105,15 @@ $(document).ready(function () { $(document).unbind('jarnxmpp.connected'); $(document).bind('jarnxmpp.connected', function () { + + xmppchat.connection.xmlInput = function (body) { + console.log(body); + }; + + xmppchat.connection.xmlOutput = function (body) { + console.log(body); + }; + xmppchat.connection.bare_jid = Strophe.getBareJidFromJid(xmppchat.connection.jid); xmppchat.roster = xmppchat.Roster(Strophe._connectionPlugins.roster, _, $, console); diff --git a/chatui.js b/chatui.js index 4c0724ca5..2cb0cc14c 100644 --- a/chatui.js +++ b/chatui.js @@ -140,72 +140,8 @@ xmppchat.UI = (function (xmppUI, $, console) { // Event handlers // -------------- $(document).ready(function () { - $(document).bind('xmppchat.send_presence', function (event, jid, type) { - xmppchat.connection.send($pres({'type':type})); - }); - $('ul.tabs').tabs('div.panes > div'); - $('div.add-xmpp-contact').click(function (ev) { - ev.preventDefault(); - $(this).parent().find('form.search-xmpp-contact').toggle().find('input.username').focus(); - }); - - $('a.remove-xmpp-contact').live('click', function (ev) { - var that = this; - ev.preventDefault(); - $("").dialog({ - title: 'Are you sure you want to remove this contact?', - dialogClass: 'remove-xmpp-contact-dialog', - resizable: false, - width: 200, - position: { - my: 'center', - at: 'center', - of: '#online-users-container' - }, - modal: true, - buttons: { - "Remove": function() { - $( this ).dialog( "close" ); - var jid = $(that).parent().attr('data-recipient'); - xmppchat.Roster.unsubscribe(jid); - }, - "Cancel": function() { - $( this ).dialog( "close" ); - } - } - }); - }); - - $('form.search-xmpp-contact').submit(function (ev) { - ev.preventDefault(); - $.getJSON(portal_url + "/search-users?q=" + $(this).find('input.username').val(), function (data) { - var $results_el = $('#found-users'); - $(data).each(function (idx, obj) { - if ($results_el.children().length > 0) { - $results_el.empty(); - } - $results_el.append( - $('
  • ') - .attr('id', 'found-users-'+obj.id) - .append( - $('') - .attr('data-recipient', obj.id+'@'+xmppchat.connection.domain) - .text(obj.fullname) - ) - ); - }); - }); - }); - - $("a.subscribe-to-user").live('click', function (ev) { - ev.preventDefault(); - xmppchat.Roster.subscribe($(this).attr('data-recipient')); - $(this).remove(); - $('form.search-xmpp-contact').hide(); - }); - $('select#select-xmpp-status').bind('change', function (ev) { var jid = xmppchat.connection.jid, value = ev.target.value;