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.
This commit is contained in:
JC Brand
parent
90a5df87d0
commit
c6f4943ea6
122
converse.js
122
converse.js
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.");
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user