Merge remote-tracking branch 'origin' into bootstrap4

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,7 +2,7 @@ Thanks for making a pull request to converse.js!
 
 Before submitting your request, please make sure the following conditions are met:
 
-- [ ] Add a changelog entry for your change in `docs/CHANGES.md`
+- [ ] Add a changelog entry for your change in `CHANGES.md`
 - [ ] When adding a configuration variable, please make sure to
       document it in `docs/source/configuration.rst`
 - [ ] Please add a test for your change. Tests can be run in the commandline

CHANGES.md

 # Changelog
 
+## 3.3.3 (2018-02-14)
+
+### Bugfixes
+- Attribute error when empty IQ stanza is returned for vCard query
+- In fullscreen view, sometimes a background MUC would come into the foreground
+  when a new message appears inside it.
+
+### Security fixes
+
+- CVE-2018-6591: Don't allow PEP bookmarks if `pubsub#publish-options` is not advertised by the server.
+
+    In previous versions of converse.js, bookmarks sent to servers that don't
+    support `pubsub#publish-options` were visible to all your contacts, even
+    though they should be kept private. This is due to those servers simply
+    ignoring the `pubsub#publish-options` directive and converse.js not checking
+    first whether `pubsub#publish-options` is supported before setting bookmarks
+    via PEP.
+
+    More info here: https://gultsch.de/converse_bookmarks.html
+
+### 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'`.
+    - The main `converse.js` build can be used for the embedded usecase.
+    - Maintain MUC session upon page reload
+
+### API changes
+- New API method `_converse.disco.getIdentity` to check whether a JID has a given identity.
+
+### 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`
+
+### Translation updates
+- Chinese (Traditional), French, German, Portuguese (Brazil), Russian, Ukrainian
+
+## 3.3.2 (2018-01-29)
+
+### Bugfixes
+
+- Various fixes for IE11.
+- Could not register on Ejabberd 18. `"Missing attribute 'id' in tag qualified by namespace 'jabber:client'"`
+- #878 Ending slash in link not recognized
+- #921 FATAL error when `visible_toolbar_buttons.emoji = false`
+- #959 Add padding for the iPhone X (to the mobile CSS).
+- #993 `moment.format` is not a function error when sending a message.
+- #994 TypeError when using the `user.login` API.
+- #995 `ChildNode.replaceWith` is not available in Internet Explorer or Safari. Use `Node.replaceChild` instead.
+- #999 MUC Chat Send button causes page reload
+- #1000 Scroll to bottom when maximizing a chat room.
+- #1003 Handle bare MUC room JIDs
+
+### Translation changes
+
+- Updated Dutch, French, Japanese, Norwegian Bokmål and Ukrainian translations
+
 ## 3.3.1 (2018-01-18)
 
 ### UI/UX changes

COPYRIGHT

@@ -2,7 +2,7 @@
  *
  *  An XMPP chat client that runs in the browser.
  *
- *  Version: 3.3.1
+ *  Version: 3.3.3
  *
  *  Copyright: JC Brand 2012-2017
  *  Except for 3rd party dependencies.

Makefile

@@ -10,7 +10,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
@@ -72,7 +72,7 @@ serve_bg: dev
 ########################################################################
 ## Translation machinery
 
-GETTEXT = xgettext --language="JavaScript" --keyword=__ --keyword=___ --from-code=UTF-8 --output=locale/converse.pot dist/converse-no-dependencies.js --package-name=Converse.js --copyright-holder="Jan-Carel Brand" --package-version=3.3.1 -c
+GETTEXT = xgettext --language="JavaScript" --keyword=__ --keyword=___ --from-code=UTF-8 --output=locale/converse.pot dist/converse-no-dependencies.js --package-name=Converse.js --copyright-holder="Jan-Carel Brand" --package-version=3.3.3 -c
 
 .PHONY: pot
 pot: dist/converse-no-dependencies.js
@@ -101,6 +101,7 @@ release:
 	$(SED) -ri s/version\ =\ \'[0-9]\+\.[0-9]\+\.[0-9]\+\'/version\ =\ \'$(VERSION)\'/ docs/source/conf.py
 	$(SED) -ri s/release\ =\ \'[0-9]\+\.[0-9]\+\.[0-9]\+\'/release\ =\ \'$(VERSION)\'/ docs/source/conf.py
 	$(SED) -ri "s/(Unreleased)/`date +%Y-%m-%d`/" CHANGES.md
+	$(SED) -ri "s/cdn.conversejs.org\/[0-9]+\.[0-9]+\.[0-9]+/cdn.conversejs.org\/$(VERSION)/" docs/source/quickstart.rst
 	make pot
 	make po
 	make po2json
