diff --git a/bilingual.css b/bilingual.css index d7b64eb..2888bd8 100644 --- a/bilingual.css +++ b/bilingual.css @@ -10,6 +10,16 @@ margin-right: .5rem; border: 1px solid gray; border-radius: 1px; + background: #ddd; +} + +.wiai-language-chooser .wiai-language-option.active { + background-color: white; + font-weight: bold; +} + +.sectionname { + padding-left: 50px; } .wiai-english { diff --git a/bilingual.js b/bilingual.js index 0b9b1dd..8475b3a 100644 --- a/bilingual.js +++ b/bilingual.js @@ -34,8 +34,9 @@ function init() { categorizeElementsByPrefix(); initializeMultiLanguageElements(); addLanguageChooser(); - updateMultiLanguageElements(); readUserPreferences(); + updateMultiLanguageElements(); + updateLanguageOptions(); } /** @@ -77,10 +78,7 @@ function addLanguageChooser() { languageLink.addEventListener('click', function (event) { event.preventDefault(); switchLanguage(currentLanguage, language); - languageChooserOptions.forEach(function (element) { - element.classList.remove('active'); - }); - languageLink.classList.add('active'); + updateLanguageOptions(); }); if (language === currentLanguage) { @@ -94,6 +92,19 @@ function addLanguageChooser() { contentArea.prepend(languageChooser); } +/** + * Marks the language option for the `currentLanguage` as `.active`. + */ +function updateLanguageOptions() { + languageChooserOptions.forEach(function (element) { + if (element.getAttribute('data-wiai-language') === currentLanguage) { + element.classList.add('active'); + } else { + element.classList.remove('active'); + } + }); +} + /** * Update the language class on the document body (`wiai-language-XYZ`) * and update all elements in `multiLanguageElements`. @@ -176,12 +187,10 @@ function readUserPreferences() { if (localStorageEntry != null) { currentLanguage = localStorage.getItem(STORAGE_LANGUAGE_PREFERENCE_KEY); - updateMultiLanguageElements(); document.body.classList.add(`wiai-language-${currentLanguage}`); } else if (documentLanguage === 'en' || documentLanguage === 'en_us' || navigator.language === 'en' || navigator.language.includes('en-')) { currentLanguage = 'english'; - updateMultiLanguageElements(); document.body.classList.add(`wiai-language-${currentLanguage}`); } }