move js code for spinner into js file

now the code is needed only once for all spinners
This commit is contained in:
Thomas Rupprecht 2022-12-10 21:24:21 +01:00 committed by Michael Weimann
parent f12f8a1b3b
commit 2d454ca8ae
2 changed files with 21 additions and 10 deletions

View File

@ -30,21 +30,13 @@ function form_spinner(string $name, string $label, int $value)
return form_element($label, '
<div class="input-group">
<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">
<button class="btn btn-secondary spinner-down" type="button" data-input-id="' . $id . '">
' . icon('dash-lg') . '
</button>
<button id="' . $id . '-up" class="btn btn-secondary" type="button">
<button class="btn btn-secondary spinner-up" type="button" data-input-id="' . $id . '">
' . icon('plus-lg') . '
</button>
</div>
<script type="text/javascript">
document.getElementById("' . $id . '-down")?.addEventListener("click", () => {
document.getElementById("' . $id . '").stepDown();
});
document.getElementById("' . $id . '-up")?.addEventListener("click", () => {
document.getElementById("' . $id . '").stepUp();
});
</script>
', $id);
}

View File

@ -111,6 +111,25 @@ ready(() => {
});
});
ready(() => {
document.querySelectorAll('.spinner-down').forEach((element) => {
const inputElement = document.getElementById(element.dataset.inputId);
if (inputElement) {
element.addEventListener('click', () => {
inputElement.stepDown();
});
}
});
document.querySelectorAll('.spinner-up').forEach((element) => {
const inputElement = document.getElementById(element.dataset.inputId);
if (inputElement) {
element.addEventListener('click', () => {
inputElement.stepUp();
});
}
});
});
/**
* Button to set current time in time input fields.
*/