cleaner submit button setup and teardown in massinput js util

This commit is contained in:
Felix Hamann 2019-05-05 20:56:37 +02:00
parent d030ec1b5f
commit 351f7ace74

View File

@ -47,11 +47,14 @@
massInputFormSubmitHandler = makeSubmitHandler(); massInputFormSubmitHandler = makeSubmitHandler();
// "unarm" submit buttons inside this massinput so browser // setup submit buttons inside this massinput so browser
// uses correct submit button for form submission. // uses correct submit button for form submission.
// contents of the massinput will be replaced either way, // contents of the massinput will be replaced either way,
// so unarming is no problem // so unarming is no problem
unarmSubmitButtons(massInputFormSubmitHandler); var buttons = getMassInputSubmitButtons();
buttons.forEach(function(button) {
setupSubmitButton(button);
});
massInputForm.addEventListener('submit', massInputFormSubmitHandler); massInputForm.addEventListener('submit', massInputFormSubmitHandler);
@ -83,7 +86,7 @@
return function(event) { return function(event) {
var activeElement; var activeElement;
// check if event occured from either a mass input add/delete button or // check if event occured from either a mass input add/delete button or
// from inside one of massinput's inputs (i.e. they are focused/active) // from inside one of massinput's inputs (i.e. they are focused/active)
if (event.type === 'click') { if (event.type === 'click') {
@ -91,7 +94,7 @@
} else { } else {
activeElement = element.querySelector(':focus, :active'); activeElement = element.querySelector(':focus, :active');
} }
if (!activeElement) { if (!activeElement) {
return false; return false;
} }
@ -137,14 +140,20 @@
}; };
} }
function unarmSubmitButtons(submitHandler) { function getMassInputSubmitButtons() {
var buttons = Array.from(element.querySelectorAll('button[type="submit"][name][value]')); return Array.from(element.querySelectorAll('button[type="submit"][name][value], .' + MASS_INPUT_SUBMIT_BUTTON_CLASS));
buttons.forEach(function(button) { }
button.setAttribute('type', 'button');
button.classList.add(MASS_INPUT_SUBMIT_BUTTON_CLASS);
button.addEventListener('click', submitHandler); function setupSubmitButton(button) {
}); button.setAttribute('type', 'button');
button.classList.add(MASS_INPUT_SUBMIT_BUTTON_CLASS);
button.addEventListener('click', massInputFormSubmitHandler);
}
function resetSubmitButton(button) {
button.setAttribute('type', 'submit');
button.classList.remove(MASS_INPUT_SUBMIT_BUTTON_CLASS);
button.removeEventListener('click', massInputFormSubmitHandler);
} }
function processResponse(response) { function processResponse(response) {
@ -200,10 +209,9 @@
element.classList.remove(MASS_INPUT_INITIALIZED_CLASS); element.classList.remove(MASS_INPUT_INITIALIZED_CLASS);
massInputForm.removeEventListener('submit', massInputFormSubmitHandler) massInputForm.removeEventListener('submit', massInputFormSubmitHandler)
Array.from(element.querySelectorAll('.' + MASS_INPUT_SUBMIT_BUTTON_CLASS)).forEach(function(button) { var buttons = getMassInputSubmitButtons();
button.removeEventListener('click', massInputFormSubmitHandler); buttons.forEach(function(button) {
button.classList.remove(MASS_INPUT_SUBMIT_BUTTON_CLASS); resetSubmitButton(button);
button.setAttribute('type', 'submit');
}); });
} }