Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Make converse-muc-embedded a core plugin.

Browse Source 
1. Add a new `view_mode` value: `embedded`.

   This value is used to determine wether the `converse-muc-embedded`
   plugin is active or not.

2. Remove the need for the #converse-embedded-chat element.

   Instead we reuse the #conversejs element and embed inside that.

3. Removed the need to manually blacklist core plugins

   This is now done automatically if `view_mode` is set to `embedded`.
   Perhaps eventually we don't blacklist at all and instead use the
   `enable` plugin method. For some that probably won't work, like
   `converse-chatview`, which we still need to be active.
This commit is contained in:
JC Brand 2018-02-09 16:33:48 +01:00
parent 56aa45b1d3
commit 2d746d2a1e
9 changed files with 88 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
css/converse-muc-embedded.css
View File

@ -3,7 +3,7 @@
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51 https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/ */
#converse-embedded-chat { #conversejs.converse-embedded {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
@ -11,56 +11,56 @@
right: auto; right: auto;
position: relative; position: relative;
width: 100%; } width: 100%; }
#converse-embedded-chat *, #converse-embedded-chat *:before, #converse-embedded-chat *:after { #conversejs.converse-embedded *, #conversejs.converse-embedded *:before, #conversejs.converse-embedded *:after {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
#converse-embedded-chat form.pure-form.converse-centered-form { #conversejs.converse-embedded form.pure-form.converse-centered-form {
position: absolute; position: absolute;
top: 30%; top: 30%;
transform: translateY(-50%); } transform: translateY(-50%); }
#converse-embedded-chat .chatroom { #conversejs.converse-embedded .chatroom {
width: auto; } width: auto; }
#converse-embedded-chat .flyout { #conversejs.converse-embedded .flyout {
bottom: auto; bottom: auto;
display: block; display: block;
position: relative; } position: relative; }
#converse-embedded-chat .chatbox { #conversejs.converse-embedded .chatbox {
float: none; } float: none; }
#converse-embedded-chat .chatbox .box-flyout { #conversejs.converse-embedded .chatbox .box-flyout {
box-shadow: none; } box-shadow: none; }
#converse-embedded-chat .chatbox .chat-title { #conversejs.converse-embedded .chatbox .chat-title {
padding: 0.3em; padding: 0.3em;
font-size: 120%; } font-size: 120%; }
#converse-embedded-chat .chatbox-btn { #conversejs.converse-embedded .chatbox-btn {
display: none; } display: none; }
#converse-embedded-chat .chatroom .box-flyout { #conversejs.converse-embedded .chatroom .box-flyout {
min-width: auto; min-width: auto;
width: 100%; width: 100%;
height: 55vh; } height: 55vh; }
#converse-embedded-chat .chatroom .box-flyout .chat-body { #conversejs.converse-embedded .chatroom .box-flyout .chat-body {
height: -webkit-calc(100% - 55px); height: -webkit-calc(100% - 55px);
height: calc(100% - 55px); } height: calc(100% - 55px); }
#converse-embedded-chat .chatroom .box-flyout .occupants-heading { #conversejs.converse-embedded .chatroom .box-flyout .occupants-heading {
font-size: 120%; } font-size: 120%; }
#converse-embedded-chat .chatroom .box-flyout .chat-content { #conversejs.converse-embedded .chatroom .box-flyout .chat-content {
height: calc(100% - 97px); } height: calc(100% - 97px); }
#converse-embedded-chat .chatroom .box-flyout .chat-content .chat-message { #conversejs.converse-embedded .chatroom .box-flyout .chat-content .chat-message {
margin: 0.5em; margin: 0.5em;
font-size: 120%; } font-size: 120%; }
#converse-embedded-chat .chatroom .box-flyout .sendXMPPMessage .chat-textarea { #conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
padding: 0.5em; padding: 0.5em;
font-size: 110%; } font-size: 110%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container { #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
font-size: 180%; font-size: 180%;
float: left; float: left;
height: 100%; height: 100%;
position: relative; } position: relative; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input { #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input {
font-size: 60%; } font-size: 60%; }
#converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list { #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list {
padding-left: 0.3em; } padding-left: 0.3em; }
#converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list li.occupant { #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list li.occupant {
font-size: 120%; } font-size: 120%; }
/*# sourceMappingURL=converse-muc-embedded.css.map */ /*# sourceMappingURL=converse-muc-embedded.css.map */

34
demo/embedded.html
View File

