refactor auto submit button js utility

This commit is contained in:
Felix Hamann 2019-04-07 21:24:36 +02:00
parent 4ef7d5f93a
commit 16f1acd6c6
3 changed files with 34 additions and 7 deletions

View File

@ -17,7 +17,7 @@ fieldset {
}
}
[data-autosubmit][type="submit"] {
[uw-auto-submit-button][type="submit"] {
animation: fade-in 500ms ease-in-out backwards;
animation-delay: 500ms;
}

View File

@ -265,19 +265,46 @@
setup: interactiveFieldsetUtil,
});
/**
*
* Auto Submit Button Utility
* Hides submit buttons in forms that are submitted programmatically
* We hide the button using JavaScript so no-js users will still be able to submit the form
*
* Attribute: uw-auto-submit-button
*
* Example usage:
* <button type="submit" uw-auto-submit-button>Submit
*/
window.utils.autoSubmit = function(form, options) {
var button = form.querySelector(AUTOSUBMIT_BUTTON_SELECTOR);
if (button) {
button.classList.add('hidden');
var AUTO_SUBMIT_BUTTON_UTIL_NAME = 'autoSubmitButton';
var AUTO_SUBMIT_BUTTON_UTIL_SELECTOR = '[uw-auto-submit-button]';
var AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS = 'auto-submit-button--initialized';
var AUTO_SUBMIT_BUTTON_HIDDEN_CLASS = 'hidden';
var autoSubmitButtonUtil = function(element) {
if (!element) {
throw new Error('Auto Submit Button utility needs to be passed an element!');
}
// hide and mark initialized
element.classList.add(AUTO_SUBMIT_BUTTON_HIDDEN_CLASS, AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS);
return {
scope: form,
name: AUTO_SUBMIT_BUTTON_UTIL_NAME,
element: element,
destroy: function() {},
};
};
formUtilities.push({
name: AUTO_SUBMIT_BUTTON_UTIL_NAME,
selector: AUTO_SUBMIT_BUTTON_UTIL_SELECTOR,
setup: autoSubmitButtonUtil,
});
// listens for focus events and removes any errors on an input
window.utils.errorRemover = function(formGroup, options) {

View File

@ -15,5 +15,5 @@ $# Wrapper for all kinds of forms
^{submitButtonView}
$of FormAutoSubmit
^{formWidget}
<button type=submit data-autosubmit>
<button type=submit uw-auto-submit-button>
^{btnLabel BtnSubmit}