From 84547aecfb4e02f07b99f214924b3eedff29446d Mon Sep 17 00:00:00 2001
From: Linux User <fswiai@stuve.stuve-bamberg.de>
Date: Sat, 13 Feb 2021 08:57:21 +0100
Subject: [PATCH] Style language chooser

---
 bilingual.css | 14 ++++++++++++++
 bilingual.js  | 16 +++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

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