diff --git a/.templates/header/header.html b/.templates/header/header.html index 19c4896..bc8b223 100644 --- a/.templates/header/header.html +++ b/.templates/header/header.html @@ -45,9 +45,9 @@ - - - + + + @@ -58,11 +58,11 @@
Logo
diff --git a/.templates/header/switchLanguage.js b/.templates/scripts/switchLanguage.js similarity index 64% rename from .templates/header/switchLanguage.js rename to .templates/scripts/switchLanguage.js index 89e99c7..b1fceee 100644 --- a/.templates/header/switchLanguage.js +++ b/.templates/scripts/switchLanguage.js @@ -1,18 +1,16 @@ // Constants -PARENT = "sdev-header__language"; DEFAULT_LANGUAGE = "EN"; -TEXT_HIGHLIGHT_CLASS = "sdev-header__text-highlight"; +PARENT_ID = "sdev-header__language"; +HEADER_TEXT_HIGHLIGHT_CLASS = "sdev-header__text-highlight"; loadLangStartup(); // Page Startup function loadLangStartup() { - // Fetch the language from the local storage + // Add the highlight to the current language const langID = fetchLocalStorage("lang", DEFAULT_LANGUAGE); - - // Highlight the stored language - const langHTML = fetchObjectHTML(PARENT, langID); - langHTML.classList.add(TEXT_HIGHLIGHT_CLASS); + const langHTML = fetchObjectHTML(PARENT_ID, langID); + langHTML.classList.add(HEADER_TEXT_HIGHLIGHT_CLASS); // Load the content for the language loadLangContent(langID); @@ -26,12 +24,12 @@ function switchLanguage(langID) { // Remove the highlight from the previous language const previousLangID = fetchLocalStorage("lang"); - const previousLangHTML = fetchObjectHTML(PARENT, previousLangID); - previousLangHTML.classList.remove(TEXT_HIGHLIGHT_CLASS); + const previousLangHTML = fetchObjectHTML(PARENT_ID, previousLangID); + previousLangHTML.classList.remove(HEADER_TEXT_HIGHLIGHT_CLASS); // Highlight the clicked language - const langHTML = fetchObjectHTML(PARENT, langID); - langHTML.classList.add(TEXT_HIGHLIGHT_CLASS); + const langHTML = fetchObjectHTML(PARENT_ID, langID); + langHTML.classList.add(HEADER_TEXT_HIGHLIGHT_CLASS); // Save the selected language to the local storage localStorage.setItem("lang", langID); diff --git a/.templates/header/switchTheme.js b/.templates/scripts/switchTheme.js similarity index 59% rename from .templates/header/switchTheme.js rename to .templates/scripts/switchTheme.js index 9a96cc2..3921ce2 100644 --- a/.templates/header/switchTheme.js +++ b/.templates/scripts/switchTheme.js @@ -1,17 +1,13 @@ // Constants -PARENT = "sdev-header__theme"; DEFAULT_THEME = "dark"; -THEME_ICON_HTML = document.getElementById("sdev-header__theme-icon"); +TOGGLE_HTML = document.getElementById("sdev-header__theme-icon"); +BODY = document.getElementsByTagName("body")[0]; loadThemeStartup(); // Page Startup function loadThemeStartup() { - - // Fetch the theme from the local storage - const theme = fetchLocalStorage("theme", "light"); - - // Load the theme in the page - if (theme === "dark") { loadDarkMode(); } + const theme = fetchLocalStorage("theme", DEFAULT_THEME); + if (theme === "dark") { loadDarkMode(); } else { loadLightMode(); } } @@ -19,39 +15,36 @@ function loadThemeStartup() { function switchTheme() { // Fetch the theme from the local storage - const theme = localStorage.getItem("theme"); + const current_theme = fetchLocalStorage("theme"); // Change the theme - if (theme === "dark") { - - // Swap the theme in the local storage - localStorage.setItem("theme", "light"); - - // Load the light mode - loadLightMode(); + if (current_theme === "dark") { + localStorage.setItem("theme", "light"); // Swap the theme in the local storage + loadLightMode(); // Load the light mode + BODY.style.transition = "var(--theme-transition, 0.25s)"; + } + else if (current_theme === "light") { + localStorage.setItem("theme", "dark"); // Swap the theme in the local storage + loadDarkMode(); // Load the dark mode + BODY.style.transition = "var(--theme-transition, 0.25s)"; } else { - - // Swap the theme in the local storage - localStorage.setItem("theme", "dark"); - - // Load the dark mode - loadDarkMode(); + console.error("Invalid Theme: " + current_theme); } } // Load Themes function loadDarkMode() { console.debug("Selected Theme: Dark"); - THEME_ICON_HTML.src = "/.resources/images/moon.png"; - THEME_ICON_HTML.style.filter = "invert(100%)"; + TOGGLE_HTML.src = "/.resources/images/moon.png"; + TOGGLE_HTML.style.filter = "invert(100%)"; delLightMode(); setDarkMode(); } function loadLightMode() { console.debug("Selected Theme: Light"); - THEME_ICON_HTML.src = "/.resources/images/sun.png"; - THEME_ICON_HTML.style.filter = "invert(0%)"; + TOGGLE_HTML.src = "/.resources/images/sun.png"; + TOGGLE_HTML.style.filter = "invert(0%)"; delDarkMode(); setLightMode(); } diff --git a/.templates/scripts/toggles.js b/.templates/scripts/toggles.js new file mode 100644 index 0000000..9471830 --- /dev/null +++ b/.templates/scripts/toggles.js @@ -0,0 +1,23 @@ +function tabSwitch(ID, executable) { + + // Constants + const TAB_HTML = document.getElementById(ID); + const PARENT_HTML = TAB_HTML.parentNode; + + // Only highlight the selected tab + for (let i = 0; i < PARENT_HTML.children.length; i++) { + PARENT_HTML.children[i].classList.remove('text-highlight'); + } + TAB_HTML.classList.add('text-highlight'); + + // Execute the function that corresponds to the tab + executable(ID); +} + + + +// Page Startup +function loadLangStartup() { + const LANG = fetchLocalStorage("lang", "EN"); + tabSwitch(LANG, switchLanguage); +} \ No newline at end of file diff --git a/home/home.css b/home/home.css index 51c20e0..fbd5fdd 100644 --- a/home/home.css +++ b/home/home.css @@ -4,15 +4,6 @@ --tab-spacing: 50px; } - - - - -.text-highlight, .tab:hover { - text-decoration: underline !important; -} - - /* Box Classes */ .tab-bar { /* Geometry */ @@ -29,7 +20,14 @@ /* Box Objects */ /* Item Classes */ +.tab { + /* Transition */ + transition: var(--theme-transition); +} .tab:hover { + /* Text */ + color: var(--text-highlight); + /* Cursor */ cursor: pointer; } diff --git a/home/index.html b/home/index.html index aefb6db..0491955 100644 --- a/home/index.html +++ b/home/index.html @@ -13,7 +13,9 @@ crossorigin="anonymous"> @@ -23,8 +25,8 @@ - - + + diff --git a/home/switchTab.js b/home/switchTab.js index f4236f3..f75f18f 100644 --- a/home/switchTab.js +++ b/home/switchTab.js @@ -1,22 +1,16 @@ // Constants -PARENT = "tile-grid-selector"; DEFAULT_TAB = "home".toLowerCase(); +PARENT = "tile-grid-selector"; TEXT_HIGHLIGHT_CLASS = "text-highlight"; loadTab(); - -// TODO THIS IS BROKEN, FIX IT - - // Page Startup function loadTab() { - // Fetch the tab from the local storage + // Add the highlight to the current tab const tabID = fetchLocalStorage("tab", DEFAULT_TAB); - - // Highlight the stored tab const tabHTML = fetchObjectHTML(PARENT, tabID); - tabHTML.classList.add(TEXT_HIGHLIGHT_CLASS); + tabHTML.classList.add(TEXT_HIGHLIGHT_CLASS); // Load the content for the tab loadTabContent(tabID); @@ -34,11 +28,11 @@ function switchTab(childPseudoID) { // Remove the highlight from the previous tab const previousTabID = fetchLocalStorage("tab"); const previousTabHTML = fetchObjectHTML(PARENT, previousTabID); - previousTabHTML.classList.remove(TEXT_HIGHLIGHT_CLASS); + previousTabHTML.classList.remove(TEXT_HIGHLIGHT_CLASS); // Highlight the clicked tab const tabHTML = fetchObjectHTML(PARENT, childPseudoID); - tabHTML.classList.add(TEXT_HIGHLIGHT_CLASS); + tabHTML.classList.add(TEXT_HIGHLIGHT_CLASS); // Save the selected tab to the local storage localStorage.setItem("tab", childPseudoID);