@ -54,44 +54,18 @@
<script> <script>
converse.initialize({ converse.initialize({
allow_logout: false, // No point in logging out when we have auto_login as true.
allow_muc_invitations: false, // Doesn't make sense to allow because only
// roster contacts can be invited
allow_contact_requests: false, // Contacts from other servers cannot,
// be added and anonymous users don't
// know one another's JIDs, so disabling.
auto_reconnect: true,
authentication: 'anonymous', authentication: 'anonymous',
auto_login: true, auto_login: true,
auto_join_rooms: [ auto_join_rooms: [
'anonymous@conference.nomnom.im', 'anonymous@conference.nomnom.im',
], ],
// Whitelist non-core plugins that we need bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
whitelisted_plugins: ['converse-muc-embedded'], jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
// Blacklist plugins which aren't included in the build file, // allow chatting with other XMPP servers).
// so that other code cannot register their own plugins under
// those names.
blacklisted_plugins: [
"converse-bookmarks",
"converse-controlbox",
"converse-dragresize",
"converse-headline",
"converse-minimize",
"converse-otr",
"converse-register",
"converse-vcard",
],
notify_all_room_messages: [ notify_all_room_messages: [
'anonymous@conference.nomnom.im', 'anonymous@conference.nomnom.im',
], ],
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes view_mode: 'embedded',
jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
// allow chatting with other XMPP servers).
keepalive: true,
hide_muc_server: true, // Federation is disabled, so no use in
// showing the MUC server.
play_sounds: true,
strict_plugin_dependencies: false
}); });
</script> </script>
</html> </html>

31
docs/source/configuration.rst
View File

@ -1417,20 +1417,21 @@ view_mode
--------- ---------
* Default: ``overlayed`` * Default: ``overlayed``
* Allowed values: ``overlayed``, ``fullscreen``, ``mobile`` * Allowed values: ``overlayed``, ``fullscreen``, ``mobile``, ``embedded``
The ``view_mode`` setting configures converse.js's mode and resulting behavior. The ``view_mode`` setting configures converse.js's mode and resulting behavior.
Before the introduction of this setting (in version 3.3.0), there were there Before the introduction of this setting (in version 3.3.0), there were there
different builds, each for the diffent modes. different builds, each for the different modes.
These were: These were:
* ``converse.js`` for the ``overlayed`` mode
* ``converse-mobile.js`` for the ``mobile`` mode * ``converse-mobile.js`` for the ``mobile`` mode
* ``converse-muc-embedded.js`` for embedding a single MUC room into the page.
* ``converse.js`` for the ``overlayed`` mode
* ``inverse.js`` for the ``fullscreen`` mode * ``inverse.js`` for the ``fullscreen`` mode
Besides having three different builds, certain plugins had to be whitelisted Besides having different builds, certain plugins had to be whitelisted
and blacklisted for the different modes. and blacklisted for the different modes.
``converse-singleton`` had to be whitelisted for the ``mobile`` and ``fullscreen`` ``converse-singleton`` had to be whitelisted for the ``mobile`` and ``fullscreen``
@ -1440,11 +1441,25 @@ modes, additionally ``converse-inverse`` had to be whitelisted for the
For both those modes the ``converse-minimize`` and ``converse-dragresize`` For both those modes the ``converse-minimize`` and ``converse-dragresize``
plugins had to be blacklisted. plugins had to be blacklisted.
Since version 3.3.0, the last two builds no longer exist, and instead the When using ``converse-muc-embedded.js`` various plugins also had to manually be
standard ``converse.js`` build is used, together with the appropraite blacklisted.
``view_mode`` value.
Furthermore, it's no longer necessary to whitelist or blacklist any plugins. Since version 3.3.0 it's no longer necessary to blacklist any plugins (except
for ``converse-muc-embedded.js``, which is from version 3.3.3).
Blacklisting now happens automatically.
Since version 3.3.0, the ``inverse.js`` and ``converse-mobile.js`` builds no
longer exist. Instead the standard ``converse.js`` build is used, together with
the appropriate ``view_mode`` value.
The ``converse-muc-embedded.js`` build is still kept, because it's smaller than
``converse.js`` due to unused code being removed. It doesn't however contain
any new code, so the full ``converse.js`` build could be used instead, as long
as ``view_mode`` is set to ``embedded``.
Furthermore, it's no longer necessary to whitelist or blacklist any plugins
when switching view modes.
.. note:: .. note::
Although the ``view_mode`` setting has removed the need for different Although the ``view_mode`` setting has removed the need for different

2
sass/_muc_embedded.scss
View File

