Load custom translations

Part of #14

_locales/en/messages.json

@@ -1,12 +1,4 @@
 {
-  "language": {
-    "description": "lanuage name",
-    "message": "English (US)"
-  },
-  "language_code": {
-    "description": "language code",
-    "message": "en"
-  },
   "CRASH": {
     "description": "",
     "message": "Interal Browser Error"
@@ -343,6 +335,14 @@
     "description": "Label",
     "message": "Invert selection"
   },
+  "language": {
+    "description": "lanuage name",
+    "message": "English (US)"
+  },
+  "language_code": {
+    "description": "language code",
+    "message": "en"
+  },
   "limited-to": {
     "description": "",
     "message": "Limited to"
@@ -537,6 +537,10 @@
     "description": "",
     "message": "User Interface"
   },
+  "prefs.conflicts": {
+    "description": "",
+    "message": "When a file exists"
+  },
   "prefs.short": {
     "description": "Preferences",
     "message": "Preferences"

lib/i18n.ts

@@ -6,6 +6,9 @@ import {memoize} from "./memoize";
 declare let browser: any;
 declare let chrome: any;
 
+const CACHE_KEY = "_cached_locales";
+const CUSTOM_KEY = "_custom_locale";
+
 interface JSONEntry {
   message: string;
   placeholders: any;
@@ -65,7 +68,7 @@ class Localization {
       }
     };
     mapLanguage(baseLanguage);
-    overlayLanguages.forEach(() => {});
+    overlayLanguages.forEach(mapLanguage);
   }
 
   localize(id: string, ...args: any[]) {
@@ -104,7 +107,6 @@ async function fetchLanguage(code: string) {
   }
 }
 
-const CACHE_KEY = "_cached_locales";
 
 function loadCached() {
   if (document.location.pathname.includes("/windows/")) {
@@ -144,6 +146,18 @@ async function load(): Promise<Localization> {
         throw new Error("Could not lood ANY of these locales");
       }
 
+      const custom = localStorage.getItem(CUSTOM_KEY);
+      console.log("custom", custom);
+      if (custom) {
+        try {
+          valid.push(JSON.parse(custom));
+        }
+        catch (ex) {
+          console.error(ex);
+          // ignored
+        }
+      }
+
       const base = valid.shift();
       const rv = new Localization(base, ...valid);
       return rv;
@@ -238,3 +252,12 @@ export async function localize<T extends HTMLElement | DocumentFragment>(
   await locale;
   return localize_(elem);
 }
+
+export function saveCustomLocale(data?: string) {
+  if (!data) {
+    localStorage.removeItem(CUSTOM_KEY);
+    return;
+  }
+  new Localization(JSON.parse(data));
+  localStorage.setItem(CUSTOM_KEY, data);
+}

windows/prefs.html

@@ -65,11 +65,19 @@
       <label><input type="checkbox" id="pref-remove-missing-on-init"> <span data-i18n="pref-remove-missing-on-init"></span></label>
     </fieldset>
     <fieldset id="pref-conflict-action">
-      <legend>When a file exists</legend>
+      <legend data-i18="prefs.conflict">When a file exists</legend>
       <label><input type="radio" name="pref-conflict-action" value="overwrite"> <span>Overwrite</span></label>
       <label><input type="radio" name="pref-conflict-action" value="uniquify"> <span>Rename</span></label>
       <!--<label><input type="radio" name="pref-conflict-action" value="prompt"> <span>Prompt</span></label>-->
     </fieldset>
+    <fieldset>
+      <legend>Translations</legend>
+      <div>
+        <button id="loadCustomLocale">Load custom trranslation</button>
+        <button id="clearCustomLocale">Clear custom trranslation</button>
+      </div>
+      <input type="file" style="display: none;" id="customLocale" accept=".json">
+    </fieldset>
   </article>
 
   <article id="tab-filters" class="tab">

windows/prefs.ts

@@ -1,7 +1,7 @@
 "use strict";
 // License: MIT
 
-import { _, localize } from "../lib/i18n";
+import { _, localize, saveCustomLocale } from "../lib/i18n";
 import { Prefs, PrefWatcher } from "../lib/prefs";
 import { hostToDomain } from "../lib/util";
 import { filters } from "../lib/filters";
@@ -13,6 +13,7 @@ import { iconForPath, visible } from "../lib/windowutils";
 import { VirtualTable } from "../uikit/lib/table";
 import { Icons } from "./icons";
 import { $ } from "./winutil";
+import { runtime } from "../lib/browser";
 
 const ICON_BASE_SIZE = 16;
 
@@ -593,4 +594,40 @@ addEventListener("DOMContentLoaded", () => {
   new IntPref("pref-concurrent-downloads", "concurrent");
 
   visible("#limits").then(() => new LimitsUI());
+
+  const customLocale = $<HTMLInputElement>("#customLocale");
+  $<HTMLInputElement>("#loadCustomLocale").addEventListener("click", () => {
+    customLocale.click();
+  });
+  $<HTMLInputElement>("#clearCustomLocale").addEventListener("click", () => {
+    saveCustomLocale(undefined);
+    runtime.reload();
+  });
+  customLocale.addEventListener("change", async () => {
+    if (!customLocale.files || !customLocale.files.length) {
+      return;
+    }
+    const [file] = customLocale.files;
+    if (!file || file.size > (5 << 20)) {
+      return;
+    }
+    try {
+      const text = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          resolve(reader.result as string);
+        };
+        reader.onerror = reject;
+        reader.readAsText(file);
+      });
+      saveCustomLocale(text);
+      if (confirm("Imported your file.\nWant to realod the extension now?")) {
+        runtime.reload();
+      }
+    }
+    catch (ex) {
+      console.error(ex);
+      alert(`Could not load your translation file:\n${ex.toString()}`);
+    }
+  });
 });