From 2d746d2a1ea7d2e642bf2015e9e488cd9997fb0e Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 9 Feb 2018 16:33:48 +0100 Subject: [PATCH] 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. --- css/converse-muc-embedded.css | 38 +++++++++++++++++------------------ demo/embedded.html | 34 ++++--------------------------- docs/source/configuration.rst | 31 ++++++++++++++++++++-------- sass/_muc_embedded.scss | 2 +- src/converse-core.js | 31 +++++++++++++++++++--------- src/converse-fullscreen.js | 2 +- src/converse-muc-embedded.js | 24 ++++++++++++++-------- src/converse-notification.js | 2 +- src/converse-singleton.js | 2 +- 9 files changed, 88 insertions(+), 78 deletions(-) diff --git a/css/converse-muc-embedded.css b/css/converse-muc-embedded.css index 9f522ab11..0e2723b50 100644 --- a/css/converse-muc-embedded.css +++ b/css/converse-muc-embedded.css @@ -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 */ diff --git a/demo/embedded.html b/demo/embedded.html index c819103bd..58b094cd9 100644 --- a/demo/embedded.html +++ b/demo/embedded.html @@ -54,44 +54,18 @@ diff --git a/docs/source/configuration.rst b/docs/source/configuration.rst index aeb1fbce0..c37d27ec9 100644 --- a/docs/source/configuration.rst +++ b/docs/source/configuration.rst @@ -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 diff --git a/sass/_muc_embedded.scss b/sass/_muc_embedded.scss index ae980d752..9023c99f0 100644 --- a/sass/_muc_embedded.scss +++ b/sass/_muc_embedded.scss @@ -1,6 +1,6 @@ @import "bourbon"; @import "converse/variables"; -#converse-embedded-chat { +#conversejs.converse-embedded { @include box-sizing(border-box); *, *:before, *:after { diff --git a/src/converse-core.js b/src/converse-core.js index 3b4764aff..37cdba557 100644 --- a/src/converse-core.js +++ b/src/converse-core.js @@ -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; }; diff --git a/src/converse-fullscreen.js b/src/converse-fullscreen.js index f964f2a93..624468be5 100644 --- a/src/converse-fullscreen.js +++ b/src/converse-fullscreen.js @@ -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: { diff --git a/src/converse-muc-embedded.js b/src/converse-muc-embedded.js index 234298ef9..f7775d788 100644 --- a/src/converse-muc-embedded.js +++ b/src/converse-muc-embedded.js @@ -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"); diff --git a/src/converse-notification.js b/src/converse-notification.js index 16e397213..5af51c237 100644 --- a/src/converse-notification.js +++ b/src/converse-notification.js @@ -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)) { diff --git a/src/converse-singleton.js b/src/converse-singleton.js index d74d0a5a1..18d0bbc62 100644 --- a/src/converse-singleton.js +++ b/src/converse-singleton.js @@ -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: {