Improve JS code

This commit is contained in:
Avijit 🚀
2021-06-04 16:57:17 +02:00
committed by Yash Mehrotra
parent f9ee24248e
commit af197d9cc9

View File

@@ -1,20 +1,25 @@
document.addEventListener('DOMContentLoaded', ready, false); document.addEventListener('DOMContentLoaded', ready, false);
const THEME_PREF_STORAGE_KEY = "theme-preference"; const THEME_PREF_STORAGE_KEY = "theme-preference";
const GOKARNA_LIGHT_THEME = 'gokarna-light'; const THEME_TO_ICON_CLASS = {
const GOKARNA_DARK_THEME = 'gokarna-dark'; 'dark': 'fa fa-sun-o',
'light':'fa fa-moon-o'
};
let toggleIcon = ''; let toggleIcon = '';
let darkThemeCss = '';
function ready() { function ready() {
toggleIcon = document.querySelector('#dark-theme-toggle span'); toggleIcon = document.querySelector('#dark-theme-toggle span');
darkThemeCss = document.getElementById("dark-theme");
// TODO: Fetch programatically by user's system preference // TODO: Fetch programatically by user's system preference
const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) || GOKARNA_LIGHT_THEME; const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) || 'light';
setTheme(savedTheme); setTheme(savedTheme);
document.getElementById('dark-theme-toggle').addEventListener('click', () => { document.getElementById('dark-theme-toggle').addEventListener('click', () => {
if (toggleIcon.className === "fa fa-moon-o") { if (toggleIcon.className === THEME_TO_ICON_CLASS.dark) {
setTheme(GOKARNA_DARK_THEME); setTheme('light');
} else if (toggleIcon.className === "fa fa-sun-o") { } else if (toggleIcon.className === THEME_TO_ICON_CLASS.light) {
setTheme(GOKARNA_LIGHT_THEME); setTheme('dark');
} }
}); });
} }
@@ -32,15 +37,8 @@ window.addEventListener('scroll', () => {
}); });
function setTheme(themeToSet) { function setTheme(themeToSet) {
const darkThemeCss = document.getElementById("dark-theme");
localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet); localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet);
if (themeToSet === GOKARNA_DARK_THEME) { darkThemeCss.disabled = themeToSet === 'light';
darkThemeCss.disabled = false; toggleIcon.className = THEME_TO_ICON_CLASS[themeToSet];
toggleIcon.className = "fa fa-sun-o";
} else if(themeToSet === GOKARNA_LIGHT_THEME) {
darkThemeCss.disabled = true;
toggleIcon.className = "fa fa-moon-o";
}
} }