@@ -131,21 +132,21 @@ 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:: stamp-bundler sass sass/*
+css/inverse.css:: stamp-bundler sass sass/*.scss
 	$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse/inverse.scss css/inverse.css
 
 css/inverse.min.css:: css/inverse.css
 	$(CLEANCSS) css/inverse.css > css/inverse.min.css
 
-css/converse-muc-embedded.css:: stamp-bundler sass/*
+css/converse-muc-embedded.css:: stamp-bundler sass/*.scss
 	$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/_muc_embedded.scss css/converse-muc-embedded.css
 
-css/converse-muc-embedded.min.css:: stamp-bundler sass css/converse-muc-embedded.css
+css/converse-muc-embedded.min.css:: dev sass css/converse-muc-embedded.css
 	$(CLEANCSS) css/converse-muc-embedded.css > css/converse-muc-embedded.min.css
 
-css/converse.css:: stamp-bundler sass/*
+css/converse.css:: stamp-bundler sass/*.scss
 	$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/converse/converse.scss css/converse.css
 
 css/converse.min.css:: css/converse.css
@@ -154,9 +155,12 @@ css/converse.min.css:: css/converse.css
 css/theme.min.css:: stamp-npm css/theme.css
 	$(CLEANCSS) css/theme.css > css/theme.min.css
 
-css/mobile.min.css:: stamp-npm sass/*
+css/mobile.min.css:: stamp-npm sass/*.scss
 	$(CLEANCSS) css/mobile.css > css/mobile.min.css
 
+css/fonts.css:: dev sass/*.scss
+	$(SASS) -I $(BOURBON_TEMPLATES) sass/only-fonts.scss css/fonts.css
+
 .PHONY: watch
 watch: stamp-bundler
 	$(SASS) --watch -I $(BOURBON) -I $(BOOTSTRAP) sass/converse/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css sass/inverse/inverse.scss:css/inverse.css
@@ -219,7 +223,7 @@ eslint: stamp-npm
 
 .PHONY: check
 check: eslint
-	LOG_CR_VERBOSITY=INFO $(CHROMIUM) --no-sandbox http://localhost:$(HTTPSERVE_PORT)/tests.html
+	LOG_CR_VERBOSITY=INFO $(CHROMIUM) --no-sandbox http://localhost:$(HTTPSERVE_PORT)/tests/index.html
 
 ########################################################################
 ## Documentation

README.md

 # converse.js
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/jcbrand/converse.js.svg)](https://greenkeeper.io/)
-
+[![inVerse](https://inverse.chat/badge.svg?room=discuss@conference.conversejs.org)](https://inverse.chat/#converse/room?jid=discuss@conference.conversejs.org)
 [![Travis](https://api.travis-ci.org/jcbrand/converse.js.png?branch=master)](https://travis-ci.org/jcbrand/converse.js)
 [![Bountysource bounties](https://img.shields.io/bountysource/team/converse.js/activity.svg?maxAge=2592000)](https://www.bountysource.com/teams/converse.js/issues?tracker_ids=194169)
 [![Translation status](https://hosted.weblate.org/widgets/conversejs/-/svg-badge.svg)](https://hosted.weblate.org/engage/conversejs/?utm_source=widget)
@@ -42,7 +41,7 @@ which shows you how to use the CDN (content delivery network) to quickly get a d
 ## Features
 
 -   A [plugin architecture](https://conversejs.org/docs/html/plugin_development.html) based on [pluggable.js](https://jcbrand.github.io/pluggable.js/)
--   Single-user chat
+-   Single-user and group chats
 -   Contacts and groups
 -   Multi-user chat rooms [XEP 45](http://xmpp.org/extensions/xep-0045.html)
 -   Direct invitations to chat rooms [XEP 249](http://xmpp.org/extensions/xep-0249.html)
@@ -59,6 +58,7 @@ which shows you how to use the CDN (content delivery network) to quickly get a d
 -   Third person "/me" messages [XEP 245](http://xmpp.org/extensions/xep-0245.html)
 -   XMPP Ping [XEP 199](http://xmpp.org/extensions/xep-0199.html)
 -   Server-side archiving of messages [XEP 313](http://xmpp.org/extensions/xep-0313.html)
+-   Hidden Messages (aka Spoilers) [XEP 382](http://xmpp.org/extensions/xep-0382.html)
 -   Client state indication [XEP 352](http://xmpp.org/extensions/xep-0352.html)
 -   Off-the-record encryption
 -   Translated into 16 languages
@@ -103,3 +103,23 @@ For support queries and discussions, please join the mailing list: <conversejs@l
 Also take a look at the [mailing list archives](http://librelist.com/browser/conversejs).
 
 Issues can be logged on the [Github issue tracker](https://github.com/jcbrand/converse.js/issues).
+
+## Donations
+
+A heartfelt thanks for everyone who has supported this project over the years.
+Many people have contributed testing, bugfixes, features and corrections.
+
+Recently we have started accepting donations via [Patreon](https://www.patreon.com/jcbrand) and [Liberapay](https://liberapay.com/jcbrand).
+
+The following people are making recurring donations:
+
+* [Rafael](https://www.patreon.com/user/creators?u=4340078)
+* [mt7479](https://www.patreon.com/user/creators?u=3892290)
+* [roelra](https://www.patreon.com/user/creators?u=5958918)
+* [Guus der Kinderen](https://www.patreon.com/user/creators?u=8302585)
+* An anonymous backer on Liberapay
+
+Additionally this project is supported by
+
+* [![KeyCDN](https://conversejs.org/logo/keycdn.png)](https://www.keycdn.com/)
+* [![Wikisuite](https://conversejs.org/logo/wikisuite.png)](http://wikisuite.org)

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/converse.css

@@ -4758,6 +4758,8 @@
 #converse-embedded-chat,
 #conversejs {
   margin-left: -0.5em;
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
   bottom: 0;
   height: auto;
   width: 100vw;
@@ -5250,6 +5252,9 @@
     #conversejs .chatbox {
       margin: 0;
       width: 100%; } }
+  #converse-embedded-chat .chatbox .spoiler,
+  #conversejs .chatbox .spoiler {
+    background-color: #e7f7ee; }
   #converse-embedded-chat .chatbox .box-flyout,
   #conversejs .chatbox .box-flyout {
     background-color: white;
@@ -5328,6 +5333,8 @@
         margin-top: 1em; }
     #converse-embedded-chat .chatbox .chat-body .chat-image,
     #conversejs .chatbox .chat-body .chat-image {
+      height: auto;
+      width: auto;
       max-height: 24em;
       max-width: 100%; }
     #converse-embedded-chat .chatbox .chat-body .chat-action,
@@ -5358,6 +5365,10 @@
       #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
         max-width: 100%;
         word-wrap: break-word; }
+        #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content.spoiler,
+        #conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler {
+          border-radius: 4px;
+          padding: 0.5em; }
         #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
         #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
           margin-bottom: -6px; }
@@ -5391,6 +5402,10 @@
     line-height: 1.3em;
     height: 206px;
     height: calc(100% - 96px); }
+    #converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
+    #conversejs .chatbox .chat-content .toggle-spoiler:before {
+      padding-right: 0.25em;
+      whitespace: nowrap; }
   #converse-embedded-chat .chatbox .chat-content-sendbutton,
   #conversejs .chatbox .chat-content-sendbutton {
     height: calc(100% - 128px); }
@@ -5424,6 +5439,9 @@
       #converse-embedded-chat .chatbox .sendXMPPMessage,
       #conversejs .chatbox .sendXMPPMessage {
         width: 100%; } }
+    #converse-embedded-chat .chatbox .sendXMPPMessage .spoiler-hint,
+    #conversejs .chatbox .sendXMPPMessage .spoiler-hint {
+      width: 100%; }
     #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
     #conversejs .chatbox .sendXMPPMessage .chat-textarea {
       border-top-left-radius: 0;
@@ -5435,6 +5453,9 @@
       width: 100%;
       border: none;
       resize: none; }
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
+      #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
+        height: 42px; }
     #converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
     #conversejs .chatbox .sendXMPPMessage .send-button {
       position: absolute;
@@ -5450,20 +5471,17 @@
     #conversejs .chatbox .sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;
       margin: 0;
-      padding: 5px;
+      padding: 0.25em;
       height: 25px;
       display: block;
-      background-color: #E7FBF0; }
+      background-color: #50c282;
+      color: white; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
-        font-size: 14px;
-        color: #777;
+        color: white;
+        font-size: 16px;
         text-decoration: none;
         text-shadow: none; }
-      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
-      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text {
-        font-size: 12px;
-        padding-right: 3px; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
@@ -5554,15 +5572,12 @@
               color: #8f2831; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
-          color: #777; }
-        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
-        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
-          padding-left: 5px; }
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
-            background-color: #DCF9F6; }
+          color: white; }
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
+          background-color: #DCF9F6; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
           z-index: 99; }
@@ -5964,7 +5979,8 @@
     padding: 1px;
     float: right; }
   #conversejs #controlbox .controlbox-panes {
-    overflow-y: scroll; }
+    height: 100%;
+    overflow-y: auto; }
   #conversejs #controlbox .controlbox-pane {
     padding: 1em;
     background-color: white;
@@ -6472,7 +6488,7 @@
           background-color: #E77051; }
   #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
   #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
-    background-color: #FFECE7; }
+    background-color: #ed957e; }
   #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
   #conversejs .chatroom .sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }

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

css/inverse.css

@@ -4758,6 +4758,8 @@
 #converse-embedded-chat,
 #conversejs {
   margin-left: -0.5em;
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
   bottom: 0;
   height: auto;
   width: 100vw;
@@ -5306,6 +5308,9 @@ body {
     #conversejs .chatbox {
       margin: 0;
       width: 100%; } }
+  #converse-embedded-chat .chatbox .spoiler,
+  #conversejs .chatbox .spoiler {
+    background-color: #e7f7ee; }
   #converse-embedded-chat .chatbox .box-flyout,
   #conversejs .chatbox .box-flyout {
     background-color: white;
@@ -5384,6 +5389,8 @@ body {
         margin-top: 1em; }
     #converse-embedded-chat .chatbox .chat-body .chat-image,
     #conversejs .chatbox .chat-body .chat-image {
+      height: auto;
+      width: auto;
       max-height: 24em;
       max-width: 100%; }
     #converse-embedded-chat .chatbox .chat-body .chat-action,
@@ -5414,6 +5421,10 @@ body {
       #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
         max-width: 100%;
         word-wrap: break-word; }
+        #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content.spoiler,
+        #conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler {
+          border-radius: 4px;
+          padding: 0.5em; }
         #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
         #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
           margin-bottom: -6px; }
@@ -5447,6 +5458,10 @@ body {
     line-height: 1.3em;
     height: 206px;
     height: calc(100% - 100px); }
+    #converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
+    #conversejs .chatbox .chat-content .toggle-spoiler:before {
+      padding-right: 0.25em;
+      whitespace: nowrap; }
   #converse-embedded-chat .chatbox .chat-content-sendbutton,
   #conversejs .chatbox .chat-content-sendbutton {
     height: calc(100% - 132px); }
@@ -5480,6 +5495,9 @@ body {
       #converse-embedded-chat .chatbox .sendXMPPMessage,
       #conversejs .chatbox .sendXMPPMessage {
         width: 100%; } }
+    #converse-embedded-chat .chatbox .sendXMPPMessage .spoiler-hint,
+    #conversejs .chatbox .sendXMPPMessage .spoiler-hint {
+      width: 100%; }
     #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
     #conversejs .chatbox .sendXMPPMessage .chat-textarea {
       border-top-left-radius: 0;
@@ -5491,6 +5509,9 @@ body {
       width: 100%;
       border: none;
       resize: none; }
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
+      #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
+        height: 42px; }
     #converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
     #conversejs .chatbox .sendXMPPMessage .send-button {
       position: absolute;
@@ -5506,20 +5527,17 @@ body {
     #conversejs .chatbox .sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;
       margin: 0;
-      padding: 5px;
+      padding: 0.25em;
       height: 29px;
       display: block;
-      background-color: #E7FBF0; }
+      background-color: #50c282;
+      color: white; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
-        font-size: 16px;
-        color: #777;
+        color: white;
+        font-size: 18px;
         text-decoration: none;
         text-shadow: none; }
-      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
-      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text {
-        font-size: 12px;
-        padding-right: 3px; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
@@ -5610,15 +5628,12 @@ body {
               color: #8f2831; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
-          color: #777; }
-        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
-        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
-          padding-left: 5px; }
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
-            background-color: #DCF9F6; }
+          color: white; }
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
+          background-color: #DCF9F6; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
           z-index: 99; }
@@ -6036,7 +6051,8 @@ body {
     padding: 1px;
     float: right; }
   #conversejs #controlbox .controlbox-panes {
-    overflow-y: scroll; }
+    height: 100%;
+    overflow-y: auto; }
   #conversejs #controlbox .controlbox-pane {
     padding: 1.2em;
     background-color: white;
@@ -6602,7 +6618,7 @@ body {
           background-color: #E77051; }
   #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
   #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
-    background-color: #FFECE7; }
+    background-color: #ed957e; }
   #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
   #conversejs .chatroom .sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }

css/mobile.css

 #conversejs {
     left: 0px;
     right: 0px;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
 }
 .converse-chatroom {
     font-size: 14px;
 }
 .intro {
-  padding: 0;
-  height: 100vh;
+    padding: 0;
+    height: 100vh;
 }

css/theme.css

@@ -285,7 +285,7 @@ a:focus {
   font-size: 26px;
 }
 .banner-social-buttons {
-    padding-top: 7em;
+    padding-top: 5em;
 }
 ::-moz-selection {
   text-shadow: none;
@@ -357,6 +357,13 @@ ul.features {
     margin-left: 0;
     margin-right: 0;
 }
+
+.mastodon {
+    width: 4em;
+    height: 4em;
+    margin-top: 0.9em;
+}
+
 .sponsors {
     clear: both;
     font-size: 1.4em;

demo/anonymous.html

@@ -16,7 +16,7 @@
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
     <![if gte IE 9]>
         <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/converse.min.css" />
-	<script src="https://cdn.conversejs.org/3.2.1/dist/converse.min.js"></script>
+        <script src="https://cdn.conversejs.org/3.2.1/dist/converse.min.js"></script>
     <![endif]>
 </head>
 
@@ -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

@@ -5,19 +5,19 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Converse.js: A free chat client for your website" />
+    <meta name="description" content="Converse.js: An XMPP chat client which can be integrated into any website" />
     <meta name="author" content="JC Brand" />
     <meta name="keywords" content="xmpp chat webchat converse.js" />
     <link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="../node_modules/font-awesome/css/font-awesome.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/node_modules/bootstrap/dist/css/bootstrap.min.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/node_modules/font-awesome/css/font-awesome.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/css/theme.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/css/converse.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/css/converse-muc-embedded.min.css" />
-    <script type="text/javascript" src="../analytics.js"></script>
+    <script type="text/javascript" src="https://cdn.conversejs.org/analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
-    <![if gte IE 9]>
-	<script src="../dist/converse-muc-embedded.min.js"></script>
+    <![if gte IE 11]>
+        <script src="https://cdn.conversejs.org/dist/converse.min.js"></script>
     <![endif]>
 </head>
 
@@ -41,10 +41,10 @@
             <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>
+                        <div id="conversejs"></div>
                     </div>
                 </div>
             </div>
@@ -54,44 +54,19 @@
 
 <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
+        locales_url: "../locale/{{{locale}}}/LC_MESSAGES/converse.json",
+        view_mode: 'embedded',
     });
 </script>
 </html>

demo/index.html

@@ -16,7 +16,7 @@
     <script type="text/javascript" src="analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
     <![if gte IE 9]>
-	<script src="/dist/converse.min.js"></script>
+        <script src="/dist/converse.min.js"></script>
     <![endif]>
 </head>
 
@@ -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

@@ -51,7 +51,7 @@
     <script type="text/javascript" src="../node_modules/moment/min/moment-with-locales.js"></script>
 
     <script type="text/javascript" src="../3rdparty/lodash.fp.js"></script>
-	<script src="../dist/converse-no-dependencies.js"></script>
+    <script src="../dist/converse-no-dependencies.js"></script>
 </head>
 <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
     <section class="intro">
@@ -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

dev.html

@@ -65,8 +65,8 @@
                 'discuss@conference.conversejs.org'
             ],
             auto_reconnect: true,
-            bosh_service_url: 'http://chat.example.org:5280/http-bind/',
-            // bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
+            // bosh_service_url: 'http://chat.example.org:5280/http-bind/',
+            bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
             message_archiving: 'always',
             show_controlbox_by_default: true,
             strict_plugin_dependencies: false,

docs/source/_static/style.css

@@ -47,7 +47,7 @@ h5 {
 }
 .bs-sidenav .nav .nav .nav > li > a {
     font-size: 90%;
-	color: gray;
+    color: gray;
 }
 
 /*

docs/source/conf.py

@@ -48,9 +48,9 @@ copyright = u'2017, JC Brand'
 # built documents.
 #
 # The short X.Y version.
-version = '3.3.1'
+version = '3.3.3'
 # The full version, including alpha/beta/rc tags.
-release = '3.3.1'
+release = '3.3.3'
 
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.

docs/source/developer_api.rst

@@ -437,6 +437,39 @@ The **disco** grouping
 This grouping collects API functions related to `service discovery
 <https://xmpp.org/extensions/xep-0030.html>`_.
 
+getIdentity
+~~~~~~~~~~~
+
+Paramters:
+
+* (String) category
+* (String) type
+* (String) entity JID
+
+Get the identity (with the given category and type) for a given disco entity.
+
+For example, when determining support for PEP (personal eventing protocol), you
+want to know whether the user's own JID has an identity with
+``category='pubsub'`` and ``type='pep'`` as explained in this section of
+XEP-0163: https://xmpp.org/extensions/xep-0163.html#support
+
+.. code-block:: javascript
+
+    converse.plugins.add('myplugin', {
+        initialize: function () {
+
+            _converse.api.disco.getIdentity('pubsub', 'pep', _converse.bare_jid).then(
+                function (identity) {
+                    if (_.isNil(identity)) {
+                        // The entity DOES NOT have this identity
+                    } else {
+                        // The entity DOES have this identity
+                    }
+                }
+            ).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
+        }
+    });
+
 supports
 ~~~~~~~~
 
@@ -450,7 +483,7 @@ Returns a `Promise` which, when resolved, returns a map/object with keys
     converse.plugins.add('myplugin', {
         initialize: function () {
 
-            _converse.api.disco.supports(_converse.bare_jid, Strophe.NS.MAM).then(
+            _converse.api.disco.supports(Strophe.NS.MAM, _converse.bare_jid).then(
                 function (value) {
                     // `value` is a map with two keys, `supported` and `feature`.
 
@@ -718,35 +751,35 @@ You may also provide the fullname. If not present, we use the jid as fullname:
 The **chats** grouping
 ----------------------
 
-Note, for MUC chat rooms, you need to use the "rooms" grouping instead.
+Note, for MUC chatrooms, you need to use the "rooms" grouping instead.
 
 get
 ~~~
 
-Returns an object representing a chat box. The chat box should already be open.
+Returns an object representing a chatbox. The chatbox should already be open.
 
-To return a single chat box, provide the JID of the contact you're chatting
-with in that chat box:
+To return a single chatbox, provide the JID of the contact you're chatting
+with in that chatbox:
 
 .. code-block:: javascript
 
     _converse.api.chats.get('buddy@example.com')
 
-To return an array of chat boxes, provide an array of JIDs:
+To return an array of chatboxes, provide an array of JIDs:
 
 .. code-block:: javascript
 
     _converse.api.chats.get(['buddy1@example.com', 'buddy2@example.com'])
 
-To return all open chat boxes, call the method without any JIDs::
+To return all open chatboxes, call the method without any JIDs::
 
     _converse.api.chats.get()
 
 open
 ~~~~
 
-Opens a chat box and returns a `Backbone.View <http://backbonejs.org/#View>`_ object
-representing a chat box.
+Opens a chatbox and returns a `Backbone.View <http://backbonejs.org/#View>`_ object
+representing a chatbox.
 
 Note that converse doesn't allow opening chats with users who aren't in your roster
 (unless you have set :ref:`allow_non_roster_messaging` to ``true``).
@@ -754,13 +787,13 @@ Note that converse doesn't allow opening chats with users who aren't in your ros
 Before opening a chat, you should first wait until the roster has been populated.
 This is the :ref:`rosterContactsFetched` event/promise.
 
-Besides that, it's a good idea to also first wait until already opened chat boxes
+Besides that, it's a good idea to also first wait until already opened chatboxes
 (which are cached in sessionStorage) have also been fetched from the cache.
 This is the :ref:`chatBoxesFetched` event/promise.
 
 These two events fire only once per session, so they're also available as promises.
 
-So, to open a single chat box:
+So, to open a single chatbox:
 
 .. code-block:: javascript
 
@@ -777,7 +810,7 @@ So, to open a single chat box:
       }
     });
 
-To return an array of chat boxes, provide an array of JIDs:
+To return an array of chatboxes, provide an array of JIDs:
 
 .. code-block:: javascript
 
@@ -795,14 +828,14 @@ To return an array of chat boxes, provide an array of JIDs:
     });
 
 
-*The returned chat box object contains the following methods:*
+*The returned chatbox object contains the following methods:*
 
 +-------------------+------------------------------------------+
 | Method            | Description                              |
 +===================+==========================================+
-| close             | Close the chat box.                      |
+| close             | Close the chatbox.                      |
 +-------------------+------------------------------------------+
-| focus             | Focuses the chat box textarea            |
+| focus             | Focuses the chatbox textarea            |
 +-------------------+------------------------------------------+
 | model.endOTR      | End an OTR (Off-the-record) session.     |
 +-------------------+------------------------------------------+
@@ -810,13 +843,13 @@ To return an array of chat boxes, provide an array of JIDs:
 +-------------------+------------------------------------------+
 | model.initiateOTR | Start an OTR (off-the-record) session.   |
 +-------------------+------------------------------------------+
-| model.maximize    | Minimize the chat box.                   |
+| model.maximize    | Minimize the chatbox.                   |
 +-------------------+------------------------------------------+
-| model.minimize    | Maximize the chat box.                   |
+| model.minimize    | Maximize the chatbox.                   |
 +-------------------+------------------------------------------+
 | model.set         | Set an attribute (i.e. mutator).         |
 +-------------------+------------------------------------------+
-| show              | Opens/shows the chat box.                |
+| show              | Opens/shows the chatbox.                |
 +-------------------+------------------------------------------+
 
 *The get and set methods can be used to retrieve and change the following attributes:*
@@ -824,9 +857,9 @@ To return an array of chat boxes, provide an array of JIDs:
 +-------------+-----------------------------------------------------+
 | Attribute   | Description                                         |
 +=============+=====================================================+
-| height      | The height of the chat box.                         |
+| height      | The height of the chatbox.                         |
 +-------------+-----------------------------------------------------+
-| url         | The URL of the chat box heading.                    |
+| url         | The URL of the chatbox heading.                    |
 +-------------+-----------------------------------------------------+
 
 .. _`listen-grouping`:
@@ -896,7 +929,7 @@ The **rooms** grouping
 get
 ~~~
 
-Returns an object representing a multi user chat box (room).
+Returns an object representing a multi user chatbox (room).
 It takes 3 parameters:
 
 * the room JID (if not specified, all rooms will be returned).
@@ -928,7 +961,7 @@ It takes 3 parameters:
 open
 ~~~~
 
-Opens a multi user chat box and returns an object representing it.
+Opens a multi user chatbox and returns an object representing it.
 Similar to the ``chats.get`` API.
 
 It takes 2 parameters:
@@ -937,7 +970,7 @@ It takes 2 parameters:
 * A map (object) containing any extra room attributes. For example, if you want
   to specify the nickname, use ``{'nick': 'bloodninja'}``.
 
-To open a single multi user chat box, provide the JID of the room:
+To open a single multi user chatbox, provide the JID of the room:
 
 .. code-block:: javascript
 
@@ -1023,8 +1056,8 @@ For example, opening a room with a specific default configuration:
 close
 ~~~~~
 
-Lets you close open chat rooms. You can call this method without any arguments
-to close all open chat rooms, or you can specify a single JID or an array of
+Lets you close open chatrooms. You can call this method without any arguments
+to close all open chatrooms, or you can specify a single JID or an array of
 JIDs.
 
 .. _`promises-grouping`:

docs/source/events.rst

@@ -50,7 +50,7 @@ Here follows the different events that are emitted:
 afterMessagesFetched
 ~~~~~~~~~~~~~~~~~~~~
 
-Emitted whenever a chat box has fetched its messages from ``sessionStorage`` and
+Emitted whenever a chatbox has fetched its messages from ``sessionStorage`` and
 **NOT** from the server.
 
 This event is listened to by the ``converse-mam`` plugin to know when it can
@@ -83,7 +83,7 @@ See also the `roster`_ event further down.
 callButtonClicked
 ~~~~~~~~~~~~~~~~~
 
-When a call button (i.e. with class .toggle-call) on a chat box has been clicked.
+When a call button (i.e. with class .toggle-call) on a chatbox has been clicked.
 
 ``_converse.on('callButtonClicked', function (connection, model) { ... });``
 
@@ -92,10 +92,10 @@ When a call button (i.e. with class .toggle-call) on a chat box has been clicked
 chatBoxesFetched
 ~~~~~~~~~~~~~~~~
 
-Any open chat boxes (from this current session) has been retrieved from the local cache (`sessionStorage`).
+Any open chatboxes (from this current session) has been retrieved from the local cache (`sessionStorage`).
 
 You should wait for this event or promise before attempting to do things
-related to open chat boxes.
+related to open chatboxes.
 
 ``_converse.on('chatBoxesFetched', function (items) { ... });``
 
@@ -110,42 +110,42 @@ Also available as an `ES2015 Promise <http://es6-features.org/#PromiseUsage>`_:
 chatBoxInitialized
 ~~~~~~~~~~~~~~~~~~
 
-When a chat box has been initialized. Relevant to converse-chatview.js plugin.
+When a chatbox has been initialized. Relevant to converse-chatview.js plugin.
 
 ``_converse.on('chatBoxInitialized', function (chatbox) { ... });``
 
 chatBoxOpened
 ~~~~~~~~~~~~~
 
-When a chat box has been opened. Relevant to converse-chatview.js plugin.
+When a chatbox has been opened. Relevant to converse-chatview.js plugin.
 
 ``_converse.on('chatBoxOpened', function (chatbox) { ... });``
 
 chatRoomOpened
 ~~~~~~~~~~~~~~
 
-When a chat room has been opened. Relevant to converse-chatview.js plugin.
+When a chatroom has been opened. Relevant to converse-chatview.js plugin.
 
 ``_converse.on('chatRoomOpened', function (chatbox) { ... });``
 
 chatBoxClosed
 ~~~~~~~~~~~~~
 
-When a chat box has been closed. Relevant to converse-chatview.js plugin.
+When a chatbox has been closed. Relevant to converse-chatview.js plugin.
 
 ``_converse.on('chatBoxClosed', function (chatbox) { ... });``
 
 chatBoxFocused
 ~~~~~~~~~~~~~~
 
-When the focus has been moved to a chat box. Relevant to converse-chatview.js plugin.
+When the focus has been moved to a chatbox. Relevant to converse-chatview.js plugin.
 
 ``_converse.on('chatBoxFocused', function (chatbox) { ... });``
 
 chatBoxToggled
 ~~~~~~~~~~~~~~
 
-When a chat box has been minimized or maximized. Relevant to converse-chatview.js plugin.
+When a chatbox has been minimized or maximized. Relevant to converse-chatview.js plugin.
 
 ``_converse.on('chatBoxToggled', function (chatbox) { ... });``
 
@@ -239,15 +239,15 @@ The user has logged out.
 messageAdded
 ~~~~~~~~~~~~
 
-Once a message has been added to a chat box. The passed in data object contains
-a `chatbox` attribute, referring to the chat box receiving the message, as well
+Once a message has been added to a chatbox. The passed in data object contains
+a `chatbox` attribute, referring to the chatbox receiving the message, as well
 as a `message` attribute which refers to the Message model.
 
 .. code-block:: javascript
 
     _converse.on('messageAdded', function (data) {
         // The message is at `data.message`
-        // The original chat box is at `data.chatbox`.
+        // The original chatbox is at `data.chatbox`.
     });
 
 messageSend

docs/source/features.rst

@@ -69,17 +69,17 @@ Languages increase the size of the Converse.js significantly.
 If you only need one, or a subset of the available languages, it's better to
 make a custom build which includes only those languages that you need.
 
-Moderating chat rooms
-=====================
+Moderating chatrooms
+====================
 
-Here are the different commands that may be used to moderate a chat room:
+Here are the different commands that may be used to moderate a chatroom:
 
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
 | Event Type | When is it triggered?                                                                        | Example (substitue $nickname with an actual user's nickname)  |
 +============+==============================================================================================+===============================================================+
-| **ban**    | Ban a user from the chat room. They will not be able to join again.                          | /ban $nickname                                                |
+| **ban**    | Ban a user from the chatroom. They will not be able to join again.                           | /ban $nickname                                                |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
-| **clear**  | Clear the messages shown in the chat room.                                                   | /clear                                                        |
+| **clear**  | Clear the messages shown in the chatroom.                                                    | /clear                                                        |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
 | **deop**   | Make a moderator a normal occupant.                                                          | /deop $nickname [$reason]                                     |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
@@ -95,7 +95,7 @@ Here are the different commands that may be used to moderate a chat room:
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
 | **op**     | Make a normal occupant a moderator.                                                          | /op $nickname [$reason]                                       |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
-| **topic**  | Set the topic of the chat room.                                                              | /topic ${topic text}                                          |
+| **topic**  | Set the topic of the chatroom.                                                               | /topic ${topic text}                                          |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
 | **voice**  | Allow a muted user to post messages to the room.                                             | /voice $nickname [$reason]                                    |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+

docs/source/manual.rst

@@ -168,7 +168,7 @@ A normal contact
 
 If the person accepts your contact request, they will get a *chat status
 indicator* in your roster and will also become clickable. Clicking on the name
-of the user will open a chat box in which you can then start chatting with that
+of the user will open a chatbox in which you can then start chatting with that
 user.
 
 .. figure:: images/remove-contact.png

docs/source/other_frameworks.rst

@@ -52,7 +52,7 @@ Below is an example code that wraps converse.js as an angular.js service.
                                      // file src/locales.js to include only those
                                      // translations that you care about.
 
-            "converse-chatview",     // Renders standalone chat boxes for single user chat
+            "converse-chatview",     // Renders standalone chatboxes for single user chat
             "converse-controlbox",   // The control box
             "converse-bookmarks",    // XEP-0048 Bookmarks
             "converse-mam",          // XEP-0313 Message Archive Management
@@ -62,8 +62,8 @@ Below is an example code that wraps converse.js as an angular.js service.
             "converse-register",     // XEP-0077 In-band registration
             "converse-ping",         // XEP-0199 XMPP Ping
             "converse-notification", // HTML5 Notifications
-            "converse-minimize",     // Allows chat boxes to be minimized
-            "converse-dragresize",   // Allows chat boxes to be resized by dragging them
+            "converse-minimize",     // Allows chatboxes to be minimized
+            "converse-dragresize",   // Allows chatboxes to be resized by dragging them
             "converse-headline",     // Support for headline messages
             // END: Removable components
 

docs/source/plugin_development.rst

@@ -340,7 +340,7 @@ method of the plugin:
     });
 
 In this case, the plugin waits for the ``chatBoxOpened`` event, before it then
-calls ``renderMinimizeButton``, which adds a new button to the chat box (which
+calls ``renderMinimizeButton``, which adds a new button to the chatbox (which
 enables you to minimize it).
 
 Finding the right promises and/or events to listen to, can be a bit

docs/source/quickstart.rst

@@ -22,8 +22,8 @@ The latest versions of these files are available at these URLs:
 
 To load a specific version of Converse.js you can put the version in the URL, like so:
 
-* https://cdn.conversejs.org/3.0.3/dist/converse.min.js
-* https://cdn.conversejs.org/3.0.3/css/converse.min.css
+* https://cdn.conversejs.org/3.3.3/dist/converse.min.js
+* https://cdn.conversejs.org/3.3.3/css/converse.min.css
 
 You can include these two URLs inside the *<head>* element of your website
 via the *script* and *link* tags:
@@ -100,7 +100,7 @@ Headless build
 
 There is also the option of making a headless build of converse.js.
 This means a build without any UI but still containing core functionality of
-maintaining a roster, chat boxes and messages.
+maintaining a roster, chatboxes and messages.
 
 The file `src/headless.js <https://github.com/jcbrand/converse.js/blob/master/src/headless.js>`_
 is used to determine which plugins are included in the build.

index.html

@@ -16,8 +16,8 @@
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
     <script src="src/website.js"></script>
     <![if gte IE 11]>
-        <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.3.1/css/converse.min.css" />
-        <script src="https://cdn.conversejs.org/3.3.1/dist/converse.min.js"></script>
+        <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
+        <script src="dist/converse.js"></script>
     <![endif]>
 </head>
 
@@ -85,10 +85,9 @@
         <div class="row">
             <div class="col-md-8 col-md-offset-2 banner-social-buttons">
                 <ul class="list-inline">
-                    <li><a href="https://twitter.com/jcopkode" class="btn btn-circle btn-lg" title="Twitter" target="_blank" rel="noopener"><i class="fa fa-twitter"></i></a>
-                    </li>
-                    <li><a href="https://github.com/jcbrand/converse.js" class="btn btn-circle btn-lg" title="GitHub" target="_blank" rel="noopener"><i class="fa fa-github"></i></a>
-                    </li>
+                    <li><a href="https://twitter.com/jcopkode" class="btn btn-circle btn-lg" title="Twitter" target="_blank" rel="noopener"><i class="fa fa-twitter"></i></a></li>
+                    <li><a href="https://mastodon.xyz/@jcbrand" class="btn btn-lg" title="Mastodon" target="_blank" rel="noopener"><img class="mastodon" src="/logo/mastodon.svg"/></a></li>
+                    <li><a href="https://github.com/jcbrand/converse.js" class="btn btn-circle btn-lg" title="GitHub" target="_blank" rel="noopener"><i class="fa fa-github"></i></a></li>
                 </ul>
             </div>
         </div>
@@ -144,11 +143,8 @@
                             <li>Available as overlayed chat boxes or as a fullscreen application.
                                 See <a href="https://inverse.chat" target="_blank" rel="noopener">inverse.chat</a> for the fullscreen version.
                             </li>
-                            <li><a href="https://conversejs.org/docs/html/plugin_development.html">Plugin Architecture</a> based on 
-                                <a href="https://jcbrand.github.io/pluggable.js/" target="_blank" rel="noopener">pluggable.js</a></li>
-                            <li>Presence information (online, busy, away)</li>
-                            <li>Single-user chat</li>
-                            <li>Contacts and groups</li>
+                            <li><a href="https://conversejs.org/docs/html/plugin_development.html">Plugin Architecture</a></li>
+                            <li>Single-user and group chat</li>
                             <li>Multi-user chatrooms (<a href="http://xmpp.org/extensions/xep-0045.html" target="_blank" rel="noopener">XEP 45</a>)</li>
                             <li>Chatroom bookmarks (<a href="http://xmpp.org/extensions/xep-0048.html" target="_blank" rel="noopener">XEP 48</a>)</li>
                             <li>Direct invitations to chat rooms (<a href="http://xmpp.org/extensions/xep-0249.html" target="_blank" rel="noopener">XEP 249</a>)</li>
@@ -163,10 +159,11 @@
                             <li>Third person "/me" messages (<a href="http://xmpp.org/extensions/xep-0245.html" target="_blank" rel="noopener">XEP 245</a>)</li>
                             <li>XMPP Ping (<a href="http://xmpp.org/extensions/xep-0199.html" target="_blank" rel="noopener">XEP 199</a>)</li>
                             <li>Server-side archiving of messages (<a href="http://xmpp.org/extensions/xep-0313.html" target="_blank" rel="noopener">XEP 313</a>)</li>
+                            <li>Hidden messages (aka Spoilers) (<a href="http://xmpp.org/extensions/xep-0382.html" target="_blank" rel="noopener">XEP 382</a>)</li>
                             <li>Client state indication (<a href="http://xmpp.org/extensions/xep-0352.html" target="_blank" rel="noopener">XEP 352</a>)</li>
                             <li>Off-the-record encryption</li>
                             <li>Supports anonymous logins, see the <a href="https://conversejs.org/demo/anonymous.html" target="_blank" rel="noopener">anonymous login demo</a>.</li>
-                            <li>Translated into 16 languages</li>
+                            <li>Translated into 17 languages</li>
                         </ul>
                 </div>
                 <div class="col-lg-4">
@@ -233,15 +230,16 @@
                     <div class="sponsors">
                         <h2>Converse.js is supported by:</h2>
                         <ul>
-                            <li><a href="https://www.keycdn.com/" target="_blank" rel="noopener"><img style="height: 2em" src="/logo/keycdn.svg" alt="KeyCDN"></a></li>
+                            <li><a href="https://www.keycdn.com/" target="_blank" rel="noopener"><img style="height: 3em" src="/logo/keycdn.svg" alt="KeyCDN"></a></li>
+                            <li><a href="http://wikisuite.org" target="_blank" rel="noopener"><img style="height: 4em" src="/logo/wikisuite-white.png" alt="WikiSuite"></a></li>
                             <li><a href="https://diasporing.ch" target="_blank" rel="noopener"><img style="height: 2em" src="/logo/diasporing.svg" alt="Diasporing.ch"></a></li>
                         </ul>
                     </div>
 
-                    <p class="sponsors-text">Converse.js is a software commons; available at no cost to you and every other person on earth.
+                    <p class="sponsors-text">Converse.js is a software commons; available at no cost to you or anyone else.
                        Sponsorships allow us to fund further development and improvements and are greatly appreciated.
                        If you'd like to sponsor this project, please visit <a href="https://www.patreon.com/jcbrand" target="_blank" rel="noopener">Patreon page</a>
-                       or <a href="https://liberapay.com/jcbrand" target="_blank" rel="noopener">Liberapay</a>
+                       or <a href="https://liberapay.com/jcbrand" target="_blank" rel="noopener">Liberapay</a>.
                     </p>
                 </div>
             </div>

logo/mastodon.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   viewBox="0 0 100 100"
+   id="svg899"
+   version="1.1"
+   sodipodi:docname="mastodon.svg"
+   >
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     id="namedview868"
+     showgrid="false"
+      />
+  <metadata
+     id="metadata903">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs891">
+    <g
+       id="Layer0_0_FILL">
+      <path
+         id="path887"
+         d=" M 280.35 204.05 Q 280.35 202.3 279.1 201.05 277.85 199.8 276.1 199.8 274.35 199.8 273.1 201.05 271.85 202.3 271.85 204.05 271.85 205 272.25 205.8 272.55 206.5 273.1 207.05 274.35 208.3 276.1 208.3 277.85 208.3 279.1 207.05 279.65 206.5 280 205.8 280.35 205 280.35 204.05 M 273.1 187.05 Q 271.85 188.3 271.85 190.05 271.85 191.8 273.1 193.05 274.35 194.3 276.1 194.3 277.85 194.3 279.1 193.05 279.5 192.65 279.8 192.2 280.35 191.25 280.35 190.05 280.35 188.3 279.1 187.05 278.75 186.7 278.35 186.45 277.35 185.8 276.1 185.8 274.35 185.8 273.1 187.05 M 276.1 171.8 Q 274.35 171.8 273.1 173.05 271.85 174.3 271.85 176.05 271.85 177.8 273.1 179.05 274.35 180.3 276.1 180.3 277.85 180.3 279.1 179.05 280.35 177.8 280.35 176.05 280.35 174.3 279.1 173.05 277.85 171.8 276.1 171.8 M 236.1 208.55 Q 234.85 207.3 233.1 207.3 231.35 207.3 230.1 208.55 228.85 209.8 228.85 211.55 228.85 213.3 230.1 214.55 231.35 215.8 233.1 215.8 234.85 215.8 236.1 214.55 237.35 213.3 237.35 211.55 237.35 209.8 236.1 208.55 M 230.1 194.55 Q 228.85 195.8 228.85 197.55 228.85 199.3 230.1 200.55 231.35 201.8 233.1 201.8 234.35 201.8 235.35 201.15 235.75 200.9 236.1 200.55 237.35 199.3 237.35 197.55 237.35 196.35 236.8 195.4 236.5 194.95 236.1 194.55 234.85 193.3 233.1 193.3 231.35 193.3 230.1 194.55 M 236.1 180.55 Q 234.85 179.3 233.1 179.3 231.35 179.3 230.1 180.55 229.55 181.1 229.25 181.8 228.85 182.6 228.85 183.55 228.85 185.3 230.1 186.55 231.35 187.8 233.1 187.8 234.85 187.8 236.1 186.55 237.35 185.3 237.35 183.55 237.35 182.6 237 181.8 236.65 181.1 236.1 180.55 M 318.6 207.3 Q 316.85 207.3 315.6 208.55 314.35 209.8 314.35 211.55 314.35 213.3 315.6 214.55 316.85 215.8 318.6 215.8 320.35 215.8 321.6 214.55 322.85 213.3 322.85 211.55 322.85 209.8 321.6 208.55 320.35 207.3 318.6 207.3 M 321.6 194.55 Q 320.35 193.3 318.6 193.3 316.85 193.3 315.6 194.55 315.2 194.95 314.9 195.4 314.35 196.35 314.35 197.55 314.35 199.3 315.6 200.55 315.95 200.9 316.35 201.15 317.35 201.8 318.6 201.8 320.35 201.8 321.6 200.55 322.85 199.3 322.85 197.55 322.85 195.8 321.6 194.55 M 314.7 181.8 Q 314.35 182.6 314.35 183.55 314.35 185.3 315.6 186.55 316.85 187.8 318.6 187.8 320.35 187.8 321.6 186.55 322.85 185.3 322.85 183.55 322.85 182.6 322.45 181.8 322.15 181.1 321.6 180.55 320.35 179.3 318.6 179.3 316.85 179.3 315.6 180.55 315.05 181.1 314.7 181.8 Z"
+         stroke="none"
+         fill="white" />
+    </g>
+    <path
+       d=" M 334.35 213.3 L 334.35 181.9 Q 334.35 181.85 334.35 181.8 334.15 175.65 329.85 171.35 325.3 166.8 318.85 166.8 312.4 166.8 307.9 171.35 303.5 175.7 303.35 181.9 L 303.35 214.8 Q 303 223.05 296.35 228.8 L 318.35 228.8 Q 318.6 228.8 318.85 228.8 325.3 228.8 329.85 224.3 334.35 219.75 334.35 213.3 Z M 351.2 197.5 Q 351.2 228.55 329.25 250.5 307.3 272.45 276.25 272.45 245.25 272.45 223.3 250.5 201.35 228.55 201.35 197.5 201.35 166.5 223.3 144.55 245.25 122.55 276.25 122.55 307.3 122.55 329.25 144.55 351.2 166.5 351.2 197.5 Z M 217.35 213.3 L 217.35 181.9 Q 217.35 181.85 217.35 181.8 217.55 175.65 221.85 171.35 226.4 166.8 232.85 166.8 239.3 166.8 243.8 171.35 248.2 175.7 248.35 181.9 L 248.35 214.8 Q 248.7 223.05 255.35 228.8 L 233.35 228.8 Q 233.1 228.8 232.85 228.8 226.4 228.8 221.85 224.3 217.35 219.75 217.35 213.3 Z M 260.35 174.3 L 260.35 205.7 Q 260.35 205.75 260.35 205.8 260.55 211.95 264.85 216.25 269.4 220.8 275.85 220.8 282.3 220.8 286.8 216.25 291.2 211.9 291.35 205.7 L 291.35 172.8 Q 291.7 164.55 298.35 158.8 L 276.35 158.8 Q 276.1 158.8 275.85 158.8 269.4 158.8 264.85 163.3 260.35 167.85 260.35 174.3 Z"
+       fill="none"
+       stroke-miterlimit="3"
+       stroke-linecap="round"
+       stroke-linejoin="miter"
+       stroke-width="4"
+       stroke="white"
+       id="Layer0_0_1_STROKES" />
+  </defs>
+  <g
+     id="g872"
+     transform="matrix(1.2351757,0,0,1.2586523,-10.042372,-11.404917)">
+    <use
+       y="0"
+       x="0"
+       id="use893"
+       xlink:href="#Layer0_0_FILL"
+       transform="matrix(0.52842775,0,0,0.50807109,-97.047903,-51.777426)"
+       width="100%"
+       height="100%" />
+    <use
+       y="0"
+       x="0"
+       id="use895"
+       xlink:href="#Layer0_0_1_STROKES"
+       transform="matrix(0.52842775,0,0,0.50807109,-97.047903,-51.777426)"
+       width="100%"
+       height="100%" />
+  </g>
+</svg>

mobile.html

@@ -16,8 +16,8 @@
     <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/css/mobile.min.css" />
     <script type="text/javascript" src="analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
-    <![if gte IE 9]>
-        <script src="https://cdn.conversejs.org/dist/converse-mobile.min.js"></script>
+    <![if gte IE 11]>
+        <script src="https://cdn.conversejs.org/dist/converse.min.js"></script>
     <![endif]>
 </head>
 

package.json

 {
   "name": "converse.js",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "description": "Browser based XMPP instant messaging client",
   "main": "main.js",
   "directories": {
@@ -37,10 +37,10 @@
     "backbone": "1.3.3",
     "backbone.browserStorage": "0.0.3",
     "backbone.nativeview": "^0.3.3",
-    "backbone.overview": "1.0.0",
-    "backbone.vdomview": "1.0.0",
     "bootstrap": "^4.0.0",
     "bootstrap.native": "^2.0.21",
+    "backbone.overview": "1.0.2",
+    "backbone.vdomview": "1.0.1",
     "bourbon": "^4.3.2",
     "clean-css-cli": "^4.0.10",
     "emojione": "^3.0.3",
@@ -57,15 +57,14 @@
     "lodash": "4.17.4",
     "lodash-template-loader": "^2.0.0",
     "moment": "~2.18.1",
-    "npm": "^4.1.1",
-    "otr": "0.2.16",
+    "otr": "jcbrand/otr",
     "pluggable.js": "2.0.0",
     "po2json": "^0.4.4",
     "requirejs": "2.3.5",
     "run-headless-chromium": "^0.1.1",
     "sinon": "^2.1.0",
     "sizzle": "^2.3.3",
-    "snabbdom": "jcbrand/snabbdom",
+    "snabbdom": "0.7.1",
     "snyk": "^1.21.2",
     "strophe.js": "1.2.14",
     "strophejs-plugin-disco": "0.0.1",

sass/_chatbox.scss

@@ -85,6 +85,11 @@
             margin: 0;
             width: $mobile-chat-width;
         }
+
+        .spoiler {
+            background-color: lighten($chat-head-color, 50%);
+        }
+
         .box-flyout {
             background-color: white;
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
@@ -157,6 +162,8 @@
                 }
             }
             .chat-image {
+                height: auto;
+                width: auto;
                 max-height: 24em;
                 max-width: 100%;
             }
@@ -189,6 +196,12 @@
                 .chat-msg-content {
                     max-width: 100%;
                     word-wrap: break-word;
+
+                    &.spoiler {
+                        border-radius: $chatbox-border-radius;
+                        padding: 0.5em;
+                    }
+
                     .emojione {
                         margin-bottom: -6px;
                     }
@@ -226,6 +239,11 @@
             line-height: 1.3em;
             height: 206px;
             height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px});
+
+            .toggle-spoiler:before {
+                padding-right: 0.25em;
+                whitespace: nowrap;
+            }
         }
         .chat-content-sendbutton {
             height: calc(100% - #{$toolbar-height + $chat-textarea-height + $send-button-height + 2*$send-button-margin});
@@ -239,6 +257,7 @@
                 position: relative;
             }
         }
+
         .sendXMPPMessage {
             -moz-background-clip: padding;
             -webkit-background-clip: padding-box;
@@ -257,6 +276,10 @@
                 width: 100%;
             }
 
+            .spoiler-hint {
+                width: 100%;
+            }
+
             .chat-textarea {
                 border-top-left-radius: 0;
                 border-top-right-radius: 0;
@@ -266,6 +289,9 @@
                 width: 100%;
                 border: none;
                 resize: none;
+                &.spoiler {
+                    height: 42px;
+                }
             }
 
             .send-button {
@@ -282,20 +308,17 @@
             .chat-toolbar {
                 box-sizing: border-box;
                 margin: 0;
-                padding: 5px;
+                padding: 0.25em;
                 height: $toolbar-height;
                 display: block;
-                background-color: $toolbar-color;
+                background-color: lighten($chat-head-color, 10%);
+                color: white;
                 a {
-                    font-size: $font-size;
-                    color: $text-color;
+                    color: white;
+                    font-size: $font-size-large;
                     text-decoration: none;
                     text-shadow: none;
                 }
-                .chat-toolbar-text {
-                    font-size: 12px;
-                    padding-right: 3px;
-                }
                 .unencrypted a,
                 .unencrypted {
                     color: $text-color;
@@ -384,10 +407,9 @@
                         }
                     }
                     &.toggle-toolbar-menu {
-                        color: $text-color;
+                        color: white;
                     }
                     &.toggle-smiley {
-                        padding-left: 5px;
                         .emoji-toolbar {
                             .emoji-category-picker,
                             .emoji-skintone-picker {

sass/_chatrooms.scss

@@ -185,10 +185,10 @@
                             &.occupant {
                                 cursor: pointer;
                                 .occupant-status {
-									display: inline-block;
+                                    display: inline-block;
                                     margin-right: 0.5em;
-									width: 0.5em;
-									height: 0.5em;
+                                    width: 0.5em;
+                                    height: 0.5em;
                                     &.occupant-online,
                                     &.occupant-chat {
                                         background-color: #1A9707;
@@ -249,7 +249,7 @@
 
         .sendXMPPMessage {
             .chat-toolbar {
-                background-color: $chatroom-toolbar-color;
+                background-color: lighten($chatroom-head-color, 10%);
             }
             .chat-textarea {
                 border-bottom-right-radius: 0;

sass/_controlbox.scss

@@ -404,7 +404,8 @@
         }
 
         .controlbox-panes {
-            overflow-y: scroll;
+            height: 100%;
+            overflow-y: auto;
         }
 
         .controlbox-pane {

sass/_core.scss

@@ -9,6 +9,8 @@
 #converse-embedded-chat,
 #conversejs {
     margin-left: -$chat-gutter; // Mystery why this is necessary
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
     bottom: 0;
     height: auto;
     width: 100vw;
@@ -21,17 +23,18 @@
     z-index: 1031; // One more than bootstrap navbar
 
     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-    color: $subdued-color;
+        color: $subdued-color;
     }
     ::-moz-placeholder { /* Firefox 19+ */
