Skip to content

C
converse.js
Commit a3f54321 authored by JC Brand's avatar JC Brand
Browse files
Options

Refactor: The controlbox is now rendered via JS template. 

- Removes the need for JQueryUI
parent 07ca5d35
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 61 deletions
converse.js
View file @ a3f54321
......@@ -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(
'<div class="chat-head oc-chat-head">'+
'<ul class="controlbox-tabs">'+
'<li><a class="s current" href="#users">Contacts</a></li>'+
'<li><a class="s" href="#chatrooms">Rooms</a></li>'+
'<!--<li><a class="s" href="#settings">Config</a></li>-->'+
'</ul>'+
'<a href="javascript:void(0)" class="close-controlbox-button">X</a>'+
'</div>'+
'<!-- tab "panes" -->'+
'<div class="panes">'+
'<div id="users" class="oc-chat-content">'+
'<form class="set-xmpp-status" action="" method="post">'+
'<span id="xmpp-status-holder">'+
'<select id="select-xmpp-status">'+
'<option value="online">Online</option>'+
'<option value="busy">Busy</option>'+
'<option value="away">Away</option>'+
'<option value="offline">Offline</option>'+
'</select>'+
'</span>'+
'</form>'+
'<div class="add-xmpp-contact">'+
'<a class="add-xmpp-contact" href="#" title="Click to search for new users to add as chat contacts">Add a contact</a>'+
'<form class="search-xmpp-contact" style="display:none">'+
'<input type="text" name="identifier" class="username" placeholder="Contact name"/>'+
'<button type="submit">Search</button>'+
'<ul id="found-users"></ul>'+
'</form>'+
'</div>'+
'<dl id="xmppchat-roster"></dl>'+
'</div>'+
'<div id="chatrooms" style="display:None">'+
'<form class="add-chatroom" action="" method="post">'+
'<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Chat room name"/>'+
'<button type="submit">Join</button>'+
'</form>'+
'<dl id="available-chatrooms">'+
'<dt>Available chatrooms</dt>'+
'</dl>'+
'</div>'+
'</div>'
),
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.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
});
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');
// XMPP Status
this.xmppstatus = new this.XMPPStatus();
this.xmppstatusview = new this.XMPPStatusView({
'model': this.xmppstatus
});
}, this));
// Controlbox toggler
$toggle.bind('click', $.proxy(function (e) {
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7