From ba46befde4d3e3657254690cfa6d7a3cc307614a Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Fri, 7 Jul 2023 14:58:15 +0200
Subject: [PATCH] include translations for about buttons and implement
 translation fallback if used translation is not complete

---
 public/index.html                             | 14 ++++-----
 public/lang/en.json                           |  8 +++--
 public/scripts/localization.js                | 30 +++++++++++++------
 public_included_ws_fallback/index.html        | 14 ++++-----
 public_included_ws_fallback/lang/en.json      |  8 +++--
 .../scripts/localization.js                   | 30 +++++++++++++------
 6 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/public/index.html b/public/index.html
index 15b82da..21f6005 100644
--- a/public/index.html
+++ b/public/index.html
@@ -83,7 +83,7 @@
                 <use xlink:href="#edit-pair-devices-icon" />
             </svg>
         </div>
-        <div id="cancel-paste-mode" class="button" data-i18n-key="header.done" data-i18n-attrs="text" hidden>Done</div>
+        <div id="cancel-paste-mode" class="button" data-i18n-key="header.cancel-paste-mode" data-i18n-attrs="text" hidden>Done</div>
     </header>
     <!-- Center -->
     <div id="center">
@@ -161,7 +161,7 @@
             <x-background class="full center text-center">
                 <x-paper shadow="2">
                     <h2 class="center" data-i18n-key="dialogs.edit-paired-devices-title" data-i18n-attrs="text">Edit Paired Devices</h2>
-                    <div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-empty" data-i18n-attrs="data-empty" data-empty="No paired devices."></div>
+                    <div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-wrapper" data-i18n-attrs="data-empty" data-empty="No paired devices."></div>
                     <div class="font-subheading center">
                         <p>
                             <span  data-i18n-key="dialogs.auto-accept-instructions-1" data-i18n-attrs="text">
@@ -287,7 +287,7 @@
     <!-- About Page -->
     <x-about id="about" class="full center column">
         <header class="row-reverse fade-in">
-            <a href="#" class="close icon-button" data-i18n-key="about.close-about" data-i18n-attrs="text" aria-label="Close About PairDrop">
+            <a href="#" class="close icon-button" data-i18n-key="about.close-about" data-i18n-attrs="aria-label" aria-label="Close About PairDrop">
                 <svg class="icon">
                     <use xlink:href="#close-icon" />
                 </svg>
@@ -303,22 +303,22 @@
             </div>
             <div class="font-subheading" data-i18n-key="about.claim" data-i18n-attrs="text">The easiest way to transfer files across devices</div>
             <div class="row">
-                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="PairDrop on Github" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="PairDrop on Github" rel="noreferrer" data-i18n-key="about.github" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#github" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://www.buymeacoffee.com/pairdrop" title="Buy me a coffee!" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://www.buymeacoffee.com/pairdrop" title="Buy me a coffee!" rel="noreferrer" data-i18n-key="about.buy-me-a-coffee" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#monetarization" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&" title="Tweet about PairDrop" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&" title="Tweet about PairDrop" rel="noreferrer" data-i18n-key="about.tweet" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#twitter" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop/blob/master/docs/faq.md" title="Frequently asked questions" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop/blob/master/docs/faq.md" title="Frequently asked questions" rel="noreferrer" data-i18n-key="about.faq" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#help-outline" />
                     </svg>