-    color: $subdued-color;
+        color: $subdued-color;
     }
     :-ms-input-placeholder { /* IE 10+ */
-    color: $subdued-color;
+        color: $subdued-color;
     }
     :-moz-placeholder { /* Firefox 18- */
-    color: $subdued-color;
+        color: $subdued-color;
     }
+
     ::placeholder {
         color: $subdued-color;
     }
@@ -105,33 +108,33 @@
     }
 
     @keyframes colorchange-chatmessage {
-          0%   {background-color: rgba(141, 216, 174, 1);}
-          25%  {background-color: rgba(141, 216, 174, 0.75);}
-          50%  {background-color: rgba(141, 216, 174, 0.5);}
-          75%  {background-color: rgba(141, 216, 174, 0.25);}
-          100% {background-color: transparent;}
+        0%   {background-color: rgba(141, 216, 174, 1);}
+        25%  {background-color: rgba(141, 216, 174, 0.75);}
+        50%  {background-color: rgba(141, 216, 174, 0.5);}
+        75%  {background-color: rgba(141, 216, 174, 0.25);}
+        100% {background-color: transparent;}
     }
     @-webkit-keyframes colorchange-chatmessage {
-          0%   {background-color: rgba(141, 216, 174, 1);}
-          25%  {background-color: rgba(141, 216, 174, 0.75);}
-          50%  {background-color: rgba(141, 216, 174, 0.5);}
-          75%  {background-color: rgba(141, 216, 174, 0.25);}
-          100% {background-color: transparent;}
+        0%   {background-color: rgba(141, 216, 174, 1);}
+        25%  {background-color: rgba(141, 216, 174, 0.75);}
+        50%  {background-color: rgba(141, 216, 174, 0.5);}
+        75%  {background-color: rgba(141, 216, 174, 0.25);}
+        100% {background-color: transparent;}
     }
 
     @keyframes colorchange-chatmessage-muc {
-          0%   {background-color: rgba(255, 181, 162, 1);}
-          25%  {background-color: rgba(255, 181, 162, 0.75);}
-          50%  {background-color: rgba(255, 181, 162, 0.5);}
-          75%  {background-color: rgba(255, 181, 162, 0.25);}
-          100% {background-color: transparent;}
+        0%   {background-color: rgba(255, 181, 162, 1);}
+        25%  {background-color: rgba(255, 181, 162, 0.75);}
+        50%  {background-color: rgba(255, 181, 162, 0.5);}
+        75%  {background-color: rgba(255, 181, 162, 0.25);}
+        100% {background-color: transparent;}
     }
     @-webkit-keyframes colorchange-chatmessage-muc {
-          0%   {background-color: rgba(255, 181, 162, 1);}
-          25%  {background-color: rgba(255, 181, 162, 0.75);}
-          50%  {background-color: rgba(255, 181, 162, 0.5);}
-          75%  {background-color: rgba(255, 181, 162, 0.25);}
-          100% {background-color: transparent;}
+        0%   {background-color: rgba(255, 181, 162, 1);}
+        25%  {background-color: rgba(255, 181, 162, 0.75);}
+        50%  {background-color: rgba(255, 181, 162, 0.5);}
+        75%  {background-color: rgba(255, 181, 162, 0.25);}
+        100% {background-color: transparent;}
     }
 
 

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

