Load translations over XHR

This commit causes translations to be loaded over XHR instead of
the import system.

app/locale/de.json

@@ -1,11 +1,4 @@
-/*
- * Translations for de
- *
- * This file was autotomatically generated from de.po
- * DO NOT EDIT!
- */
-
-Language = {
+{
     "Connecting...": "Verbunden...",
     "Connected (encrypted) to ": "Verbunden mit (verschlüsselt) ",
     "Connected (unencrypted) to ": "Verbunden mit (unverschlüsselt) ",
@@ -14,5 +7,5 @@ Language = {
     "Must set host and port": "Richten Sie Host und Port ein",
     "Password is required": "Passwort ist erforderlich",
     "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "'Clipping-Modus' aktiviert, Scrollbalken in 'IE-Vollbildmodus' werden nicht unterstützt",
-    "Disconnect timeout": "Timeout beim trennen",
-};
+    "Disconnect timeout": "Timeout beim trennen"
+}

app/locale/el.json

@@ -1,11 +1,4 @@
-/*
- * Translations for el
- *
- * This file was autotomatically generated from el.po
- * DO NOT EDIT!
- */
-
-Language = {
+{
     "Connecting...": "Συνδέεται...",
     "Connected (encrypted) to ": "Συνδέθηκε (κρυπτογραφημένα) με το ",
     "Connected (unencrypted) to ": "Συνδέθηκε (μη κρυπτογραφημένα) με το ",
@@ -15,7 +8,7 @@ Language = {
     "Password is required": "Απαιτείται ο κωδικός πρόσβασης",
     "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "Εφαρμογή λειτουργίας αποκοπής αφού δεν υποστηρίζονται οι λωρίδες κύλισης σε πλήρη οθόνη στον IE",
     "Disconnect timeout": "Παρέλευση χρονικού ορίου αποσύνδεσης",
-    "noVNC encountered an error:": "το noVNC αντιμετώπισε ένα σφάλμα",
+    "noVNC encountered an error:": "το noVNC αντιμετώπισε ένα σφάλμα:",
     "Hide/Show the control bar": "Απόκρυψη/Εμφάνιση γραμμής ελέγχου",
     "Move/Drag Viewport": "Μετακίνηση/Σύρσιμο Θεατού πεδίου",
     "viewport drag": "σύρσιμο θεατού πεδίου",
@@ -65,10 +58,13 @@ Language = {
     "default": "προεπιλεγμένο",
     "Logging:": "Καταγραφή:",
     "Apply": "Εφαρμογή",
+    "Connect": "Σύνδεση",
+    "Disconnect": "Αποσύνδεση",
+    "Connection": "Σύνδεση",
     "Host:": "Όνομα διακομιστή:",
     "Port:": "Πόρτα διακομιστή:",
     "Password:": "Κωδικός Πρόσβασης:",
     "Token:": "Διακριτικό:",
     "Send Password": "Αποστολή Κωδικού Πρόσβασης",
-    "Canvas not supported.": "Δεν υποστηρίζεται το στοιχείο Canvas",
-};
+    "Canvas not supported.": "Δεν υποστηρίζεται το στοιχείο Canvas"
+}

app/locale/nl.json

@@ -1,11 +1,4 @@
-/*
- * Translations for nl
- *
- * This file was autotomatically generated from nl.po
- * DO NOT EDIT!
- */
-
-Language = {
+{
     "Connecting...": "Verbinden...",
     "Connected (encrypted) to ": "Verbonden (versleuteld) met ",
     "Connected (unencrypted) to ": "Verbonden (onversleuteld) met ",
@@ -14,5 +7,5 @@ Language = {
     "Must set host and port": "Host en poort moeten worden ingesteld",
     "Password is required": "Wachtwoord is vereist",
     "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "''Clipping mode' ingeschakeld, omdat schuifbalken in volledige-scherm-modus in IE niet worden ondersteund",
-    "Disconnect timeout": "Timeout tijdens verbreken van verbinding",
-};
+    "Disconnect timeout": "Timeout tijdens verbreken van verbinding"
+}

app/locale/sv.json

@@ -1,11 +1,4 @@
-/*
- * Translations for sv
- *
- * This file was autotomatically generated from sv.po
- * DO NOT EDIT!
- */
-
-Language = {
+{
     "Connecting...": "Ansluter...",
     "Connected (encrypted) to ": "Ansluten (krypterat) till ",
     "Connected (unencrypted) to ": "Ansluten (okrypterat) till ",
@@ -73,5 +66,5 @@ Language = {
     "Password:": "Lösenord:",
     "Token:": "Token:",
     "Send Password": "Skicka Lösenord",
-    "Canvas not supported.": "Canvas stöds ej",
-};
+    "Canvas not supported.": "Canvas stöds ej"
+}

app/ui.js

@@ -63,14 +63,6 @@ var UI;
         return false;
     });
 
-    // Set up translations
-    var LINGUAS = ["de", "el", "nl", "sv"];
-    Util.Localisation.setup(LINGUAS);
-    if (Util.Localisation.language !== "en") {
-        WebUtil.load_scripts(
-            {'app': ["locale/" + Util.Localisation.language + ".js"]});
-    }
-
     var _ = Util.Localisation.get;
 
     UI = {
@@ -1743,7 +1735,21 @@ var UI;
  */
     };
 
-    UI.load();
+    // Set up translations
+    var LINGUAS = ["de", "el", "nl", "sv"];
+    Util.Localisation.setup(LINGUAS);
+    if (Util.Localisation.language !== "en" && Util.Localisation.dictionary === undefined) {
+        WebUtil.fetchJSON('app/locale/' + Util.Localisation.language + '.json', function (translations) {
+            Util.Localisation.dictionary = translations;
+
+            // wait for translations to load before loading the UI
+            UI.load();
+        }, function (err) {
+            throw err; 
+        });
+    } else {
+        UI.load();
+    }
 })();
 
 export default UI;

app/webutil.js

@@ -277,4 +277,38 @@ WebUtil.load_scripts = function (files_by_dir) {
     }
 };
 
