Skip to content

Commit

Permalink
Segmented Header switchLang
Browse files Browse the repository at this point in the history
  • Loading branch information
stanieldev committed Nov 21, 2024
1 parent 8d06f08 commit 21dd9ca
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 34 deletions.
6 changes: 3 additions & 3 deletions .templates/header/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@
<!-- Settings Container -->
<div id="sdev-header__settings" class="sdev-header__padded-row-list">
<div id="sdev-header__language" class="sdev-header__padded-row-list">
<a class="sdev-header__lang-link" id="sdev-header__lang-EN" onclick="switchLanguage('EN')">EN</a>|
<a class="sdev-header__lang-link" id="sdev-header__lang-ES" onclick="switchLanguage('ES')">ES</a>|
<a class="sdev-header__lang-link" id="sdev-header__lang-FR" onclick="switchLanguage('FR')">FR</a>
<a class="sdev-header__lang-link" id="sdev-header__lang-EN" onclick="sdev_header__switchLanguage('EN')">EN</a>|
<a class="sdev-header__lang-link" id="sdev-header__lang-ES" onclick="sdev_header__switchLanguage('ES')">ES</a>|
<a class="sdev-header__lang-link" id="sdev-header__lang-FR" onclick="sdev_header__switchLanguage('FR')">FR</a>
</div>
<div id="sdev-header__theme" class="sdev-header__padded-row-list">
<img class="sdev-header__theme-link" id="sdev-header__theme-icon" src="/.templates/header/images/sun.png" alt="Toggle Darkmode" onclick="switchTheme()">
Expand Down
77 changes: 46 additions & 31 deletions .templates/header/scripts/switchLanguage.js
Original file line number Diff line number Diff line change
@@ -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]);
}
}

// Startup
sdev_header__startLanguage();

0 comments on commit 21dd9ca

Please sign in to comment.