Commit 5517e355 authored by JC Brand's avatar JC Brand

Add a new configuration setting: `root`

parent 50f03c90
...@@ -17,8 +17,9 @@ though they should be private._ ...@@ -17,8 +17,9 @@ though they should be private._
### 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
- 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)
## 3.3.2 (2018-01-29) ## 3.3.2 (2018-01-29)
......
...@@ -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
------------- -------------
......
...@@ -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",
...@@ -318,6 +318,7 @@ ...@@ -318,6 +318,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 +592,25 @@ ...@@ -591,19 +592,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+\) /, "");
} }
}; };
......
...@@ -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",
......
...@@ -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",
......
...@@ -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
* ****************** * ******************
......
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