Adding Spanish translations and splitting logic from text

3 years ago · fdfae532ce
4 changed files with 224 additions and 116 deletions
--- a/src/assets/en.json
+++ b/src/assets/en.json
@ -0,0 +1,99 @@
+{
+  "bluetoothClass": "BlueTooth class",
+  "builtBy": "Built by",
+  "clickToCopy": "Click to copy",
+  "majorService": {
+    "group": "Major service",
+    "Information": "Information",
+    "Telephony": "Telephony",
+    "Audio": "Audio",
+    "Transfer": "Transfer",
+    "Capturing": "Capturing",
+    "Rendering": "Rendering",
+    "AccessPoint": "Access point",
+    "Positioning": "Positioning",
+    "LimitedDiscovery": "Limited discovery"
+  },
+  "majorDevice": {
+    "group": "Major device",
+    "Uncategorized": "Uncategorized",
+    "Miscellaneous": "Miscellaneous",
+    "Toy": "Toy",
+    "Wearable": "Wearable",
+    "Imaging": "Imaging",
+    "Peripheral": "Peripheral",
+    "AudioVideo": "Media",
+    "AccessPoint": "Access point",
+    "Phone": "Phone",
+    "Computer": "Computer"
+  },
+  "minorDevice": {
+    "group": "Minor device",
+    "None": "No minor devices",
+    "Toy": {
+      "Game": "Game",
+      "Controller": "Controller",
+      "Doll": "Doll",
+      "Vehicle": "Vehicle",
+      "Robot": "Robot"
+    },
+    "Wearable": {
+      "Watch": "Watch",
+      "Pager": "Pager",
+      "Jacket": "Jacket",
+      "Helmet": "Helmet",
+      "Glasses": "Glasses"
+    },
+    "Imaging": {
+      "Display": "Display",
+      "Camera": "Camera",
+      "Scanner": "Scanner",
+      "Printer": "Printer"
+    },
+    "Peripheral": {
+      "Keyboard": "Keyboard",
+      "Pointer": "Pointer",
+      "Uncategorized": "Uncategorized",
+      "Joystick": "Joystick",
+      "Gamepad": "Gamepad",
+      "RemoteControl": "Remote control",
+      "Sensor": "Sensor",
+      "Digitizer": "Digitizer",
+      "CardReader": "Card reader"
+    },
+    "AudioVideo": {
+      "Uncategorized": "Uncategorized",
+      "Headset": "Headset",
+      "Microphone": "Microphone",
+      "Loudspeaker": "Loudspeaker",
+      "Headphones": "Headphones",
+      "CarAudio": "Car audio",
+      "VideoCamera": "Video camera",
+      "Monitor": "Monitor",
+      "Conferencing": "Conferencing"
+    },
+    "AccessPoint": {
+      "Available": "Available",
+      "Level1": "1-17% use",
+      "Level2": "17-33% use",
+      "Level3": "33-50% use",
+      "Level4": "50-67% use",
+      "Level5": "67-83% use",
+      "Level6": "83-99% use",
+      "Unavailable": "Unavailable"
+    },
+    "Phone": {
+      "Uncategorized": "Uncategorized",
+      "Cell": "Cell",
+      "Cordless": "Cordless"
+    },
+    "Computer": {
+      "Uncategorized": "Uncategorized",
+      "Desktop": "Desktop",
+      "Server": "Server",
+      "Laptop": "Laptop",
+      "PDA": "PDA",
+      "Watch": "Watch"
+    }
+  }
+}
--- a/src/assets/es.json
+++ b/src/assets/es.json
@ -0,0 +1,99 @@
+{
+  "bluetoothClass": "Clase bluetooth",
+  "builtBy": "Construido por",
+  "clickToCopy": "Haga clic para copiar",
+  "majorService": {
+    "group": "Servicio mayor",
+    "Information": "Información",
+    "Telephony": "Telefonía",
+    "Audio": "Audio",
+    "Transfer": "Transferir",
+    "Capturing": "Capturando",
+    "Rendering": "Representación",
+    "AccessPoint": "Punto de acceso",
+    "Positioning": "Posicionamiento",
+    "LimitedDiscovery": "Descubrimiento limitado"
+  },
+  "majorDevice": {
+    "group": "Dispositivo principal",
+    "Uncategorized": "Sin categorizar",
+    "Miscellaneous": "Diverso",
+    "Toy": "Juguete",
+    "Wearable": "Usable",
+    "Imaging": "Imágenes",
+    "Peripheral": "Periférico",
+    "AudioVideo": "Medios de comunicación",
+    "AccessPoint": "Punto de acceso",
+    "Phone": "Teléfono",
+    "Computer": "Computadora"
+  },
+  "minorDevice": {
+    "group": "Dispositivo menor",
+    "None": "No hay dispositivos menores",
+    "Toy": {
+      "Game": "Juego",
+      "Controller": "Controlador",
+      "Doll": "Muñeca",
+      "Vehicle": "Vehículo",
+      "Robot": "Robot"
+    },
+    "Wearable": {
+      "Watch": "Reloj",
+      "Pager": "Buscapersonas",
+      "Jacket": "Chaqueta",
+      "Helmet": "Casco",
+      "Glasses": "Lentes"
+    },
+    "Imaging": {
+      "Display": "Monitor",
+      "Camera": "Cámara",
+      "Scanner": "Escáner",
+      "Printer": "Impresora"
+    },
+    "Peripheral": {
+      "Keyboard": "Teclado",
+      "Pointer": "Puntero",
+      "Uncategorized": "Sin categorizar",
+      "Joystick": "Palanca de mando",
+      "Gamepad": "Gamepad",
+      "RemoteControl": "Control remoto",
+      "Sensor": "Sensor",
+      "Digitizer": "Digitalizador",
+      "CardReader": "Lector de tarjetas"
+    },
+    "AudioVideo": {
+      "Uncategorized": "Sin categorizar",
+      "Headset": "Auriculares",
+      "Microphone": "Micrófono",
+      "Loudspeaker": "Altoparlante",
+      "Headphones": "Auriculares",
+      "CarAudio": "Audio del coche",
+      "VideoCamera": "Camara de video",
+      "Monitor": "Monitor",
+      "Conferencing": "Conferencia"
+    },
+    "AccessPoint": {
+      "Available": "Disponible",
+      "Level1": "1-17% de uso",
+      "Level2": "17-33% de uso",
+      "Level3": "33-50% de uso",
+      "Level4": "50-67% de uso",
+      "Level5": "67-83% de uso",
+      "Level6": "83-99% de uso",
+      "Unavailable": "Indisponible"
+    },
+    "Phone": {
+      "Uncategorized": "Sin categorizar",
+      "Cell": "Célula",
+      "Cordless": "Sin cable"
+    },
+    "Computer": {
+      "Uncategorized": "Sin categorizar",
+      "Desktop": "Escritorio",
+      "Server": "Servidor",
+      "Laptop": "Ordenador portátil",
+      "PDA": "PDA",
+      "Watch": "Reloj"
+    }
+  }
+}
--- a/src/scripts/i18n.js
+++ b/src/scripts/i18n.js
@ -1,114 +1,24 @@
+// Specify the languages this application can use
 const languageWhitelist = ["en", "es"];

-const languageTranslations = {
-  en: {
-    bluetoothClass: "BlueTooth class",
-    builtBy: "Built by",
-    clickToCopy: "Click to copy",
-    majorService: {
-      group: "Major service",
-      Information: "Information",
-      Telephony: "Telephony",
-      Audio: "Audio",
-      Transfer: "Transfer",
-      Capturing: "Capturing",
-      Rendering: "Rendering",
-      AccessPoint: "Access point",
-      Positioning: "Positioning",
-      LimitedDiscovery: "Limited discovery",
-    },
-    majorDevice: {
-      group: "Major device",
-      Uncategorized: "Uncategorized",
-      Miscellaneous: "Miscellaneous",
-      Toy: "Toy",
-      Wearable: "Wearable",
-      Imaging: "Imaging",
-      Peripheral: "Peripheral",
-      AudioVideo: "Media",
-      AccessPoint: "Access point",
-      Phone: "Phone",
-      Computer: "Computer",
-    },
-    minorDevice: {
-      group: "Minor device",
-      None: "No minor devices",
-      Toy : {
-        Game: "Game",
-        Controller: "Controller",
-        Doll: "Doll",
-        Vehicle: "Vehicle",
-        Robot: "Robot",
-      },
-      Wearable: {
-        Watch: "Watch",
-        Pager: "Pager",
-        Jacket: "Jacket",
-        Helmet: "Helmet",
-        Glasses: "Glasses",
-      },
-      Imaging: {
-        Display: "Display",
-        Camera: "Camera",
-        Scanner: "Scanner",
-        Printer: "Printer",
-      },
-      Peripheral: {
-        Keyboard: "Keyboard",
-        Pointer: "Pointer",
-        Uncategorized: "Uncategorized",
-        Joystick: "Joystick",
-        Gamepad: "Gamepad",
-        RemoteControl: "Remote control",
-        Sensor: "Sensor",
-        Digitizer: "Digitizer",
-        CardReader: "Card reader",
-      },
-      AudioVideo: {
-        Uncategorized: "Uncategorized",
-        Headset: "Headset",
-        Microphone: "Microphone",
-        Loudspeaker: "Loudspeaker",
-        Headphones: "Headphones",
-        CarAudio: "Car audio",
-        VideoCamera: "Video camera",
-        Monitor: "Monitor",
-        Conferencing: "Conferencing",
-      },
-      AccessPoint: {
-        Available: "Available",
-        Level1: "1-17% use",
-        Level2: "17-33% use",
-        Level3: "33-50% use",
-        Level4: "50-67% use",
-        Level5: "67-83% use",
-        Level6: "83-99% use",
-        Unavailable: "Unavailable",
-      },
-      Phone: {
-        Uncategorized: "Uncategorized",
-        Cell: "Cell",
-        Cordless: "Cordless",
-      },
-      Computer: {
-        Uncategorized: "Uncategorized",
-        Desktop: "Desktop",
-        Server: "Server",
-        Laptop: "Laptop",
-        PDA: "PDA",
-        Watch: "Watch",
-      },
-    },
-  },
-  es: {
-    builtBy: "Construido por",
-  }
-};
-
+// Determine the current language that should be used, with English as a fallback
 let languageCurrent = [localStorage.getItem("language"), ...navigator.languages]
  .filter((language) => languageWhitelist.includes(language))
  .find((language) => (language == null) ? "en" : language);

+// Fetch our translation files
+const languageTranslations = {};
+languageWhitelist.forEach((language) => {
+  fetch(`/${language}.json`)
+    .then((response) => response.json())
+    .then((translations) => {
+      languageTranslations[language] = translations;
+      if (languageCurrent === language) {
+        languageChange(languageCurrent);
+      }
+    });
+});
+
 /**
 * Language change handler for updating page text
 *
@ -142,18 +52,18 @@ function languageChange(language) {
 */
 function translateKey(path) {

-  if (path == null) {
-    return undefined;
-  }
+  let translation;

-  let translation = languageTranslations[languageCurrent];
-  path.split(".").forEach((key) => {
-    if (translation != null) {
-      translation = translation[key];
-    }
-  });
+  if (path != null) {
+    translation = languageTranslations[languageCurrent]
+    path.split(".").forEach((key) => {
+      if (translation != null) {
+        translation = translation[key];
+      }
+    });
+  }

-  return translation;
+  return translation == null ? "" : translation;
 }

 /**
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -30,5 +30,5 @@ input[type='text'] {
 // Make our checkbox labels all the same width, and a more readable color
 label span {
  color: rgba(0,0,0,0.72);
-  min-width: 150px;
+  min-width: 190px;
 }