diff --git a/static/js/utils/form.js b/static/js/utils/form.js index f04e2ee4d..7beea537e 100644 --- a/static/js/utils/form.js +++ b/static/js/utils/form.js @@ -1,72 +1,8 @@ (function() { 'use strict'; - window.utils = window.utils || {}; - var formUtilities = []; - var JS_INITIALIZED = 'js-form-initialized'; - var AUTOSUBMIT_BUTTON_SELECTOR = '[type="submit"][data-autosubmit]'; - var AJAX_SUBMIT_FLAG = 'ajaxSubmit'; - - var FORM_GROUP_SELECTOR = '.form-group'; - var FORM_GROUP_WITH_ERRORS_CLASS = 'form-group--has-error'; - - window.utils.form = function(form, options) { - options = options || {}; - - // dont initialize form if it is in a modal and is not forced - if (form.closest('.modal') && !options.force) { - return false; - } - - // dont initialize form if already initialized and should not be force-initialized - if (form.classList.contains(JS_INITIALIZED) && !options.force) { - return false; - } - - var utilInstances = []; - - // reactive buttons - utilInstances.push(window.utils.setup('reactiveButton', form)); - - // conditonal fieldsets - var fieldSets = Array.from(form.querySelectorAll('fieldset[data-conditional-id][data-conditional-value]')); - utilInstances.push(window.utils.setup('interactiveFieldset', form, { fieldSets })); - - // hide autoSubmit submit button - utilInstances.push(window.utils.setup('autoSubmit', form, options)); - - // async form - if (AJAX_SUBMIT_FLAG in form.dataset) { - utilInstances.push(window.utils.setup('asyncForm', form, options)); - } - - // inputs - utilInstances.push(window.utils.setup('inputs', form, options)); - - // form group errors - var formGroups = Array.from(form.querySelectorAll('.' + FORM_GROUP_CLASS)); - formGroups.forEach(function(formGroup) { - utilInstances.push(window.utils.setup('errorRemover', formGroup, options)); - }); - - form.classList.add(JS_INITIALIZED); - - function destroyUtils() { - utilInstances.filter(function(utilInstance) { - return !!utilInstance; - }).forEach(function(utilInstance) { - utilInstance.destroy(); - }); - } - - return { - scope: form, - destroy: destroyUtils, - }; - }; - /** * * Reactive Submit Button Utility @@ -213,7 +149,7 @@ function init() { if (!element) { throw new Error('Interactive Fieldset utility cannot be setup without an element!'); - } + } if (element.classList.contains(INTERACTIVE_FIELDSET_INITIALIZED_CLASS)) { throw new Error('Interactive Fieldset utility already initialized!'); @@ -227,12 +163,12 @@ if (!conditionalInput) { // abort if form has no required inputs throw new Error('Couldn\'t find the conditional input. Aborting setup for interactive fieldset.'); - } + } // param conditionalValue if (!element.dataset.conditionalValue) { throw new Error('Interactive Fieldset needs a conditional value!'); - } + } conditionalValue = element.dataset.conditionalValue; // add event listener @@ -244,11 +180,11 @@ // mark as initialized element.classList.add(INTERACTIVE_FIELDSET_INITIALIZED_CLASS); - return { + return { name: INTERACTIVE_FIELDSET_UTIL_NAME, element: element, - destroy: function() {}, - }; + destroy: function() {}, + }; } function updateVisibility() { @@ -321,13 +257,16 @@ var FORM_ERROR_REMOVER_INITIALIZED_CLASS = 'form-error-remover--initialized'; var FORM_ERROR_REMOVER_INPUTS_SELECTOR = 'input:not([type="hidden"]), textarea, select'; + var FORM_GROUP_SELECTOR = '.form-group'; + var FORM_GROUP_WITH_ERRORS_CLASS = 'form-group--has-error'; + var formErrorRemoverUtil = function(element) { var formGroups; function init() { if (!element) { throw new Error('Form Error Remover utility needs to be passed an element!'); - } + } // find form groups formGroups = Array.from(element.querySelectorAll(FORM_GROUP_SELECTOR)); @@ -335,12 +274,12 @@ formGroups.forEach(function(formGroup) { if (!formGroup.classList.contains(FORM_GROUP_WITH_ERRORS_CLASS)) { return; - } + } var inputElements = Array.from(formGroup.querySelectorAll(FORM_ERROR_REMOVER_INPUTS_SELECTOR)); if (!inputElements) { return false; - } + } inputElements.forEach(function(inputElement) { inputElement.addEventListener('input', function() { @@ -352,11 +291,11 @@ // mark initialized element.classList.add(FORM_ERROR_REMOVER_INITIALIZED_CLASS); - return { + return { name: FORM_ERROR_REMOVER_UTIL_NAME, element: element, destroy: function() {}, - }; + }; } return init();