Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Merge branch 'webcomponent-embedded'

Browse Source
This commit is contained in:
JC Brand 2018-02-14 02:06:13 +01:00
commit 08a76d8a6b
27 changed files with 53865 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGES.md
View File

@ -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)

5
Makefile
View File

@ -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

38
css/converse-muc-embedded.css
View File

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

292
css/fonts.css Normal file
View File

@ -0,0 +1,292 @@
/*
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 */

2
demo/anonymous.html
View File

@ -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>

36
demo/embedded.html
View File

@ -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",
],
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
notify_all_room_messages: [
'anonymous@conference.nomnom.im',
],
view_mode: 'embedded',
});
</script>
</html>

2
demo/index.html
View File

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

2
demo/without_bundled_dependencies.html
View File

@ -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

53390
dist/converse-muc-embedded.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

60
docs/source/configuration.rst
View File

@ -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.
Furthermore, it's no longer necessary to whitelist or blacklist any plugins.
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
when switching view modes.
.. note::
Although the ``view_mode`` setting has removed the need for different

2
sass/_muc_embedded.scss
View File

@ -1,6 +1,6 @@
@import "bourbon";
@import "converse/variables";
#converse-embedded-chat {
#conversejs.converse-embedded {
@include box-sizing(border-box);
*, *:before, *:after {

3
sass/only-fonts.scss Normal file
View File

@ -0,0 +1,3 @@
@import "bourbon";
@import "converse/variables";
@import "fonts";

2
src/converse-bookmarks.js
View File

@ -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);

11
src/converse-chatboxes.js
View File

@ -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);

9
src/converse-chatview.js
View File

@ -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)

8
src/converse-controlbox.js
View File

@ -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});

60
src/converse-core.js
View File

@ -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;
}));

2
src/converse-disco.js
View File

@ -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) {

2
src/converse-dragresize.js
View File

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

5
src/converse-fullscreen.js
View File

@ -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()

2
src/converse-minimize.js
View File

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

24
src/converse-muc-embedded.js
View File

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

2
src/converse-notification.js
View File

@ -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)) {

3
src/converse-otr.js
View File

@ -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(

2
src/converse-profile.js
View File

@ -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"));
},

2
src/converse-roomslist.js
View File

@ -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
src/converse-singleton.js
View File

@ -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: {