i18n?

.gitignore

@@ -1 +1 @@
-
+i18n

static/i18n/en.yaml

@@ -1,33 +0,0 @@
-title:
-    repeater: Repeater
-    mode: Mode
-    notes: Notes
-    knobs: Knobs
-key:
-    key: Key
-    dit: Dit
-    dah: Dah
-keyer:
-    cootie: Straight Key / Cootie
-    bug: Bug
-    elbug: Electronic Bug
-    singledot: Single Dot
-    ultimatic: Ultimatic
-    iambic: Iambic (plain)
-    iambica: Iambic A
-    iambicb: Iambic B
-    keyahead: Keyahea
-label:
-    wpm: WPM
-    ms: ms
-    wiki: Help
-    rx-delay: receive delay
-    telegraph-sounds: Telegraph sounds
-title:
-    discord: Text/Voice chat on Discord
-    wiki: Vail Wiki
-description:
-    ck: Send <code>CK</code> (check) to the repeater, and play when it comes back.
-    reset: Reset all Vail preferences to default.
-    notes: Enter your own notes here.
-

static/i18n/fr.yaml

@@ -1,32 +0,0 @@
-title:
-    repeater: Répéteur
-    mode: Mode
-    notes: Remarques
-    knobs: Réglages
-key:
-    key: Key
-    dit: Dit
-    dah: Dah
-keyer:
-    cootie: Straight Key / Cootie
-    bug: Bug
-    elbug: Electronic Bug
-    singledot: Single Dot
-    ultimatic: Ultimatic
-    iambic: Iambic (plain)
-    iambica: Iambic A
-    iambicb: Iambic B
-    keyahead: Keyahead
-label:
-    wpm: WPM
-    ms: ms
-    wiki: Help
-    rx-delay: retard de réception
-    telegraph-sounds: Sons télégraphiques
-title:
-    discord: Text/Voice chat on Discord
-    wiki: Vail Wiki
-description:
-    ck: Transmettre <code>CK</code> (check) au répéteur, et le jouer quand il arrive.
-    reset: Réinitialiser les paramètres par défaut.
-    notes: Écrivez vos nôtes ici.

static/index.html

@@ -40,7 +40,7 @@
 						<div class="level">
 							<div class="level-left">
 								<div class="level-item">
-									<h1 class="title">Repeater</h1>
+									<h1 class="title" data-i18n="heading.repeater">Repeater</h1>
 								</div>
 							</div>
 							<div class="level-right">
@@ -123,22 +123,22 @@
 						<div>
 							<div class="field is-horizontal">
 								<div class="field-label">
-									<label class="label">Mode</label>
+									<label class="label" data-i18n="heading.mode">Mode</label>
 								</div>
 								<div class="field-body">
 									<div class="field">
 										<div class="control">
 											<div class="select">
 												<select id="keyer-mode">
-													<option value="cootie">Straight Key / Cootie</option>
+													<option value="cootie" data-i18n="keyer.cootie">Straight Key / Cootie</option>
-													<option value="bug">Bug</option>
+													<option value="bug" data-i18n="keyer.bug">Bug</option>
-													<option value="elbug">ElBug</option>
+													<option value="elbug" data-i18n="keyer.elbug">ElBug</option>
-													<option value="singledot">Single Dot</option>
+													<option value="singledot" data-i18n="keyer.singledot">Single Dot</option>
-													<option value="ultimatic">Ultimatic</option>
+													<option value="ultimatic" data-i18n="keyer.ultimatic">Ultimatic</option>
-													<option value="iambic">Iambic (Plain)</option>
+													<option value="iambic" data-i18n="keyer.iambic">Iambic (Plain)</option>
-													<option value="iambica">Iambic A</option>
+													<option value="iambica" data-i18n="keyer.iambica">Iambic A</option>
-													<option value="iambicb">Iambic B</option>
+													<option value="iambicb" data-i18n="keyer.iambicb">Iambic B</option>
-													<option value="keyahead">Keyahead</option>
+													<option value="keyahead" data-i18n="keyer.keyahead">Keyahead</option>
 												</select>
 											</div>
 										</div>
@@ -149,9 +149,10 @@
 							<div class="field is-horizontal">
 								<div class="field-label">
 									<label class="label">
-										<output for="keyer-rate"></output>&nbsp;WPM
+										<output for="keyer-rate"></output>&nbsp;
+										<span data-i18n="label.wpm">WPM</span>
 										/
