From 364b9bbe30d6efc9d18659b2c71937db928220e1 Mon Sep 17 00:00:00 2001
From: Laurent Mazet <mazet@softndesign.org>
Date: Wed, 19 Aug 2020 21:47:00 +0200
Subject: [PATCH] change input to range for durations

---
 l10n/po/fr/trivabble.po |  7 +++++--
 l10n/pot/trivabble.pot  |  5 ++++-
 public/index.html       |  8 ++++----
 public/trivabble.js     | 33 +++++++++++++++++++++++++--------
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/l10n/po/fr/trivabble.po b/l10n/po/fr/trivabble.po
index 247ef1f..9abb6d6 100644
--- a/l10n/po/fr/trivabble.po
+++ b/l10n/po/fr/trivabble.po
@@ -178,8 +178,11 @@ msgstr "Regardez ici :"
 msgid  "Double tap duration"
 msgstr "Durée de la double tape"
 
-msgid  "(ms)"
-msgstr "(ms)"
+msgid  "(slow)"
+msgstr "(lent)"
+
+msgid  "(fast)"
+msgstr "(rapide)"
 
 msgid  "Flash light duration"
 msgstr "Durée du flash laser"
diff --git a/l10n/pot/trivabble.pot b/l10n/pot/trivabble.pot
index 8c55bf8..6969529 100644
--- a/l10n/pot/trivabble.pot
+++ b/l10n/pot/trivabble.pot
@@ -183,7 +183,10 @@ msgstr ""
 msgid  "Double tap duration"
 msgstr ""
 
-msgid  "(ms)"
+msgid  "(slow)"
+msgstr ""
+
+msgid  "(fast)"
 msgstr ""
 
 msgid  "Flash light duration"
diff --git a/public/index.html b/public/index.html
index 6886496..721a741 100644
--- a/public/index.html
+++ b/public/index.html
@@ -57,14 +57,14 @@
 		<hr/>
 		<div id="prefs">
 		    <p><label>
-                <input type="number" size="4" min="500" max="5000" step="100" id="double-tap-duration"/>
+                <span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="double-tap-duration"/><span data-l10n="text-content">(slow)</span>
+                <br/>
                 <span data-l10n="text-content">Double tap duration</span>
-                <span data-l10n="text-content">(ms)</span>
             </label></p>
 		    <p><label>
-                <input type="number" size="4" min="500" max="5000" step="100" id="flash-light-duration"/>
+                <span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="flash-light-duration"/><span data-l10n="text-content">(slow)</span>
+                <br/>
                 <span data-l10n="text-content">Flash light duration</span>
-                <span data-l10n="text-content">(ms)</span>
             </label></p>
             <p><label>
                 <input type="text" size="6" id="flash-light-color"/>
diff --git a/public/trivabble.js b/public/trivabble.js
index 29268fe..2ffcc81 100644
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -42,8 +42,8 @@
     setConf("ENABLE_EVENT_SOURCE",  true);
     setConf("MAX_WEBSOCKET_ERRORS", 1);
     setConf("APP_PATH",             "");
-    setConf("DOUBLE_TAP_DURATION",  1000);
-    setConf("FLASH_LIGHT_DURATION", 1500);
+    setConf("DOUBLE_TAP_DURATIONS", [650, 1100, 1800, 3000, 5000]);
+    setConf("FLASH_LIGHT_DURATIONS", [800, 1600, 3200]);
     setConf("FLASH_LIGHT_COLOR", "#E3E");
 
     const _ = (window.libD && libD.l10n) ? libD.l10n() : function (s) {
@@ -1583,28 +1583,45 @@
         }
     }
 
+    function translateDuration(x, values) {
+        if (x < 0) {
+            return null;
+        } else if (x < values.length) {
+            return values[Math.floor(x)];
+        } else {
+            for (let i = 0; i < values.length; i++) {
+                if (x <= values[i]) {
+                    return i;
+                }
+            }
+            return values.length - 1;
+        }
+    }
+
     function initLaserPointer() {
         if (!Object.prototype.hasOwnProperty.call(localStorage, "doubleTapDuration")) {
-            localStorage.doubleTapDuration = Conf.DOUBLE_TAP_DURATION;
+            localStorage.doubleTapDuration = Conf.DOUBLE_TAP_DURATIONS[Math.floor(Conf.DOUBLE_TAP_DURATIONS.length / 2)];
         }
         const doubleTapDuration = document.getElementById("double-tap-duration");
         if (doubleTapDuration) {
-            doubleTapDuration.value = Number(localStorage.doubleTapDuration);
+            doubleTapDuration.max = Conf.DOUBLE_TAP_DURATIONS.length - 1;
+            doubleTapDuration.value = translateDuration(localStorage.doubleTapDuration, Conf.DOUBLE_TAP_DURATIONS);
             doubleTapDuration.onchange = function () {
                 localStorage.doubleTapDuration =
-                    document.getElementById("double-tap-duration").value;
+                    translateDuration(document.getElementById("double-tap-duration").value, Conf.DOUBLE_TAP_DURATIONS);
             };
         }
 
         if (!Object.prototype.hasOwnProperty.call(localStorage, "flashLightDuration")) {
-            localStorage.flashLightDuration = Conf.FLASH_LIGHT_DURATION;
+            localStorage.flashLightDuration = Conf.FLASH_LIGHT_DURATIONS[Math.floor(Conf.FLASH_LIGHT_DURATIONS.length / 2)];
         }
         const flashLightDuration = document.getElementById("flash-light-duration");
         if (flashLightDuration) {
-            flashLightDuration.value = Number(localStorage.flashLightDuration);
+            flashLightDuration.max = Conf.FLASH_LIGHT_DURATIONS.length - 1;
+            flashLightDuration.value = translateDuration(localStorage.flashLightDuration, Conf.FLASH_LIGHT_DURATIONS);
             flashLightDuration.onchange = function () {
                 localStorage.flashLightDuration =
-                    document.getElementById("flash-light-duration").value;
+                    translateDuration(document.getElementById("flash-light-duration").value, Conf.FLASH_LIGHT_DURATIONS);
             };
         }
 
-- 
2.30.2