Create converse-root
custom element
This element can be used to declaratively insert Converse into the DOM. You can put `<converse-root>` into the DOM (e.g. by rendering it inside a React component) before or afer Converse has loaded and/or has been initialized.
This commit is contained in:
parent
00df8b45fd
commit
d5c93eb024
20
package-lock.json
generated
20
package-lock.json
generated
|
@ -3199,8 +3199,7 @@
|
|||
"dependencies": {
|
||||
"filesize": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
|
||||
"integrity": "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg=="
|
||||
"resolved": false
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "8.1.0",
|
||||
|
@ -3234,8 +3233,7 @@
|
|||
},
|
||||
"jed": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/jed/-/jed-1.1.1.tgz",
|
||||
"integrity": "sha1-elSbvZ/+FYWwzQoZHiAwVb7ldLQ="
|
||||
"resolved": false
|
||||
},
|
||||
"jsonfile": {
|
||||
"version": "5.0.0",
|
||||
|
@ -3256,8 +3254,7 @@
|
|||
},
|
||||
"localforage": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/localforage/-/localforage-1.7.3.tgz",
|
||||
"integrity": "sha512-1TulyYfc4udS7ECSBT2vwJksWbkwwTX8BzeUIiq8Y07Riy7bDAAnxDaPU/tWyOVmQAcWJIEIFP9lPfBGqVoPgQ==",
|
||||
"resolved": false,
|
||||
"requires": {
|
||||
"lie": "3.1.1"
|
||||
}
|
||||
|
@ -3269,14 +3266,13 @@
|
|||
},
|
||||
"pluggable.js": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pluggable.js/-/pluggable.js-2.0.1.tgz",
|
||||
"integrity": "sha512-SBt6v6Tbp20Jf8hU0cpcc/+HBHGMY8/Q+yA6Ih0tBQE8tfdZ6U4PRG0iNvUUjLx/hVyOP53n0UfGBymlfaaXCg==",
|
||||
"resolved": false,
|
||||
"requires": {
|
||||
"lodash": "^4.17.11"
|
||||
}
|
||||
},
|
||||
"skeletor.js": {
|
||||
"version": "github:skeletorjs/skeletor#bf6d9c86f9fcf224fa9d9af5a25380b77aa4b561",
|
||||
"version": "0.0.1",
|
||||
"from": "github:skeletorjs/skeletor#bf6d9c86f9fcf224fa9d9af5a25380b77aa4b561",
|
||||
"requires": {
|
||||
"lodash": "^4.17.14"
|
||||
|
@ -3284,11 +3280,7 @@
|
|||
},
|
||||
"strophe.js": {
|
||||
"version": "github:strophe/strophejs#c4a94e59877c06dc2395f4ccbd26f3fee67a4c9f",
|
||||
"from": "strophe.js@github:strophe/strophejs#c4a94e59877c06dc2395f4ccbd26f3fee67a4c9f",
|
||||
"requires": {
|
||||
"abab": "^2.0.3",
|
||||
"xmldom": "^0.1.27"
|
||||
}
|
||||
"from": "strophe.js@github:strophe/strophejs#c4a94e59877c06dc2395f4ccbd26f3fee67a4c9f"
|
||||
},
|
||||
"twemoji": {
|
||||
"version": "12.1.5",
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
/*global mock */
|
||||
/*global mock, converse */
|
||||
|
||||
const $pres = converse.env.$pres;
|
||||
const $msg = converse.env.$msg;
|
||||
|
|
|
@ -1,10 +1,17 @@
|
|||
/* global mock, converse */
|
||||
|
||||
const u = converse.env.utils;
|
||||
|
||||
describe("Converse", function() {
|
||||
|
||||
describe("Settings", function () {
|
||||
it("Can be inserted into a custom element after having been initialized",
|
||||
mock.initConverse([], {'root': new DocumentFragment()}, async (done) => {
|
||||
|
||||
});
|
||||
expect(document.body.querySelector('div#conversejs')).toBe(null);
|
||||
document.body.appendChild(document.createElement('converse-root'));
|
||||
await u.waitUntil(() => document.body.querySelector('div#conversejs') !== null);
|
||||
done();
|
||||
}));
|
||||
|
||||
describe("Authentication", function () {
|
||||
|
||||
|
|
18
src/components/converse.js
Normal file
18
src/components/converse.js
Normal file
|
@ -0,0 +1,18 @@
|
|||
import { converse } from "@converse/headless/converse-core";
|
||||
|
||||
|
||||
/**
|
||||
* `converse-root` is an optional custom element which can be used to
|
||||
* declaratively insert the Converse UI into the DOM.
|
||||
*
|
||||
* It can be inserted into the DOM before or after Converse has loaded or been
|
||||
* initialized.
|
||||
*/
|
||||
class ConverseRoot extends HTMLElement {
|
||||
|
||||
connectedCallback () {
|
||||
converse.insertInto(this);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('converse-root', ConverseRoot);
|
|
@ -3,6 +3,7 @@
|
|||
* @copyright 2020, the Converse.js contributors
|
||||
* @license Mozilla Public License (MPLv2)
|
||||
*/
|
||||
import './components/converse.js';
|
||||
import "@converse/headless/converse-chatboxes";
|
||||
import tpl_avatar from "templates/avatar.svg";
|
||||
import tpl_background_logo from "templates/background_logo.html";
|
||||
|
|
|
@ -29,6 +29,7 @@ import "converse-roomslist"; // Show currently open chat rooms
|
|||
import "converse-rosterview";
|
||||
import "converse-singleton";
|
||||
import "converse-uniview";
|
||||
import "./components/converse.js";
|
||||
/* END: Removable components */
|
||||
|
||||
import "../sass/converse.scss";
|
||||
|
|
|
@ -1574,6 +1574,12 @@ Object.assign(converse, {
|
|||
await api.user.login(null, null, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggered once converse.initialize has finished.
|
||||
* @event _converse#initialized
|
||||
*/
|
||||
api.trigger('initialized');
|
||||
|
||||
if (_converse.isTestEnv()) {
|
||||
return _converse;
|
||||
}
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
message_archiving: 'always',
|
||||
muc_domain: 'conference.chat.example.org',
|
||||
muc_respect_autojoin: true,
|
||||
view_mode: 'fullscreen',
|
||||
// view_mode: 'fullscreen',
|
||||
websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
|
||||
// bosh_service_url: 'http://chat.example.org:5280/http-bind',
|
||||
muc_show_logs_before_join: true,
|
||||
|
|
Loading…
Reference in New Issue
Block a user