add l10n

tapuafrad · Jan 28, 2014 · f49d1aa · f49d1aa
1 parent 2c7e706
commit f49d1aa
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 38 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -1,3 +1,6 @@
 [submodule "lib/localForage"]
 	path = lib/localForage
 	url = https://github.com/mozilla/localForage.git
+[submodule "lib/webL10n"]
+	path = lib/webL10n
+	url = https://github.com/fabi1cazenave/webL10n.git
diff --git a/README.md b/README.md
@@ -18,11 +18,7 @@ When cloning the repository, don’t forget to update submodules:
 
 Furthermore, [“the marketplace can not distribute apps that use certified APIs”](https://groups.google.com/forum/#!topic/mozilla.dev.marketplace/vY3Rj3tWXuU). That’s a sad news, because it means that this application will only be available to developers.
 
-To create the package, use 
-
-    rm stumbler.zip && zip -r stumbler.zip index.html js locales manifest.webapp style
-
-Or just `make all`
+To create the package, use `make all`.
 
 ## Usage
 

diff --git a/index.html b/index.html
@@ -6,74 +6,85 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FxStumbler</title>
     <script defer src="js/stumbler.js"></script>
-    <script defer src="lib/localForage/lib/async_storage.js"></script>
+    <script defer src="lib/localForage/dist/localForage.js"></script>
+    <script defer src="lib/webL10n/l10n.js"></script>
     <link rel='stylesheet' href='style/form.css' type='text/css' />
     <link rel='stylesheet' href='style/stumbler.css' type='text/css' />
+    <link rel="prefetch" type="application/l10n" href="locales/locales.ini" />
   </head>
   <body class="">
     <h1>FxStumbler</h1>
     <section>
-      <button type="button" id="mobile">Get infos</button>
-      <button type="button" id="monitor" data-state="stopped">Start monitoring</button>
-      <button type="button" id="search" class="hidden">Get my position</button>
+      <button type="button" id="mobile" data-l10n-id="getInfos">Get infos</button>
+      <button type="button" id="monitor" data-state="stopped" data-l10n-id="monitoringStart">Start monitoring</button>
+      <button type="button" id="search" class="hidden" data-l10n-id="getPosition">Get my position</button>
     </section>
-    <h2 data-target="storage">Storage (<span id="nbItems"></span> items)</h2>
+    <h2 data-target="storage"><span data-l10n-id="storageTitle">Storage</span> (<span id="nbItems"></span> <span data-l10n-id="storageTitleEnd">items</span>)</h2>
     <section id="storage" class="hidden">
-      <button type="button" id="displayStorage">Display</button>
-      <button type="button" id="sendStorage">Send</button>
-      <button type="button" id="clearStorage">Clear</button>
+      <button type="button" id="displayStorage" data-l10n-id="storageDisplay">Display</button>
+      <button type="button" id="sendStorage" data-l10n-id="storageSend">Send</button>
+      <button type="button" id="clearStorage" data-l10n-id="storageClear">Clear</button>
     </section>
-    <h2 data-target="options">Options</h2>
+    <h2 data-target="options" data-l10n-id="options">Options</h2>
     <section id="options" class="hidden">
       <p>
-        Geoloc:
-        <label><input type="radio" name="geoloc" value="GPS" checked/>GPS</label>
-        <label><input type="radio" name="geoloc" value="Ask" />Ask</label>
+        <span data-l10n-id="geolocType">Geoloc:</span>
+        <label><input type="radio" name="geoloc" value="GPS" checked /><span data-l10n-id="geolocGps"/>GPS</span></label>
+        <label><input type="radio" name="geoloc" value="Ask" /><span data-l10n-id="geolocAsk"/>Ask</span></label>
       </p>
       <p>
-        Action:
-        <label><input type="radio" name="action" value="send" checked/>Send</label>
-        <label><input type="radio" name="action" value="store" />Store</label>
-        <label><input type="radio" name="action" value="nothing" />Nothing</label>
+        <span data-l10n-id="action">Action:</span>
+        <label><input type="radio" name="action" value="send" checked /><span data-l10n-id="actionSend"/>Send</span></label>
+        <label><input type="radio" name="action" value="store"  /><span data-l10n-id="actionStore"/>Store</span></label>
+        <label><input type="radio" name="action" value="nothing" /><span data-l10n-id="actionNone"/>Nothing</span></label>
       </p>
       <p>
-        <label for="username">Username: <input type="text" name="username" /></label>
+        <label for="username" data-l10n-id="userName">Username: <input type="text" name="username" /></label>
       </p>
       <fieldset>
-        <legend>Log level</legend>
+        <legend data-l10n-id="logLevel">Log level</legend>
         <fieldset class="inline text">
           <select id="settingsLogLevel">
-            <option value="debug">Debug</option>
-            <option value="info">Info</option>
-            <option value="warning">Warning</option>
-            <option value="error">Error</option>
+            <option value="debug"   data-l10n-id="logLevelDebug">Debug</option>
+            <option value="info"    data-l10n-id="logLevelInfo">Info</option>
+            <option value="warning" data-l10n-id="logLevelWarning">Warning</option>
+            <option value="error"   data-l10n-id="logLevelError">Error</option>
           </select>
         </fieldset>
       </fieldset>
       <fieldset>
-        <legend>Ignore if less accurate than</legend>
+        <legend data-l10n-id="lang">Lang</legend>
+        <fieldset class="inline text">
+          <select id="settingsLang">
+            <option value="en-US" data-l10n-id="langEnglish"></option>
+            <option value="fr"    data-l10n-id="langFrench"></option>
+          </select>
+        </fieldset>
+      </fieldset>
+      <fieldset>
+        <legend data-l10n-id="accuracy">Ignore if less accurate than</legend>
         <p>
           <input id="accuracy" type="range" min="5" max="200" step="5" value="50" />
           <span id="accuracyValue"></span>m
         </p>
       </fieldset>
       <fieldset>
-        <legend>Minimum distance between measures</legend>
+        <legend data-l10n-id="distance">Minimum distance between measures</legend>
         <p>
           <input id="delta" type="range" min="1" max="50" step="1" value="10" />
           <span id="deltaValue"></span>m
         </p>
       </fieldset>
-      <h3 data-target="optionsGeoloc">Geoloc</h3>
+      <h3 data-target="optionsGeoloc" data-l10n-id="geolocOptions">Geoloc</h3>
       <section id="optionsGeoloc" class="hidden">
-        <p><label>High Accuracy <input type="checkbox" checked id="geoAccur"/></label></p>
-        <p><label>Timeout <input type="text" value="60000" id="geoTo"/></label></p>
-        <p><label>Maximum age <input type="text" value="0" id="geoMax"/></label></p>
+        <p><label data-l10n-id="geolocAccuracy">High Accuracy <input type="checkbox" checked id="geoAccur"/></label></p>
+        <p><label data-l10n-id="geolocTimeout">Timeout <input type="text" value="60000" id="geoTo"/></label></p>
+        <p><label data-l10n-id="geolocAge">Maximum age <input type="text" value="0" id="geoMax"/></label></p>
       </section>
     </section>
-    <h2 data-target="logs">Logs</h2>
+    <h2 data-target="logs" data-l10n-id="logs">Logs</h2>
     <section id="logs" class="hidden">
-      <button type="button" id="clearLogs">Clear logs</button>
+      <button type="button" id="clearLogs" data-l10n-id="logsClear">Clear logs</button>
       <p>
         <pre id="result"></pre>
       </p>

diff --git a/js/stumbler.js b/js/stumbler.js
@@ -8,11 +8,13 @@ var result,
     nbItems,
     curPos,
     curCell,
-    options;
+    options,
+    _;
 options = {
   geoloc: 'GPS',
   action: 'send',
   logLevel: 'debug',
+  lang: 'en-US',
   accuracy: 50,
   delta: 10,
   username: ''
@@ -390,6 +392,7 @@ window.addEventListener("load", function () {
   "use strict";
   //jshint maxstatements: 30
   var onAccuracyChange, onDeltaChange;
+  _ = document.webL10n.get;
   function onSliderChange(option, target) {
     var fct = function (event) {
       if (event) {
@@ -421,11 +424,11 @@ window.addEventListener("load", function () {
       if (this.dataset.state === 'stopped') {
         startMonitoring();
         this.dataset.state = "started";
-        this.textContent   = "Stop monitoring";
+        this.textContent   = _('monitoringStop');
       } else {
         stopMonitoring();
         this.dataset.state = "stopped";
-        this.textContent   = "Start monitoring";
+        this.textContent   = _('monitoringStart');
       }
     });
     document.getElementById('clearLogs').addEventListener('click', function (event) {
@@ -516,7 +519,13 @@ window.addEventListener("load", function () {
       options.logLevel = this.value;
       saveOptions();
     });
+    document.getElementById('settingsLang').addEventListener('change', function (event) {
+      options.lang = this.value;
+      document.webL10n.setLanguage(this.value);
+      saveOptions();
+    });
     utils.logLevel = document.getElementById('settingsLogLevel').value;
+    document.webL10n.setLanguage(document.getElementById('settingsLang').value);
 
     onAccuracyChange = onSliderChange('accuracy', 'accuracyValue');
     document.getElementById('accuracy').addEventListener('input', onAccuracyChange);
@@ -553,20 +562,24 @@ window.addEventListener("load", function () {
         options.delta    = val.accuracy || 10;
         options.geoloc   = val.geoloc   || 'GPS';
         options.logLevel = val.logLevel || 'debug';
+        options.lang     = val.lang     || 'en-US';
         options.username = val.username || '';
       } else {
         options.accuracy = 50;
         options.action   = 'store';
         options.delta    = 10;
         options.geoloc   = 'GPS';
         options.logLevel = 'debug';
+        options.lang     = 'en-US';
         options.username = '';
       }
       // Init options
       onAccuracyChange();
       onDeltaChange();
       utils.logLevel = options.logLevel;
+      document.webL10n.setLanguage(options.lang);
       document.getElementById('settingsLogLevel').value = options.logLevel;
+      document.getElementById('settingsLang').value = options.lang;
       document.querySelector("[name=username]").value = options.username;
       $$("[name=geoloc]").forEach(function (e) {
         e.checked = (e.value === options.geoloc);

diff --git a/lib/webL10n b/lib/webL10n
diff --git a/locales/locales.ini b/locales/locales.ini
@@ -0,0 +1,71 @@
+[en-US]
+accuracy = Ignore if less accurate than
+action = Action:
+actionNone = Nothing
+actionSend = Send
+actionStore = Store
+distance = Minimum distance between measures
+geolocAccuracy = High Accuracy
+geolocAge = Maximum age
+geolocAsk = Ask
+geolocGps = GPS
+geolocOptions = Geoloc
+geolocTimeout = Timeout
+geolocType = Geoloc:
+getInfos = Get infos
+lang = Language
+langEnglish = Simplified english
+langFrench = French
+logLevel = Log level
+logLevelDebug = Debug
+logLevelError = Error
+logLevelInfo = Info
+logLevelWarning = Warning
+logs = Logs
+logsClear = Clear logs
+monitoringStart = Start monitoring
+monitoringStop = Stop monitoring
+getPosition = Get my position
+options = Options
+storageTitle = Storage
+storageTitleEnd = items
+storageClear = Clear
+storageDisplay = Display
+storageSend = Send
+userName = Username:
+
+[fr]
+accuracy = Ignorer si moins précis que
+action = Action:
+actionNone  = Ne rien faire
+actionSend  = Envoyer
+actionStore = Enregistrer
+distance = Distance minimale entre deux mesures
+geolocAccuracy = Plus précis
+geolocAge = Âge maximal de la position
+geolocAsk = Sélectionner
+geolocGps = GPS
+geolocOptions = Geoloc
+geolocTimeout = 
+geolocType = Geoloc:
+getInfos = Scanner
+getPosition = Interroger le service
+lang = Langage
+langEnglish = Anglais
+langFrench  = Français
+logLevel = Niveau de verbosité
+logLevelDebug = Verbeux
+logLevelError = Erreurs
+logLevelInfo = Informations
+logLevelWarning = Avertissements
+logs = Journaux
+logsClear = Effacer le journal
+monitoringStart = Commencer à scanner
+monitoringStop = Arrêter
+options = Options
+storageTitle = Base
+storageTitleEnd = items
+storageClear = Effacer
+storageDisplay = Afficher
+storageSend = Envoyer
+userName = Nom d'utilisateur:
diff --git a/stumbler.zip b/stumbler.zip