Merge branch 'webcomponent-embedded'

CHANGES.md

@@ -13,12 +13,18 @@ though they should be private._
 ### New features
 - XEP-0382 Spoiler Messages (currently only for private chats)
 - Listen for new room bookmarks pushed from the user's PEP service.
+- Simplified the [embedded](https://conversejs.org/demo/embedded.html) usecase.
+    - No need to manually blacklist or whitelist any plugins.
+    - Relies on the [view_mode](https://conversejs.org/docs/html/configurations.html#view-mode) being set to `'embedded'`.
 
 ### API changes
 - New API method `_converse.disco.getIdentity` to check whether a JID has a given identity.
 
-### New configuration settings
+### Configuration settings
+- `auto_reconnect` is now set to `true` by default.
 - New configuration setting [allow_public_bookmarks](https://conversejs.org/docs/html/configurations.html#allow-public-bookmarks)
+- New configuration setting [root](https://conversejs.org/docs/html/configurations.html#root)
+- The [view_mode](https://conversejs.org/docs/html/configurations.html#view-mode) setting now has a new possible value: `embedded`
 
 
 ## 3.3.2 (2018-01-29)

Makefile

@@ -9,7 +9,7 @@ CHROMIUM		?= ./node_modules/.bin/run-headless-chromium
 CLEANCSS		?= ./node_modules/clean-css-cli/bin/cleancss --skip-rebase
 ESLINT		  	?= ./node_modules/.bin/eslint
 HTTPSERVE	   	?= ./node_modules/.bin/http-server
-HTTPSERVE_PORT	        ?= 8000
+HTTPSERVE_PORT  ?= 8000
 PAPER		   	=
 PO2JSON		 	?= ./node_modules/.bin/po2json
 RJS			 	?= ./node_modules/.bin/r.js
@@ -131,7 +131,7 @@ dev: stamp-bundler stamp-npm
 ## Builds
 
 .PHONY: css
-css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css
+css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css css/fonts.css
 
 css/inverse.css:: dev sass sass/*
 	$(SASS) -I $(BOURBON_TEMPLATES) sass/inverse/inverse.scss css/inverse.css
@@ -157,6 +157,9 @@ css/theme.min.css:: stamp-npm css/theme.css
 css/mobile.min.css:: stamp-npm sass/*
 	$(CLEANCSS) css/mobile.css > css/mobile.min.css
 
+css/fonts.css:: dev sass/*
+	$(SASS) -I $(BOURBON_TEMPLATES) sass/only-fonts.scss css/fonts.css
+
 .PHONY: watch
 watch: dev
 	$(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css sass/inverse/inverse.scss:css/inverse.css

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 */

css/fonts.css

+/*
+    Color scheme helpers:
+    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
+    http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
+ */
+@font-face {
+  font-family: 'Converse-js';
+  src: url("../fonticons/fonts/icomoon.eot?wvi0ht");
+  src: url("../fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("../fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("../fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("../fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+.icon-conversejs {
+  padding-right: 0.2em;
+  font-family: 'Converse-js';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+
+.icon-conversejs:before {
+  content: "\e600"; }
+
+#converse-embedded-chat .icon-address-book:before,
+#conversejs .icon-address-book:before {
+  content: "\270f"; }
+#converse-embedded-chat .icon-attachment:before,
+#conversejs .icon-attachment:before {
+  content: "\e032"; }
+#converse-embedded-chat .icon-away:before,
+#conversejs .icon-away:before {
+  content: "\25fb"; }
+#converse-embedded-chat .icon-blocked:before,
+#conversejs .icon-blocked:before {
+  content: "\2718"; }
+#converse-embedded-chat .icon-bold:before,
+#conversejs .icon-bold:before {
+  content: "\e04d"; }
+#converse-embedded-chat .icon-bubbles2:before,
+#conversejs .icon-bubbles2:before {
+  content: "\e016"; }
+#converse-embedded-chat .icon-bubbles3:before,
+#conversejs .icon-bubbles3:before {
+  content: "\e017"; }
+#converse-embedded-chat .icon-bubbles:before,
+#conversejs .icon-bubbles:before {
+  content: "\e015"; }
+#converse-embedded-chat .icon-busy:before,
+#conversejs .icon-busy:before {
+  content: "\e004"; }
+#converse-embedded-chat .icon-dnd:before,
+#conversejs .icon-dnd:before {
+  content: "\e004"; }
+#converse-embedded-chat .icon-cancel-circle:before,
+#conversejs .icon-cancel-circle:before {
+  content: "\e058"; }
+#converse-embedded-chat .icon-checkmark:before,
+#conversejs .icon-checkmark:before {
+  content: "\2713"; }
+#converse-embedded-chat .icon-close:before,
+#conversejs .icon-close:before {
+  content: "\2715"; }
+#converse-embedded-chat .icon-closed:before,
+#conversejs .icon-closed:before {
+  content: "\25ba"; }
+#converse-embedded-chat .icon-cog:before,
+#conversejs .icon-cog:before {
+  content: "\e02f"; }
+#converse-embedded-chat .icon-cogs:before,
+#conversejs .icon-cogs:before {
+  content: "\e022"; }
+#converse-embedded-chat .icon-conversejs:before,
+#conversejs .icon-conversejs:before {
+  content: "\e600"; }
+#converse-embedded-chat .icon-database:before,
+#conversejs .icon-database:before {
+  content: "\f1c0"; }
+#converse-embedded-chat .icon-envelope:before,
+#conversejs .icon-envelope:before {
+  content: "\f003"; }
+#converse-embedded-chat .icon-exit:before,
+#conversejs .icon-exit:before {
+  content: "\e601"; }
+#converse-embedded-chat .icon-eye-blocked:before,
+#conversejs .icon-eye-blocked:before {
+  content: "\e031"; }
+#converse-embedded-chat .icon-eye:before,
+#conversejs .icon-eye:before {
+  content: "\e030"; }
+#converse-embedded-chat .icon-github:before,
+#conversejs .icon-github:before {
+  content: "\eab0"; }
+#converse-embedded-chat .icon-globe:before,
+#conversejs .icon-globe:before {
+  content: "\f0ac"; }
+#converse-embedded-chat .icon-google2:before,
+#conversejs .icon-google2:before {
+  content: "\ea89"; }
+#converse-embedded-chat .icon-group:before,
+#conversejs .icon-group:before {
+  content: "\f0c0"; }
+#converse-embedded-chat .icon-happy:before,
+#conversejs .icon-happy:before {
+  content: "\263b"; }
+#converse-embedded-chat .icon-heart2:before,
+#conversejs .icon-heart2:before {
+  content: "\f004"; }
+#converse-embedded-chat .icon-heart:before,
+#conversejs .icon-heart:before {
+  content: "\2764"; }
+#converse-embedded-chat .icon-heart_empty:before,
+#conversejs .icon-heart_empty:before {
+  content: "\f08a"; }
+#converse-embedded-chat .icon-hide-users:before,
+#conversejs .icon-hide-users:before {
+  content: "\e01c"; }
+#converse-embedded-chat .icon-home:before,
+#conversejs .icon-home:before {
+  content: "\e000"; }
+#converse-embedded-chat .icon-idcard-dark:before,
+#conversejs .icon-idcard-dark:before {
+  content: "\f2c2"; }
+#converse-embedded-chat .icon-idcard:before,
+#conversejs .icon-idcard:before {
+  content: "\f2c3"; }
+#converse-embedded-chat .icon-image:before,
+#conversejs .icon-image:before {
+  content: "\2b14"; }
+#converse-embedded-chat .icon-info:before,
+#conversejs .icon-info:before {
+  content: "\2360"; }
+#converse-embedded-chat .icon-italic:before,
+#conversejs .icon-italic:before {
+  content: "\e04f"; }
+#converse-embedded-chat .icon-key:before,
+#conversejs .icon-key:before {
+  content: "\e028"; }
+#converse-embedded-chat .icon-legal:before,
+#conversejs .icon-legal:before {
+  content: "\f0e3"; }
+#converse-embedded-chat .icon-lock-2:before,
+#conversejs .icon-lock-2:before {
+  content: "\e027"; }
+#converse-embedded-chat .icon-minus:before,
+#conversejs .icon-minus:before {
+  content: "\e05a"; }
+#converse-embedded-chat .icon-music:before,
+#conversejs .icon-music:before {
+  content: "\266b"; }
+#converse-embedded-chat .icon-newtab:before,
+#conversejs .icon-newtab:before {
+  content: "\e053"; }
+#converse-embedded-chat .icon-notebook:before,
+#conversejs .icon-notebook:before {
+  content: "\2710"; }
+#converse-embedded-chat .icon-notification:before,
+#conversejs .icon-notification:before {
+  content: "\e01f"; }
+#converse-embedded-chat .icon-offline:before,
+#conversejs .icon-offline:before {
+  content: "\e002"; }
+#converse-embedded-chat .icon-logout:before,
+#conversejs .icon-logout:before {
+  content: "\e002"; }
+#converse-embedded-chat .icon-online:before,
+#conversejs .icon-online:before {
+  content: "\25fc"; }
+#converse-embedded-chat .icon-opened:before,
+#conversejs .icon-opened:before {
+  content: "\25bc"; }
+#converse-embedded-chat .icon-pencil:before,
+#conversejs .icon-pencil:before {
+  content: "\270e"; }
+#converse-embedded-chat .icon-phone-hang-up:before,
+#conversejs .icon-phone-hang-up:before {
+  content: "\260e"; }
+#converse-embedded-chat .icon-phone:before,
+#conversejs .icon-phone:before {
+  content: "\260f"; }
+#converse-embedded-chat .icon-plus:before,
+#conversejs .icon-plus:before {
+  content: "\271a"; }
+#converse-embedded-chat .icon-pushpin:before,
+#conversejs .icon-pushpin:before {
+  content: "\e012"; }
+#converse-embedded-chat .icon-quotes-left:before,
+#conversejs .icon-quotes-left:before {
+  content: "\e01d"; }
+#converse-embedded-chat .icon-reddit:before,
+#conversejs .icon-reddit:before {
+  content: "\eac6"; }
+#converse-embedded-chat .icon-remove:before,
+#conversejs .icon-remove:before {
+  content: "\e02d"; }
+#converse-embedded-chat .icon-room-info:before,
+#conversejs .icon-room-info:before {
+  content: "\e059"; }
+#converse-embedded-chat .icon-save:before,
+#conversejs .icon-save:before {
+  content: "\f0c7"; }
+#converse-embedded-chat .icon-search:before,
+#conversejs .icon-search:before {
+  content: "\e021"; }
+#converse-embedded-chat .icon-show-users:before,
+#conversejs .icon-show-users:before {
+  content: "\e01e"; }
+#converse-embedded-chat .icon-smiley:before,
+#conversejs .icon-smiley:before {
+  content: "\263a"; }
+#converse-embedded-chat .icon-snowflake:before,
+#conversejs .icon-snowflake:before {
+  content: "\f2dc"; }
+#converse-embedded-chat .icon-spell-check:before,
+#conversejs .icon-spell-check:before {
+  content: "\e045"; }
+#converse-embedded-chat .icon-spinner:before,
+#conversejs .icon-spinner:before {
+  content: "\231b"; }
+#converse-embedded-chat .icon-star:before,
+#conversejs .icon-star:before {
+  content: "\f005"; }
+#converse-embedded-chat .icon-star_empty:before,
+#conversejs .icon-star_empty:before {
+  content: "\f006"; }
+#converse-embedded-chat .icon-strikethrough:before,
+#conversejs .icon-strikethrough:before {
+  content: "\e050"; }
+#converse-embedded-chat .icon-twitter:before,
+#conversejs .icon-twitter:before {
+  content: "\ea96"; }
+#converse-embedded-chat .icon-underline:before,
+#conversejs .icon-underline:before {
+  content: "\e04e"; }
+#converse-embedded-chat .icon-unlocked:before,
+#conversejs .icon-unlocked:before {
+  content: "\e025"; }
+#converse-embedded-chat .icon-user:before,
+#conversejs .icon-user:before {
+  content: "\e01a"; }
+#converse-embedded-chat .icon-users:before,
+#conversejs .icon-users:before {
+  content: "\e01b"; }
+#converse-embedded-chat .icon-warning:before,
+#conversejs .icon-warning:before {
+  content: "\26a0"; }
+#converse-embedded-chat .icon-wrench:before,
+#conversejs .icon-wrench:before {
+  content: "\e024"; }
+#converse-embedded-chat .icon-xa:before,
+#conversejs .icon-xa:before {
+  content: "\e602"; }
+#converse-embedded-chat .icon-zoomin:before,
+#conversejs .icon-zoomin:before {
+  content: "\e02b"; }
+#converse-embedded-chat .icon-zoomout:before,
+#conversejs .icon-zoomout:before {
+  content: "\e02a"; }
+#converse-embedded-chat [data-icon]:before,
+#conversejs [data-icon]:before {
+  content: attr(data-icon);
+  font-family: 'Converse-js';
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  speak: none;
+  text-transform: none;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+#converse-embedded-chat [class^="icon-"]:before, #converse-embedded-chat [class*=" icon-"]:before,
+#conversejs [class^="icon-"]:before,
+#conversejs [class*=" icon-"]:before {
+  background-position: 14px 14px;
+  background-image: none;
+  font-family: 'Converse-js';
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  width: auto;
+  height: auto;
+  line-height: 1;
+  speak: none;
+  text-transform: none;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+
+/*# sourceMappingURL=fonts.css.map */