+// sadly, we can't use the Fetch API until we decide to drop
+// IE11 support or polyfill promises and fetch in IE11.
+// resolve will receive an object on success, while reject
+// will receive either an event or an error on failure.
+WebUtil.fetchJSON = function (path, resolve, reject) {
+    // NB: IE11 doesn't support JSON as a responseType
+    const req = new XMLHttpRequest();
+    req.open('GET', path);
+
+    req.onload = function () {
+        if (req.status === 200) {
+            try {
+                var resObj = JSON.parse(req.responseText);
+            } catch (err) {
+                reject(err);
+                return;
+            }
+            resolve(resObj);
+        } else {
+            reject(new Error("XHR got non-200 status while trying to load '" + path + "': " + req.status));
+        }
+    };
+
+    req.onerror = function (evt) {
+        reject(new Error("XHR encountered an error while trying to load '" + path + "': " + evt.message));
+    };
+
+    req.ontimeout = function (evt) {
+        reject(new Error("XHR timed out while trying to load '" + path + "'"));
+    };
+
+    req.send();
+};
+
 export default WebUtil;

po/Makefile

@@ -6,14 +6,14 @@ LINGUAS := de el nl sv
 VERSION := $(shell grep '"version"' ../package.json | cut -d '"' -f 4)
 
 POFILES := $(addsuffix .po,$(LINGUAS))
-JSFILES := $(addprefix ../app/locale/,$(addsuffix .js,$(LINGUAS)))
+JSONFILES := $(addprefix ../app/locale/,$(addsuffix .json,$(LINGUAS)))
 
 update-po: $(POFILES)
-update-js: $(JSFILES)
+update-js: $(JSONFILES)
 
 %.po: noVNC.pot
 	msgmerge --update --lang=$* $@ $<
-../app/locale/%.js: %.po
+../app/locale/%.json: %.po
 	./po2js $< $@
 
 update-pot:

po/po2js

@@ -32,25 +32,12 @@ if (opt.argv.length != 2) {
 
 var data = po2json.parseFileSync(opt.argv[0]);
 
-var output =
-"/*\n" +
-" * Translations for " + data[""]["language"] + "\n" +
-" *\n" +
-" * This file was autotomatically generated from " + opt.argv[0] + "\n" +
-" * DO NOT EDIT!\n" +
-" */\n" +
-"\n" +
-"Language = {\n";
+var bodyPart = Object.keys(data).filter((msgid) => msgid !== "").map((msgid) => {
+    if (msgid === "") return;
+    var msgstr = data[msgid][1];
+    return "    " + JSON.stringify(msgid) + ": " + JSON.stringify(msgstr);
+}).join(",\n");
 
-for (msgid in data) {
-  if (msgid === "")
-    continue;
-
-  msgstr = data[msgid][1];
-  output += "    " + JSON.stringify(msgid) + ": " +
-            JSON.stringify(msgstr) + ",\n";
-}
-
-output += "};\n";
+var output = "{\n" + bodyPart + "\n}";
 
 fs.writeFileSync(opt.argv[1], output);