change input to range for durations

diff --git a/l10n/po/fr/trivabble.po b/l10n/po/fr/trivabble.po
index 247ef1f493013de08c0f8089b954200156641fc3..9abb6d6970f7c4575750fcf986b52526889f6769 100644 (file)
--- 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 8c55bf81ca62e248e0bf9cc558b1ad8c44647766..69695299f2424fa79a35871a15d4a0430ea2c539 100644 (file)
--- 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 68864962db604a89338280fefa87e74238561356..721a741cb6fdcb81cc11a5cd2dde1463ad0d4555 100644 (file)
--- 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 29268fe770b4a35e49cd3b53a479398f38a97db9..2ffcc8151a6bc2eaa60761238df26884047a4bf0 100644 (file)
--- 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);
             };
         }