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. 

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
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
#converse-embedded-chat {
#conversejs.converse-embedded {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@ -11,56 +11,56 @@
right: auto;
position: relative;
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;
-moz-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;
top: 30%;
transform: translateY(-50%); }
#converse-embedded-chat .chatroom {
#conversejs.converse-embedded .chatroom {
width: auto; }
#converse-embedded-chat .flyout {
#conversejs.converse-embedded .flyout {
bottom: auto;
display: block;
position: relative; }
#converse-embedded-chat .chatbox {
#conversejs.converse-embedded .chatbox {
float: none; }
#converse-embedded-chat .chatbox .box-flyout {
#conversejs.converse-embedded .chatbox .box-flyout {
box-shadow: none; }
#converse-embedded-chat .chatbox .chat-title {
#conversejs.converse-embedded .chatbox .chat-title {
padding: 0.3em;
font-size: 120%; }
#converse-embedded-chat .chatbox-btn {
#conversejs.converse-embedded .chatbox-btn {
display: none; }
#converse-embedded-chat .chatroom .box-flyout {
#conversejs.converse-embedded .chatroom .box-flyout {
min-width: auto;
width: 100%;
height: 55vh; }
#converse-embedded-chat .chatroom .box-flyout .chat-body {
#conversejs.converse-embedded .chatroom .box-flyout .chat-body {
height: -webkit-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%; }
#converse-embedded-chat .chatroom .box-flyout .chat-content {
#conversejs.converse-embedded .chatroom .box-flyout .chat-content {
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;
font-size: 120%; }
#converse-embedded-chat .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
#conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
padding: 0.5em;
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%;
float: left;
height: 100%;
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%; }
#converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list {
#conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list {
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%; }
/*# sourceMappingURL=converse-muc-embedded.css.map */

34
demo/embedded.html
View File

@ -54,44 +54,18 @@
<script>
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',
auto_login: true,
auto_join_rooms: [
'anonymous@conference.nomnom.im',
],
// Whitelist non-core plugins that we need
whitelisted_plugins: ['converse-muc-embedded'],
// Blacklist plugins which aren't included in the build file,
// 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",
],
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
// allow chatting with other XMPP servers).
notify_all_room_messages: [
'anonymous@conference.nomnom.im',
],
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
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
view_mode: 'embedded',
});
</script>
</html>

31
docs/source/configuration.rst
View File

@ -1417,20 +1417,21 @@ view_mode
---------
* 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.
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:
* ``converse.js`` for the ``overlayed`` 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
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.
``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``
plugins had to be blacklisted.
Since version 3.3.0, the last two builds no longer exist, and instead the
standard ``converse.js`` build is used, together with the appropraite
``view_mode`` value.
When using ``converse-muc-embedded.js`` various plugins also had to manually be
blacklisted.
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::
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 "converse/variables";
#converse-embedded-chat {
#conversejs.converse-embedded {
@include box-sizing(border-box);
*, *:before, *:after {

31
src/converse-core.js
View File

@ -79,6 +79,7 @@
'converse-mam',
'converse-minimize',
'converse-muc',
'converse-muc-embedded',
'converse-notification',
'converse-otr',
'converse-ping',
@ -87,8 +88,8 @@
'converse-roomslist',
'converse-rosterview',
'converse-singleton',
'converse-vcard',
'converse-spoilers'
'converse-spoilers',
'converse-vcard'
];
// Make converse pluggable
@ -1802,6 +1803,21 @@
const whitelist = _converse.core_plugins.concat(
_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({
'updateSettings' () {
_converse.log(
@ -1846,13 +1862,10 @@
i18n.fetchTranslations(
_converse.locale,
_converse.locales,
_.template(_converse.locales_url)({'locale': _converse.locale})
).then(() => {
finishInitialization();
}).catch((reason) => {
finishInitialization();
_converse.log(reason, Strophe.LogLevel.ERROR);
});
_.template(_converse.locales_url)({'locale': _converse.locale}))
.catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL))
.then(finishInitialization)
.catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
}
return init_promise;
};

2
src/converse-fullscreen.js
View File

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

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

@ -11,6 +11,11 @@
const { Backbone, _ } = converse.env;
converse.plugins.add('converse-muc-embedded', {
enabled (_converse) {
return _converse.view_mode === 'embedded';
},
overrides: {
// Overrides mentioned here will be picked up by converse.js's
// plugin architecture they will replace existing methods on the
@ -37,14 +42,10 @@
}
},
ChatRoomView: {
insertIntoDOM () {
if (!document.body.contains(this.el)) {
const container = document.querySelector('#converse-embedded-chat');
container.innerHTML = '';
container.appendChild(this.el);
}
return this;
ChatBoxViews: {
initialize () {
this.__super__.initialize.apply(this, arguments);
this.el.classList.add('converse-embedded');
}
}
},
@ -53,6 +54,13 @@
/* The initialize function gets called as soon as the plugin is
* 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;
if (!_.isArray(_converse.auto_join_rooms)) {
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) {
if (_.includes(['mobile', 'fullscreen'], _converse.view_mode)) {
if (_.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode)) {
const jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
const model = _converse.chatboxes.get(jid);
if (!_.isNil(model)) {

2
src/converse-singleton.js
View File

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