Skip to content

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

Simplify the boilerplate HTML require even more. 

The controlbox toggle is now generated via a backbone view, you don't need to
manually include it in your markup.
parent 90a5df87
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 68 deletions
converse.js
View file @ c6f4943e
......@@ -110,7 +110,7 @@
// Translation machinery
// ---------------------
var __ = $.proxy(function (str) {
// Translation factory
// Translation factory
if (this.i18n === undefined) {
this.i18n = locales.en;
}
......@@ -332,35 +332,6 @@
this.updateMsgCounter();
};
this.showControlBox = function () {
var controlbox = this.chatboxes.get('controlbox');
if (!controlbox) {
this.chatboxes.add({
id: 'controlbox',
box_id: 'controlbox',
visible: true
});
if (this.connection) {
this.chatboxes.get('controlbox').save();
}
} else {
controlbox.trigger('show');
}
};
this.toggleControlBox = function () {
if ($("div#controlbox").is(':visible')) {
var controlbox = this.chatboxes.get('controlbox');
if (this.connection) {
controlbox.destroy();
} else {
controlbox.trigger('hide');
}
} else {
this.showControlBox();
}
};
this.initStatus = function (callback) {
this.xmppstatus = new this.XMPPStatus();
var id = hex_sha1('converse.xmppstatus-'+this.bare_jid);
......@@ -455,7 +426,7 @@
this.set({
'user_id' : Strophe.getNodeFromJid(this.get('jid')),
'box_id' : hex_sha1(this.get('jid')),
'otr_status': this.get('otr_status') || UNENCRYPTED
'otr_status': this.get('otr_status') || UNENCRYPTED
});
}
},
......@@ -479,14 +450,14 @@
'instance_tag': instance_tag
};
}
}
}
// We need to generate a new key and instance tag
result = alert(__('Your browser needs to generate a private key, which will be used in your encrypted chat session. This can take up to 30 seconds during which your browser might freeze and become unresponsive.'));
instance_tag = otr.OTR.makeInstanceTag();
key = new otr.DSA();
// Encrypt the key and set in sessionStorage. Also store
// instance tag
window.sessionStorage[hex_sha1(this.id+'priv_key')] =
window.sessionStorage[hex_sha1(this.id+'priv_key')] =
cipher.encrypt(crypto.algo.AES, key.packPrivate(), pass).toString();
window.sessionStorage[hex_sha1(this.id+'instance_tag')] = instance_tag;
......@@ -1107,10 +1078,10 @@
this.$el.find('div.chat-event').remove();
}
}
}
}
if (_.has(item.changed, 'status')) {
this.showStatusMessage(item.get('status'));
}
}
if (_.has(item.changed, 'image')) {
this.renderAvatar();
}
......@@ -1183,7 +1154,7 @@
data.allow_otr = converse.allow_otr && !this.is_chatroom;
data.show_emoticons = converse.show_emoticons;
data.otr_translated_status = OTR_TRANSLATED_MAPPING[data.otr_status];
data.otr_status_class = OTR_CLASS_MAPPING[data.otr_status];
data.otr_status_class = OTR_CLASS_MAPPING[data.otr_status];
this.$el.find('.chat-toolbar').html(this.toolbar_template(data));
}
return this;
......@@ -2503,7 +2474,7 @@
} else if (ask === 'request') {
this.$el.addClass('requesting-xmpp-contact');
this.$el.html(this.request_template(item.toJSON()));
converse.showControlBox();
converse.controlboxtoggle.showControlBox();
} else if (subscription === 'both' || subscription === 'to') {
this.$el.addClass('current-xmpp-contact');
this.$el.html(this.template(
......@@ -3204,7 +3175,8 @@
'submit form#converse-login': 'authenticate'
},
tab_template: _.template(
'<li><a class="current" href="#login">'+__('Sign in')+'</a></li>'),
'<li><a class="current" href="#login">'+__('Sign in')+'</a></li>'
),
template: _.template(
'<form id="converse-login">' +
'<label>'+__('XMPP/Jabber Username:')+'</label>' +
......@@ -3212,11 +3184,12 @@
'<label>'+__('Password:')+'</label>' +
'<input type="password" name="password">' +
'<input class="login-submit" type="submit" value="'+__('Log In')+'">' +
'</form">'),
'</form">'
),
bosh_url_input: _.template(
'<label>'+__('BOSH Service URL:')+'</label>' +
'<input type="text" id="bosh_service_url">'),
'<input type="text" id="bosh_service_url">'
),
connect: function ($form, jid, password) {
if ($form) {
......@@ -3283,18 +3256,69 @@
}
});
this.ControlBoxToggle = Backbone.View.extend({
tagName: 'a',
className: 'toggle-online-users',
id: 'toggle-controlbox',
events: {
'click': 'onClick'
},
attributes: {
'href': "#"
},
template: _.template(
'<strong class="conn-feedback">Toggle chat</strong>'+
'<strong style="display: none" id="online-count">(0)</strong>'
),
initialize: function () {
this.render();
},
render: function () {
$('#chatpanel').append(this.$el.html(this.template()));
return this;
},
showControlBox: function () {
var controlbox = converse.chatboxes.get('controlbox');
if (!controlbox) {
converse.chatboxes.add({
id: 'controlbox',
box_id: 'controlbox',
visible: true
});
if (converse.connection) {
converse.chatboxes.get('controlbox').save();
}
} else {
controlbox.trigger('show');
}
},
onClick: function (e) {
e.preventDefault();
if ($("div#controlbox").is(':visible')) {
var controlbox = converse.chatboxes.get('controlbox');
if (converse.connection) {
controlbox.destroy();
} else {
controlbox.trigger('hide');
}
} else {
this.showControlBox();
}
}
});
// Initialization
// --------------
// This is the end of the initialize method.
this.chatboxes = new this.ChatBoxes();
this.chatboxesview = new this.ChatBoxesView({model: this.chatboxes});
$('.toggle-online-users').bind(
'click',
$.proxy(function (e) {
e.preventDefault(); this.toggleControlBox();
}, this)
);
this.controlboxtoggle = new this.ControlBoxToggle();
if ((this.prebind) && (!this.connection)) {
if ((!this.jid) || (!this.sid) || (!this.rid) || (!this.bosh_service_url)) {
this.log('If you set prebind=true, you MUST supply JID, RID and SID values');
......@@ -3305,7 +3329,7 @@
} else if (this.connection) {
this.onConnected();
}
if (this.show_controlbox_by_default) { this.showControlBox(); }
if (this.show_controlbox_by_default) { this.controlboxtoggle.showControlBox(); }
};
return {
'initialize': function (settings, callback) {
......
docs/source/index.rst
View file @ c6f4943e
......@@ -57,14 +57,7 @@ Finally, Converse.js requires a special snippet of HTML markup to be included in
::
<div id="chatpanel">
<div id="collective-xmpp-chat-data"></div>
<div id="toggle-controlbox">
<a href="#" class="chat toggle-online-users">
<strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
</a>
</div>
</div>
<div id="chatpanel"></div>
The `index.html <https://github.com/jcbrand/converse.js/blob/master/index.html>`_ file inside the
Converse.js repository serves as a nice usable example of this.
......
index.html
View file @ c6f4943e
......@@ -178,11 +178,7 @@
</footer>
</div>
<div id="chatpanel">
<a id="toggle-controlbox" href="#" class="chat toggle-online-users">
<strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
</a>
</div>
<div id="chatpanel"></div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
......
spec/MainSpec.js
View file @ c6f4943e
......@@ -46,11 +46,13 @@
// This spec will only pass if the controlbox is not currently
// open yet.
expect($("div#controlbox").is(':visible')).toBe(false);
spyOn(this, 'toggleControlBox').andCallThrough();
spyOn(this, 'showControlBox').andCallThrough();
spyOn(this.controlboxtoggle, 'onClick').andCallThrough();
spyOn(this.controlboxtoggle, 'showControlBox').andCallThrough();
// Redelegate so that the spies are now registered as the event handlers (specifically for 'onClick')
this.controlboxtoggle.delegateEvents();
$('.toggle-online-users').click();
expect(this.toggleControlBox).toHaveBeenCalled();
expect(this.showControlBox).toHaveBeenCalled();
expect(this.controlboxtoggle.onClick).toHaveBeenCalled();
expect(this.controlboxtoggle.showControlBox).toHaveBeenCalled();
expect($("div#controlbox").is(':visible')).toBe(true);
}, converse);
it("can be opened by clicking a DOM element with class 'toggle-online-users'", open_controlbox);
......@@ -345,7 +347,7 @@
it("can be added to the roster and they will be sorted alphabetically", $.proxy(function () {
var i, t;
spyOn(this.rosterview, 'render').andCallThrough();
spyOn(this, 'showControlBox').andCallThrough();
spyOn(this.controlboxtoggle, 'showControlBox').andCallThrough();
for (i=0; i<req_names.length; i++) {
this.roster.create({
jid: req_names[i].replace(/ /g,'.').toLowerCase() + '@localhost',
......@@ -360,7 +362,7 @@
expect(t).toEqual(req_names.slice(0,i+1).sort().join(''));
// When a requesting contact is added, the controlbox must
// be opened.
expect(this.showControlBox).toHaveBeenCalled();
expect(this.controlboxtoggle.showControlBox).toHaveBeenCalled();
}
}, converse));
......
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