Only initialize the modals once

This prevents multiple events rebindings
This commit is contained in:
emanuele-f 2020-05-18 19:15:11 +02:00
parent 445ebe8ed4
commit 6e51fbb84d
5 changed files with 303 additions and 278 deletions

View file

@ -14,6 +14,7 @@
this.dialog = $(element).closest(".modal");
this.options = options;
this.csrf = options.csrf;
this.skipAys = options.skipAys;
this.observer = new MutationObserver((list) => {
this.bindFormValidation();
});
@ -26,35 +27,37 @@
if (!submitButton) throw new Error("The submit button was not found inside the form!");
/* Are you sure */
const modal_id = modal_id_ctr++;
if(!this.skipAys) {
const modal_id = modal_id_ctr++;
$(this.element).attr("data-modal-handler-id", modal_id);
this.form_sel = `[data-modal-handler-id="${modal_id}"]`;
aysHandleForm(this.form_sel);
$(this.element).attr("data-modal-handler-id", modal_id);
this.form_sel = `[data-modal-handler-id="${modal_id}"]`;
aysHandleForm(this.form_sel);
const self = this;
const self = this;
// handle modal-script close event
this.dialog.on("hide.bs.modal", function(e) {
// If the form data has changed, ask the user if he wants to discard
// the changes
if($(self.element).hasClass('dirty')) {
// ask to user if he REALLY wants close modal
const result = confirm(`${i18n.are_you_sure}`);
// handle modal-script close event
this.dialog.on("hide.bs.modal", function(e) {
// If the form data has changed, ask the user if he wants to discard
// the changes
if($(self.element).hasClass('dirty')) {
// ask to user if he REALLY wants close modal
const result = confirm(`${i18n.are_you_sure}`);
if(!result)
e.preventDefault();
else
aysResetForm(self.form_sel);
}
}).on("shown.bs.modal", function(e) {
// add focus to btn apply to enable focusing on the modal hence user can press escape button to
// close the modal
$(self.element).find("[type='submit']").trigger('focus');
if(!result)
e.preventDefault();
else
aysResetForm(self.form_sel);
}
}).on("shown.bs.modal", function(e) {
// add focus to btn apply to enable focusing on the modal hence user can press escape button to
// close the modal
$(self.element).find("[type='submit']").trigger('focus');
// Reinitialize the form AYS state with the new data
aysResetForm(self.form_sel);
});
// Reinitialize the form AYS state with the new data
aysResetForm(self.form_sel);
});
}
}
fillFormModal() {
@ -142,7 +145,8 @@
self.delegateSubmit();
/* Allow the form to be closed */
aysResetForm(self.form_sel);
if(!self.skipAys)
aysResetForm(self.form_sel);
})
.fail(function (jqxhr, textStatus, errorThrown) {
self.options.onSubmitError(dataToSend, textStatus, errorThrown);
@ -159,7 +163,8 @@
if (!resetButton) return;
resetButton.click(function(event) {
/* TODO: finisch the reset logic */
aysResetForm(self.form_sel);
if(!self.skipAys)
aysResetForm(self.form_sel);
});
}
}
@ -172,6 +177,7 @@
csrf: '',
endpoint: '',
resetAfterSubmit: true,
skipAys: false, /* True to skip the are-you-sure check on the dialog */
method: 'get',
/**
* Fetch data asynchronusly from the server or
@ -292,7 +298,6 @@
}, args);
const mh = new ModalHandler(this, options);
mh.invokeModalInit();
mh.delegateSubmit();
return mh;