From a3f54321aa592ca6ecf2c6f195a541157de9977a Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 25 Oct 2012 12:36:37 +0200 Subject: [PATCH] Refactor: The controlbox is now rendered via JS template. - Removes the need for JQueryUI --- converse.js | 210 +++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 151 insertions(+), 59 deletions(-) diff --git a/converse.js b/converse.js index 6bfe3822a..4570e715a 100644 --- a/converse.js +++ b/converse.js @@ -9,27 +9,48 @@ /* The following line defines global variables defined elsewhere. */ /*globals jQuery, portal_url*/ - // AMD/global registrations (function (root, factory) { if (typeof define === 'function' && define.amd) { + + require.config({ + // paths: { + // "patterns": "Libraries/Patterns" + // }, + // define module dependencies for modules not using define + shim: { + 'Libraries/backbone': { + //These script dependencies should be loaded before loading + //backbone.js + deps: [ + 'Libraries/underscore', + 'jquery'], + //Once loaded, use the global 'Backbone' as the + //module value. + exports: 'Backbone' + }, + + 'Libraries/strophe.muc': { + deps: ['Libraries/strophe', 'jquery'] + }, + + 'Libraries/strophe.roster': { + deps: ['Libraries/strophe', 'jquery'] + } + } + }); + define([ - 'Libraries/burry.js/burry', - "Libraries/jquery.gritter.min", - "Libraries/jquery.cookie", - "Libraries/jquery.ba-dotimeout.min", + "Libraries/burry.js/burry", "Libraries/underscore", - "Libraries/underscore.string/lib/underscore.string", + "Libraries/sjcl", "Libraries/backbone", - "Libraries/strophe", "Libraries/strophe.muc", - "Libraries/strophe.roster", - "Libraries/diff_match_patch", - "Libraries/jarnxmpp.core.handlers", - "Libraries/jarnxmpp.collaboration.protocol", - "Libraries/jarnxmpp.collaboration.collaborate" - ], function (Burry) { + "Libraries/strophe.roster" + ], function (Burry, _s) { var store = new Burry.Store('collective.xmpp.chat'); + // Init underscore.str + _.str = _s; // Use Mustache style syntax for variable interpolation _.templateSettings = { evaluate : /\{\[([\s\S]+?)\]\}/g, @@ -561,20 +582,87 @@ }); xmppchat.ControlBoxView = xmppchat.ChatBoxView.extend({ - el: '#controlbox', + // XXX: Options for the (still to be done) 'settings' tab: + // * Show offline users + // * Auto-open chatbox when a message was received. + tagName: 'div', + className: 'chatbox', + id: 'controlbox', events: { - 'click a.close-controlbox-button': 'closeChat' + 'click a.close-controlbox-button': 'closeChat', + 'click ul.controlbox-tabs li a': 'switchTab' + }, + + template: _.template( + '
'+ + ''+ + 'X'+ + '
'+ + ''+ + '
'+ + '
'+ + '
'+ + ''+ + ''+ + ''+ + '
'+ + '
'+ + 'Add a contact'+ + ''+ + '
'+ + '
'+ + '
'+ + ''+ + '
' + ), + + switchTab: function (ev) { + ev.preventDefault(); + var $tab = $(ev.target), + $sibling = $tab.parent().siblings('li').children('a'), + $tab_panel = $($tab.attr('href')), + $sibling_panel = $($sibling.attr('href')); + + $sibling_panel.fadeOut('fast', function () { + $sibling.removeClass('current'); + $tab.addClass('current'); + $tab_panel.fadeIn('fast', function () { + }); + }); }, initialize: function () { - var userspanel; - $('ul.tabs').tabs('div.panes > div'); this.contactspanel = new xmppchat.ContactsPanel(); this.roomspanel = new xmppchat.RoomsPanel(); this.settingspanel = new xmppchat.SettingsPanel(); }, render: function () { + var that = this; + this.$el.hide('fast', function () { + $(this).addClass('chatbox').html(that.template(that.model.toJSON())); + }); return this; } }); @@ -799,7 +887,8 @@ that = this; if (_.indexOf(open_chats, 'controlbox') != -1) { - this.createChatBox('controlbox'); + // Controlbox already exists, we just need to show it. + this.showChat('controlbox'); } _.each(open_chats, $.proxy(function (jid) { if (jid != 'controlbox') { @@ -856,6 +945,7 @@ }, openChat: function (jid) { + jid = Strophe.getBareJidFromJid(jid); if (!this.model.get(jid)) { $.getJSON(portal_url + "/xmpp-userinfo?user_id=" + Strophe.getNodeFromJid(jid), $.proxy(function (data) { view = this.createChatBox(jid, data); @@ -903,10 +993,15 @@ initialize: function () { this.options.model.on("add", function (item) { - this.showChat(item.get('id')); + // The controlbox added automatically, but we don't show it + // automatically (only when it was open before page load or + // upon a click). + if (item.get('id') != 'controlbox') { + this.showChat(item.get('id')); + } }, this); - this.views = {}; + this.createChatBox('controlbox'); this.restoreOpenChats(); } }); @@ -919,8 +1014,7 @@ if (!name) { name = user_id; } - this.set({ - 'id': jid, + this.set({ 'id': jid, 'jid': jid, 'ask': ask, 'bare_jid': Strophe.getBareJidFromJid(jid), @@ -1060,22 +1154,22 @@ rank = 4; switch(presence_type) { case 'offline': - rank = 4; + rank = 0; break; case 'unavailable': - rank = 3; + rank = 1; break; case 'away': rank = 2; break; case 'busy': - rank = 1; + rank = 3; break; case 'dnd': - rank = 1; + rank = 4; break; case 'online': - rank = 0; + rank = 5; break; } return rank; @@ -1099,10 +1193,6 @@ return (Strophe.getBareJidFromJid(jid) === Strophe.getBareJidFromJid(xmppchat.connection.jid)); }, - getRoster: function () { - return xmppchat.connection.roster.get($.proxy(this.rosterHandler, this)); - }, - getItem: function (id) { return Backbone.Collection.prototype.get.call(this, id); }, @@ -1277,7 +1367,6 @@ } return true; }, - }); xmppchat.RosterView= (function (roster, _, $, console) { @@ -1516,17 +1605,25 @@ this.fullname = chatdata.attr('fullname'); this.auto_subscribe = chatdata.attr('auto_subscribe') === "True" || false; + $(document).bind('jarnxmpp.connected', $.proxy(function (ev, conn) { + alert("Connection Failed :("); + }, this)); + $(document).unbind('jarnxmpp.connected'); $(document).bind('jarnxmpp.connected', $.proxy(function () { - // this.connection.xmlInput = function (body) { console.log(body); }; - // this.connection.xmlOutput = function (body) { console.log(body); }; - + this.connection.xmlInput = function (body) { console.log(body); }; + this.connection.xmlOutput = function (body) { + console.log(body); + }; this.connection.bare_jid = Strophe.getBareJidFromJid(this.connection.jid); this.connection.domain = Strophe.getDomainFromJid(this.connection.jid); - // XXX: Better if configurable? this.connection.muc_domain = 'conference.' + this.connection.domain; + this.storage = new this.ClientStorage({'own_jid': this.connection.bare_jid}); - this.storage = new this.ClientStorage(Strophe.getBareJidFromJid(this.connection.jid)); + this.chatboxes = new this.ChatBoxes(); + this.chatboxesview = new this.ChatBoxesView({ + 'model': this.chatboxes + }); this.roster = new this.RosterItems(); this.rosterview = Backbone.View.extend(this.RosterView(this.roster, _, $, console)); @@ -1534,34 +1631,29 @@ $.proxy(this.roster.subscribeToSuggestedItems, this.roster), 'http://jabber.org/protocol/rosterx', 'message', null); - this.connection.addHandler( - $.proxy(function (presence) { - this.presenceHandler(presence); - return true; - }, this.roster), null, 'presence', null); - this.connection.roster.registerCallback( $.proxy(this.roster.rosterHandler, this.roster), null, 'presence', null); - - this.roster.getRoster(); - this.chatboxes = new this.ChatBoxes(); - this.chatboxesview = new this.ChatBoxesView({ - 'model': this.chatboxes - }); + this.connection.roster.get($.proxy(function () { + this.connection.addHandler( + $.proxy(function (presence) { + this.presenceHandler(presence); + return true; + }, this.roster), null, 'presence', null); - this.connection.addHandler( - $.proxy(function (message) { - this.chatboxesview.messageReceived(message); - return true; - }, this), null, 'message', 'chat'); + this.connection.addHandler( + $.proxy(function (message) { + this.chatboxesview.messageReceived(message); + return true; + }, this), null, 'message', 'chat'); - // XMPP Status - this.xmppstatus = new this.XMPPStatus(); - this.xmppstatusview = new this.XMPPStatusView({ - 'model': this.xmppstatus - }); + // XMPP Status + this.xmppstatus = new this.XMPPStatus(); + this.xmppstatusview = new this.XMPPStatusView({ + 'model': this.xmppstatus + }); + }, this)); // Controlbox toggler $toggle.bind('click', $.proxy(function (e) {