Commit 08a76d8a authored by JC Brand's avatar JC Brand

Merge branch 'webcomponent-embedded'

parents 2a2e4688 4e599600
...@@ -13,12 +13,18 @@ though they should be private._ ...@@ -13,12 +13,18 @@ though they should be private._
### New features ### New features
- XEP-0382 Spoiler Messages (currently only for private chats) - XEP-0382 Spoiler Messages (currently only for private chats)
- Listen for new room bookmarks pushed from the user's PEP service. - 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 ### API changes
- New API method `_converse.disco.getIdentity` to check whether a JID has a given identity. - 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 [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) ## 3.3.2 (2018-01-29)
......
...@@ -131,7 +131,7 @@ dev: stamp-bundler stamp-npm ...@@ -131,7 +131,7 @@ dev: stamp-bundler stamp-npm
## Builds ## Builds
.PHONY: css .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/* css/inverse.css:: dev sass sass/*
$(SASS) -I $(BOURBON_TEMPLATES) sass/inverse/inverse.scss css/inverse.css $(SASS) -I $(BOURBON_TEMPLATES) sass/inverse/inverse.scss css/inverse.css
...@@ -157,6 +157,9 @@ css/theme.min.css:: stamp-npm css/theme.css ...@@ -157,6 +157,9 @@ css/theme.min.css:: stamp-npm css/theme.css
css/mobile.min.css:: stamp-npm sass/* css/mobile.min.css:: stamp-npm sass/*
$(CLEANCSS) css/mobile.css > css/mobile.min.css $(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 .PHONY: watch
watch: dev 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 $(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
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51 https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/ */
#converse-embedded-chat { #conversejs.converse-embedded {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
...@@ -11,56 +11,56 @@ ...@@ -11,56 +11,56 @@
right: auto; right: auto;
position: relative; position: relative;
width: 100%; } 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; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
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; position: absolute;
top: 30%; top: 30%;
transform: translateY(-50%); } transform: translateY(-50%); }
#converse-embedded-chat .chatroom { #conversejs.converse-embedded .chatroom {
width: auto; } width: auto; }
#converse-embedded-chat .flyout { #conversejs.converse-embedded .flyout {
bottom: auto; bottom: auto;
display: block; display: block;
position: relative; } position: relative; }
#converse-embedded-chat .chatbox { #conversejs.converse-embedded .chatbox {
float: none; } float: none; }
#converse-embedded-chat .chatbox .box-flyout { #conversejs.converse-embedded .chatbox .box-flyout {
box-shadow: none; } box-shadow: none; }
#converse-embedded-chat .chatbox .chat-title { #conversejs.converse-embedded .chatbox .chat-title {
padding: 0.3em; padding: 0.3em;
font-size: 120%; } font-size: 120%; }
#converse-embedded-chat .chatbox-btn { #conversejs.converse-embedded .chatbox-btn {
display: none; } display: none; }
#converse-embedded-chat .chatroom .box-flyout { #conversejs.converse-embedded .chatroom .box-flyout {
min-width: auto; min-width: auto;
width: 100%; width: 100%;
height: 55vh; } height: 55vh; }
#converse-embedded-chat .chatroom .box-flyout .chat-body { #conversejs.converse-embedded .chatroom .box-flyout .chat-body {
height: -webkit-calc(100% - 55px); height: -webkit-calc(100% - 55px);
height: 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%; } font-size: 120%; }
#converse-embedded-chat .chatroom .box-flyout .chat-content { #conversejs.converse-embedded .chatroom .box-flyout .chat-content {
height: calc(100% - 97px); } 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; margin: 0.5em;
font-size: 120%; } font-size: 120%; }
#converse-embedded-chat .chatroom .box-flyout .sendXMPPMessage .chat-textarea { #conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
padding: 0.5em; padding: 0.5em;
font-size: 110%; } 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%; font-size: 180%;
float: left; float: left;
height: 100%; height: 100%;
position: relative; } 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%; } 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; } 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%; } font-size: 120%; }
/*# sourceMappingURL=converse-muc-embedded.css.map */ /*# sourceMappingURL=converse-muc-embedded.css.map */
/*
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 */
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2"> <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> <p class="intro-text">Anonymous login demo</p>
</div> </div>
</div> </div>
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2"> <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> <p class="intro-text">Embedded MUC chat demo</p>
<div id="converse-embedded-chat"></div> <div id="converse-embedded-chat"></div>
...@@ -54,44 +54,18 @@ ...@@ -54,44 +54,18 @@
<script> <script>
converse.initialize({ 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', authentication: 'anonymous',
auto_login: true, auto_login: true,
auto_join_rooms: [ auto_join_rooms: [
'anonymous@conference.nomnom.im', 'anonymous@conference.nomnom.im',
], ],
// Whitelist non-core plugins that we need
whitelisted_plugins: ['converse-muc-embedded'],
// Blacklist plugins which aren't included in the build file,
// so that other code cannot register their own plugins under
// those names.
blacklisted_plugins: [
"converse-bookmarks",
"converse-controlbox",
"converse-dragresize",
"converse-headline",
"converse-minimize",
"converse-otr",
"converse-register",
"converse-vcard",
],
notify_all_room_messages: [
'anonymous@conference.nomnom.im',
],
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes 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 jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
// allow chatting with other XMPP servers). // allow chatting with other XMPP servers).
keepalive: true, notify_all_room_messages: [
hide_muc_server: true, // Federation is disabled, so no use in 'anonymous@conference.nomnom.im',
// showing the MUC server. ],
play_sounds: true, view_mode: 'embedded',
strict_plugin_dependencies: false
}); });
</script> </script>
</html> </html>
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
<section class="intro" class="container"> <section class="intro" class="container">
<div class="row"> <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"> <div class="col-md-8 col-md-offset-2">
<p class="intro-text">Demos:</p> <p class="intro-text">Demos:</p>
<p class="intro-text"> <p class="intro-text">
......
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2"> <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">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">Look at the page source for details.</p>
<p class="intro-text">For this page to work, you'll need to <p class="intro-text">For this page to work, you'll need to
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -1091,6 +1091,35 @@ providers_link ...@@ -1091,6 +1091,35 @@ providers_link
The hyperlink on the registration form which points to a directory of public The hyperlink on the registration form which points to a directory of public
XMPP servers. 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 roster_groups
------------- -------------
...@@ -1388,20 +1417,21 @@ view_mode ...@@ -1388,20 +1417,21 @@ view_mode
--------- ---------
* Default: ``overlayed`` * 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. 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 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: These were:
* ``converse.js`` for the ``overlayed`` mode
* ``converse-mobile.js`` for the ``mobile`` 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 * ``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. and blacklisted for the different modes.
``converse-singleton`` had to be whitelisted for the ``mobile`` and ``fullscreen`` ``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 ...@@ -1411,11 +1441,25 @@ modes, additionally ``converse-inverse`` had to be whitelisted for the
For both those modes the ``converse-minimize`` and ``converse-dragresize`` For both those modes the ``converse-minimize`` and ``converse-dragresize``
plugins had to be blacklisted. plugins had to be blacklisted.
Since version 3.3.0, the last two builds no longer exist, and instead the When using ``converse-muc-embedded.js`` various plugins also had to manually be
standard ``converse.js`` build is used, together with the appropraite blacklisted.
``view_mode`` value.
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:: .. note::
Although the ``view_mode`` setting has removed the need for different Although the ``view_mode`` setting has removed the need for different
......
@import "bourbon"; @import "bourbon";
@import "converse/variables"; @import "converse/variables";
#converse-embedded-chat { #conversejs.converse-embedded {
@include box-sizing(border-box); @include box-sizing(border-box);
*, *:before, *:after { *, *:before, *:after {
......
@import "bourbon";
@import "converse/variables";
@import "fonts";
...@@ -478,7 +478,7 @@ ...@@ -478,7 +478,7 @@
insertIntoControlBox () { insertIntoControlBox () {
const controlboxview = _converse.chatboxviews.get('controlbox'); const controlboxview = _converse.chatboxviews.get('controlbox');
if (!_.isUndefined(controlboxview) && if (!_.isUndefined(controlboxview) &&
!document.body.contains(this.el)) { !_converse.root.contains(this.el)) {
const container = controlboxview.el.querySelector('#chatrooms'); const container = controlboxview.el.querySelector('#chatrooms');
if (!_.isNull(container)) { if (!_.isNull(container)) {
container.insertBefore(this.el, container.firstChild); container.insertBefore(this.el, container.firstChild);
......
...@@ -418,12 +418,17 @@ ...@@ -418,12 +418,17 @@
* If the #conversejs element doesn't exist, create it. * If the #conversejs element doesn't exist, create it.
*/ */
if (!this.el) { if (!this.el) {
let el = document.querySelector('#conversejs'); let el = _converse.root.querySelector('#conversejs');
if (_.isNull(el)) { if (_.isNull(el)) {
el = document.createElement('div'); el = document.createElement('div');
el.setAttribute('id', 'conversejs'); el.setAttribute('id', 'conversejs');
// Converse.js expects a <body> tag to be present. const body = _converse.root.querySelector('body');
document.querySelector('body').appendChild(el); if (body) {
body.appendChild(el);
} else {
// Perhaps inside a web component?
_converse.root.appendChild(el);
}
} }
el.innerHTML = ''; el.innerHTML = '';
this.setElement(el, false); this.setElement(el, false);
......
...@@ -74,15 +74,16 @@ ...@@ -74,15 +74,16 @@
// New functions which don't exist yet can also be added. // New functions which don't exist yet can also be added.
// //
registerGlobalEventHandlers: function () { registerGlobalEventHandlers: function () {
const { _converse } = this.__super__;
this.__super__.registerGlobalEventHandlers(); this.__super__.registerGlobalEventHandlers();
document.addEventListener( _converse.root.addEventListener(
'click', function (ev) { 'click', function (ev) {
if (_.includes(ev.target.classList, 'toggle-toolbar-menu') || if (_.includes(ev.target.classList, 'toggle-toolbar-menu') ||
_.includes(ev.target.classList, 'insert-emoji')) { _.includes(ev.target.classList, 'insert-emoji')) {
return; return;
} }
u.slideInAllElements( u.slideInAllElements(
document.querySelectorAll('.toolbar-menu') _converse.root.querySelectorAll('.toolbar-menu')
) )
} }
); );
...@@ -430,7 +431,7 @@ ...@@ -430,7 +431,7 @@
* as well as src/converse-muc.js (if those plugins are * as well as src/converse-muc.js (if those plugins are
* enabled). * enabled).
*/ */
const container = document.querySelector('#conversejs'); const container = _converse.root.querySelector('#conversejs');
if (this.el.parentNode !== container) { if (this.el.parentNode !== container) {
container.insertBefore(this.el, container.firstChild); container.insertBefore(this.el, container.firstChild);
} }
...@@ -1024,7 +1025,7 @@ ...@@ -1024,7 +1025,7 @@
} }
} }
const elements = _.difference( const elements = _.difference(
document.querySelectorAll('.toolbar-menu'), _converse.root.querySelectorAll('.toolbar-menu'),
[this.emoji_picker_view.el] [this.emoji_picker_view.el]
); );
u.slideInAllElements(elements) u.slideInAllElements(elements)
......
...@@ -426,8 +426,8 @@ ...@@ -426,8 +426,8 @@
const tab = ev.target, const tab = ev.target,
sibling_li = tab.parentNode.nextElementSibling || tab.parentNode.previousElementSibling, sibling_li = tab.parentNode.nextElementSibling || tab.parentNode.previousElementSibling,
sibling = sibling_li.firstChild, sibling = sibling_li.firstChild,
sibling_panel = document.querySelector(sibling.getAttribute('href')), sibling_panel = _converse.root.querySelector(sibling.getAttribute('href')),
tab_panel = document.querySelector(tab.getAttribute('href')); tab_panel = _converse.root.querySelector(tab.getAttribute('href'));
u.hideElement(sibling_panel); u.hideElement(sibling_panel);
u.removeClass('current', sibling); u.removeClass('current', sibling);
...@@ -656,7 +656,7 @@ ...@@ -656,7 +656,7 @@
xhr.onload = function () { xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 400) { if (xhr.status >= 200 && xhr.status < 400) {
const data = JSON.parse(xhr.responseText), 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.found-user'));
u.removeElement(ul.querySelector('li.chat-info')); u.removeElement(ul.querySelector('li.chat-info'));
if (!data.length) { if (!data.length) {
...@@ -769,7 +769,7 @@ ...@@ -769,7 +769,7 @@
onClick (e) { onClick (e) {
e.preventDefault(); e.preventDefault();
if (u.isVisible(document.querySelector("#controlbox"))) { if (u.isVisible(_converse.root.querySelector("#controlbox"))) {
const controlbox = _converse.chatboxes.get('controlbox'); const controlbox = _converse.chatboxes.get('controlbox');
if (_converse.connection.connected) { if (_converse.connection.connected) {
controlbox.save({closed: true}); controlbox.save({closed: true});
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
// Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com> // Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
// Licensed under the Mozilla Public License (MPLv2) // Licensed under the Mozilla Public License (MPLv2)
// //
/*global Backbone, define, window, document, JSON */ /*global Backbone, define, window, JSON */
(function (root, factory) { (function (root, factory) {
define(["sizzle", define(["sizzle",
"es6-promise", "es6-promise",
...@@ -79,6 +79,7 @@ ...@@ -79,6 +79,7 @@
'converse-mam', 'converse-mam',
'converse-minimize', 'converse-minimize',
'converse-muc', 'converse-muc',
'converse-muc-embedded',
'converse-notification', 'converse-notification',
'converse-otr', 'converse-otr',
'converse-ping', 'converse-ping',
...@@ -87,8 +88,8 @@ ...@@ -87,8 +88,8 @@
'converse-roomslist', 'converse-roomslist',
'converse-rosterview', 'converse-rosterview',
'converse-singleton', 'converse-singleton',
'converse-vcard', 'converse-spoilers',
'converse-spoilers' 'converse-vcard'
]; ];
// Make converse pluggable // Make converse pluggable
...@@ -288,7 +289,7 @@ ...@@ -288,7 +289,7 @@
authentication: 'login', // Available values are "login", "prebind", "anonymous" and "external". authentication: 'login', // Available values are "login", "prebind", "anonymous" and "external".
auto_away: 0, // Seconds after which user status is set to 'away' auto_away: 0, // Seconds after which user status is set to 'away'
auto_login: false, // Currently only used in connection with anonymous login auto_login: false, // Currently only used in connection with anonymous login
auto_reconnect: false, auto_reconnect: true,
auto_subscribe: false, auto_subscribe: false,
auto_xa: 0, // Seconds after which user status is set to 'xa' auto_xa: 0, // Seconds after which user status is set to 'xa'
blacklisted_plugins: [], blacklisted_plugins: [],
...@@ -318,6 +319,7 @@ ...@@ -318,6 +319,7 @@
priority: 0, priority: 0,
registration_domain: '', registration_domain: '',
rid: undefined, rid: undefined,
root: window.document,
roster_groups: true, roster_groups: true,
show_only_online_users: false, show_only_online_users: false,
show_send_button: false, show_send_button: false,
...@@ -591,19 +593,25 @@ ...@@ -591,19 +593,25 @@
this.incrementMsgCounter = function () { this.incrementMsgCounter = function () {
this.msg_counter += 1; this.msg_counter += 1;
const unreadMsgCount = this.msg_counter; const unreadMsgCount = this.msg_counter;
if (document.title.search(/^Messages \(\d+\) /) === -1) { let title = document.title;
document.title = `Messages (${unreadMsgCount}) ${document.title}`; if (_.isNil(title)) {
return;
}
if (title.search(/^Messages \(\d+\) /) === -1) {
title = `Messages (${unreadMsgCount}) ${title}`;
} else { } else {
document.title = document.title.replace( title = title.replace(/^Messages \(\d+\) /, `Messages (${unreadMsgCount})`);
/^Messages \(\d+\) /, `Messages (${unreadMsgCount}) `
);
} }
}; };
this.clearMsgCounter = function () { this.clearMsgCounter = function () {
this.msg_counter = 0; this.msg_counter = 0;
if (document.title.search(/^Messages \(\d+\) /) !== -1) { let title = document.title;
document.title = document.title.replace(/^Messages \(\d+\) /, ""); if (_.isNil(title)) {
return;
}
if (title.search(/^Messages \(\d+\) /) !== -1) {
title = title.replace(/^Messages \(\d+\) /, "");
} }
}; };
...@@ -1795,6 +1803,21 @@ ...@@ -1795,6 +1803,21 @@
const whitelist = _converse.core_plugins.concat( const whitelist = _converse.core_plugins.concat(
_converse.whitelisted_plugins); _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({ _converse.pluggable.initializePlugins({
'updateSettings' () { 'updateSettings' () {
_converse.log( _converse.log(
...@@ -1839,13 +1862,10 @@ ...@@ -1839,13 +1862,10 @@
i18n.fetchTranslations( i18n.fetchTranslations(
_converse.locale, _converse.locale,
_converse.locales, _converse.locales,
_.template(_converse.locales_url)({'locale': _converse.locale}) _.template(_converse.locales_url)({'locale': _converse.locale}))
).then(() => { .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL))
finishInitialization(); .then(finishInitialization)
}).catch((reason) => { .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
finishInitialization();
_converse.log(reason, Strophe.LogLevel.ERROR);
});
} }
return init_promise; return init_promise;
}; };
...@@ -1996,7 +2016,7 @@ ...@@ -1996,7 +2016,7 @@
}; };
// The public API // The public API
return { window.converse = {
'initialize' (settings, callback) { 'initialize' (settings, callback) {
return _converse.initialize(settings, callback); return _converse.initialize(settings, callback);
}, },
...@@ -2028,4 +2048,6 @@ ...@@ -2028,4 +2048,6 @@
'utils': utils 'utils': utils
} }
}; };
window.dispatchEvent(new Event('converse-loaded'));
return window.converse;
})); }));
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
/* This is a Converse.js plugin which add support for XEP-0030: Service Discovery */ /* 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) { (function (root, factory) {
define(["converse-core", "sizzle", "strophe.disco"], factory); define(["converse-core", "sizzle", "strophe.disco"], factory);
}(this, function (converse, sizzle) { }(this, function (converse, sizzle) {
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
// Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com> // Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
// Licensed under the Mozilla Public License (MPLv2) // Licensed under the Mozilla Public License (MPLv2)
// //
/*global define, window */ /*global define, window, document */
(function (root, factory) { (function (root, factory) {
define(["converse-core", define(["converse-core",
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
converse.plugins.add('converse-fullscreen', { converse.plugins.add('converse-fullscreen', {
enabled (_converse) { enabled (_converse) {
return _.includes(['mobile', 'fullscreen'], _converse.view_mode); return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode);
}, },
overrides: { overrides: {
...@@ -37,7 +37,8 @@ ...@@ -37,7 +37,8 @@
}, },
insertBrandHeading () { insertBrandHeading () {
const el = document.getElementById('converse-login-panel'); const { _converse } = this.__super__;
const el = _converse.root.getElementById('converse-login-panel');
el.parentNode.insertAdjacentHTML( el.parentNode.insertAdjacentHTML(
'afterbegin', 'afterbegin',
this.createBrandHeadingHTML() this.createBrandHeadingHTML()
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
// Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com> // Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
// Licensed under the Mozilla Public License (MPLv2) // Licensed under the Mozilla Public License (MPLv2)
// //
/*global define, window */ /*global define, window, document */
(function (root, factory) { (function (root, factory) {
define(["converse-core", define(["converse-core",
......
...@@ -11,6 +11,11 @@ ...@@ -11,6 +11,11 @@
const { Backbone, _ } = converse.env; const { Backbone, _ } = converse.env;
converse.plugins.add('converse-muc-embedded', { converse.plugins.add('converse-muc-embedded', {
enabled (_converse) {
return _converse.view_mode === 'embedded';
},
overrides: { overrides: {
// Overrides mentioned here will be picked up by converse.js's // Overrides mentioned here will be picked up by converse.js's
// plugin architecture they will replace existing methods on the // plugin architecture they will replace existing methods on the
...@@ -37,14 +42,10 @@ ...@@ -37,14 +42,10 @@
} }
}, },
ChatRoomView: { ChatBoxViews: {
insertIntoDOM () { initialize () {
if (!document.body.contains(this.el)) { this.__super__.initialize.apply(this, arguments);
const container = document.querySelector('#converse-embedded-chat'); this.el.classList.add('converse-embedded');
container.innerHTML = '';
container.appendChild(this.el);
}
return this;
} }
} }
}, },
...@@ -53,6 +54,13 @@ ...@@ -53,6 +54,13 @@
/* The initialize function gets called as soon as the plugin is /* The initialize function gets called as soon as the plugin is
* loaded by converse.js's plugin machinery. * 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; const { _converse } = this;
if (!_.isArray(_converse.auto_join_rooms)) { if (!_.isArray(_converse.auto_join_rooms)) {
throw new Error("converse-muc-embedded: auto_join_rooms must be an Array"); throw new Error("converse-muc-embedded: auto_join_rooms must be an Array");
......
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
}; };
_converse.isMessageToHiddenChat = function (message) { _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 jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
const model = _converse.chatboxes.get(jid); const model = _converse.chatboxes.get(jid);
if (!_.isNil(model)) { if (!_.isNil(model)) {
......
...@@ -403,9 +403,10 @@ ...@@ -403,9 +403,10 @@
toggleOTRMenu (ev) { toggleOTRMenu (ev) {
ev.stopPropagation(); ev.stopPropagation();
const { _converse } = this.__super__;
const menu = this.el.querySelector('.toggle-otr ul'); const menu = this.el.querySelector('.toggle-otr ul');
const elements = _.difference( const elements = _.difference(
document.querySelectorAll('.toolbar-menu'), _converse.root.querySelectorAll('.toolbar-menu'),
[menu] [menu]
); );
utils.slideInAllElements(elements).then( utils.slideInAllElements(elements).then(
......
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
toggleOptions (ev) { toggleOptions (ev) {
ev.preventDefault(); ev.preventDefault();
utils.slideInAllElements( utils.slideInAllElements(
document.querySelectorAll('#conversejs .contact-form-container') _converse.root.querySelectorAll('#conversejs .contact-form-container')
); );
utils.slideToggleElement(this.el.querySelector("#target dd ul")); utils.slideToggleElement(this.el.querySelector("#target dd ul"));
}, },
......
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
insertIntoControlBox () { insertIntoControlBox () {
const controlboxview = _converse.chatboxviews.get('controlbox'); const controlboxview = _converse.chatboxviews.get('controlbox');
if (!_.isUndefined(controlboxview) && if (!_.isUndefined(controlboxview) &&
!document.body.contains(this.el)) { !_converse.root.contains(this.el)) {
const container = controlboxview.el.querySelector('#chatrooms'); const container = controlboxview.el.querySelector('#chatrooms');
if (!_.isNull(container)) { if (!_.isNull(container)) {
container.insertBefore(this.el, container.firstChild); container.insertBefore(this.el, container.firstChild);
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
// Copyright (c) 2012-2017, JC Brand <jc@opkode.com> // Copyright (c) 2012-2017, JC Brand <jc@opkode.com>
// Licensed under the Mozilla Public License (MPLv2) // Licensed under the Mozilla Public License (MPLv2)
// //
/*global Backbone, define, window, document, JSON */ /*global Backbone, define, window, JSON */
/* converse-singleton /* converse-singleton
* ****************** * ******************
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
dependencies: ['converse-muc', 'converse-controlbox', 'converse-rosterview'], dependencies: ['converse-muc', 'converse-controlbox', 'converse-rosterview'],
enabled (_converse) { enabled (_converse) {
return _.includes(['mobile', 'fullscreen'], _converse.view_mode); return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode);
}, },
overrides: { overrides: {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment