move async form initialization to form util

This commit is contained in:
Felix Hamann 2019-02-25 20:24:44 +01:00
parent 2f3a735ae2
commit e9f7cdf682
4 changed files with 16 additions and 18 deletions

View File

@ -4,6 +4,6 @@
.async-form-loading {
opacity: 0.1;
transition: opacity 400ms ease-in-out;
transition: opacity 800ms ease-in-out;
pointer-events: none;
}

View File

@ -3,9 +3,10 @@
window.utils = window.utils || {};
var JS_INITIALIZED = 'js-initialized';
var JS_INITIALIZED = 'js-form-initialized';
var SUBMIT_BUTTON_SELECTOR = '[type="submit"]:not([formnovalidate])';
var AUTOSUBMIT_BUTTON_SELECTOR = '[type="submit"][data-autosubmit]';
var AJAX_SUBMIT_FLAG = 'ajaxSubmit';
function formValidator(inputs) {
var done = true;
@ -23,7 +24,6 @@
if (form.classList.contains(JS_INITIALIZED)) {
return false;
}
form.classList.add(JS_INITIALIZED);
// reactive buttons
var submitBtn = form.querySelector(SUBMIT_BUTTON_SELECTOR);
@ -37,6 +37,13 @@
// hide autoSubmit submit button
window.utils.setup('autoSubmit', form, options);
// async form
if (AJAX_SUBMIT_FLAG in form.dataset) {
window.utils.setup('asyncForm', form, options);
}
form.classList.add(JS_INITIALIZED);
};
// registers input-listener for each element in <inputs> (array) and

View File

@ -16,7 +16,6 @@
var OVERLAY_CLASS = 'modal__overlay';
var OVERLAY_OPEN_CLASS = 'modal__overlay--open';
var CLOSER_CLASS = 'modal__closer';
var AJAX_SUBMIT_FLAG = 'ajaxSubmit';
window.utils.modal = function(modalElement, options) {
@ -63,11 +62,7 @@
function setupForm() {
var form = modalElement.querySelector('form');
if (form) {
window.utils.setup('form', form);
if (AJAX_SUBMIT_FLAG in form.dataset) {
window.utils.setup('asyncForm', form, { headers: MODAL_HEADERS });
}
window.utils.setup('form', form, { headers: MODAL_HEADERS });
}
}

View File

@ -47,15 +47,11 @@
document.addEventListener('setup', listener);
// put a slight delay on the setup event in order to allow for all dependencies to load
window.setTimeout(function() {
document.dispatchEvent(new CustomEvent('setup', {
detail: { targetUtil: utilName, module: 'none' },
bubbles: true,
cancelable: true,
}));
}, 10);
document.dispatchEvent(new CustomEvent('setup', {
detail: { targetUtil: utilName, module: 'none' },
bubbles: true,
cancelable: true,
}));
};
window.utils.teardown = function(utilName) {