assets/clientside.js

// assets/clientside.js

console.log(">>> assets/clientside.js (themeManager version) - SCRIPT EXECUTION STARTED <<<");

try {
    // Gunakan namespace 'themeManager'
    window.themeManager = {
        // Gunakan nama fungsi 'initPageTheme'
        initPageTheme: function(pathname, storedThemePreference) {
            console.log("JS: themeManager.initPageTheme - Called. Pathname:", pathname, "Stored Pref:", storedThemePreference);

            let themeToApply = 'LIGHT';
            if (storedThemePreference && typeof storedThemePreference.theme === 'string') {
                themeToApply = storedThemePreference.theme;
            }
            console.log("JS: themeManager.initPageTheme - Theme to apply:", themeToApply);

            // PASTIKAN URL INI SESUAI DENGAN THEME_LIGHT DAN THEME_DARK DI APP.PY
            const lightThemeUrl = "https://cdn.jsdelivr.net/npm/[email protected]/dist/flatly/bootstrap.min.css";
            const darkThemeUrl = "https://cdn.jsdelivr.net/npm/[email protected]/dist/darkly/bootstrap.min.css";

            let newThemeUrl = lightThemeUrl;
            document.body.classList.remove('theme-dark', 'theme-light');

            if (themeToApply === 'DARK') {
                newThemeUrl = darkThemeUrl;
                document.body.classList.add('theme-dark');
            } else {
                newThemeUrl = lightThemeUrl;
                document.body.classList.add('theme-light');
            }
            
            let themeLink = document.getElementById('bootstrap-theme');
            if (!themeLink) {
                console.log("JS: themeManager.initPageTheme - Creating new theme link element.");
                themeLink = document.createElement('link');
                themeLink.id = 'bootstrap-theme';
                themeLink.rel = 'stylesheet';
                themeLink.type = 'text/css';
                document.getElementsByTagName('head')[0].appendChild(themeLink);
            }

            if (themeLink.href !== newThemeUrl) {
                console.log("JS: themeManager.initPageTheme - Setting theme link href to:", newThemeUrl);
                themeLink.href = newThemeUrl;
            }
            return window.dash_clientside.no_update;
        },

        // Gunakan nama fungsi 'applyPageTheme'
        applyPageTheme: function(themePreferenceFromStore) {
            console.log("JS: themeManager.applyPageTheme - Called. New pref from store:", themePreferenceFromStore);

            let themeToApply = 'LIGHT';
            if (themePreferenceFromStore && typeof themePreferenceFromStore.theme === 'string') {
                themeToApply = themePreferenceFromStore.theme;
            }
            console.log("JS: themeManager.applyPageTheme - Theme to apply:", themeToApply);

            // PASTIKAN URL INI SESUAI DENGAN THEME_LIGHT DAN THEME_DARK DI APP.PY
            const lightThemeUrl = "https://cdn.jsdelivr.net/npm/[email protected]/dist/flatly/bootstrap.min.css";
            const darkThemeUrl = "https://cdn.jsdelivr.net/npm/[email protected]/dist/darkly/bootstrap.min.css";

            let newThemeUrl = lightThemeUrl;
            document.body.classList.remove('theme-dark', 'theme-light');

            if (themeToApply === 'DARK') {
                newThemeUrl = darkThemeUrl;
                document.body.classList.add('theme-dark');
            } else {
                newThemeUrl = lightThemeUrl;
                document.body.classList.add('theme-light');
            }
            
            let themeLink = document.getElementById('bootstrap-theme');
            if (!themeLink) {
                console.log("JS: themeManager.applyPageTheme - Creating new theme link element.");
                themeLink = document.createElement('link');
                themeLink.id = 'bootstrap-theme';
                themeLink.rel = 'stylesheet';
                themeLink.type = 'text/css';
                document.getElementsByTagName('head')[0].appendChild(themeLink);
            }

            if (themeLink.href !== newThemeUrl) {
                console.log("JS: themeManager.applyPageTheme - Setting theme link href to:", newThemeUrl);
                themeLink.href = newThemeUrl;
            }
            return window.dash_clientside.no_update;
        }
    };

    console.log(">>> assets/clientside.js (themeManager version) - window.themeManager object DEFINED:", window.themeManager);
    if (typeof window.themeManager.initPageTheme !== 'function') {
        console.error(">>> DEBUG: assets/clientside.js - initPageTheme IS NOT a function on window.themeManager!");
    }
    if (typeof window.themeManager.applyPageTheme !== 'function') {
        console.error(">>> DEBUG: assets/clientside.js - applyPageTheme IS NOT a function on window.themeManager!");
    }

} catch (e) {
    console.error(">>> DEBUG: assets/clientside.js (themeManager version) - ERROR DURING SCRIPT EXECUTION:", e);
}

console.log(">>> assets/clientside.js (themeManager version) - SCRIPT EXECUTION FINISHED <<<");