diff --git a/public/lang/en.json b/public/lang/en.json
index 7ae2e56..8ad7b7c 100644
--- a/public/lang/en.json
+++ b/public/lang/en.json
@@ -78,8 +78,12 @@
     "download-again": "Download again"
   },
   "about": {
-    "close-about-aria-label": "Close About PairDrop",
-    "claim": "The easiest way to transfer files across devices"
+    "close-about_aria-label": "Close About PairDrop",
+    "claim": "The easiest way to transfer files across devices",
+    "github_title": "PairDrop on Github",
+    "buy-me-a-coffee_title": "Buy me a coffee!",
+    "tweet_title": "Tweet about PairDrop",
+    "faq_title": "Frequently asked questions"
   },
   "notifications": {
     "display-name-changed-permanently": "Display name is changed permanently.",
diff --git a/public/scripts/localization.js b/public/scripts/localization.js
index d09d5c0..c7d9716 100644
--- a/public/scripts/localization.js
+++ b/public/scripts/localization.js
@@ -2,8 +2,8 @@ class Localization {
     constructor() {
         Localization.defaultLocale = "en";
         Localization.supportedLocales = ["en"];
-
         Localization.translations = {};
+        Localization.defaultTranslations = {};
 
         const initialLocale = Localization.supportedOrDefault(Localization.browserLocales());
 
@@ -29,13 +29,13 @@ class Localization {
 
     static async setLocale(newLocale) {
         if (newLocale === Localization.locale) return false;
+        const firstTranslation = !Localization.locale
 
+        Localization.defaultTranslations = await Localization.fetchTranslationsFor(Localization.defaultLocale);
         const newTranslations = await Localization.fetchTranslationsFor(newLocale);
 
         if(!newTranslations) return false;
 
-        const firstTranslation = !Localization.locale
-
         Localization.locale = newLocale;
         Localization.translations = newTranslations;
 
@@ -65,18 +65,20 @@ class Localization {
         for (let i in attrs) {
             let attr = attrs[i];
             if (attr === "text") {
-                element.innerText = await Localization.getTranslation(key);
+                element.innerText = Localization.getTranslation(key);
             } else {
-                element.attr = await Localization.getTranslation(key, attr);
+                element.attr = Localization.getTranslation(key, attr);
             }
         }
 
     }
 
-    static getTranslation(key, attr, data) {
+    static getTranslation(key, attr, data, useDefault=false) {
         const keys = key.split(".");
 
-        let translationCandidates = Localization.translations;
+        let translationCandidates = useDefault
+            ? Localization.defaultTranslations
+            : Localization.translations;
 
         for (let i=0; i<keys.length-1; i++) {
             translationCandidates = translationCandidates[keys[i]]
@@ -87,8 +89,18 @@ class Localization {
 
         let translation = translationCandidates[lastKey];
 
-        for (key in data) {
-            translation = translation.replace(`{{${key}}}`, data[key]);
+        for (let j in data) {
+            translation = translation.replace(`{{${j}}}`, data[j]);
+        }
+
+        if (!translation) {
+            if (!useDefault) {
+                translation = this.getTranslation(key, attr, data, true);
+                console.warn(`Missing translation entry for your language ${Localization.locale.toUpperCase()}. Using ${Localization.defaultLocale.toUpperCase()} instead.`, key, attr);
+                console.warn("Help translating PairDrop: https://hosted.weblate.org/projects/pairdrop/pairdrop-spa/");
+            } else {
+                console.warn("Missing translation in default language:", key, attr);
+            }
         }
 
         return Localization.escapeHTML(translation);
diff --git a/public_included_ws_fallback/index.html b/public_included_ws_fallback/index.html
index e42f324..f0a71a5 100644
--- a/public_included_ws_fallback/index.html
+++ b/public_included_ws_fallback/index.html
@@ -83,7 +83,7 @@
                 <use xlink:href="#edit-pair-devices-icon" />
             </svg>
         </div>
-        <div id="cancel-paste-mode" class="button" data-i18n-key="header.done" data-i18n-attrs="text" hidden>Done</div>
+        <div id="cancel-paste-mode" class="button" data-i18n-key="header.cancel-paste-mode" data-i18n-attrs="text" hidden>Done</div>
     </header>
     <!-- Center -->
     <div id="center">
@@ -166,7 +166,7 @@
             <x-background class="full center text-center">
                 <x-paper shadow="2">
                     <h2 class="center" data-i18n-key="dialogs.edit-paired-devices-title" data-i18n-attrs="text">Edit Paired Devices</h2>
-                    <div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-empty" data-i18n-attrs="data-empty" data-empty="No paired devices."></div>
+                    <div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-wrapper" data-i18n-attrs="data-empty" data-empty="No paired devices."></div>
                     <div class="font-subheading center">
                         <p>
                             <span  data-i18n-key="dialogs.auto-accept-instructions-1" data-i18n-attrs="text">
@@ -292,7 +292,7 @@
     <!-- About Page -->
     <x-about id="about" class="full center column">
         <header class="row-reverse fade-in">
-            <a href="#" class="close icon-button" data-i18n-key="about.close-about" data-i18n-attrs="text" aria-label="Close About PairDrop">
+            <a href="#" class="close icon-button" data-i18n-key="about.close-about" data-i18n-attrs="aria-label" aria-label="Close About PairDrop">
                 <svg class="icon">
                     <use xlink:href="#close-icon" />
                 </svg>
@@ -308,22 +308,22 @@
             </div>
             <div class="font-subheading" data-i18n-key="about.claim" data-i18n-attrs="text">The easiest way to transfer files across devices</div>
             <div class="row">
-                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="PairDrop on Github" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop" title="PairDrop on Github" rel="noreferrer" data-i18n-key="about.github" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#github" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://www.buymeacoffee.com/pairdrop" title="Buy me a coffee!" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://www.buymeacoffee.com/pairdrop" title="Buy me a coffee!" rel="noreferrer" data-i18n-key="about.buy-me-a-coffee" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#monetarization" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&" title="Tweet about PairDrop" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&" title="Tweet about PairDrop" rel="noreferrer" data-i18n-key="about.tweet" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#twitter" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop/blob/master/docs/faq.md" title="Frequently asked questions" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://github.com/schlagmichdoch/pairdrop/blob/master/docs/faq.md" title="Frequently asked questions" rel="noreferrer" data-i18n-key="about.faq" data-i18n-attrs="title">
                     <svg class="icon">
                         <use xlink:href="#help-outline" />
                     </svg>
diff --git a/public_included_ws_fallback/lang/en.json b/public_included_ws_fallback/lang/en.json
index 7ae2e56..8ad7b7c 100644
--- a/public_included_ws_fallback/lang/en.json
+++ b/public_included_ws_fallback/lang/en.json
@@ -78,8 +78,12 @@
     "download-again": "Download again"
   },
   "about": {
-    "close-about-aria-label": "Close About PairDrop",
-    "claim": "The easiest way to transfer files across devices"
+    "close-about_aria-label": "Close About PairDrop",
+    "claim": "The easiest way to transfer files across devices",
+    "github_title": "PairDrop on Github",
+    "buy-me-a-coffee_title": "Buy me a coffee!",
+    "tweet_title": "Tweet about PairDrop",
+    "faq_title": "Frequently asked questions"
   },
   "notifications": {
     "display-name-changed-permanently": "Display name is changed permanently.",
diff --git a/public_included_ws_fallback/scripts/localization.js b/public_included_ws_fallback/scripts/localization.js
index d09d5c0..c7d9716 100644
--- a/public_included_ws_fallback/scripts/localization.js
+++ b/public_included_ws_fallback/scripts/localization.js
@@ -2,8 +2,8 @@ class Localization {
     constructor() {
         Localization.defaultLocale = "en";
         Localization.supportedLocales = ["en"];
-
         Localization.translations = {};
+        Localization.defaultTranslations = {};
 
         const initialLocale = Localization.supportedOrDefault(Localization.browserLocales());
 
@@ -29,13 +29,13 @@ class Localization {
 
     static async setLocale(newLocale) {
         if (newLocale === Localization.locale) return false;
+        const firstTranslation = !Localization.locale
 
+        Localization.defaultTranslations = await Localization.fetchTranslationsFor(Localization.defaultLocale);
         const newTranslations = await Localization.fetchTranslationsFor(newLocale);
 
         if(!newTranslations) return false;
 
-        const firstTranslation = !Localization.locale
-
         Localization.locale = newLocale;
         Localization.translations = newTranslations;
 
@@ -65,18 +65,20 @@ class Localization {
         for (let i in attrs) {
             let attr = attrs[i];
             if (attr === "text") {
-                element.innerText = await Localization.getTranslation(key);
+                element.innerText = Localization.getTranslation(key);
             } else {
-                element.attr = await Localization.getTranslation(key, attr);
+                element.attr = Localization.getTranslation(key, attr);
             }
         }
 
     }
 
-    static getTranslation(key, attr, data) {
+    static getTranslation(key, attr, data, useDefault=false) {
         const keys = key.split(".");
 
-        let translationCandidates = Localization.translations;
+        let translationCandidates = useDefault
+            ? Localization.defaultTranslations
+            : Localization.translations;
 
         for (let i=0; i<keys.length-1; i++) {
             translationCandidates = translationCandidates[keys[i]]
@@ -87,8 +89,18 @@ class Localization {
 
         let translation = translationCandidates[lastKey];
 
-        for (key in data) {
-            translation = translation.replace(`{{${key}}}`, data[key]);
+        for (let j in data) {
+            translation = translation.replace(`{{${j}}}`, data[j]);
+        }
+
+        if (!translation) {
+            if (!useDefault) {
+                translation = this.getTranslation(key, attr, data, true);
+                console.warn(`Missing translation entry for your language ${Localization.locale.toUpperCase()}. Using ${Localization.defaultLocale.toUpperCase()} instead.`, key, attr);
+                console.warn("Help translating PairDrop: https://hosted.weblate.org/projects/pairdrop/pairdrop-spa/");
+            } else {
+                console.warn("Missing translation in default language:", key, attr);
+            }
         }
 
         return Localization.escapeHTML(translation);