diff --git a/static/css/utils/asyncForm.scss b/static/css/utils/asyncForm.scss index eb8dc0635..cd4fe3159 100644 --- a/static/css/utils/asyncForm.scss +++ b/static/css/utils/asyncForm.scss @@ -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; } diff --git a/static/js/utils/form.js b/static/js/utils/form.js index 30ba76c96..1e0db4c20 100644 --- a/static/js/utils/form.js +++ b/static/js/utils/form.js @@ -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 (array) and diff --git a/static/js/utils/modal.js b/static/js/utils/modal.js index 71a48be4f..7c7cc5953 100644 --- a/static/js/utils/modal.js +++ b/static/js/utils/modal.js @@ -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 }); } } diff --git a/static/js/utils/setup.js b/static/js/utils/setup.js index 7068bc476..36e61a9b7 100644 --- a/static/js/utils/setup.js +++ b/static/js/utils/setup.js @@ -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) {