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:
parent
56aa45b1d3
commit
2d746d2a1e
@ -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 */
|
||||
|
@ -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",
|
||||
],
|
||||
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
|
||||
notify_all_room_messages: [
|
||||
'anonymous@conference.nomnom.im',
|
||||
],
|
||||
view_mode: 'embedded',
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
@ -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
|
||||
|
@ -1,6 +1,6 @@
|
||||
@import "bourbon";
|
||||
@import "converse/variables";
|
||||
#converse-embedded-chat {
|
||||
#conversejs.converse-embedded {
|
||||
|
||||
@include box-sizing(border-box);
|
||||
*, *:before, *:after {
|
||||
|
@ -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;
|
||||
};
|
||||
|
@ -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: {
|
||||
|
@ -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");
|
||||
|
@ -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)) {
|
||||
|
@ -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: {
|
||||
|
Loading…
Reference in New Issue
Block a user