spec/disco.js

@@ -79,7 +79,7 @@
                     _converse.connection._dataRecv(test_utils.createRequest(stanza));
 
                     var entities = _converse.disco_entities;
-                    expect(entities.length).toBe(1);
+                    expect(entities.length).toBe(2); // We have an extra entity, which is the user's JID
                     expect(entities.get(_converse.domain).features.length).toBe(5);
                     expect(entities.get(_converse.domain).identities.length).toBe(3);
                     expect(entities.get('localhost').features.where({'var': 'jabber:iq:version'}).length).toBe(1);
@@ -159,7 +159,7 @@
                     _converse.connection._dataRecv(test_utils.createRequest(stanza));
 
                     entities = _converse.disco_entities;
-                    expect(entities.length).toBe(4);
+                    expect(entities.length).toBe(5); // We have an extra entity, which is the user's JID
                     expect(entities.get(_converse.domain).identities.where({'category': 'conference'}).length).toBe(1);
                     expect(entities.get(_converse.domain).identities.where({'category': 'directory'}).length).toBe(1);
                     done();

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",
@@ -175,7 +175,10 @@
                     } else {
                         height = "";
                     }
-                    this.el.querySelector('.box-flyout').style.height = height;
+                    const flyout_el = this.el.querySelector('.box-flyout');
+                    if (!_.isNull(flyout_el)) {
+                        flyout_el.style.height = height;
+                    }
                 },
 
                 setChatBoxWidth (width) {
@@ -186,10 +189,12 @@
                         width = "";
                     }
                     this.el.style.width = width;
-                    this.el.querySelector('.box-flyout').style.width = width;
+                    const flyout_el = this.el.querySelector('.box-flyout');
+                    if (!_.isNull(flyout_el)) {
+                        flyout_el.style.width = width;
+                    }
                 },
 
-
                 adjustToViewport () {
                     /* Event handler called when viewport gets resized. We remove
                      * custom width/height from chat boxes.

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",