Skip to content

Commit 7f6ac8c

Browse files
terabytesoftwterabytesoftw
committed
refactor(js): Improve code formatting and readability in toggle-theme.js.
1 parent 0a3a955 commit 7f6ac8c

File tree

2 files changed

+128
-128
lines changed

2 files changed

+128
-128
lines changed

‎.editorconfig‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@ indent_style = space
1010
indent_size = 4
1111
trim_trailing_whitespace = true
1212

13-
[*.php]
14-
ij_php_space_before_short_closure_left_parenthesis = false
15-
ij_php_space_after_type_cast = true
13+
[*.js]
14+
indent_size = 2
1615

1716
[*.md]
1817
trim_trailing_whitespace = false
1918

19+
[*.php]
20+
ij_php_space_before_short_closure_left_parenthesis = false
21+
ij_php_space_after_type_cast = true
22+
2023
[*.yml]
2124
indent_size = 2
2225

‎src/framework/resource/js/toggle-theme.js‎

Lines changed: 122 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -5,135 +5,132 @@
55
*/
66

77
(() => {
8-
"use strict";
9-
10-
const getStoredTheme = () => localStorage.getItem("theme");
11-
const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
12-
13-
const getPreferredTheme = () => {
14-
const storedTheme = getStoredTheme();
15-
if (storedTheme) {
16-
return storedTheme;
8+
"use strict";
9+
10+
const getStoredTheme = () => localStorage.getItem("theme");
11+
const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
12+
13+
const getPreferredTheme = () => {
14+
const storedTheme = getStoredTheme();
15+
if (storedTheme) {
16+
return storedTheme;
17+
}
18+
19+
return window.matchMedia("(prefers-color-scheme: dark)").matches
20+
? "dark"
21+
: "light";
22+
};
23+
24+
const setTheme = (theme) => {
25+
if (theme === "auto") {
26+
document.documentElement.setAttribute(
27+
"data-bs-theme",
28+
window.matchMedia("(prefers-color-scheme: dark)").matches
29+
? "dark"
30+
: "light",
31+
);
32+
} else {
33+
document.documentElement.setAttribute("data-bs-theme", theme);
34+
}
35+
};
36+
37+
setTheme(getPreferredTheme());
38+
39+
const showActiveTheme = (theme, focus = false) => {
40+
// Original Bootstrap theme switcher logic
41+
const themeSwitcher = document.querySelector("#bd-theme");
42+
43+
if (themeSwitcher) {
44+
const themeSwitcherText = document.querySelector("#bd-theme-text");
45+
const activeThemeIcon = document.querySelector(".theme-icon-active use");
46+
const btnToActive = document.querySelector(
47+
`[data-bs-theme-value="${theme}"]`,
48+
);
49+
50+
if (btnToActive) {
51+
const svgOfActiveBtn = btnToActive
52+
.querySelector("svg use")
53+
.getAttribute("href");
54+
55+
document
56+
.querySelectorAll("[data-bs-theme-value]")
57+
.forEach((element) => {
58+
element.classList.remove("active");
59+
element.setAttribute("aria-pressed", "false");
60+
});
61+
62+
btnToActive.classList.add("active");
63+
btnToActive.setAttribute("aria-pressed", "true");
64+
activeThemeIcon.setAttribute("href", svgOfActiveBtn);
65+
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
66+
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
67+
68+
if (focus) {
69+
themeSwitcher.focus();
1770
}
18-
19-
return window.matchMedia("(prefers-color-scheme: dark)").matches
20-
? "dark"
21-
: "light";
22-
};
23-
24-
const setTheme = (theme) => {
25-
if (theme === "auto") {
26-
document.documentElement.setAttribute(
27-
"data-bs-theme",
28-
window.matchMedia("(prefers-color-scheme: dark)").matches
29-
? "dark"
30-
: "light",
31-
);
71+
}
72+
}
73+
74+
// Custom theme toggle icons logic
75+
const themeToggle = document.querySelector("#theme-toggle");
76+
if (themeToggle) {
77+
const moonIcon = themeToggle.querySelector("#theme-dark-icon");
78+
const sunIcon = themeToggle.querySelector("#theme-light-icon");
79+
80+
if (moonIcon && sunIcon) {
81+
// Determine effective theme (handle 'auto' case)
82+
const effectiveTheme =
83+
theme === "auto"
84+
? window.matchMedia("(prefers-color-scheme: dark)").matches
85+
? "dark"
86+
: "light"
87+
: theme;
88+
89+
if (effectiveTheme === "dark") {
90+
moonIcon.classList.remove("d-none");
91+
sunIcon.classList.add("d-none");
3292
} else {
33-
document.documentElement.setAttribute("data-bs-theme", theme);
34-
}
35-
};
36-
37-
setTheme(getPreferredTheme());
38-
39-
const showActiveTheme = (theme, focus = false) => {
40-
// Original Bootstrap theme switcher logic
41-
const themeSwitcher = document.querySelector("#bd-theme");
42-
43-
if (themeSwitcher) {
44-
const themeSwitcherText = document.querySelector("#bd-theme-text");
45-
const activeThemeIcon = document.querySelector(
46-
".theme-icon-active use",
47-
);
48-
const btnToActive = document.querySelector(
49-
`[data-bs-theme-value="${theme}"]`,
50-
);
51-
52-
if (btnToActive) {
53-
const svgOfActiveBtn = btnToActive
54-
.querySelector("svg use")
55-
.getAttribute("href");
56-
57-
document
58-
.querySelectorAll("[data-bs-theme-value]")
59-
.forEach((element) => {
60-
element.classList.remove("active");
61-
element.setAttribute("aria-pressed", "false");
62-
});
63-
64-
btnToActive.classList.add("active");
65-
btnToActive.setAttribute("aria-pressed", "true");
66-
activeThemeIcon.setAttribute("href", svgOfActiveBtn);
67-
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
68-
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
69-
70-
if (focus) {
71-
themeSwitcher.focus();
72-
}
73-
}
74-
}
75-
76-
// Custom theme toggle icons logic
77-
const themeToggle = document.querySelector("#theme-toggle");
78-
if (themeToggle) {
79-
const moonIcon = themeToggle.querySelector("#theme-dark-icon");
80-
const sunIcon = themeToggle.querySelector("#theme-light-icon");
81-
82-
if (moonIcon && sunIcon) {
83-
// Determine effective theme (handle 'auto' case)
84-
const effectiveTheme =
85-
theme === "auto"
86-
? window.matchMedia("(prefers-color-scheme: dark)")
87-
.matches
88-
? "dark"
89-
: "light"
90-
: theme;
91-
92-
if (effectiveTheme === "dark") {
93-
moonIcon.classList.remove("d-none");
94-
sunIcon.classList.add("d-none");
95-
} else {
96-
moonIcon.classList.add("d-none");
97-
sunIcon.classList.remove("d-none");
98-
}
99-
}
93+
moonIcon.classList.add("d-none");
94+
sunIcon.classList.remove("d-none");
10095
}
101-
};
102-
103-
window
104-
.matchMedia("(prefers-color-scheme: dark)")
105-
.addEventListener("change", () => {
106-
const storedTheme = getStoredTheme();
107-
if (storedTheme !== "light" && storedTheme !== "dark") {
108-
setTheme(getPreferredTheme());
109-
// Update icons when system preference changes
110-
showActiveTheme(getPreferredTheme());
111-
}
112-
});
113-
114-
window.addEventListener("DOMContentLoaded", () => {
96+
}
97+
}
98+
};
99+
100+
window
101+
.matchMedia("(prefers-color-scheme: dark)")
102+
.addEventListener("change", () => {
103+
const storedTheme = getStoredTheme();
104+
if (storedTheme !== "light" && storedTheme !== "dark") {
105+
setTheme(getPreferredTheme());
106+
// Update icons when system preference changes
115107
showActiveTheme(getPreferredTheme());
108+
}
109+
});
116110

117-
document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
118-
toggle.addEventListener("click", () => {
119-
const theme = toggle.getAttribute("data-bs-theme-value");
120-
setStoredTheme(theme);
121-
setTheme(theme);
122-
showActiveTheme(theme, true);
123-
});
124-
});
125-
126-
// Add event listener for custom theme toggle button
127-
const customThemeToggle = document.querySelector("#theme-toggle");
128-
if (customThemeToggle) {
129-
customThemeToggle.addEventListener("click", () => {
130-
const currentTheme = getStoredTheme() || getPreferredTheme();
131-
const newTheme = currentTheme === "dark" ? "light" : "dark";
132-
133-
setStoredTheme(newTheme);
134-
setTheme(newTheme);
135-
showActiveTheme(newTheme, true);
136-
});
137-
}
111+
window.addEventListener("DOMContentLoaded", () => {
112+
showActiveTheme(getPreferredTheme());
113+
114+
document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
115+
toggle.addEventListener("click", () => {
116+
const theme = toggle.getAttribute("data-bs-theme-value");
117+
setStoredTheme(theme);
118+
setTheme(theme);
119+
showActiveTheme(theme, true);
120+
});
138121
});
122+
123+
// Add event listener for custom theme toggle button
124+
const customThemeToggle = document.querySelector("#theme-toggle");
125+
if (customThemeToggle) {
126+
customThemeToggle.addEventListener("click", () => {
127+
const currentTheme = getStoredTheme() || getPreferredTheme();
128+
const newTheme = currentTheme === "dark" ? "light" : "dark";
129+
130+
setStoredTheme(newTheme);
131+
setTheme(newTheme);
132+
showActiveTheme(newTheme, true);
133+
});
134+
}
135+
});
139136
})();

0 commit comments

Comments
 (0)