Simplify the boilerplate HTML require even more.
Use id 'conversejs' instead of 'chatpanel'. 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:
parent
90a5df87d0
commit
38c26013d0
@ -4,10 +4,15 @@ Changelog
|
|||||||
0.7.0 (Unreleased)
|
0.7.0 (Unreleased)
|
||||||
------------------
|
------------------
|
||||||
|
|
||||||
|
.. Note ::
|
||||||
|
This release introduces a backward incompatible change. The boilerplate
|
||||||
|
HTML needed in your webpage for converse.js to work has been reduced to a
|
||||||
|
single div: <div id="conversejs"></div>
|
||||||
|
|
||||||
* Add a toolbar for single user chat [jcbrand]
|
* Add a toolbar for single user chat [jcbrand]
|
||||||
* Add support for OTR (off-the-record) encryption [jcbrand]
|
* Add support for OTR (off-the-record) encryption [jcbrand]
|
||||||
* Add support for smileys [jcbrand]
|
* Add support for smileys [jcbrand]
|
||||||
* Simplified initial boilerplate markup [jcbrand]
|
* Simplified boilerplate markup [jcbrand]
|
||||||
* New configuration settings, ``xhr_custom_status_url`` and ``xhr_user_search_url`` [jcbrand]
|
* New configuration settings, ``xhr_custom_status_url`` and ``xhr_user_search_url`` [jcbrand]
|
||||||
|
|
||||||
0.6.6 (2013-10-16)
|
0.6.6 (2013-10-16)
|
||||||
|
12
converse.css
12
converse.css
@ -17,12 +17,12 @@
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatpanel, #chatpanel input {
|
#conversejs, #conversejs input {
|
||||||
color: rgb(79, 79, 79);
|
color: rgb(79, 79, 79);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#chatpanel .emoticon {
|
#conversejs .emoticon {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -54,7 +54,7 @@ span.spinner.hor_centered {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatpanel {
|
#conversejs {
|
||||||
z-index: 99; /*--Keeps the panel on top of all other elements--*/
|
z-index: 99; /*--Keeps the panel on top of all other elements--*/
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0; right: 0;
|
bottom: 0; right: 0;
|
||||||
@ -478,7 +478,7 @@ a.close-chatbox-button:active {
|
|||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatpanel dd.available-chatroom {
|
#conversejs dd.available-chatroom {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -486,7 +486,7 @@ a.close-chatbox-button:active {
|
|||||||
width: 175px;
|
width: 175px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatpanel dd.available-chatroom a.open-room {
|
#conversejs dd.available-chatroom a.open-room {
|
||||||
width: 148px;
|
width: 148px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -613,7 +613,7 @@ dd.available-chatroom:hover a.room-info {
|
|||||||
background-color: #DCEAC5;
|
background-color: #DCEAC5;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatpanel div.controlbox-panes {
|
#conversejs div.controlbox-panes {
|
||||||
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* FF3.6+ */
|
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* FF3.6+ */
|
||||||
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* IE10+ */
|
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* IE10+ */
|
||||||
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Opera 11.10+ */
|
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Opera 11.10+ */
|
||||||
|
110
converse.js
110
converse.js
@ -332,35 +332,6 @@
|
|||||||
this.updateMsgCounter();
|
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.initStatus = function (callback) {
|
||||||
this.xmppstatus = new this.XMPPStatus();
|
this.xmppstatus = new this.XMPPStatus();
|
||||||
var id = hex_sha1('converse.xmppstatus-'+this.bare_jid);
|
var id = hex_sha1('converse.xmppstatus-'+this.bare_jid);
|
||||||
@ -2348,7 +2319,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
this.ChatBoxesView = Backbone.View.extend({
|
this.ChatBoxesView = Backbone.View.extend({
|
||||||
el: '#chatpanel',
|
el: '#conversejs',
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
// boxesviewinit
|
// boxesviewinit
|
||||||
@ -2503,7 +2474,7 @@
|
|||||||
} else if (ask === 'request') {
|
} else if (ask === 'request') {
|
||||||
this.$el.addClass('requesting-xmpp-contact');
|
this.$el.addClass('requesting-xmpp-contact');
|
||||||
this.$el.html(this.request_template(item.toJSON()));
|
this.$el.html(this.request_template(item.toJSON()));
|
||||||
converse.showControlBox();
|
converse.controlboxtoggle.showControlBox();
|
||||||
} else if (subscription === 'both' || subscription === 'to') {
|
} else if (subscription === 'both' || subscription === 'to') {
|
||||||
this.$el.addClass('current-xmpp-contact');
|
this.$el.addClass('current-xmpp-contact');
|
||||||
this.$el.html(this.template(
|
this.$el.html(this.template(
|
||||||
@ -3204,7 +3175,8 @@
|
|||||||
'submit form#converse-login': 'authenticate'
|
'submit form#converse-login': 'authenticate'
|
||||||
},
|
},
|
||||||
tab_template: _.template(
|
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(
|
template: _.template(
|
||||||
'<form id="converse-login">' +
|
'<form id="converse-login">' +
|
||||||
'<label>'+__('XMPP/Jabber Username:')+'</label>' +
|
'<label>'+__('XMPP/Jabber Username:')+'</label>' +
|
||||||
@ -3212,11 +3184,12 @@
|
|||||||
'<label>'+__('Password:')+'</label>' +
|
'<label>'+__('Password:')+'</label>' +
|
||||||
'<input type="password" name="password">' +
|
'<input type="password" name="password">' +
|
||||||
'<input class="login-submit" type="submit" value="'+__('Log In')+'">' +
|
'<input class="login-submit" type="submit" value="'+__('Log In')+'">' +
|
||||||
'</form">'),
|
'</form">'
|
||||||
|
),
|
||||||
bosh_url_input: _.template(
|
bosh_url_input: _.template(
|
||||||
'<label>'+__('BOSH Service URL:')+'</label>' +
|
'<label>'+__('BOSH Service URL:')+'</label>' +
|
||||||
'<input type="text" id="bosh_service_url">'),
|
'<input type="text" id="bosh_service_url">'
|
||||||
|
),
|
||||||
|
|
||||||
connect: function ($form, jid, password) {
|
connect: function ($form, jid, password) {
|
||||||
if ($form) {
|
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 () {
|
||||||
|
$('#conversejs').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
|
// Initialization
|
||||||
// --------------
|
// --------------
|
||||||
|
|
||||||
// This is the end of the initialize method.
|
// This is the end of the initialize method.
|
||||||
this.chatboxes = new this.ChatBoxes();
|
this.chatboxes = new this.ChatBoxes();
|
||||||
this.chatboxesview = new this.ChatBoxesView({model: this.chatboxes});
|
this.chatboxesview = new this.ChatBoxesView({model: this.chatboxes});
|
||||||
$('.toggle-online-users').bind(
|
this.controlboxtoggle = new this.ControlBoxToggle();
|
||||||
'click',
|
|
||||||
$.proxy(function (e) {
|
|
||||||
e.preventDefault(); this.toggleControlBox();
|
|
||||||
}, this)
|
|
||||||
);
|
|
||||||
if ((this.prebind) && (!this.connection)) {
|
if ((this.prebind) && (!this.connection)) {
|
||||||
if ((!this.jid) || (!this.sid) || (!this.rid) || (!this.bosh_service_url)) {
|
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');
|
this.log('If you set prebind=true, you MUST supply JID, RID and SID values');
|
||||||
@ -3305,7 +3329,7 @@
|
|||||||
} else if (this.connection) {
|
} else if (this.connection) {
|
||||||
this.onConnected();
|
this.onConnected();
|
||||||
}
|
}
|
||||||
if (this.show_controlbox_by_default) { this.showControlBox(); }
|
if (this.show_controlbox_by_default) { this.controlboxtoggle.showControlBox(); }
|
||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
'initialize': function (settings, callback) {
|
'initialize': function (settings, callback) {
|
||||||
|
Binary file not shown.
@ -57,14 +57,7 @@ Finally, Converse.js requires a special snippet of HTML markup to be included in
|
|||||||
|
|
||||||
::
|
::
|
||||||
|
|
||||||
<div id="chatpanel">
|
<div id="conversejs"></div>
|
||||||
<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>
|
|
||||||
|
|
||||||
The `index.html <https://github.com/jcbrand/converse.js/blob/master/index.html>`_ file inside the
|
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.
|
Converse.js repository serves as a nice usable example of this.
|
||||||
@ -589,18 +582,64 @@ Default = ``false``
|
|||||||
If set to ``true``, only online users will be shown in the contacts roster.
|
If set to ``true``, only online users will be shown in the contacts roster.
|
||||||
Users with any other status (e.g. away, busy etc.) will not be shown.
|
Users with any other status (e.g. away, busy etc.) will not be shown.
|
||||||
|
|
||||||
|
xhr_custom_status
|
||||||
|
-----------------
|
||||||
|
|
||||||
|
Default = ``false``
|
||||||
|
|
||||||
|
.. Note ::
|
||||||
|
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
||||||
|
|
||||||
|
This option will let converse.js make an AJAX POST with your changed custom chat status to a
|
||||||
|
remote server.
|
||||||
|
|
||||||
|
xhr_custom_status_url
|
||||||
|
---------------------
|
||||||
|
|
||||||
|
.. Note ::
|
||||||
|
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
||||||
|
|
||||||
|
Default = Empty string
|
||||||
|
|
||||||
|
Used only in conjunction with ``xhr_custom_status``.
|
||||||
|
|
||||||
|
This is the URL to which the AJAX POST request to set the user's custom status
|
||||||
|
message will be made.
|
||||||
|
|
||||||
|
The message itself is sent in the request under the key ``msg``.
|
||||||
|
|
||||||
xhr_user_search
|
xhr_user_search
|
||||||
---------------
|
---------------
|
||||||
|
|
||||||
Default = ``false``
|
Default = ``false``
|
||||||
|
|
||||||
|
.. Note ::
|
||||||
|
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
||||||
|
|
||||||
There are two ways to add users.
|
There are two ways to add users.
|
||||||
|
|
||||||
* The user inputs a valid JID (Jabber ID), and the user is added as a pending contact.
|
* The user inputs a valid JID (Jabber ID), and the user is added as a pending contact.
|
||||||
* The user inputs some text (for example part of a firstname or lastname), an XHR will be made to a backend, and a list of matches are returned. The user can then choose one of the matches to add as a contact.
|
* The user inputs some text (for example part of a firstname or lastname), an XHR (Ajax Request) will be made to a remote server, and a list of matches are returned. The user can then choose one of the matches to add as a contact.
|
||||||
|
|
||||||
This setting enables the second mechanism, otherwise by default the first will
|
This setting enables the second mechanism, otherwise by default the first will be used.
|
||||||
be used.
|
|
||||||
|
*What is expected from the remote server?*
|
||||||
|
|
||||||
|
A default JSON encoded list of objects must be returned. Each object
|
||||||
|
corresponds to a matched user and needs the keys ``id`` and ``fullname``.
|
||||||
|
|
||||||
|
xhr_user_search_url
|
||||||
|
-------------------
|
||||||
|
|
||||||
|
.. Note ::
|
||||||
|
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
||||||
|
|
||||||
|
Default = Empty string
|
||||||
|
|
||||||
|
Used only in conjunction with ``xhr_user_search``.
|
||||||
|
|
||||||
|
This is the URL to which an AJAX GET request will be made to fetch user data from your remote server.
|
||||||
|
The query string will be included in the request with ``q`` as its key.
|
||||||
|
|
||||||
============
|
============
|
||||||
Minification
|
Minification
|
||||||
|
@ -108,16 +108,19 @@
|
|||||||
<li><a class="reference internal" href="#prebind" id="id32">prebind</a></li>
|
<li><a class="reference internal" href="#prebind" id="id32">prebind</a></li>
|
||||||
<li><a class="reference internal" href="#show-controlbox-by-default" id="id33">show_controlbox_by_default</a></li>
|
<li><a class="reference internal" href="#show-controlbox-by-default" id="id33">show_controlbox_by_default</a></li>
|
||||||
<li><a class="reference internal" href="#show-only-online-users" id="id34">show_only_online_users</a></li>
|
<li><a class="reference internal" href="#show-only-online-users" id="id34">show_only_online_users</a></li>
|
||||||
<li><a class="reference internal" href="#xhr-user-search" id="id35">xhr_user_search</a></li>
|
<li><a class="reference internal" href="#xhr-custom-status" id="id35">xhr_custom_status</a></li>
|
||||||
|
<li><a class="reference internal" href="#xhr-custom-status-url" id="id36">xhr_custom_status_url</a></li>
|
||||||
|
<li><a class="reference internal" href="#xhr-user-search" id="id37">xhr_user_search</a></li>
|
||||||
|
<li><a class="reference internal" href="#xhr-user-search-url" id="id38">xhr_user_search_url</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a class="reference internal" href="#minification" id="id36">Minification</a><ul>
|
<li><a class="reference internal" href="#minification" id="id39">Minification</a><ul>
|
||||||
<li><a class="reference internal" href="#minifying-javascript-and-css" id="id37">Minifying Javascript and CSS</a></li>
|
<li><a class="reference internal" href="#minifying-javascript-and-css" id="id40">Minifying Javascript and CSS</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a class="reference internal" href="#translations" id="id38">Translations</a></li>
|
<li><a class="reference internal" href="#translations" id="id41">Translations</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="section" id="quickstart-to-get-a-demo-up-and-running">
|
<div class="section" id="quickstart-to-get-a-demo-up-and-running">
|
||||||
@ -152,14 +155,7 @@ bottom of your page (after the closing <em></body></em> element).</p>
|
|||||||
});</pre>
|
});</pre>
|
||||||
</div>
|
</div>
|
||||||
<p>Finally, Converse.js requires a special snippet of HTML markup to be included in your page:</p>
|
<p>Finally, Converse.js requires a special snippet of HTML markup to be included in your page:</p>
|
||||||
<div class="highlight-python"><pre><div id="chatpanel">
|
<div class="highlight-python"><pre><div id="conversejs"></div></pre>
|
||||||
<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></pre>
|
|
||||||
</div>
|
</div>
|
||||||
<p>The <a class="reference external" href="https://github.com/jcbrand/converse.js/blob/master/index.html">index.html</a> file inside the
|
<p>The <a class="reference external" href="https://github.com/jcbrand/converse.js/blob/master/index.html">index.html</a> file inside the
|
||||||
Converse.js repository serves as a nice usable example of this.</p>
|
Converse.js repository serves as a nice usable example of this.</p>
|
||||||
@ -547,23 +543,62 @@ page load.</p>
|
|||||||
<p>If set to <tt class="docutils literal"><span class="pre">true</span></tt>, only online users will be shown in the contacts roster.
|
<p>If set to <tt class="docutils literal"><span class="pre">true</span></tt>, only online users will be shown in the contacts roster.
|
||||||
Users with any other status (e.g. away, busy etc.) will not be shown.</p>
|
Users with any other status (e.g. away, busy etc.) will not be shown.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="section" id="xhr-user-search">
|
<div class="section" id="xhr-custom-status">
|
||||||
<h3><a class="toc-backref" href="#id35">xhr_user_search</a><a class="headerlink" href="#xhr-user-search" title="Permalink to this headline">¶</a></h3>
|
<h3><a class="toc-backref" href="#id35">xhr_custom_status</a><a class="headerlink" href="#xhr-custom-status" title="Permalink to this headline">¶</a></h3>
|
||||||
<p>Default = <tt class="docutils literal"><span class="pre">false</span></tt></p>
|
<p>Default = <tt class="docutils literal"><span class="pre">false</span></tt></p>
|
||||||
|
<div class="admonition note">
|
||||||
|
<p class="first admonition-title">Note</p>
|
||||||
|
<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
|
||||||
|
</div>
|
||||||
|
<p>This option will let converse.js make an AJAX POST with your changed custom chat status to a
|
||||||
|
remote server.</p>
|
||||||
|
</div>
|
||||||
|
<div class="section" id="xhr-custom-status-url">
|
||||||
|
<h3><a class="toc-backref" href="#id36">xhr_custom_status_url</a><a class="headerlink" href="#xhr-custom-status-url" title="Permalink to this headline">¶</a></h3>
|
||||||
|
<div class="admonition note">
|
||||||
|
<p class="first admonition-title">Note</p>
|
||||||
|
<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
|
||||||
|
</div>
|
||||||
|
<p>Default = Empty string</p>
|
||||||
|
<p>Used only in conjunction with <tt class="docutils literal"><span class="pre">xhr_custom_status</span></tt>.</p>
|
||||||
|
<p>This is the URL to which the AJAX POST request to set the user’s custom status
|
||||||
|
message will be made.</p>
|
||||||
|
<p>The message itself is sent in the request under the key <tt class="docutils literal"><span class="pre">msg</span></tt>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="section" id="xhr-user-search">
|
||||||
|
<h3><a class="toc-backref" href="#id37">xhr_user_search</a><a class="headerlink" href="#xhr-user-search" title="Permalink to this headline">¶</a></h3>
|
||||||
|
<p>Default = <tt class="docutils literal"><span class="pre">false</span></tt></p>
|
||||||
|
<div class="admonition note">
|
||||||
|
<p class="first admonition-title">Note</p>
|
||||||
|
<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
|
||||||
|
</div>
|
||||||
<p>There are two ways to add users.</p>
|
<p>There are two ways to add users.</p>
|
||||||
<ul class="simple">
|
<ul class="simple">
|
||||||
<li>The user inputs a valid JID (Jabber ID), and the user is added as a pending contact.</li>
|
<li>The user inputs a valid JID (Jabber ID), and the user is added as a pending contact.</li>
|
||||||
<li>The user inputs some text (for example part of a firstname or lastname), an XHR will be made to a backend, and a list of matches are returned. The user can then choose one of the matches to add as a contact.</li>
|
<li>The user inputs some text (for example part of a firstname or lastname), an XHR (Ajax Request) will be made to a remote server, and a list of matches are returned. The user can then choose one of the matches to add as a contact.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>This setting enables the second mechanism, otherwise by default the first will
|
<p>This setting enables the second mechanism, otherwise by default the first will be used.</p>
|
||||||
be used.</p>
|
<p><em>What is expected from the remote server?</em></p>
|
||||||
|
<p>A default JSON encoded list of objects must be returned. Each object
|
||||||
|
corresponds to a matched user and needs the keys <tt class="docutils literal"><span class="pre">id</span></tt> and <tt class="docutils literal"><span class="pre">fullname</span></tt>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="section" id="xhr-user-search-url">
|
||||||
|
<h3><a class="toc-backref" href="#id38">xhr_user_search_url</a><a class="headerlink" href="#xhr-user-search-url" title="Permalink to this headline">¶</a></h3>
|
||||||
|
<div class="admonition note">
|
||||||
|
<p class="first admonition-title">Note</p>
|
||||||
|
<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
|
||||||
|
</div>
|
||||||
|
<p>Default = Empty string</p>
|
||||||
|
<p>Used only in conjunction with <tt class="docutils literal"><span class="pre">xhr_user_search</span></tt>.</p>
|
||||||
|
<p>This is the URL to which an AJAX GET request will be made to fetch user data from your remote server.
|
||||||
|
The query string will be included in the request with <tt class="docutils literal"><span class="pre">q</span></tt> as its key.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="section" id="minification">
|
<div class="section" id="minification">
|
||||||
<h1><a class="toc-backref" href="#id36">Minification</a><a class="headerlink" href="#minification" title="Permalink to this headline">¶</a></h1>
|
<h1><a class="toc-backref" href="#id39">Minification</a><a class="headerlink" href="#minification" title="Permalink to this headline">¶</a></h1>
|
||||||
<div class="section" id="minifying-javascript-and-css">
|
<div class="section" id="minifying-javascript-and-css">
|
||||||
<h2><a class="toc-backref" href="#id37">Minifying Javascript and CSS</a><a class="headerlink" href="#minifying-javascript-and-css" title="Permalink to this headline">¶</a></h2>
|
<h2><a class="toc-backref" href="#id40">Minifying Javascript and CSS</a><a class="headerlink" href="#minifying-javascript-and-css" title="Permalink to this headline">¶</a></h2>
|
||||||
<p>Please make sure to read the section <a class="reference internal" href="#development">Development</a> and that you have installed
|
<p>Please make sure to read the section <a class="reference internal" href="#development">Development</a> and that you have installed
|
||||||
all development dependencies (long story short, you can run <tt class="docutils literal"><span class="pre">npm</span> <span class="pre">install</span></tt>
|
all development dependencies (long story short, you can run <tt class="docutils literal"><span class="pre">npm</span> <span class="pre">install</span></tt>
|
||||||
and then <tt class="docutils literal"><span class="pre">grunt</span> <span class="pre">fetch</span></tt>).</p>
|
and then <tt class="docutils literal"><span class="pre">grunt</span> <span class="pre">fetch</span></tt>).</p>
|
||||||
@ -580,7 +615,7 @@ using <a class="reference external" href="https://github.com/jrburke/almond">alm
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="section" id="translations">
|
<div class="section" id="translations">
|
||||||
<h1><a class="toc-backref" href="#id38">Translations</a><a class="headerlink" href="#translations" title="Permalink to this headline">¶</a></h1>
|
<h1><a class="toc-backref" href="#id41">Translations</a><a class="headerlink" href="#translations" title="Permalink to this headline">¶</a></h1>
|
||||||
<div class="admonition note">
|
<div class="admonition note">
|
||||||
<p class="first admonition-title">Note</p>
|
<p class="first admonition-title">Note</p>
|
||||||
<p class="last">Translations take up a lot of space and will bloat your minified file.
|
<p class="last">Translations take up a lot of space and will bloat your minified file.
|
||||||
|
File diff suppressed because one or more lines are too long
@ -57,14 +57,7 @@ Finally, Converse.js requires a special snippet of HTML markup to be included in
|
|||||||
|
|
||||||
::
|
::
|
||||||
|
|
||||||
<div id="chatpanel">
|
<div id="conversejs"></div>
|
||||||
<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>
|
|
||||||
|
|
||||||
The `index.html <https://github.com/jcbrand/converse.js/blob/master/index.html>`_ file inside the
|
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.
|
Converse.js repository serves as a nice usable example of this.
|
||||||
@ -594,7 +587,7 @@ xhr_custom_status
|
|||||||
|
|
||||||
Default = ``false``
|
Default = ``false``
|
||||||
|
|
||||||
Note::
|
.. Note ::
|
||||||
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
||||||
|
|
||||||
This option will let converse.js make an AJAX POST with your changed custom chat status to a
|
This option will let converse.js make an AJAX POST with your changed custom chat status to a
|
||||||
@ -603,7 +596,7 @@ remote server.
|
|||||||
xhr_custom_status_url
|
xhr_custom_status_url
|
||||||
---------------------
|
---------------------
|
||||||
|
|
||||||
Note::
|
.. Note ::
|
||||||
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
||||||
|
|
||||||
Default = Empty string
|
Default = Empty string
|
||||||
@ -620,7 +613,7 @@ xhr_user_search
|
|||||||
|
|
||||||
Default = ``false``
|
Default = ``false``
|
||||||
|
|
||||||
Note::
|
.. Note ::
|
||||||
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
||||||
|
|
||||||
There are two ways to add users.
|
There are two ways to add users.
|
||||||
@ -638,7 +631,7 @@ corresponds to a matched user and needs the keys ``id`` and ``fullname``.
|
|||||||
xhr_user_search_url
|
xhr_user_search_url
|
||||||
-------------------
|
-------------------
|
||||||
|
|
||||||
Note::
|
.. Note ::
|
||||||
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).
|
||||||
|
|
||||||
Default = Empty string
|
Default = Empty string
|
||||||
|
@ -178,11 +178,7 @@
|
|||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="chatpanel">
|
<div id="conversejs"></div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="chatpanel" style="width: 100%;">
|
<div id="conversejs" style="width: 100%;">
|
||||||
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
|
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
|
||||||
<div class="chat-head oc-chat-head">
|
<div class="chat-head oc-chat-head">
|
||||||
<ul id="controlbox-tabs">
|
<ul id="controlbox-tabs">
|
||||||
|
@ -163,7 +163,7 @@
|
|||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="chatpanel">
|
<div id="conversejs">
|
||||||
<div id="collective-xmpp-chat-data"></div>
|
<div id="collective-xmpp-chat-data"></div>
|
||||||
<div id="toggle-controlbox">
|
<div id="toggle-controlbox">
|
||||||
<a href="#" class="chat toggle-online-users">
|
<a href="#" class="chat toggle-online-users">
|
||||||
|
@ -46,11 +46,13 @@
|
|||||||
// This spec will only pass if the controlbox is not currently
|
// This spec will only pass if the controlbox is not currently
|
||||||
// open yet.
|
// open yet.
|
||||||
expect($("div#controlbox").is(':visible')).toBe(false);
|
expect($("div#controlbox").is(':visible')).toBe(false);
|
||||||
spyOn(this, 'toggleControlBox').andCallThrough();
|
spyOn(this.controlboxtoggle, 'onClick').andCallThrough();
|
||||||
spyOn(this, 'showControlBox').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();
|
$('.toggle-online-users').click();
|
||||||
expect(this.toggleControlBox).toHaveBeenCalled();
|
expect(this.controlboxtoggle.onClick).toHaveBeenCalled();
|
||||||
expect(this.showControlBox).toHaveBeenCalled();
|
expect(this.controlboxtoggle.showControlBox).toHaveBeenCalled();
|
||||||
expect($("div#controlbox").is(':visible')).toBe(true);
|
expect($("div#controlbox").is(':visible')).toBe(true);
|
||||||
}, converse);
|
}, converse);
|
||||||
it("can be opened by clicking a DOM element with class 'toggle-online-users'", open_controlbox);
|
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 () {
|
it("can be added to the roster and they will be sorted alphabetically", $.proxy(function () {
|
||||||
var i, t;
|
var i, t;
|
||||||
spyOn(this.rosterview, 'render').andCallThrough();
|
spyOn(this.rosterview, 'render').andCallThrough();
|
||||||
spyOn(this, 'showControlBox').andCallThrough();
|
spyOn(this.controlboxtoggle, 'showControlBox').andCallThrough();
|
||||||
for (i=0; i<req_names.length; i++) {
|
for (i=0; i<req_names.length; i++) {
|
||||||
this.roster.create({
|
this.roster.create({
|
||||||
jid: req_names[i].replace(/ /g,'.').toLowerCase() + '@localhost',
|
jid: req_names[i].replace(/ /g,'.').toLowerCase() + '@localhost',
|
||||||
@ -360,7 +362,7 @@
|
|||||||
expect(t).toEqual(req_names.slice(0,i+1).sort().join(''));
|
expect(t).toEqual(req_names.slice(0,i+1).sort().join(''));
|
||||||
// When a requesting contact is added, the controlbox must
|
// When a requesting contact is added, the controlbox must
|
||||||
// be opened.
|
// be opened.
|
||||||
expect(this.showControlBox).toHaveBeenCalled();
|
expect(this.controlboxtoggle.showControlBox).toHaveBeenCalled();
|
||||||
}
|
}
|
||||||
}, converse));
|
}, converse));
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="chatpanel">
|
<div id="conversejs">
|
||||||
<div id="collective-xmpp-chat-data"></div>
|
<div id="collective-xmpp-chat-data"></div>
|
||||||
<div id="toggle-controlbox">
|
<div id="toggle-controlbox">
|
||||||
<a href="#" class="chat toggle-online-users">
|
<a href="#" class="chat toggle-online-users">
|
||||||
|
Loading…
Reference in New Issue
Block a user