diff --git a/.templates/header/header.html b/.templates/header/header.html index 6504dad..3bce120 100644 --- a/.templates/header/header.html +++ b/.templates/header/header.html @@ -69,9 +69,9 @@
- EN| - ES| - FR + EN| + ES| + FR
Toggle Darkmode diff --git a/.templates/header/scripts/switchLanguage.js b/.templates/header/scripts/switchLanguage.js index d857059..b7605fd 100644 --- a/.templates/header/scripts/switchLanguage.js +++ b/.templates/header/scripts/switchLanguage.js @@ -1,59 +1,74 @@ // Constants -DEFAULT_LANGUAGE = "EN"; -_LANGUAGE_PARENT_ID = "sdev-header__language"; -_LANGUAGE_TEXT_HIGHLIGHT_CLASS = "sdev__text-highlight"; -loadLangStartup(); +const OPERATION = { + ADD: "add", + REMOVE: "remove" +} -// Page Startup -function loadLangStartup() { +// Public Functions +function sdev_header__startLanguage() { - // Add the highlight to the current language + // Fetch the stored language + const DEFAULT_LANGUAGE = "EN"; const langID = fetchLocalStorage("lang", DEFAULT_LANGUAGE); - const langHTML = fetchObjectHTML(_LANGUAGE_PARENT_ID, langID); - langHTML.classList.add(_LANGUAGE_TEXT_HIGHLIGHT_CLASS); + + // Add the highlight to the stored language + _sdev_header__languageHighlight(langID, OPERATION.ADD); // Load the content for the language - try { - loadLangContent(langID); - } catch (error) { - console.error("Implementation of loadLangContent(langID) is missing.\nError: " + error); - debugPrint(langID); - } + _sdev_header__loadLangContent(langID); } +function sdev_header__switchLanguage(langID) { -// Switch Language -function switchLanguage(langID) { - - // If the language is already highlighted, ignore the click - if (fetchLocalStorage("lang") === langID) { return; } + // Fetch the current language + const currentLangID = fetchLocalStorage("lang"); - // Remove the highlight from the previous language - const previousLangID = fetchLocalStorage("lang"); - const previousLangHTML = fetchObjectHTML(_LANGUAGE_PARENT_ID, previousLangID); - previousLangHTML.classList.remove(_LANGUAGE_TEXT_HIGHLIGHT_CLASS); + // If the language is the same, then return + if (currentLangID === langID) { return; } - // Highlight the clicked language - const langHTML = fetchObjectHTML(_LANGUAGE_PARENT_ID, langID); - langHTML.classList.add(_LANGUAGE_TEXT_HIGHLIGHT_CLASS); + // Swap the highlight from the previous language + _sdev_header__languageHighlight(currentLangID, OPERATION.REMOVE); + _sdev_header__languageHighlight(langID, OPERATION.ADD); // Save the selected language to the local storage localStorage.setItem("lang", langID); // Load the content for the language + _sdev_header__loadLangContent(langID); +} + +// Private Functions +function _sdev_header__loadLangContent(langID) { try { loadLangContent(langID); } catch (error) { console.error("Implementation of loadLangContent(langID) is missing.\nError: " + error); - debugPrint(langID); + _sdev_header__languageDebugPrint(langID); } } +function _sdev_header__languageHighlight(langID, operation) { + + // Parameters + const LANGUAGE_PARENT_ID = "sdev-header__language"; + const LANGUAGE_TEXT_HIGHLIGHT_CLASS = "sdev__text-highlight"; + + // Fetch the language HTML object + const langHTML = fetchObjectHTML(LANGUAGE_PARENT_ID, langID); -// Debug Language Content -function debugPrint(langID) { + // Add or remove the highlight + if (operation === OPERATION.ADD) { + langHTML.classList.add(LANGUAGE_TEXT_HIGHLIGHT_CLASS); + } else if (operation === OPERATION.REMOVE) { + langHTML.classList.remove(LANGUAGE_TEXT_HIGHLIGHT_CLASS); + } +} +function _sdev_header__languageDebugPrint(langID) { const langIDtoContent = { "EN": "English", "ES": "Spanish", "FR": "French" }; console.debug("[switchLanguages.js] Selected Language: " + langIDtoContent[langID]); -} \ No newline at end of file +} + +// Startup +sdev_header__startLanguage(); \ No newline at end of file