-										<span data-fill="keyer-ms"></span>ms
+										<span data-fill="keyer-ms"></span><span data-i18n="label:ms">ms</span>
 									</label>
 								</div>
 								<div class="field-body">
@@ -175,12 +176,12 @@
 
 				<div class="column">
 					<div class="box">
-						<h2 class="title">Notes</h2>
+						<h2 class="title" data-i18n="heading.notes" data-i18n="heading.notes"></h2>
-						<textarea class="textarea" placeholder="Enter your own notes here" id="notes"></textarea>
+						<textarea class="textarea" data-i18n-placeholder="description.notes" id="notes"></textarea>
 						<nav class="breadcrumb has-bullet-separator">
 							<ul>
-								<li><a href="https://discord.gg/GBzj8cBat7" target="_blank" title="Text/voice chat on Discord"><i class="mdi mdi-discord"></i></a></li>
+								<li><a href="https://discord.gg/GBzj8cBat7" target="_blank" data-i18n-title="title.discord"><i class="mdi mdi-discord"></i></a></li>
-								<li><a href="https://github.com/nealey/vail/wiki" target="_blank" title="Vail Wiki">Help</a></li>
+								<li><a href="https://github.com/nealey/vail/wiki" target="_blank" data-i18n-title="title.wiki">Help</a></li>
 							</ul>
 						</nav>
 					</div>
@@ -188,24 +189,24 @@
 
 				<div class="column">
 					<div class="box">
-						<h2 class="title">Knobs</h2>
+						<h2 class="title" data-i18n="heading.knobs">Knobs</h2>
 						<div class="block">
 							<div class="control">
 								<button id="ck" class="button is-primary">
 									CK
 								</button>
 							</div>
-							<div class="">
+							<div class="" data-i18n="description.ck">
 								Send <code>CK</code> (check) to the repeater, and play when it comes back.
 							</div>
 						</div>
 						<div class="block">
 							<div class="control">
-								<button id="reset" class="button">
+								<button id="reset" class="button" data-i18n="label.reset">
 									Reset
 								</button>
 							</div>
-							<div>
+							<div data-i18n="description.reset">
 								Reset all Vail preferences to default.
 							</div>
 						</div>
@@ -215,7 +216,7 @@
 							<div class="field-label">
 								<label class="label">
 									<output for="rx-delay"></output>s
-									rx delay
+									<span data-i18n="label.rx-delay">rx delay</span>
 								</label>
 							</div>
 							<div class="field-body">
@@ -250,7 +251,7 @@
 						<p>
 							<label class="checkbox">
 								<input type="checkbox" id="telegraph-buzzer">
-								Telegraph sounds
+								<span data-i18n="label.telegraph-sounds">Telegraph sounds</span>
 							</label>
 						</p>
 

static/scripts/i18n.mjs

@@ -0,0 +1,47 @@
+import {Xlat} from "./xlat.mjs"
+
+class I18n {
+    constructor() {
+        for (let lang of navigator.languages) {
+            this.table = Xlat[lang]
+            if (this.table) {
+                break
+            }
+        }
+    }
+
+    Fill() {
+        if (!this.table) {
+            return
+        }
+
+        for (let e of document.querySelectorAll("[data-i18n]")) {
+            e.innerHTML =  this.lookup(e.dataset.i18n, e.innerHTML)
+        }
+
+        for (let e of document.querySelectorAll("[data-i18n-placeholder]")) {
+            e.placeholder = this.lookup(e.dataset.i18nPlaceholder, e.placeholder)
+        }
+
+        for (let e of document.querySelectorAll("[data-i18n-title")) {
+            e.title = this.lookup(e.dataset.i18nTitle, e.title)
+        }
+    }
+
+    lookup(key, dfl=null) {
+        let obj = this.table
+        for (let k of key.split(".")) {
+            obj = obj[k]
+        }
+        return obj || dfl
+    }
+}
+
+async function Setup() {
+    let i = new I18n()
+    i.Fill()
+}
+
+export {
+    Setup,
+}

static/scripts/vail.mjs

@@ -3,6 +3,7 @@ import * as Outputs from "./outputs.mjs"
 import * as Inputs from "./inputs.mjs"
 import * as Repeaters from "./repeaters.mjs"
 import * as Chart from "./chart.mjs"
+import * as I18n from "./i18n.mjs"
 
 const DefaultRepeater = "General"
 const Millisecond = 1
