@ribajs/bs5/dist/services/theme.js

Bootstrap 5 module for Riba.js

import { EventDispatcher } from "@ribajs/events";
import { themeChoices } from "../constants/index.js";
import { Bs5Service } from "./bs5.service.js";
export class ThemeService {
    eventDispatcher = EventDispatcher.getInstance();
    static instance;
    bs5 = Bs5Service.getSingleton();
    current = "os";
    constructor() {
        this.addEventListeners();
        const data = this.init();
        const selectEl = document.getElementById("theme");
        if (selectEl)
            this.select(data.choice, selectEl);
    }
    static getSingleton() {
        if (ThemeService.instance) {
            return ThemeService.instance;
        }
        return this.setSingleton();
    }
    static setSingleton() {
        if (ThemeService.instance) {
            throw new Error(`Singleton of ThemeService already defined!`);
        }
        ThemeService.instance = new ThemeService();
        return ThemeService.instance;
    }
    addEventListeners() {
        window
            .matchMedia("(prefers-color-scheme: dark)")
            .addEventListener("change", (e) => {
            this.triggerChange(e);
        });
    }
    init() {
        let savedTheme = "os";
        if (this.bs5.options.allowStoreDataInBrowser) {
            savedTheme = (localStorage.getItem("bs5-theme") || "os");
        }
        return this.set(savedTheme);
    }
    select(choice, selectEl) {
        if (selectEl?.nodeName === "SELECT") {
            selectEl.value = choice;
        }
    }
    getDefaultData() {
        return {
            supported: !!window.matchMedia,
            isDark: false,
            isLight: false,
            systemIsDark: false,
            systemIsLight: true,
            bySystem: true,
            byUser: false,
            choice: "os",
        };
    }
    triggerChange(e, oldValue) {
        if (!oldValue) {
            oldValue = this.getDefaultData();
        }
        const newValue = this.getScheme();
        this.eventDispatcher.trigger("theme-change", {
            oldValue,
            newValue,
        });
        return newValue;
    }
    onceChange(cb, thisContext) {
        this.eventDispatcher.once("theme-change", cb, thisContext);
    }
    onChange(cb, thisContext) {
        this.eventDispatcher.on("theme-change", cb, thisContext);
    }
    offChange(cb, thisContext) {
        this.eventDispatcher.off("theme-change", cb, thisContext);
    }
    set(newColorScheme) {
        const oldScheme = this.getScheme();
        if (!themeChoices.includes(newColorScheme)) {
            console.warn(`Unsupported theme "${newColorScheme}", set instead the default "os".`);
            newColorScheme = "os";
        }
        if (this.bs5.options.allowStoreDataInBrowser) {
            localStorage.setItem("bs5-theme", newColorScheme);
        }
        if (newColorScheme === "os") {
            const newScheme = this.getScheme(newColorScheme);
            document.documentElement.setAttribute("data-bs-theme", newScheme.isDark ? "dark" : "light");
        }
        else {
            document.documentElement.setAttribute("data-bs-theme", newColorScheme);
        }
        this.current = newColorScheme;
        return this.triggerChange(undefined, oldScheme);
    }
    getScheme(choice = this.current) {
        const data = this.getDefaultData();
        data.systemIsDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
        data.systemIsLight = !data.systemIsDark;
        if (choice === "os") {
            data.bySystem = true;
            data.byUser = false;
            data.choice = "os";
            data.isDark = data.systemIsDark;
            data.isLight = data.systemIsLight;
        }
        else {
            data.bySystem = false;
            data.byUser = true;
            if (choice === "dark") {
                data.isDark = true;
                data.choice = "dark";
            }
            if (choice === "light") {
                data.isLight = true;
                data.choice = "light";
            }
        }
        return data;
    }
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvc2VydmljZXMvdGhlbWUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ2pELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUNyRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFhOUMsTUFBTSxPQUFPLFlBQVk7SUFDYixlQUFlLEdBQUcsZUFBZSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBRWhELE1BQU0sQ0FBQyxRQUFRLENBQWdCO0lBQy9CLEdBQUcsR0FBRyxVQUFVLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDbkMsT0FBTyxHQUFnQixJQUFJLENBQUM7SUFFbkM7UUFDRSxJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztRQUN6QixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDekIsTUFBTSxRQUFRLEdBQUcsUUFBUSxDQUFDLGNBQWMsQ0FDdEMsT0FBTyxDQUNvQixDQUFDO1FBRTlCLElBQUksUUFBUTtZQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxRQUFRLENBQUMsQ0FBQztJQUNuRCxDQUFDO0lBRU0sTUFBTSxDQUFDLFlBQVk7UUFDeEIsSUFBSSxZQUFZLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDMUIsT0FBTyxZQUFZLENBQUMsUUFBUSxDQUFDO1FBQy9CLENBQUM7UUFFRCxPQUFPLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRU0sTUFBTSxDQUFDLFlBQVk7UUFDeEIsSUFBSSxZQUFZLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDMUIsTUFBTSxJQUFJLEtBQUssQ0FBQyw0Q0FBNEMsQ0FBQyxDQUFDO1FBQ2hFLENBQUM7UUFDRCxZQUFZLENBQUMsUUFBUSxH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