@ribajs/bs5
Version:
Bootstrap 5 module for Riba.js
99 lines • 6.83 kB
JavaScript
import { Component } from "@ribajs/core";
import { ThemeService } from "../../services/theme.js";
import { hasChildNodesTrim } from "@ribajs/utils";
import template from "./bs5-theme-button.component.html?raw";
import { themeChoices } from "../../constants/index.js";
export class Bs5ThemeButtonComponent extends Component {
static tagName = "bs5-theme-button";
theme;
static get observedAttributes() {
return ["mode", "labels", "light-icon-src", "icon-size", "dark-icon-src"];
}
scope = {
mode: "dropdown",
labels: {
os: "OS",
light: "Light",
dark: "Dark",
},
lightIconSrc: "/iconset/svg/icon_sun.svg",
darkIconSrc: "/iconset/svg/icon_moon.svg",
iconSize: 32,
setTheme: this.setTheme.bind(this),
selectTheme: this.selectTheme.bind(this),
toggleTheme: this.toggleTheme.bind(this),
selected: undefined,
choices: themeChoices,
};
constructor() {
super();
this.theme = ThemeService.getSingleton();
}
connectedCallback() {
super.connectedCallback();
this.init(Bs5ThemeButtonComponent.observedAttributes);
this.addEventListeners();
this.initTheme();
}
addEventListeners() {
this.theme.onChange((data) => {
this.onChange(data);
});
}
onChange(data) {
this.scope.selected = data.newValue.choice;
}
async beforeBind() {
this.initTheme();
}
initTheme() {
const selectEl = this.getElementsByTagName("select")?.item(0);
const data = this.theme.init();
this.scope.selected = data.choice || undefined;
if (selectEl)
this.theme.select(this.scope.selected, selectEl);
}
setTheme(theme) {
this.theme.set(theme);
}
selectTheme() {
if (this.scope.selected)
this.theme.set(this.scope.selected);
}
toggleTheme() {
const current = this.theme.getScheme();
if (current.bySystem) {
if (current.systemIsLight) {
this.theme.set("dark");
}
else {
this.theme.set("light");
}
}
else if (current.isDark) {
if (current.supported && current.systemIsLight) {
this.theme.set("os");
}
else {
this.theme.set("light");
}
}
else {
if (current.supported && current.systemIsDark) {
this.theme.set("os");
}
else {
this.theme.set("dark");
}
}
}
template() {
if (!hasChildNodesTrim(this)) {
return template;
}
else {
return null;
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnM1LXRoZW1lLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9iczUtdGhlbWUtYnV0dG9uL2JzNS10aGVtZS1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQW9CLE1BQU0sY0FBYyxDQUFDO0FBQzNELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbEQsT0FBTyxRQUFRLE1BQU0sdUNBQXVDLENBQUM7QUFDN0QsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBWXhELE1BQU0sT0FBTyx1QkFBd0IsU0FBUSxTQUFTO0lBQzdDLE1BQU0sQ0FBQyxPQUFPLEdBQUcsa0JBQWtCLENBQUM7SUFFakMsS0FBSyxDQUFlO0lBRTlCLE1BQU0sS0FBSyxrQkFBa0I7UUFDM0IsT0FBTyxDQUFDLE1BQU0sRUFBRSxRQUFRLEVBQUUsZ0JBQWdCLEVBQUUsV0FBVyxFQUFFLGVBQWUsQ0FBQyxDQUFDO0lBQzVFLENBQUM7SUFFTSxLQUFLLEdBQWlDO1FBRTNDLElBQUksRUFBRSxVQUFVO1FBQ2hCLE1BQU0sRUFBRTtZQUNOLEVBQUUsRUFBRSxJQUFJO1lBQ1IsS0FBSyxFQUFFLE9BQU87WUFDZCxJQUFJLEVBQUUsTUFBTTtTQUNiO1FBQ0QsWUFBWSxFQUFFLDJCQUEyQjtRQUN6QyxXQUFXLEVBQUUsNEJBQTRCO1FBQ3pDLFFBQVEsRUFBRSxFQUFFO1FBRVosUUFBUSxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQztRQUNsQyxXQUFXLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ3hDLFdBQVcsRUFBRSxJQUFJLENBQUMsV0FBVyxD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