@ -1,6 +1,6 @@
@import "bourbon"; @import "bourbon";
@import "converse/variables"; @import "converse/variables";
#converse-embedded-chat { #conversejs.converse-embedded {
@include box-sizing(border-box); @include box-sizing(border-box);
*, *:before, *:after { *, *:before, *:after {

31
src/converse-core.js
View File

@ -79,6 +79,7 @@
'converse-mam', 'converse-mam',
'converse-minimize', 'converse-minimize',
'converse-muc', 'converse-muc',
'converse-muc-embedded',
'converse-notification', 'converse-notification',
'converse-otr', 'converse-otr',
'converse-ping', 'converse-ping',
@ -87,8 +88,8 @@
'converse-roomslist', 'converse-roomslist',
'converse-rosterview', 'converse-rosterview',
'converse-singleton', 'converse-singleton',
'converse-vcard', 'converse-spoilers',
'converse-spoilers' 'converse-vcard'
]; ];
// Make converse pluggable // Make converse pluggable
@ -1802,6 +1803,21 @@
const whitelist = _converse.core_plugins.concat( const whitelist = _converse.core_plugins.concat(
_converse.whitelisted_plugins); _converse.whitelisted_plugins);
if (_converse.view_mode === 'embedded') {
_.forEach([ // eslint-disable-line lodash/prefer-map
"converse-bookmarks",
"converse-controlbox",
"converse-dragresize",
"converse-headline",
"converse-minimize",
"converse-otr",
"converse-register",
"converse-vcard",
], (name) => {
_converse.blacklisted_plugins.push(name)
});
}
_converse.pluggable.initializePlugins({ _converse.pluggable.initializePlugins({
'updateSettings' () { 'updateSettings' () {
_converse.log( _converse.log(
@ -1846,13 +1862,10 @@
i18n.fetchTranslations( i18n.fetchTranslations(
_converse.locale, _converse.locale,
_converse.locales, _converse.locales,
_.template(_converse.locales_url)({'locale': _converse.locale}) _.template(_converse.locales_url)({'locale': _converse.locale}))
).then(() => { .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL))
finishInitialization(); .then(finishInitialization)
}).catch((reason) => { .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
finishInitialization();
_converse.log(reason, Strophe.LogLevel.ERROR);
});
} }
return init_promise; return init_promise;
}; };

2
src/converse-fullscreen.js
View File

@ -21,7 +21,7 @@
converse.plugins.add('converse-fullscreen', { converse.plugins.add('converse-fullscreen', {
enabled (_converse) { enabled (_converse) {
return _.includes(['mobile', 'fullscreen'], _converse.view_mode); return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode);
}, },
overrides: { overrides: {

24
src/converse-muc-embedded.js
View File

@ -11,6 +11,11 @@
const { Backbone, _ } = converse.env; const { Backbone, _ } = converse.env;
converse.plugins.add('converse-muc-embedded', { converse.plugins.add('converse-muc-embedded', {
enabled (_converse) {
return _converse.view_mode === 'embedded';
},
overrides: { overrides: {
// Overrides mentioned here will be picked up by converse.js's // Overrides mentioned here will be picked up by converse.js's
// plugin architecture they will replace existing methods on the // plugin architecture they will replace existing methods on the
@ -37,14 +42,10 @@
} }
}, },
ChatRoomView: { ChatBoxViews: {
insertIntoDOM () { initialize () {
if (!document.body.contains(this.el)) { this.__super__.initialize.apply(this, arguments);
const container = document.querySelector('#converse-embedded-chat'); this.el.classList.add('converse-embedded');
container.innerHTML = '';
container.appendChild(this.el);
}
return this;
} }
} }
}, },
@ -53,6 +54,13 @@
/* The initialize function gets called as soon as the plugin is /* The initialize function gets called as soon as the plugin is
* loaded by converse.js's plugin machinery. * loaded by converse.js's plugin machinery.
*/ */
this._converse.api.settings.update({
'allow_logout': false, // No point in logging out when we have auto_login as true.
'allow_muc_invitations': false, // Doesn't make sense to allow because only
// roster contacts can be invited
'hide_muc_server': true, // Federation is disabled, so no use in
// showing the MUC server.
});
const { _converse } = this; const { _converse } = this;
if (!_.isArray(_converse.auto_join_rooms)) { if (!_.isArray(_converse.auto_join_rooms)) {
throw new Error("converse-muc-embedded: auto_join_rooms must be an Array"); throw new Error("converse-muc-embedded: auto_join_rooms must be an Array");

2
src/converse-notification.js
View File

@ -71,7 +71,7 @@
}; };
_converse.isMessageToHiddenChat = function (message) { _converse.isMessageToHiddenChat = function (message) {
if (_.includes(['mobile', 'fullscreen'], _converse.view_mode)) { if (_.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode)) {
const jid = Strophe.getBareJidFromJid(message.getAttribute('from')); const jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
const model = _converse.chatboxes.get(jid); const model = _converse.chatboxes.get(jid);
if (!_.isNil(model)) { if (!_.isNil(model)) {

2
src/converse-singleton.js
View File

@ -40,7 +40,7 @@
dependencies: ['converse-muc', 'converse-controlbox', 'converse-rosterview'], dependencies: ['converse-muc', 'converse-controlbox', 'converse-rosterview'],
enabled (_converse) { enabled (_converse) {
return _.includes(['mobile', 'fullscreen'], _converse.view_mode); return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode);
}, },
overrides: { overrides: {