From fbe52117edc7f16fec9c4ffce797f1e591eeded5 Mon Sep 17 00:00:00 2001
From: Thomas Rupprecht <rupprecht.thomas@gmail.com>
Date: Mon, 5 Dec 2022 02:04:05 +0100
Subject: [PATCH] improve spinner control use input type `number` with `min`
 and `step` use `.stepDown()` and `.stepUp()` to change value hide browser
 controls

---
 includes/sys_form.php             | 19 +++++++++----------
 resources/assets/themes/base.scss | 11 +++++++++++
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/includes/sys_form.php b/includes/sys_form.php
index b8d82708..c7597d28 100644
--- a/includes/sys_form.php
+++ b/includes/sys_form.php
@@ -25,29 +25,28 @@ function form_hidden($name, $value)
  */
 function form_spinner($name, $label, $value)
 {
+    $id = 'spinner-' . $name;
     $value = htmlspecialchars((string)$value);
 
     return form_element($label, '
         <div class="input-group">
-            <input id="spinner-' . $name . '" class="form-control" name="' . $name . '" value="' . $value . '" />
-            <button id="spinner-' . $name . '-down" class="btn btn-secondary" type="button">
+            <input id="' . $id . '" class="form-control" type="number" min="0" step="1" name="' . $name . '" value="' . $value . '" />
+            <button id="' . $id . '-down" class="btn btn-secondary" type="button">
                 ' . icon('dash-lg') . '
             </button>
-            <button id="spinner-' . $name . '-up" class="btn btn-secondary" type="button">
+            <button id="' . $id . '-up" class="btn btn-secondary" type="button">
                 ' . icon('plus-lg') . '
             </button>
         </div>
         <script type="text/javascript">
-            document.getElementById("spinner-' . $name . '-down")?.addEventListener("click", () => {
-                const spinner = document.getElementById("spinner-' . $name . '");
-                spinner.value = parseInt(spinner.value, 10) - 1;
+            document.getElementById("' . $id . '-down")?.addEventListener("click", () => {
+                document.getElementById("' . $id . '").stepDown();
             });
-            document.getElementById("spinner-' . $name . '-up")?.addEventListener("click", () => {
-                const spinner = document.getElementById("spinner-' . $name . '");
-                spinner.value = parseInt(spinner.value, 10) + 1;
+            document.getElementById("' . $id . '-up")?.addEventListener("click", () => {
+                document.getElementById("' . $id . '").stepUp();
             });
         </script>
-        ', 'spinner-' . $name);
+        ', $id);
 }
 
 /**
diff --git a/resources/assets/themes/base.scss b/resources/assets/themes/base.scss
index ca1466bc..d82d03a2 100644
--- a/resources/assets/themes/base.scss
+++ b/resources/assets/themes/base.scss
@@ -372,3 +372,14 @@ code {
   max-width: 75%;
   display: inline-block;
 }
+
+/* Chrome, Safari, Edge, Opera */
+input[type=number]::-webkit-outer-spin-button,
+input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}