Enable Enter-Press for submit in modals.

This commit is contained in:
MaxJa4
2024-01-23 09:33:56 +01:00
parent 1a7d6cbe11
commit 2139b83174
7 changed files with 50 additions and 7 deletions

View File

@@ -130,6 +130,12 @@
submitButton.addEventListener('click', submitClanHandler);
});
addClanModal.addEventListener('keypress', event => {
if (event.key === 'Enter') {
submitButton.click();
}
});
addClanModal.addEventListener('hidden.bs.modal', _ => {
submitButton.removeEventListener('click', submitClanHandler);

View File

@@ -41,7 +41,7 @@
const homeClanList = document.getElementById('home-clan');
const oppClanList = document.getElementById('opponent-clan');
const spinner = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>Lade...'
const spinner = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>Lade Spielerdaten...'
function validateInput() {
if (playerName.value.length < 1) {
@@ -110,6 +110,12 @@
clanName.value = selectedClan.innerText;
});
addPlayerModal.addEventListener('keypress', event => {
if (event.key === 'Enter') {
submitButton.click();
}
});
addPlayerModal.addEventListener('hidden.bs.modal', _ => {
submitButton.removeEventListener('click', submitPlayerHandler);

View File

@@ -1,13 +1,13 @@
{{ define "delete_clan" }}
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="deleteClanModal" tabindex="-1">
<div class="modal modal-lg fade" data-bs-backdrop="static" data-bs-keyboard="false" id="deleteClanModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-3 text-danger fw-bold" id="deleteClanModalLabel">Clan löschen</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body fs-5">
<div class="modal-body fs-5 text-center">
Möchtest du den Clan <span class="text-warning fw-bold" id="clan"></span> wirklich löschen?
<br><br>
Die Aktion kann nicht rückgängig gemacht werden.
@@ -24,6 +24,7 @@
document.addEventListener('DOMContentLoaded', function() {
const deleteClanModal = document.getElementById('deleteClanModal')
const deleteClanModalBS = new bootstrap.Modal('#deleteClanModal');
const submitButton = deleteClanModal.querySelector('button[name="submit"]');
if (deleteClanModal) {
deleteClanModal.addEventListener('show.bs.modal', event => {
@@ -33,7 +34,6 @@
const modalBodyInput = deleteClanModal.querySelector('#clan');
modalBodyInput.innerText = selectedClan;
const submitButton = deleteClanModal.querySelector('button[name="submit"]');
submitButton.addEventListener('click', function () {
const clanId = parseInt(clanList.value);
@@ -69,6 +69,12 @@
});
}, { once: true });
});
deleteClanModal.addEventListener('keypress', event => {
if (event.key === 'Enter') {
submitButton.click();
}
});
}
});
</script>

View File

@@ -1,13 +1,13 @@
{{ define "delete_player" }}
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="deletePlayerModal" tabindex="-1">
<div class="modal modal-lg fade" data-bs-backdrop="static" data-bs-keyboard="false" id="deletePlayerModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-3 text-danger fw-bold" id="deletePlayerModalLabel">Spieler löschen</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body fs-5">
<div class="modal-body fs-5 text-center">
Möchtest du den Spieler <span class="text-warning fw-bold" id="player"></span> wirklich löschen?
<br><br>
Die Aktion kann nicht rückgängig gemacht werden.
@@ -24,6 +24,8 @@
document.addEventListener('DOMContentLoaded', function() {
const deletePlayerModal = document.getElementById('deletePlayerModal')
const deletePlayerModalBS = new bootstrap.Modal('#deletePlayerModal');
const submitButton = deletePlayerModal.querySelector('button[name="submit"]');
if (deletePlayerModal) {
deletePlayerModal.addEventListener('show.bs.modal', event => {
const button = event.relatedTarget;
@@ -37,7 +39,6 @@
const homeClanList = document.getElementById('home-clan');
const oppClanList = document.getElementById('opponent-clan');
const submitButton = deletePlayerModal.querySelector('button[name="submit"]');
submitButton.addEventListener('click', function () {
fetch("/player/" + playerId, {
method: "DELETE",
@@ -59,6 +60,12 @@
});
}, { once: true });
});
deletePlayerModal.addEventListener('keypress', event => {
if (event.key === 'Enter') {
submitButton.click();
}
});
}
});
</script>

View File

@@ -149,6 +149,12 @@
});
});
editClanModal.addEventListener('keypress', event => {
if (event.key === 'Enter') {
submitButton.click();
}
});
editClanModal.addEventListener('hidden.bs.modal', _ => {
submitButton.removeEventListener('click', submitClanHandler);

View File

@@ -95,6 +95,12 @@
playerName.value = event.relatedTarget.closest('.input-group').querySelector('span').innerText;
});
editPlayerModal.addEventListener('keypress', event => {
if (event.key === 'Enter') {
submitButton.click();
}
});
editPlayerModal.addEventListener('hide.bs.modal', _ => {
submitButton.removeEventListener('click', submitPlayerHandler);

View File

@@ -111,6 +111,12 @@
alert('Fehler beim Laden der Einstellungen: ' + error.message);
});
});
settingsModal.addEventListener('keypress', event => {
if (event.key === 'Enter') {
submitButton.click();
}
});
}
});
</script>