add translation selector and fix translation of data-attributes

public/scripts/localization.js

@@ -5,12 +5,19 @@ class Localization {
         Localization.translations = {};
         Localization.defaultTranslations = {};
 
-        const initialLocale = Localization.supportedOrDefault(navigator.languages);
+        Localization.systemLocale = Localization.supportedOrDefault(navigator.languages);
 
-        Localization.setLocale(initialLocale)
+        let storedLanguageCode = localStorage.getItem("language-code");
+
+        Localization.initialLocale = storedLanguageCode && Localization.isSupported(storedLanguageCode)
+            ? storedLanguageCode
+            : Localization.systemLocale;
+
+        Localization.setTranslation(Localization.initialLocale)
             .then(_ => {
-                Localization.translatePage();
-            })
+                console.log("Initial translation successful.");
+                Events.fire("translation-loaded");
+            });
     }
 
     static isSupported(locale) {
@@ -21,11 +28,21 @@ class Localization {
         return locales.find(Localization.isSupported) || Localization.defaultLocale;
     }
 
+    static async setTranslation(locale) {
+        if (!locale) locale = Localization.systemLocale;
+
+        await Localization.setLocale(locale)
+        await Localization.translatePage();
+
+        console.log("Page successfully translated",
+            `System language: ${Localization.systemLocale}`,
+            `Selected language: ${locale}`
+        );
+    }
+
     static async setLocale(newLocale) {
         if (newLocale === Localization.locale) return false;
         
-        const isFirstTranslation = !Localization.locale
-
         Localization.defaultTranslations = await Localization.fetchTranslationsFor(Localization.defaultLocale);
 
         const newTranslations = await Localization.fetchTranslationsFor(newLocale);
@@ -34,10 +51,14 @@ class Localization {
 
         Localization.locale = newLocale;
         Localization.translations = newTranslations;
+    }
 
-        if (isFirstTranslation) {
-            Events.fire("translation-loaded");
-        }
+    static getLocale() {
+        return Localization.locale;
+    }
+
+    static isSystemLocale() {
+        return !localStorage.getItem('language-code');
     }
 
     static async fetchTranslationsFor(newLocale) {
@@ -48,7 +69,7 @@ class Localization {
         return await response.json();
     }
 
-    static translatePage() {
+    static async translatePage() {
         document
             .querySelectorAll("[data-i18n-key]")
             .forEach(element => Localization.translateElement(element));
@@ -63,10 +84,14 @@ class Localization {
             if (attr === "text") {
                 element.innerText = Localization.getTranslation(key);
             } else {
-                element.setAttribute(attr, Localization.getTranslation(key, attr));
+                if (attr.startsWith("data-")) {
+                    let dataAttr = attr.substring(5);
+                    element.dataset.dataAttr = Localization.getTranslation(key, attr);
+                } {
+                    element.setAttribute(attr, Localization.getTranslation(key, attr));
+                }
             }
         }
-
     }
 
     static getTranslation(key, attr, data, useDefault=false) {

public/scripts/ui.js

@@ -45,6 +45,8 @@ class PeersUI {
 
         this.$displayName = $('display-name');
 
+        this.$displayName.setAttribute("placeholder", this.$displayName.dataset.placeholder);
+
         this.$displayName.addEventListener('keydown', e => this._onKeyDownDisplayName(e));
         this.$displayName.addEventListener('keyup', e => this._onKeyUpDisplayName(e));
         this.$displayName.addEventListener('blur', e => this._saveDisplayName(e.target.innerText));
@@ -613,6 +615,58 @@ class Dialog {
     }
 }
 
+class LanguageSelectDialog extends Dialog {
+
+    constructor() {
+        super('language-select-dialog');
+
+        this.$languageSelectBtn = $('language-selector');
+        this.$languageSelectBtn.addEventListener('click', _ => this.show());
+
+        this.$languageButtons = this.$el.querySelectorAll(".language-buttons button");
+        this.$languageButtons.forEach($btn => {
+            $btn.addEventListener("click", e => this.selectLanguage(e));
+        })
+        Events.on('keydown', e => this._onKeyDown(e));
+    }
+
+    _onKeyDown(e) {
+        if (this.isShown() && e.code === "Escape") {
+            this.hide();
+        }
+    }
+
+    show() {
+        if (Localization.isSystemLocale()) {
+            this.$languageButtons[0].focus();
+        } else {
+            let locale = Localization.getLocale();
+            for (let i=0; i<this.$languageButtons.length; i++) {
+                const $btn = this.$languageButtons[i];
+                if ($btn.value === locale) {
+                    $btn.focus();
+                    break;
+                }
+            }
+        }
+        super.show();
+    }
+
+    selectLanguage(e) {
+        e.preventDefault()
+        let languageCode = e.target.value;
+
+        if (languageCode) {
+            localStorage.setItem('language-code', languageCode);
+        } else {
+            localStorage.removeItem('language-code');
+        }
+
+        Localization.setTranslation(languageCode)
+            .then(_ => this.hide());
+    }
+}
+
 class ReceiveDialog extends Dialog {
     constructor(id) {
         super(id);
@@ -2255,6 +2309,7 @@ class PairDrop {
             const server = new ServerConnection();
             const peers = new PeersManager(server);
             const peersUI = new PeersUI();
+            const languageSelectDialog = new LanguageSelectDialog();
             const receiveFileDialog = new ReceiveFileDialog();
             const receiveRequestDialog = new ReceiveRequestDialog();
             const sendTextDialog = new SendTextDialog();