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._
### New features
- XEP-0382 Spoiler Messages (currently only for private chats)
- Listen for new room bookmarks pushed from the user's PEP service.
- Simplified the [embedded](https://conversejs.org/demo/embedded.html) usecase.
- No need to manually blacklist or whitelist any plugins.
- Relies on the [view_mode](https://conversejs.org/docs/html/configurations.html#view-mode) being set to `'embedded'`.
### API changes
- New API method `_converse.disco.getIdentity` to check whether a JID has a given identity.
### New configuration settings
### Configuration settings
- `auto_reconnect` is now set to `true` by default.
- New configuration setting [allow_public_bookmarks](https://conversejs.org/docs/html/configurations.html#allow-public-bookmarks)
- New configuration setting [root](https://conversejs.org/docs/html/configurations.html#root)
- The [view_mode](https://conversejs.org/docs/html/configurations.html#view-mode) setting now has a new possible value: `embedded`
## 3.3.2 (2018-01-29)
......
......@@ -9,7 +9,7 @@ CHROMIUM ?= ./node_modules/.bin/run-headless-chromium
CLEANCSS ?= ./node_modules/clean-css-cli/bin/cleancss --skip-rebase
ESLINT ?= ./node_modules/.bin/eslint
HTTPSERVE ?= ./node_modules/.bin/http-server
HTTPSERVE_PORT ?= 8000
HTTPSERVE_PORT ?= 8000
PAPER =
PO2JSON ?= ./node_modules/.bin/po2json
RJS ?= ./node_modules/.bin/r.js
......@@ -131,7 +131,7 @@ dev: stamp-bundler stamp-npm
## Builds
.PHONY: css
css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css
css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css css/fonts.css
css/inverse.css:: dev sass sass/*
$(SASS) -I $(BOURBON_TEMPLATES) sass/inverse/inverse.scss css/inverse.css
......@@ -157,6 +157,9 @@ css/theme.min.css:: stamp-npm css/theme.css
css/mobile.min.css:: stamp-npm sass/*
$(CLEANCSS) css/mobile.css > css/mobile.min.css
css/fonts.css:: dev sass/*
$(SASS) -I $(BOURBON_TEMPLATES) sass/only-fonts.scss css/fonts.css
.PHONY: watch
watch: dev
$(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css sass/inverse/inverse.scss:css/inverse.css
......
......@@ -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 */
/*
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 @@
<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>
......
......@@ -41,7 +41,7 @@
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading brand-heading-embedded"><a style="color: white;" href="/"><i class="icon-conversejs"></i>Converse.js</a></h1>
<h1 class="brand-heading brand-heading-embedded"><a style="color: white;" href="/"><i class="icon-conversejs"></i>Converse</a></h1>
<p class="intro-text">Embedded MUC chat demo</p>
<div id="converse-embedded-chat"></div>
......@@ -54,44 +54,18 @@
<script>
converse.initialize({
allow_logout: false, // No point in logging out when we have auto_login as true.
allow_muc_invitations: false, // Doesn't make sense to allow because only
// roster contacts can be invited
allow_contact_requests: false, // Contacts from other servers cannot,
// be added and anonymous users don't
// know one another's JIDs, so disabling.
auto_reconnect: true,
authentication: 'anonymous',
auto_login: true,
auto_join_rooms: [
'anonymous@conference.nomnom.im',
],
// Whitelist non-core plugins that we need
whitelisted_plugins: ['converse-muc-embedded'],
// Blacklist plugins which aren't included in the build file,
// so that other code cannot register their own plugins under
// those names.
blacklisted_plugins: [
"converse-bookmarks",
"converse-controlbox",
"converse-dragresize",
"converse-headline",
"converse-minimize",
"converse-otr",
"converse-register",
"converse-vcard",
],
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
// allow chatting with other XMPP servers).
notify_all_room_messages: [
'anonymous@conference.nomnom.im',
],
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
// allow chatting with other XMPP servers).
keepalive: true,
hide_muc_server: true, // Federation is disabled, so no use in
// showing the MUC server.
play_sounds: true,
strict_plugin_dependencies: false
view_mode: 'embedded',
});
</script>
</html>
......@@ -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">
......
......@@ -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
......
This diff is collapsed.
......@@ -1091,6 +1091,35 @@ providers_link
The hyperlink on the registration form which points to a directory of public
XMPP servers.
root
----
* Default: ``window.document``
When using converse.js inside a web component's shadow DOM, you will need to set this settings'
value to the shadow-root of the shadow DOM.
For example:
.. code-block:: javascript
class CustomChatComponent extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: "open"});
this.initConverse(shadowRoot);
}
initConverse(shadowRoot) {
window.addEventListener("converse-loaded", function(event) {
converse.initialize({
root: shadowRoot,
// Other settings go here...
});
});
}
}
roster_groups
-------------
......@@ -1388,20 +1417,21 @@ view_mode
---------
* Default: ``overlayed``
* Allowed values: ``overlayed``, ``fullscreen``, ``mobile``
* Allowed values: ``overlayed``, ``fullscreen``, ``mobile``, ``embedded``
The ``view_mode`` setting configures converse.js's mode and resulting behavior.
Before the introduction of this setting (in version 3.3.0), there were there
different builds, each for the diffent modes.
different builds, each for the different modes.
These were:
* ``converse.js`` for the ``overlayed`` mode
* ``converse-mobile.js`` for the ``mobile`` mode
* ``converse-muc-embedded.js`` for embedding a single MUC room into the page.
* ``converse.js`` for the ``overlayed`` mode
* ``inverse.js`` for the ``fullscreen`` mode
Besides having three different builds, certain plugins had to be whitelisted
Besides having different builds, certain plugins had to be whitelisted
and blacklisted for the different modes.
``converse-singleton`` had to be whitelisted for the ``mobile`` and ``fullscreen``
......@@ -1411,11 +1441,25 @@ modes, additionally ``converse-inverse`` had to be whitelisted for the
For both those modes the ``converse-minimize`` and ``converse-dragresize``
plugins had to be blacklisted.
Since version 3.3.0, the last two builds no longer exist, and instead the
standard ``converse.js`` build is used, together with the appropraite
``view_mode`` value.
When using ``converse-muc-embedded.js`` various plugins also had to manually be
blacklisted.
Since version 3.3.0 it's no longer necessary to blacklist any plugins (except
for ``converse-muc-embedded.js``, which is from version 3.3.3).
Blacklisting now happens automatically.
Since version 3.3.0, the ``inverse.js`` and ``converse-mobile.js`` builds no
longer exist. Instead the standard ``converse.js`` build is used, together with
the appropriate ``view_mode`` value.
The ``converse-muc-embedded.js`` build is still kept, because it's smaller than
``converse.js`` due to unused code being removed. It doesn't however contain
any new code, so the full ``converse.js`` build could be used instead, as long
as ``view_mode`` is set to ``embedded``.
Furthermore, it's no longer necessary to whitelist or blacklist any plugins.
Furthermore, it's no longer necessary to whitelist or blacklist any plugins
when switching view modes.
.. note::
Although the ``view_mode`` setting has removed the need for different
......
@import "bourbon";
@import "converse/variables";
#converse-embedded-chat {
#conversejs.converse-embedded {
@include box-sizing(border-box);
*, *:before, *:after {
......
@import "bourbon";
@import "converse/variables";
@import "fonts";
......@@ -478,7 +478,7 @@
insertIntoControlBox () {
const controlboxview = _converse.chatboxviews.get('controlbox');
if (!_.isUndefined(controlboxview) &&
!document.body.contains(this.el)) {
!_converse.root.contains(this.el)) {
const container = controlboxview.el.querySelector('#chatrooms');
if (!_.isNull(container)) {
container.insertBefore(this.el, container.firstChild);
......
......@@ -418,12 +418,17 @@
* If the #conversejs element doesn't exist, create it.
*/
if (!this.el) {
let el = document.querySelector('#conversejs');
let el = _converse.root.querySelector('#conversejs');
if (_.isNull(el)) {
el = document.createElement('div');
el.setAttribute('id', 'conversejs');
// Converse.js expects a <body> tag to be present.
document.querySelector('body').appendChild(el);
const body = _converse.root.querySelector('body');
if (body) {
body.appendChild(el);
} else {
// Perhaps inside a web component?
_converse.root.appendChild(el);
}
}
el.innerHTML = '';
this.setElement(el, false);
......
......@@ -74,15 +74,16 @@
// New functions which don't exist yet can also be added.
//
registerGlobalEventHandlers: function () {
const { _converse } = this.__super__;
this.__super__.registerGlobalEventHandlers();
document.addEventListener(
_converse.root.addEventListener(
'click', function (ev) {
if (_.includes(ev.target.classList, 'toggle-toolbar-menu') ||
_.includes(ev.target.classList, 'insert-emoji')) {
return;
}
u.slideInAllElements(
document.querySelectorAll('.toolbar-menu')
_converse.root.querySelectorAll('.toolbar-menu')
)
}
);
......@@ -430,7 +431,7 @@
* as well as src/converse-muc.js (if those plugins are
* enabled).
*/
const container = document.querySelector('#conversejs');
const container = _converse.root.querySelector('#conversejs');
if (this.el.parentNode !== container) {
container.insertBefore(this.el, container.firstChild);
}
......@@ -1024,7 +1025,7 @@
}
}
const elements = _.difference(
document.querySelectorAll('.toolbar-menu'),
_converse.root.querySelectorAll('.toolbar-menu'),
[this.emoji_picker_view.el]
);
u.slideInAllElements(elements)
......
......@@ -426,8 +426,8 @@
const tab = ev.target,
sibling_li = tab.parentNode.nextElementSibling || tab.parentNode.previousElementSibling,
sibling = sibling_li.firstChild,
sibling_panel = document.querySelector(sibling.getAttribute('href')),
tab_panel = document.querySelector(tab.getAttribute('href'));
sibling_panel = _converse.root.querySelector(sibling.getAttribute('href')),
tab_panel = _converse.root.querySelector(tab.getAttribute('href'));
u.hideElement(sibling_panel);
u.removeClass('current', sibling);
......@@ -656,7 +656,7 @@
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 400) {
const data = JSON.parse(xhr.responseText),
ul = document.querySelector('.search-xmpp ul');
ul = _converse.root.querySelector('.search-xmpp ul');
u.removeElement(ul.querySelector('li.found-user'));
u.removeElement(ul.querySelector('li.chat-info'));
if (!data.length) {
......@@ -769,7 +769,7 @@
onClick (e) {
e.preventDefault();
if (u.isVisible(document.querySelector("#controlbox"))) {
if (u.isVisible(_converse.root.querySelector("#controlbox"))) {
const controlbox = _converse.chatboxes.get('controlbox');
if (_converse.connection.connected) {
controlbox.save({closed: true});
......
......@@ -4,7 +4,7 @@
// Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
// Licensed under the Mozilla Public License (MPLv2)
//
/*global Backbone, define, window, document, JSON */
/*global Backbone, define, window, JSON */
(function (root, factory) {
define(["sizzle",
"es6-promise",
......@@ -79,6 +79,7 @@
'converse-mam',
'converse-minimize',
'converse-muc',
'converse-muc-embedded',
'converse-notification',
'converse-otr',
'converse-ping',
......@@ -87,8 +88,8 @@
'converse-roomslist',
'converse-rosterview',
'converse-singleton',
'converse-vcard',
'converse-spoilers'
'converse-spoilers',
'converse-vcard'
];
// Make converse pluggable
......@@ -288,7 +289,7 @@
authentication: 'login', // Available values are "login", "prebind", "anonymous" and "external".
auto_away: 0, // Seconds after which user status is set to 'away'
auto_login: false, // Currently only used in connection with anonymous login
auto_reconnect: false,
auto_reconnect: true,
auto_subscribe: false,
auto_xa: 0, // Seconds after which user status is set to 'xa'
blacklisted_plugins: [],
......@@ -318,6 +319,7 @@
priority: 0,
registration_domain: '',
rid: undefined,
root: window.document,
roster_groups: true,
show_only_online_users: false,
show_send_button: false,
......@@ -591,19 +593,25 @@
this.incrementMsgCounter = function () {
this.msg_counter += 1;
const unreadMsgCount = this.msg_counter;
if (document.title.search(/^Messages \(\d+\) /) === -1) {
document.title = `Messages (${unreadMsgCount}) ${document.title}`;
let title = document.title;
if (_.isNil(title)) {
return;
}
if (title.search(/^Messages \(\d+\) /) === -1) {
title = `Messages (${unreadMsgCount}) ${title}`;
} else {
document.title = document.title.replace(
/^Messages \(\d+\) /, `Messages (${unreadMsgCount}) `
);
title = title.replace(/^Messages \(\d+\) /, `Messages (${unreadMsgCount})`);
}
};
this.clearMsgCounter = function () {
this.msg_counter = 0;
if (document.title.search(/^Messages \(\d+\) /) !== -1) {
document.title = document.title.replace(/^Messages \(\d+\) /, "");
let title = document.title;
if (_.isNil(title)) {
return;
}
if (title.search(/^Messages \(\d+\) /) !== -1) {
title = title.replace(/^Messages \(\d+\) /, "");
}
};
......@@ -1795,6 +1803,21 @@
const whitelist = _converse.core_plugins.concat(
_converse.whitelisted_plugins);
if (_converse.view_mode === 'embedded') {
_.forEach([ // eslint-disable-line lodash/prefer-map
"converse-bookmarks",
"converse-controlbox",
"converse-dragresize",
"converse-headline",
"converse-minimize",
"converse-otr",
"converse-register",
"converse-vcard",
], (name) => {
_converse.blacklisted_plugins.push(name)
});
}
_converse.pluggable.initializePlugins({
'updateSettings' () {
_converse.log(
......@@ -1839,13 +1862,10 @@
i18n.fetchTranslations(
_converse.locale,
_converse.locales,
_.template(_converse.locales_url)({'locale': _converse.locale})
).then(() => {
finishInitialization();
}).catch((reason) => {
finishInitialization();
_converse.log(reason, Strophe.LogLevel.ERROR);
});
_.template(_converse.locales_url)({'locale': _converse.locale}))
.catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL))
.then(finishInitialization)
.catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
}
return init_promise;
};
......@@ -1996,7 +2016,7 @@
};
// The public API
return {
window.converse = {
'initialize' (settings, callback) {
return _converse.initialize(settings, callback);
},
......@@ -2028,4 +2048,6 @@
'utils': utils
}
};
window.dispatchEvent(new Event('converse-loaded'));
return window.converse;
}));
......@@ -7,7 +7,7 @@
/* This is a Converse.js plugin which add support for XEP-0030: Service Discovery */
/*global Backbone, define, window, document */
/*global Backbone, define, window */
(function (root, factory) {
define(["converse-core", "sizzle", "strophe.disco"], factory);
}(this, function (converse, sizzle) {
......
......@@ -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",
......
......@@ -21,7 +21,7 @@
converse.plugins.add('converse-fullscreen', {
enabled (_converse) {
return _.includes(['mobile', 'fullscreen'], _converse.view_mode);
return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode);
},
overrides: {
......@@ -37,7 +37,8 @@
},
insertBrandHeading () {
const el = document.getElementById('converse-login-panel');
const { _converse } = this.__super__;
const el = _converse.root.getElementById('converse-login-panel');
el.parentNode.insertAdjacentHTML(
'afterbegin',
this.createBrandHeadingHTML()
......
......@@ -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",
......
......@@ -11,6 +11,11 @@
const { Backbone, _ } = converse.env;
converse.plugins.add('converse-muc-embedded', {
enabled (_converse) {
return _converse.view_mode === 'embedded';
},
overrides: {
// Overrides mentioned here will be picked up by converse.js's
// plugin architecture they will replace existing methods on the
......@@ -37,14 +42,10 @@
}
},
ChatRoomView: {
insertIntoDOM () {
if (!document.body.contains(this.el)) {
const container = document.querySelector('#converse-embedded-chat');
container.innerHTML = '';
container.appendChild(this.el);
}
return this;
ChatBoxViews: {
initialize () {
this.__super__.initialize.apply(this, arguments);
this.el.classList.add('converse-embedded');
}
}
},
......@@ -53,6 +54,13 @@
/* The initialize function gets called as soon as the plugin is
* loaded by converse.js's plugin machinery.
*/
this._converse.api.settings.update({
'allow_logout': false, // No point in logging out when we have auto_login as true.
'allow_muc_invitations': false, // Doesn't make sense to allow because only
// roster contacts can be invited
'hide_muc_server': true, // Federation is disabled, so no use in
// showing the MUC server.
});
const { _converse } = this;
if (!_.isArray(_converse.auto_join_rooms)) {
throw new Error("converse-muc-embedded: auto_join_rooms must be an Array");
......
......@@ -71,7 +71,7 @@
};
_converse.isMessageToHiddenChat = function (message) {
if (_.includes(['mobile', 'fullscreen'], _converse.view_mode)) {
if (_.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode)) {
const jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
const model = _converse.chatboxes.get(jid);
if (!_.isNil(model)) {
......
......@@ -403,9 +403,10 @@
toggleOTRMenu (ev) {
ev.stopPropagation();
const { _converse } = this.__super__;
const menu = this.el.querySelector('.toggle-otr ul');
const elements = _.difference(
document.querySelectorAll('.toolbar-menu'),
_converse.root.querySelectorAll('.toolbar-menu'),
[menu]
);
utils.slideInAllElements(elements).then(
......
......@@ -79,7 +79,7 @@
toggleOptions (ev) {
ev.preventDefault();
utils.slideInAllElements(
document.querySelectorAll('#conversejs .contact-form-container')
_converse.root.querySelectorAll('#conversejs .contact-form-container')
);
utils.slideToggleElement(this.el.querySelector("#target dd ul"));
},
......
......@@ -176,7 +176,7 @@
insertIntoControlBox () {
const controlboxview = _converse.chatboxviews.get('controlbox');
if (!_.isUndefined(controlboxview) &&
!document.body.contains(this.el)) {
!_converse.root.contains(this.el)) {
const container = controlboxview.el.querySelector('#chatrooms');
if (!_.isNull(container)) {
container.insertBefore(this.el, container.firstChild);
......
......@@ -4,7 +4,7 @@
// Copyright (c) 2012-2017, JC Brand <jc@opkode.com>
// Licensed under the Mozilla Public License (MPLv2)
//
/*global Backbone, define, window, document, JSON */
/*global Backbone, define, window, JSON */
/* converse-singleton
* ******************
......@@ -40,7 +40,7 @@
dependencies: ['converse-muc', 'converse-controlbox', 'converse-rosterview'],
enabled (_converse) {
return _.includes(['mobile', 'fullscreen'], _converse.view_mode);
return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode);
},
overrides: {
......
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