2023-02-15 14:19:48 +01:00
|
|
|
import tplRoot from "./templates/root.js";
|
2021-01-25 20:54:50 +01:00
|
|
|
import { api } from '@converse/headless/core';
|
2021-03-24 11:59:09 +01:00
|
|
|
import { CustomElement } from 'shared/components/element.js';
|
2021-09-24 10:32:33 +02:00
|
|
|
import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
|
2022-01-28 20:54:55 +01:00
|
|
|
import { getTheme } from './utils.js';
|
2021-09-24 10:32:33 +02:00
|
|
|
|
|
|
|
import './styles/root.scss';
|
2020-08-26 16:07:59 +02:00
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* `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.
|
|
|
|
*/
|
2021-09-24 10:32:33 +02:00
|
|
|
export default class ConverseRoot extends CustomElement {
|
2020-08-26 16:07:59 +02:00
|
|
|
|
2020-12-08 12:54:14 +01:00
|
|
|
render () { // eslint-disable-line class-methods-use-this
|
2023-02-15 14:19:48 +01:00
|
|
|
return tplRoot();
|
2020-08-26 16:07:59 +02:00
|
|
|
}
|
2021-01-25 20:54:50 +01:00
|
|
|
|
2021-09-24 10:32:33 +02:00
|
|
|
initialize () {
|
|
|
|
this.setAttribute('id', 'conversejs');
|
|
|
|
this.setClasses();
|
|
|
|
const settings = getAppSettings();
|
|
|
|
this.listenTo(settings, 'change:view_mode', () => this.setClasses())
|
|
|
|
this.listenTo(settings, 'change:singleton', () => this.setClasses())
|
2022-01-28 20:54:55 +01:00
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').addListener(() => this.setClasses());
|
|
|
|
window.matchMedia('(prefers-color-scheme: light)').addListener(() => this.setClasses());
|
2021-09-24 10:32:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
setClasses () {
|
|
|
|
this.className = "";
|
2021-05-06 12:21:35 +02:00
|
|
|
this.classList.add('conversejs');
|
2021-01-25 20:54:50 +01:00
|
|
|
this.classList.add(`converse-${api.settings.get('view_mode')}`);
|
2022-01-28 20:54:55 +01:00
|
|
|
this.classList.add(`theme-${getTheme()}`);
|
2021-09-24 10:32:33 +02:00
|
|
|
this.requestUpdate();
|
2021-01-25 20:54:50 +01:00
|
|
|
}
|
2020-08-26 16:07:59 +02:00
|
|
|
}
|