fknoch/vc-customization
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Style language chooser

Browse Source
This commit is contained in:
Linux User 2021-02-13 08:57:21 +01:00
parent e77f2438e4
commit 84547aecfb
2 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
bilingual.css
View File

@ -1,3 +1,17 @@
.wiai-language-chooser {
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.wiai-language-chooser .wiai-language-option {
padding: .5rem 1rem;
margin-right: .5rem;
border: 1px solid gray;
border-radius: 1px;
}
.wiai-english { .wiai-english {
display: none; display: none;
} }

16
bilingual.js
View File

@ -15,6 +15,9 @@ const languageElements = {};
// separated by ' | '. // separated by ' | '.
const multiLanguageElements = []; const multiLanguageElements = [];
// The links that allow to change the language.
const languageChooserOptions = [];
const LANGUAGES = ['german', 'english']; const LANGUAGES = ['german', 'english'];
const LANGUAGE_NAMES = {'german': 'Deutsch', 'english': 'English'}; const LANGUAGE_NAMES = {'german': 'Deutsch', 'english': 'English'};
const LANGUAGE_PREFIXES = {'img[alt="German"]': 'german', 'img[alt="English"]': 'english'}; const LANGUAGE_PREFIXES = {'img[alt="German"]': 'german', 'img[alt="English"]': 'english'};
@ -74,12 +77,18 @@ function addLanguageChooser() {
languageLink.addEventListener('click', function (event) { languageLink.addEventListener('click', function (event) {
event.preventDefault(); event.preventDefault();
switchLanguage(currentLanguage, language); switchLanguage(currentLanguage, language);
let siblings = Array.from(link.parentElement.children); languageChooserOptions.forEach(function (element) {
siblings.forEach(function (element) { element.classList.remove('active'); }) element.classList.remove('active');
link.classList.add('active'); });
languageLink.classList.add('active');
}); });
if (language === currentLanguage) {
languageLink.classList.add('active');
}
languageChooser.appendChild(languageLink); languageChooser.appendChild(languageLink);
languageChooserOptions.push(languageLink);
}); });
contentArea.prepend(languageChooser); contentArea.prepend(languageChooser);
@ -163,6 +172,7 @@ function readUserPreferences() {
if (localStorage.getItem(STORAGE_LANGUAGE_PREFERENCE_KEY) != null) { if (localStorage.getItem(STORAGE_LANGUAGE_PREFERENCE_KEY) != null) {
currentLanguage = localStorage.getItem(STORAGE_LANGUAGE_PREFERENCE_KEY); currentLanguage = localStorage.getItem(STORAGE_LANGUAGE_PREFERENCE_KEY);
updateMultiLanguageElements(); updateMultiLanguageElements();
document.body.classList.add(`wiai-language-${currentLanguage}`);
} }
} }