Hook up localized messages.json to website

Right now we use the navigator language to determine localization and replace the website contents with translated strings.

Hook up localized messages.json to website
f6517f60 · Cecylia Bocovich · 9140c764 · f6517f60 · f6517f60 · f6517f60
Commit f6517f60 authored 5 years ago by Cecylia Bocovich
--- a/proxy/make.js
+++ b/proxy/make.js
@@ -94,6 +94,8 @@ task('build', 'build the snowflake proxy', function() {
  execSync(`cp -r ${STATIC}/ ${outDir}/`);
  copyTranslations(outDir);
  concatJS(outDir, 'badge', 'embed.js', availableLangs());
+  writeFileSync(`${outDir}/index.js`, availableLangs(), 'utf8');
+  execSync(`cat ${STATIC}/index.js >> ${outDir}/index.js`);
  console.log('Snowflake prepared.');
 });


--- a/proxy/static/index.html
+++ b/proxy/static/index.html
 <!doctype html>
-<html lang="en">
+<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -18,7 +18,7 @@

      <p class="diagram"><img src="https://trac.torproject.org/projects/tor/raw-attachment/wiki/doc/Snowflake/snowflake-schematic.png" alt="Diagram" /></p>

-      <p data-mdgid="__MSG_websiteIntro__">Snowflake is a system to defeat internet censorship. People who are
+      <p data-msgid="__MSG_websiteIntro__">Snowflake is a system to defeat internet censorship. People who are
      censored can use Snowflake to access the internet. Their connection goes
      through Snowflake proxies, which are run by volunteers. For more detailed
      information about how Snowflake works see our
@@ -96,5 +96,6 @@
      </section>

    </section>
+    <script src="index.js"></script>
  </body>
 </html>
--- a/proxy/static/index.js
+++ b/proxy/static/index.js
+class Messages {
+  constructor(json) {
+    this.json = json;
+  }
+  getMessage(m, ...rest) {
+    if (this.json.hasOwnProperty(m)) {
+    let message = this.json[m].message;
+    return message.replace(/\$(\d+)/g, (...args) => {
+      return rest[Number(args[1]) - 1];
+    });
+    }
+  }
+}
+
+
+defaultLang = "en_US";
+
+var getLang = function() {
+  let lang = navigator.language || defaultLang;
+  lang = lang.replace(/-/g, '_');
+  if (availableLangs.has(lang)) {
+    return lang;
+  }
+  lang = lang.split('_')[0];
+  if (availableLangs.has(lang)) {
+    return lang;
+  }
+  return defaultLang;
+}
+
+var fill = function(n, func) {
+  switch(n.nodeType) {
+    case 1:  // Node.ELEMENT_NODE
+      const m = /^__MSG_([^_]*)__$/.exec(n.dataset.msgid);
+      if (m) {
+          val = func(m[1]);
+          if (val != undefined) {
+            n.innerHTML = val
+          }
+      }
+      n.childNodes.forEach(c => fill(c, func));
+      break;
+  }
+}
+
+console.log("Fetching", `./_locales/${getLang()}/messages.json`);
+
+fetch(`./_locales/${getLang()}/messages.json`)
+  .then((res) => {
+    if (!res.ok) { return; }
+    return res.json();
+  })
+  .then((json) => {
+    messages = new Messages(json);
+        console.log("Filling document body");
+    fill(document.body, (m) => {
+        console.log("Filling ", m);
+      return messages.getMessage(m);
+    });
+  });