demo/anonymous.html

@@ -40,7 +40,7 @@
             <div class="container">
                 <div class="row">
                     <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
+                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse</h1>
                         <p class="intro-text">Anonymous login demo</p>
                     </div>
                 </div>

demo/embedded.html

@@ -41,7 +41,7 @@
             <div class="container">
                 <div class="row">
                     <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading brand-heading-embedded"><a style="color: white;" href="/"><i class="icon-conversejs"></i>Converse.js</a></h1>
+                        <h1 class="brand-heading brand-heading-embedded"><a style="color: white;" href="/"><i class="icon-conversejs"></i>Converse</a></h1>
                         <p class="intro-text">Embedded MUC chat demo</p>
 
                         <div id="converse-embedded-chat"></div>
@@ -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>

demo/index.html

@@ -67,7 +67,7 @@
 
     <section class="intro" class="container">
         <div class="row">
-            <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse.js</h1>
+            <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1>
             <div class="col-md-8 col-md-offset-2">
                 <p class="intro-text">Demos:</p>
                 <p class="intro-text">

demo/without_bundled_dependencies.html

@@ -59,7 +59,7 @@
             <div class="container">
                 <div class="row">
                     <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
+                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse</h1>
                         <p class="intro-text">An example page where external dependencies are loaded seperately and not within the converse.js bundle.</p>
                         <p class="intro-text">Look at the page source for details.</p>
                         <p class="intro-text">For this page to work, you'll need to

