File size: 5,022 Bytes
4253e50
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
// 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/bootswatch@5.3.2/dist/flatly/bootstrap.min.css";
            const darkThemeUrl = "https://cdn.jsdelivr.net/npm/bootswatch@5.3.2/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/bootswatch@5.3.2/dist/flatly/bootstrap.min.css";
            const darkThemeUrl = "https://cdn.jsdelivr.net/npm/bootswatch@5.3.2/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 <<<");