add i18n

densitydesign · Aug 2, 2024 · 41ec2b0 · 41ec2b0
1 parent 16843b2
commit 41ec2b0
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 17 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -131,6 +131,25 @@ a {
   justify-content: center;
 }
 
+#page-live .language-select {
+  position: relative;
+}
+
+#page-live .language-select button {
+  pointer-events: none;
+}
+
+#page-live .language-select select {
+  opacity: 0;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 9999px;
+  font: inherit;
+  font-size: inherit;
+}
+
 #buttons-bottom > button label {
   display: block;
   opacity: 0;

diff --git a/index.html b/index.html
@@ -10,38 +10,40 @@
 
     <div class="page" id="page-live">
       <nav>
-        <button id="button-credits">credits</button>
-        <button id="button-recalibrate">calibration</button>
+        <button data-i18n="credits" id="button-credits"></button>
+        <div class="language-select">
+          <select id="select-language"></select>
+          <button data-i18n="language-code"></button>
+        </div>
+        <button data-i18n="calibration" id="button-recalibrate"></button>
       </nav>
 
       <nav id="buttons-bottom">
         <button class="cyan" id="button-c">
-          <label>digital spaces</label>
+          <label data-i18n="label-c"></label>
         </button>
         <button class="magenta" id="button-m">
-          <label>motivations</label>
+          <label data-i18n="label-m"></label>
         </button>
         <button class="yellow" id="button-y">
-          <label>relationships</label>
+          <label data-i18n="label-y"></label>
         </button>
       </nav>
     </div>
 
     <div class="page page-flip visible" id="page-start">
-      <h1><img src="assets/title.png" alt="Stories of online harassment" /></h1>
+      <h1><img src="assets/title.png" data-i18n-alt="title" alt="Stories of online harassment" /></h1>
       <div>
-        <p>To explore the poster, give access to your phone camera and calibrate it.</p>
-        <button id="button-start" disabled>start</button>
-        <p>Press start when you are ready.</p>
+        <p data-i18n="start-intro">To explore the poster, give access to your phone camera and calibrate it.</p>
+        <button data-i18n="start-button" id="button-start" disabled>start</button>
+        <p data-i18n="start-cta">Press start when you are ready.</p>
       </div>
     </div>
 
     <div class="page page-flip" id="page-calibration">
       <div class="inner">
-        <p>
-          Align the following scheme to the coloured version on the poster and press Calibrate.
-        </p>
-        <button id="button-calibrate">Calibrate</button>
+        <p data-i18n="calibration-intro"></p>
+        <button data-i18n="calibration-button" id="button-calibrate"></button>
       </div>
       <svg id="svg-template" viewBox="-75 -75 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg">
         <style>
@@ -114,22 +116,22 @@ <h1><img src="assets/title.png" alt="Stories of online harassment" /></h1>
 
     <div class="page" id="page-credits">
       <div class="inner">
-        <h1><img src="assets/title.png" alt="Stories of online harassment" /></h1>
+        <h1><img src="assets/title.png" data-i18n-alt="title" /></h1>
 
         <div class="block">
-          <p>Developed by</p>
+          <p data-i18n="credits-developed"></p>
           <a href="https://s-ol.nu"><img src="assets/s-ol.png" alt="Sol Bekic" /></a>
           <a href="https://s-ol.nu">s-ol.nu</a>
         </div>
 
         <div class="block">
-          <p>Designed at</p>
+          <p data-i18n="credits-designed">t</p>
           <a href="https://densitydesign.org"><img src="assets/density.svg" alt="densitydesign logo" /></a>
           <a href="https://densitydesign.org">densitydesign.org</a>
         </div>
       </div>
 
-      <button id="button-back">back</button>
+      <button data-i18n="credits-back" id="button-back"></button>
     </div>
 
     <script src="bundle.js"></script>

diff --git a/src/i18n.js b/src/i18n.js
@@ -0,0 +1,42 @@
+const messages = require('./messages.json');
+const languages = ['en', 'de'];
+
+const getString = (lang, key) => {
+  if (!(key in messages[lang])) console.error(`untranslated key in lang ${lang}: ${key}`);
+  return messages[lang][key] ?? key;
+}
+
+const update = (lang) => {
+  for (const el of Array.from(document.querySelectorAll('[data-i18n]'))) {
+    el.innerText = getString(lang, el.dataset.i18n);
+  }
+
+  for (const el of Array.from(document.querySelectorAll('[data-i18n-alt]'))) {
+    el.alt = getString(lang, el.dataset['i18nAlt']);
+  }
+};
+
+module.exports = (select) => {
+  for (const value of languages) {
+    select.add(new Option(messages[value]['language-name'], value));
+  }
+
+  select.value = localStorage.density_lens_lang;
+  if (!select.value) {
+    for (const lang of navigator.languages) {
+      const code = lang.toLowerCase().split('-').shift();
+      if (languages.indexOf(code) > -1) {
+        select.value = code;
+        console.log('found', code);
+        break;
+      }
+    }
+  }
+  if (!select.value) select.value = 'de';
+
+  select.onchange = () => {
+    update(select.value);
+    localStorage.density_lens_lang = select.value;
+  }
+  update(select.value);
+};
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,6 @@
+const i18n = require("./i18n.js");
+i18n(document.getElementById('select-language'));
+
 const glctx = require("gl-context");
 const glslify = require("glslify");
 const glshd = require("gl-shader");

diff --git a/src/messages.json b/src/messages.json
@@ -0,0 +1,42 @@
+{
+  "en": {
+    "language-code": "en",
+    "language-name": "English",
+
+    "label-c": "digital spaces",
+    "label-m": "motivations",
+    "label-y": "relationships",
+    "credits": "credits",
+    "calibration": "calibration",
+
+    "title": "Stories of Online Harassment",
+    "start-intro": "To explore the poster, give access to your phone camera and calibrate it.",
+    "start-button": "start",
+    "start-cta": "Press start when you are ready.",
+    "calibration-intro": "Align the following scheme to the coloured version on the poster and press Calibrate.",
+    "calibration-button": "calibrate",
+    "credits-developed": "Developed by",
+    "credits-designed": "Designed by",
+    "credits-back": "back"
+  },
+  "de": {
+    "language-code": "de",
+    "language-name": "Deutsch",
+
+    "label-c": "digitale räume",
+    "label-m": "motivationen",
+    "label-y": "beziehungen",
+    "credits": "impressum",
+    "calibration": "kalibrierung",
+
+    "title": "Stories of Online Harassment",
+    "start-intro": "Gib den Kamerazugriff frei und kalibriere die Farbwerte um das Poster zu erforschen.",
+    "start-button": "start",
+    "start-cta": "Drücke auf start wenn du bereit bist.",
+    "calibration-intro": "Richte das Bild an dem bunten Symbol auf dem Poster aus und bestätige um das Bild zu kalibrieren.",
+    "calibration-button": "kalibrieren",
+    "credits-developed": "Entwickelt von",
+    "credits-designed": "Designed von",
+    "credits-back": "zurück"
+  }
+}