docs/source/configuration.rst

@@ -1091,6 +1091,35 @@ providers_link
 The hyperlink on the registration form which points to a directory of public
 XMPP servers.
 
+root
+----
+
+* Default: ``window.document``
+
+When using converse.js inside a web component's shadow DOM, you will need to set this settings'
+value to the shadow-root of the shadow DOM.
+
+For example:
+
+.. code-block:: javascript
+
+  class CustomChatComponent extends HTMLElement {
+    constructor() {
+      super();
+      const shadowRoot  = this.attachShadow({mode: "open"});
+      this.initConverse(shadowRoot);
+    }
+
+    initConverse(shadowRoot) {
+        window.addEventListener("converse-loaded", function(event) {
+            converse.initialize({
+                root: shadowRoot,
+                // Other settings go here...
+            });
+        });
+      }
+    }
+
 
 roster_groups
 -------------
@@ -1388,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``
@@ -1411,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.
+
+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.
+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

sass/_muc_embedded.scss

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

sass/only-fonts.scss

+@import "bourbon";
+@import "converse/variables";
+@import "fonts";

src/converse-bookmarks.js

@@ -478,7 +478,7 @@
                 insertIntoControlBox () {
                     const controlboxview = _converse.chatboxviews.get('controlbox');
                     if (!_.isUndefined(controlboxview) &&
-                            !document.body.contains(this.el)) {
+                            !_converse.root.contains(this.el)) {
                         const container = controlboxview.el.querySelector('#chatrooms');
                         if (!_.isNull(container)) {
                             container.insertBefore(this.el, container.firstChild);

src/converse-chatboxes.js

@@ -418,12 +418,17 @@
                     * If the #conversejs element doesn't exist, create it.
                     */
                     if (!this.el) {
-                        let el = document.querySelector('#conversejs');
+                        let el = _converse.root.querySelector('#conversejs');
                         if (_.isNull(el)) {
                             el = document.createElement('div');
                             el.setAttribute('id', 'conversejs');
-                            // Converse.js expects a <body> tag to be present.
-                            document.querySelector('body').appendChild(el);
+                            const body = _converse.root.querySelector('body');
+                            if (body) {
+                                body.appendChild(el);
+                            } else {
+                                // Perhaps inside a web component?
+                                _converse.root.appendChild(el);
+                            }
                         }
                         el.innerHTML = '';
                         this.setElement(el, false);

src/converse-chatview.js

@@ -74,15 +74,16 @@
             // New functions which don't exist yet can also be added.
             //
             registerGlobalEventHandlers: function () {
+                const { _converse } = this.__super__;
                 this.__super__.registerGlobalEventHandlers();
-                document.addEventListener(
+                _converse.root.addEventListener(
                     'click', function (ev) {
                         if (_.includes(ev.target.classList, 'toggle-toolbar-menu') ||
                             _.includes(ev.target.classList, 'insert-emoji')) {
                             return;
                         }
                         u.slideInAllElements(
-                            document.querySelectorAll('.toolbar-menu')
+                            _converse.root.querySelectorAll('.toolbar-menu')
                         )
                     }
                 );
@@ -430,7 +431,7 @@
                      * as well as src/converse-muc.js (if those plugins are
                      * enabled).
                      */
-                    const container = document.querySelector('#conversejs');
+                    const container = _converse.root.querySelector('#conversejs');
                     if (this.el.parentNode !== container) {
                         container.insertBefore(this.el, container.firstChild);
                     }
@@ -1024,7 +1025,7 @@
                         }
                     }
                     const elements = _.difference(
-                        document.querySelectorAll('.toolbar-menu'),
+                        _converse.root.querySelectorAll('.toolbar-menu'),
                         [this.emoji_picker_view.el]
                     );
                     u.slideInAllElements(elements)

src/converse-controlbox.js

@@ -426,8 +426,8 @@
                     const tab = ev.target,
                         sibling_li = tab.parentNode.nextElementSibling || tab.parentNode.previousElementSibling,
                         sibling = sibling_li.firstChild,
-                        sibling_panel = document.querySelector(sibling.getAttribute('href')),
-                        tab_panel = document.querySelector(tab.getAttribute('href'));
+                        sibling_panel = _converse.root.querySelector(sibling.getAttribute('href')),
+                        tab_panel = _converse.root.querySelector(tab.getAttribute('href'));
 
                     u.hideElement(sibling_panel);
                     u.removeClass('current', sibling);
@@ -656,7 +656,7 @@
                     xhr.onload = function () {
                         if (xhr.status >= 200 && xhr.status < 400) {
                             const data = JSON.parse(xhr.responseText),
-                                  ul = document.querySelector('.search-xmpp ul');
+                                  ul = _converse.root.querySelector('.search-xmpp ul');
                             u.removeElement(ul.querySelector('li.found-user'));
                             u.removeElement(ul.querySelector('li.chat-info'));
                             if (!data.length) {
@@ -769,7 +769,7 @@
 
                 onClick (e) {
                     e.preventDefault();
-                    if (u.isVisible(document.querySelector("#controlbox"))) {
+                    if (u.isVisible(_converse.root.querySelector("#controlbox"))) {
                         const controlbox = _converse.chatboxes.get('controlbox');
                         if (_converse.connection.connected) {
                             controlbox.save({closed: true});

src/converse-core.js

@@ -4,7 +4,7 @@
 // Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
 // Licensed under the Mozilla Public License (MPLv2)
 //
-/*global Backbone, define, window, document, JSON */
+/*global Backbone, define, window, JSON */
 (function (root, factory) {
     define(["sizzle",
             "es6-promise",
@@ -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
@@ -288,7 +289,7 @@
             authentication: 'login', // Available values are "login", "prebind", "anonymous" and "external".
             auto_away: 0, // Seconds after which user status is set to 'away'
             auto_login: false, // Currently only used in connection with anonymous login
-            auto_reconnect: false,
+            auto_reconnect: true,
             auto_subscribe: false,
             auto_xa: 0, // Seconds after which user status is set to 'xa'
             blacklisted_plugins: [],
@@ -318,6 +319,7 @@
             priority: 0,
             registration_domain: '',
             rid: undefined,
+            root: window.document,
             roster_groups: true,
             show_only_online_users: false,
             show_send_button: false,
@@ -591,19 +593,25 @@
         this.incrementMsgCounter = function () {
             this.msg_counter += 1;
             const unreadMsgCount = this.msg_counter;
-            if (document.title.search(/^Messages \(\d+\) /) === -1) {
-                document.title = `Messages (${unreadMsgCount}) ${document.title}`;
+            let title = document.title;
+            if (_.isNil(title)) {
+                return;
+            }
+            if (title.search(/^Messages \(\d+\) /) === -1) {
+                title = `Messages (${unreadMsgCount}) ${title}`;
             } else {
-                document.title = document.title.replace(
-                    /^Messages \(\d+\) /, `Messages (${unreadMsgCount}) `
-                );
+                title = title.replace(/^Messages \(\d+\) /, `Messages (${unreadMsgCount})`);
             }
         };
 
         this.clearMsgCounter = function () {
             this.msg_counter = 0;
-            if (document.title.search(/^Messages \(\d+\) /) !== -1) {
-                document.title = document.title.replace(/^Messages \(\d+\) /, "");
+            let title = document.title;
+            if (_.isNil(title)) {
+                return;
+            }
+            if (title.search(/^Messages \(\d+\) /) !== -1) {
+                title = title.replace(/^Messages \(\d+\) /, "");
             }
         };
 
@@ -1795,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(
@@ -1839,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;
     };
@@ -1996,7 +2016,7 @@
     };
 
     // The public API
-    return {
+    window.converse = {
         'initialize' (settings, callback) {
             return _converse.initialize(settings, callback);
         },
@@ -2028,4 +2048,6 @@
             'utils': utils
         }
     };
+    window.dispatchEvent(new Event('converse-loaded'));
+    return window.converse;
 }));

src/converse-disco.js

@@ -7,7 +7,7 @@
 
 /* This is a Converse.js plugin which add support for XEP-0030: Service Discovery */
 
-/*global Backbone, define, window, document */
+/*global Backbone, define, window */
 (function (root, factory) {
     define(["converse-core", "sizzle", "strophe.disco"], factory);
 }(this, function (converse, sizzle) {

src/converse-dragresize.js

@@ -4,7 +4,7 @@
 // Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
 // Licensed under the Mozilla Public License (MPLv2)
 //
-/*global define, window */
+/*global define, window, document */
 
 (function (root, factory) {
     define(["converse-core",

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: {
@@ -37,7 +37,8 @@
                 },
 
                 insertBrandHeading () {
-                    const el = document.getElementById('converse-login-panel');
+                    const { _converse } = this.__super__;
+                    const el = _converse.root.getElementById('converse-login-panel');
                     el.parentNode.insertAdjacentHTML(
                         'afterbegin',
                         this.createBrandHeadingHTML()

src/converse-minimize.js

@@ -4,7 +4,7 @@
 // Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
 // Licensed under the Mozilla Public License (MPLv2)
 //
-/*global define, window */
+/*global define, window, document */
 
 (function (root, factory) {
     define(["converse-core",

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");

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)) {

src/converse-otr.js

@@ -403,9 +403,10 @@
 
                 toggleOTRMenu (ev) {
                     ev.stopPropagation();
+                    const { _converse } = this.__super__;
                     const menu = this.el.querySelector('.toggle-otr ul');
                     const elements = _.difference(
-                        document.querySelectorAll('.toolbar-menu'),
+                        _converse.root.querySelectorAll('.toolbar-menu'),
                         [menu]
                     );
                     utils.slideInAllElements(elements).then(

src/converse-profile.js

@@ -79,7 +79,7 @@
                 toggleOptions (ev) {
                     ev.preventDefault();
                     utils.slideInAllElements(
-                        document.querySelectorAll('#conversejs .contact-form-container')
+                        _converse.root.querySelectorAll('#conversejs .contact-form-container')
                     );
                     utils.slideToggleElement(this.el.querySelector("#target dd ul"));
                 },

src/converse-roomslist.js

@@ -176,7 +176,7 @@
                 insertIntoControlBox () {
                     const controlboxview = _converse.chatboxviews.get('controlbox');
                     if (!_.isUndefined(controlboxview) &&
-                            !document.body.contains(this.el)) {
+                            !_converse.root.contains(this.el)) {
                         const container = controlboxview.el.querySelector('#chatrooms');
                         if (!_.isNull(container)) {
                             container.insertBefore(this.el, container.firstChild);

src/converse-singleton.js

@@ -4,7 +4,7 @@
 // Copyright (c) 2012-2017, JC Brand <jc@opkode.com>
 // Licensed under the Mozilla Public License (MPLv2)
 //
-/*global Backbone, define, window, document, JSON */
+/*global Backbone, define, window, JSON */
 
 /* converse-singleton
  * ******************
@@ -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: {