Turn controlbox into a Lit element
This commit is contained in:
parent
059795c0f3
commit
1915d70c41
@ -1,7 +1,6 @@
|
||||
import tpl_controlbox from './templates/controlbox.js';
|
||||
import { ElementView } from '@converse/skeletor/src/element.js';
|
||||
import { _converse, api, converse } from '@converse/headless/core';
|
||||
import { render } from 'lit';
|
||||
import { CustomElement } from 'shared/components/element.js';
|
||||
import { _converse, api, converse } from '@converse/headless/core.js';
|
||||
|
||||
const u = converse.env.utils;
|
||||
|
||||
@ -12,12 +11,16 @@ const u = converse.env.utils;
|
||||
* In `overlayed` `view_mode` it's a box like the chat boxes, in `fullscreen`
|
||||
* `view_mode` it's a left-aligned sidebar.
|
||||
*/
|
||||
class ControlBox extends ElementView {
|
||||
class ControlBox extends CustomElement {
|
||||
|
||||
initialize () {
|
||||
this.setModel();
|
||||
this.render();
|
||||
_converse.chatboxviews.add('controlbox', this);
|
||||
if (this.model.get('connected') && this.model.get('closed') === undefined) {
|
||||
this.model.set('closed', !api.settings.get('show_controlbox_by_default'));
|
||||
}
|
||||
this.requestUpdate();
|
||||
|
||||
/**
|
||||
* Triggered when the _converse.ControlBoxView has been initialized and therefore
|
||||
* exists. The controlbox contains the login and register forms when the user is
|
||||
@ -31,31 +34,18 @@ class ControlBox extends ElementView {
|
||||
|
||||
setModel () {
|
||||
this.model = _converse.chatboxes.get('controlbox');
|
||||
this.initEventHandlers();
|
||||
}
|
||||
|
||||
initEventHandlers () {
|
||||
// Keep event handler registration in a separate method so that it can
|
||||
// be called when a new controlbox is created and assigned to this
|
||||
// element.
|
||||
this.listenTo(this.model, 'change:active-form', this.render);
|
||||
this.listenTo(this.model, 'change:connected', this.render);
|
||||
this.listenTo(this.model, 'change:active-form', () => this.requestUpdate());
|
||||
this.listenTo(this.model, 'change:connected', () => this.requestUpdate());
|
||||
this.listenTo(this.model, 'change:closed', () => !this.model.get('closed') && this.afterShown());
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
render () {
|
||||
render(tpl_controlbox({
|
||||
return this.model ? tpl_controlbox({
|
||||
'sticky_controlbox': api.settings.get('sticky_controlbox'),
|
||||
...this.model.toJSON(),
|
||||
'close': ev => this.close(ev)
|
||||
}), this);
|
||||
|
||||
}
|
||||
|
||||
afterRender () {
|
||||
if (this.model.get('connected') && this.model.get('closed') === undefined) {
|
||||
this.model.set('closed', !api.settings.get('show_controlbox_by_default'));
|
||||
}
|
||||
}) : '';
|
||||
}
|
||||
|
||||
close (ev) {
|
||||
@ -84,10 +74,6 @@ class ControlBox extends ElementView {
|
||||
api.trigger('controlBoxOpened', this);
|
||||
return this;
|
||||
}
|
||||
|
||||
showHelpMessages () { // eslint-disable-line class-methods-use-this
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
api.elements.define('converse-controlbox', ControlBox);
|
||||
|
@ -93,4 +93,4 @@ class LoginForm extends CustomElement {
|
||||
}
|
||||
}
|
||||
|
||||
api.elements.define('converse-login-panel', LoginForm);
|
||||
api.elements.define('converse-login-form', LoginForm);
|
||||
|
@ -26,8 +26,7 @@ export default o => html`
|
||||
}`
|
||||
: o['active-form'] === 'register'
|
||||
? html`<converse-register-panel></converse-register-panel>`
|
||||
: html`<converse-login-panel id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
|
||||
</converse-login-panel>`
|
||||
: html`<converse-login-form id="converse-login-panel" class="controlbox-pane fade-in row no-gutters"></converse-login-form>`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -55,7 +55,7 @@ describe("The Controlbox", function () {
|
||||
ask: 'subscribe',
|
||||
fullname: mock.pend_names[0]
|
||||
});
|
||||
const rosterview = document.querySelector('converse-roster');
|
||||
const rosterview = await u.waitUntil(() => document.querySelector('converse-roster'));
|
||||
await u.waitUntil(() => Array.from(rosterview.querySelectorAll('.roster-group li')).filter(u.isVisible).length, 700);
|
||||
// Checking that only one entry is created because both JID is same (Case sensitive check)
|
||||
expect(Array.from(rosterview.querySelectorAll('li')).filter(u.isVisible).length).toBe(1);
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { __ } from 'i18n';
|
||||
import { _converse, api, converse } from "@converse/headless/core";
|
||||
import { __ } from 'i18n/index.js';
|
||||
import { _converse, api, converse } from "@converse/headless/core.js";
|
||||
|
||||
const { Strophe, u } = converse.env;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user