More work on combining the inverse/converse builds

- Use `enabled` method for plugins
- Rename `converse-inverse.js` to `converse-fullscreen.js` and make it a
  core plugin.
- We're no longer making separate mobile and inverse builds

No longer a need to whitelist/blacklist plugins for inverse to work.

CHANGES.md

@@ -17,6 +17,10 @@
   and private chats with a URL fragment such as `#converse/chat?jid=user@domain`
 - #828 Add routing for the `#converse/login` and `#converse/register` URL
   fragments, which will render the registration and login forms respectively.
+- New configuration setting [view_mode](https://conversejs.org/docs/html/configurations.html#view-mode)
+  This removes the need for separate `inverse.js` and `converse-mobile.js`
+  builds. Instead the `converse.js` build is now used with `view_mode` set to
+  `fullscreen` and `mobile` respectively.
 
 ### UX/UI changes
 - Use CSS3 fade transitions to render various elements.

Makefile

@@ -160,10 +160,6 @@ BUILDS = dist/converse.js \
 		 dist/converse.min.js \
 		 dist/converse-esnext.js \
 		 dist/converse-esnext.min.js \
-		 dist/inverse.js \
-		 dist/inverse.min.js \
-		 dist/converse-mobile.js \
-		 dist/converse-mobile.min.js \
 		 dist/converse-muc-embedded.js \
 		 dist/converse-muc-embedded.min.js \
 		 dist/converse-no-jquery.js \
@@ -179,10 +175,6 @@ dist/converse-esnext.js: src node_modules *.js
 	$(RJS) -o src/build-esnext.js include=converse out=dist/converse-esnext.js optimize=none 
 dist/converse-esnext.min.js: src node_modules *.js
 	$(RJS) -o src/build-esnext.js include=converse out=dist/converse-esnext.min.js
-dist/inverse.js: transpile src node_modules *.js
-	$(RJS) -o src/build-inverse.js include=inverse out=dist/inverse.js optimize=none 
-dist/inverse.min.js: transpile src node_modules *.js
-	$(RJS) -o src/build-inverse.js include=inverse out=dist/inverse.min.js
 dist/converse-no-jquery.js: transpile src node_modules *.js
 	$(RJS) -o src/build.js include=converse wrap.endFile=end-no-jquery.frag exclude=jquery exclude=jquery.noconflict out=dist/converse-no-jquery.js optimize=none 
 dist/converse-no-jquery.min.js: transpile src node_modules *.js transpile
@@ -191,10 +183,6 @@ dist/converse-no-dependencies.js: transpile src node_modules *.js
 	$(RJS) -o src/build-no-dependencies.js optimize=none out=dist/converse-no-dependencies.js
 dist/converse-no-dependencies.min.js: transpile src node_modules *.js
 	$(RJS) -o src/build-no-dependencies.js out=dist/converse-no-dependencies.min.js
-dist/converse-mobile.js: transpile src node_modules *.js
-	$(RJS) -o src/build.js paths.converse=src/converse-mobile include=converse out=dist/converse-mobile.js optimize=none 
-dist/converse-mobile.min.js: transpile src node_modules *.js
-	$(RJS) -o src/build.js paths.converse=src/converse-mobile include=converse out=dist/converse-mobile.min.js
 dist/converse-muc-embedded.js: transpile src node_modules *.js
 	$(RJS) -o src/build.js paths.converse=src/converse-embedded include=converse out=dist/converse-muc-embedded.js optimize=none 
 dist/converse-muc-embedded.min.js: transpile src node_modules *.js

docs/source/configuration.rst

@@ -339,6 +339,60 @@ For example::
 
     `[{'jid': 'room@example.org', 'nick': 'WizardKing69' }]`
 
+
+blacklisted_plugins
+-------------------
+
+* Default: ``[]`` (``['converse-minimize', 'converse-dragresize']`` for inVerse)
+
+A list of plugin names that are blacklisted and will therefore not be
+initialized once ``converse.initialize`` is called, even if the same plugin is
+whitelisted.
+
+From Converse.js 3.0 onwards most of the API is available only to plugins and
+all plugins need to be whitelisted first.
+
+The usecase for blacklisting is generally to disable removed core plugins
+(which are automatically whitelisted) to prevent other (potentially malicious)
+plugins from registering themselves under those names.
+
+The core, and by default whitelisted, plugins are::
+
+    converse-bookmarks
+    converse-chatview
+    converse-controlbox
+    converse-core
+    converse-dragresize
+    converse-headline
+    converse-mam
+    converse-minimize
+    converse-muc
+    converse-notification
+    converse-otr
+    converse-ping
+    converse-register
+    converse-rosterview
+    converse-vcard
+
+An example from `the embedded room demo <https://conversejs.org/demo/embedded.html>`_
+
+.. code-block:: javascript
+
+    require(['converse-core', 'converse-muc-embedded'], function (converse) {
+        converse.initialize({
+            // other settings removed for brevity
+            blacklisted_plugins: [
+                'converse-controlbox',
+                'converse-dragresize',
+                'converse-minimize',
+                'converse-vcard'
+            ],
+        });
+    });
+
+
+
+
 .. _`bosh-service-url`:
 
 bosh_service_url
@@ -1296,55 +1350,51 @@ support.
 .. note::
     Converse.js does not yet support "keepalive" with websockets.
 
-blacklisted_plugins
--------------------
 
-* Default: ``[]`` (``['converse-minimize', 'converse-dragresize']`` for inVerse)
+view_mode
+---------
 
-A list of plugin names that are blacklisted and will therefore not be
-initialized once ``converse.initialize`` is called, even if the same plugin is
-whitelisted.
+* Default: ``overlayed``
+* Allowed values: ``overlayed``, ``fullscreen``, ``mobile``
 
-From Converse.js 3.0 onwards most of the API is available only to plugins and
-all plugins need to be whitelisted first.
+The ``view_mode`` setting configures converse.js's mode and resulting behavior.
 
-The usecase for blacklisting is generally to disable removed core plugins
-(which are automatically whitelisted) to prevent other (potentially malicious)
-plugins from registering themselves under those names.
+Before the introduction of this setting (in version 3.3.0), there were there
+different builds, each for the diffent modes.
 
-The core, and by default whitelisted, plugins are::
+These were:
 
-    converse-bookmarks
-    converse-chatview
-    converse-controlbox
-    converse-core
-    converse-dragresize
-    converse-headline
-    converse-mam
-    converse-minimize
-    converse-muc
-    converse-notification
-    converse-otr
-    converse-ping
-    converse-register
-    converse-rosterview
-    converse-vcard
+* ``converse.js`` for the ``overlayed`` mode
+* ``converse-mobile.js`` for the ``mobile`` mode
+* ``inverse.js`` for the ``fullscreen`` mode
 
-An example from `the embedded room demo <https://conversejs.org/demo/embedded.html>`_
+Besides having three different builds, certain plugins had to be whitelisted
+and blacklisted for the different modes.
 
-.. code-block:: javascript
+``converse-singleton`` had to be whitelisted for the ``mobile`` and ``fullscreen``
+modes, additionally ``converse-inverse`` had to be whitelisted for the
+``fullscreen`` mode.
 
-    require(['converse-core', 'converse-muc-embedded'], function (converse) {
-        converse.initialize({
-            // other settings removed for brevity
-            blacklisted_plugins: [
-                'converse-controlbox',
-                'converse-dragresize',
-                'converse-minimize',
-                'converse-vcard'
-            ],
-        });
-    });
+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.
+
+Furthermore, it's no longer necessary to whitelist or blacklist any plugins.
+
+.. note::
+    Although the ``view_mode`` setting has removed the need for different
+    JavaScript builds, you'll still need to use different CSS files depending
+    on the view mode.
+
+    * For ``overlayed`` this is ``./css/converse.css``
+    * For ``fullscreen`` you need ``./css/inverse.css``
+    * For ``mobile`` you need to use both ``./css/converse.css`` and ``./css/mobile.css``
+
+    Hopefully in a future release the CSS files will be combined and you'll
+    only need ``converse.css``
 
 
 .. _`whitelisted_plugins`:

inverse.html

@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>inVerse</title>
     <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/inverse.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="css/inverse.min.css" />
     <script type="text/javascript" src="inverse-analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=5" style="border:0;" alt="" /></p></noscript>
-    <script src="https://cdn.conversejs.org/3.2.1/dist/inverse.min.js"></script>
+    <script src="dist/converse.js"></script>
 </head>
 <body>
     <div class="content">
@@ -20,8 +20,6 @@
     converse.initialize({
         authentication: 'login',
         auto_away: 300,
-        blacklisted_plugins: ['converse-minimize', 'converse-dragresize'],
-        whitelisted_plugins: ['converse-inverse'],
         auto_reconnect: true,
         bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
         message_archiving: 'always',

mobile.html

@@ -125,10 +125,6 @@
 <script>
     converse.initialize({
         bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
-        message_carbons: true,
-        // Blacklist plugins which aren't being used for mobile, so that
-        // other code cannot register their own plugins under those names.
-        blacklisted_plugins: ['converse-minimize', 'converse-dragresize'],
         show_controlbox_by_default: false,
         view_mode: 'mobile'
     });

src/config.js

@@ -54,7 +54,6 @@ require.config({
 
         // Converse
         "converse":                 "src/converse",
-        "inverse":                  "src/inverse",
 
         "converse-bookmarks":       "src/converse-bookmarks",
         "converse-chatboxes":       "src/converse-chatboxes",
@@ -64,7 +63,7 @@ require.config({
         "converse-disco":           "src/converse-disco",
         "converse-dragresize":      "src/converse-dragresize",
         "converse-headline":        "src/converse-headline",
-        "converse-inverse":         "src/converse-inverse",
+        "converse-fullscreen":      "src/converse-fullscreen",
         "converse-mam":             "src/converse-mam",
         "converse-minimize":        "src/converse-minimize",
         "converse-muc":             "src/converse-muc",

src/converse-core.js

@@ -70,6 +70,7 @@
         'converse-core',
         'converse-disco',
         'converse-dragresize',
+        'converse-fullscreen',
         'converse-headline',
         'converse-mam',
         'converse-minimize',

src/converse-dragresize.js

@@ -44,6 +44,10 @@
          */
         optional_dependencies: ["converse-headline"],
 
+        enabled (_converse) {
+            return _converse.view_mode == 'overlayed';
+        },
+
         overrides: {
             // Overrides mentioned here will be picked up by converse.js's
             // plugin architecture they will replace existing methods on the
@@ -53,7 +57,7 @@
 
             registerGlobalEventHandlers () {
                 const that = this;
-                
+
                 $(document).on('mousemove', function (ev) {
                     if (!that.resizing || !that.allow_dragresize) { return true; }
                     ev.preventDefault();

src/converse-inverse.js → src/converse-fullscreen.js

@@ -18,7 +18,11 @@
     "use strict";
     const { Strophe, _ } = converse.env;
 
-    converse.plugins.add('converse-inverse', {
+    converse.plugins.add('converse-fullscreen', {
+
+        enabled (_converse) {
+            return _.includes(['mobile', 'fullscreen'], _converse.view_mode);
+        },
 
         overrides: {
             // overrides mentioned here will be picked up by converse.js's
@@ -60,8 +64,7 @@
                 chatview_avatar_width: 44,
                 hide_open_bookmarks: true,
                 show_controlbox_by_default: true,
-                sticky_controlbox: true,
-                view_mode: 'fullscreen'
+                sticky_controlbox: true
             });
         }
     });

src/converse-minimize.js

@@ -42,6 +42,10 @@
          */
         optional_dependencies: ["converse-controlbox", "converse-muc"],
 
+        enabled (_converse) {
+            return _converse.view_mode == 'overlayed';
+        },
+
         overrides: {
             // Overrides mentioned here will be picked up by converse.js's
             // plugin architecture they will replace existing methods on the

src/converse-singleton.js

@@ -39,6 +39,10 @@
         // NB: These plugins need to have already been loaded via require.js.
         optional_dependencies: ['converse-muc', 'converse-controlbox', 'converse-rosterview'],
 
+        enabled (_converse) {
+            return _.includes(['mobile', 'fullscreen'], _converse.view_mode);
+        },
+
         overrides: {
             // overrides mentioned here will be picked up by converse.js's
             // plugin architecture they will replace existing methods on the
@@ -50,11 +54,8 @@
                 createChatBox (jid, attrs) {
                     /* Make sure new chat boxes are hidden by default.
                      */
-                    if (_.includes(['mobile', 'fullscreen'],
-                            this.__super__._converse.view_mode)) {
-                        attrs = attrs || {};
-                        attrs.hidden = true;
-                    }
+                    attrs = attrs || {};
+                    attrs.hidden = true;
                     return this.__super__.createChatBox.call(this, jid, attrs);
                 }
             },
@@ -68,14 +69,11 @@
                     if (_.isUndefined(result)) {
                         return
                     }
-                    if (_.includes(['mobile', 'fullscreen'],
-                            this.__super__._converse.view_mode)) {
-                        result.hidden = false;
-                    }
+                    result.hidden = false;
                     return result;
                 }
             },
- 
+
             ChatBoxViews: {
                 showChat (attrs, force) {
                     /* We only have one chat visible at any one
@@ -83,13 +81,11 @@
                      * chats are hidden.
                      */
                     const { _converse } = this.__super__;
-                    if (_.includes(['mobile', 'fullscreen'], _converse.view_mode)) {
-                        const chatbox = this.getChatBox(attrs, true);
-                        const hidden = _.isUndefined(attrs.hidden) ? chatbox.get('hidden') : attrs.hidden;
-                        if ((force || !hidden) && _converse.connection.authenticated) {
-                            _.each(_converse.chatboxviews.xget(chatbox.get('id')), hideChat);
-                            chatbox.save({'hidden': false});
-                        }
+                    const chatbox = this.getChatBox(attrs, true);
+                    const hidden = _.isUndefined(attrs.hidden) ? chatbox.get('hidden') : attrs.hidden;
+                    if ((force || !hidden) && _converse.connection.authenticated) {
+                        _.each(_converse.chatboxviews.xget(chatbox.get('id')), hideChat);
+                        chatbox.save({'hidden': false});
                     }
                     return this.__super__.showChat.apply(this, arguments);
                 }
@@ -101,13 +97,8 @@
                      * time. So before opening a chat, we make sure all other
                      * chats are hidden.
                      */
-                    const { _converse } = this.__super__;
-                    if (_.includes(['mobile', 'fullscreen'], _converse.view_mode)) {
-                        if (!this.model.get('hidden')) {
-                            _.each(_converse.chatboxviews.xget(this.model.get('id')), hideChat);
-                            return this.__super__._show.apply(this, arguments);
-                        }
-                    } else {
+                    if (!this.model.get('hidden')) {
+                        _.each(this.__super__._converse.chatboxviews.xget(this.model.get('id')), hideChat);
                         return this.__super__._show.apply(this, arguments);
                     }
                 }
@@ -119,11 +110,8 @@
                      * time. So before opening a chat, we make sure all other
                      * chats are hidden.
                      */
-                    const { _converse } = this.__super__;
-                    if (_.includes(['mobile', 'fullscreen'], _converse.view_mode)) {
-                        _.each(this.__super__._converse.chatboxviews.xget('controlbox'), hideChat);
-                        this.model.save({'hidden': false});
-                    }
+                    _.each(this.__super__._converse.chatboxviews.xget('controlbox'), hideChat);
+                    this.model.save({'hidden': false});
                     return this.__super__.openChat.apply(this, arguments);
                 },
             }

src/converse.js

@@ -25,6 +25,7 @@ if (typeof define !== 'undefined') {
         "converse-minimize",    // Allows chat boxes to be minimized
         "converse-dragresize",  // Allows chat boxes to be resized by dragging them
         "converse-headline",    // Support for headline messages
+        "converse-fullscreen",
         /* END: Removable components */
     ], function (converse) {
         return converse;