iger
/
engelsystem
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve spinner control 

use input type `number` with `min` and `step`
use `.stepDown()` and `.stepUp()` to change value
hide browser controls
This commit is contained in:
Thomas Rupprecht 2022-12-05 02:04:05 +01:00 committed by Michael Weimann
parent 3bcbca97ab
commit fbe52117ed
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
includes/sys_form.php
View File

@ -25,29 +25,28 @@ function form_hidden($name, $value)
*/ */
function form_spinner($name, $label, $value) function form_spinner($name, $label, $value)
{ {
$id = 'spinner-' . $name;
$value = htmlspecialchars((string)$value); $value = htmlspecialchars((string)$value);
return form_element($label, ' return form_element($label, '
<div class="input-group"> <div class="input-group">
<input id="spinner-' . $name . '" class="form-control" name="' . $name . '" value="' . $value . '" /> <input id="' . $id . '" class="form-control" type="number" min="0" step="1" name="' . $name . '" value="' . $value . '" />
<button id="spinner-' . $name . '-down" class="btn btn-secondary" type="button"> <button id="' . $id . '-down" class="btn btn-secondary" type="button">
' . icon('dash-lg') . ' ' . icon('dash-lg') . '
</button> </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') . ' ' . icon('plus-lg') . '
</button> </button>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
document.getElementById("spinner-' . $name . '-down")?.addEventListener("click", () => { document.getElementById("' . $id . '-down")?.addEventListener("click", () => {
const spinner = document.getElementById("spinner-' . $name . '"); document.getElementById("' . $id . '").stepDown();
spinner.value = parseInt(spinner.value, 10) - 1;
}); });
document.getElementById("spinner-' . $name . '-up")?.addEventListener("click", () => { document.getElementById("' . $id . '-up")?.addEventListener("click", () => {
const spinner = document.getElementById("spinner-' . $name . '"); document.getElementById("' . $id . '").stepUp();
spinner.value = parseInt(spinner.value, 10) + 1;
}); });
</script> </script>
', 'spinner-' . $name); ', $id);
} }
/** /**

11
resources/assets/themes/base.scss
View File

@ -372,3 +372,14 @@ code {
max-width: 75%; max-width: 75%;
display: inline-block; 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;
}