@@ -453,6 +454,7 @@ function init() {
 	if (navigator.serviceWorker) {
 		navigator.serviceWorker.register("sw.js")
 	}
+	I18n.Setup()
 	try {
 		window.app = new VailClient()
 	} catch (err) {

static/scripts/xlat.mjs

@@ -0,0 +1,122 @@
+export const Xlat = {
+  "fr": {
+    "heading": {
+      "repeater": "Répéteur",
+      "mode": "Mode",
+      "notes": "Remarques",
+      "knobs": "Réglages"
+    },
+    "key": {
+      "key": "Key",
+      "dit": "Dit",
+      "dah": "Dah"
+    },
+    "keyer": {
+      "cootie": "Straight Key / Cootie",
+      "bug": "Bug",
+      "elbug": "Electronic Bug",
+      "singledot": "Single Dot",
+      "ultimatic": "Ultimatic",
+      "iambic": "Iambic (plain)",
+      "iambica": "Iambic A",
+      "iambicb": "Iambic B",
+      "keyahead": "Keyahead"
+    },
+    "label": {
+      "wpm": "WPM",
+      "ms": "ms",
+      "wiki": "Aide",
+      "rx-delay": "retard de réception",
+      "telegraph-sounds": "Sons télégraphiques"
+    },
+    "title": {
+      "discord": "Chat textuel et du voix, sur Discord",
+      "wiki": "Vail Wiki"
+    },
+    "description": {
+      "ck": "Transmettre <code>CK</code> (check) au répéteur, et sonner le réponse.",
+      "reset": "Réinitialiser les paramètres par défaut.",
+      "notes": "Écrivez vos nôtes ici."
+    }
+  },
+  "en": {
+    "heading": {
+      "repeater": "Repeater eater",
+      "mode": "Mode",
+      "notes": "Notes",
+      "knobs": "Knobs"
+    },
+    "key": {
+      "key": "Key",
+      "dit": "Dit",
+      "dah": "Dah"
+    },
+    "keyer": {
+      "cootie": "Straight Key / Cootie",
+      "bug": "Bug",
+      "elbug": "Electronic Bug",
+      "singledot": "Single Dot",
+      "ultimatic": "Ultimatic",
+      "iambic": "Iambic (plain)",
+      "iambica": "Iambic A",
+      "iambicb": "Iambic B",
+      "keyahead": "Keyahea"
+    },
+    "label": {
+      "wpm": "WPM",
+      "ms": "ms",
+      "wiki": "Help",
+      "rx-delay": "receive delay",
+      "telegraph-sounds": "Telegraph sounds"
+    },
+    "title": {
+      "discord": "Text/Voice chat on Discord",
+      "wiki": "Vail Wiki"
+    },
+    "description": {
+      "ck": "Send <code>CK</code> (check) to the repeater, and play when it comes back.",
+      "reset": "Reset all Vail preferences to default.",
+      "notes": "Enter your own notes here."
+    }
+  },
+  "se": {
+    "heading": {
+      "repeater": "Repeater",
+      "mode": "Läge",
+      "notes": "Anteckningar",
+      "knobs": "Rattar"
+    },
+    "key": {
+      "key": "Nyckel",
+      "dit": "Dit",
+      "dah": "Dah"
+    },
+    "keyer": {
+      "cootie": "Handpump / Cootie",
+      "bug": "Bug",
+      "elbug": "Elektronisk Bug",
+      "singledot": "Enkelpunktig",
+      "ultimatic": "Ultimatisk",
+      "iambic": "Iambic (normal)",
+      "iambica": "Iambic-läge A",
+      "iambicb": "Iambic-läge B",
+      "keyahead": "Förtelegrafera"
+    },
+    "label": {
+      "wpm": "Ord per minut",
+      "ms": "Millisekunder",
+      "wiki": "Hjälp",
+      "rx-delay": "Mottagningsfördröjning",
+      "telegraph-sounds": "Telegrafljud"
+    },
+    "title": {
+      "discord": "Text- eller röstkommunicera på Discord",
+      "wiki": "Vail Wiki"
+    },
+    "description": {
+      "ck": "Sänd <code>CK</code> (kontroll) till repeater:en, och få uppspelat vid återkomst.",
+      "reset": "Återställ till standardinställningarna.",
+      "notes": "Angiv Dina egna anteckningar här."
+    }
+  }
+}