modal: Add support for modal event handlers.

This commit is contained in:
Ganesh Pawar
2021-11-21 19:58:46 +05:30
committed by Tim Abbott
parent 8908ea99ec
commit 291aaf373f
2 changed files with 28 additions and 7 deletions

View File

@@ -81,6 +81,10 @@ export function launch(conf) {
// * id: Custom id to the container element to modify styles.
// * single_footer_button: If true, don't include the "Cancel" button.
// * form_id: Id of the form element in the modal if it exists.
// * on_show: Callback to run when the modal is triggered to show.
// * on_shown: Callback to run when the modal is shown.
// * on_hide: Callback to run when the modal is triggered to hide.
// * on_hidden: Callback to run when the modal is hidden.
for (const f of mandatory_fields) {
if (conf[f] === undefined) {
@@ -133,12 +137,16 @@ export function launch(conf) {
overlays.open_modal("dialog_widget_modal", {
autoremove: true,
micromodal: true,
micromodal_opts: {
onShow: () => {
if (conf.focus_submit_on_open) {
submit_button.trigger("focus");
}
},
on_show: () => {
if (conf.focus_submit_on_open) {
submit_button.trigger("focus");
}
if (conf.on_show) {
conf.on_show();
}
},
on_hide: conf?.on_hide,
on_shown: conf?.on_shown,
on_hidden: conf?.on_hidden,
});
}

View File

@@ -122,6 +122,11 @@ export function open_overlay(opts) {
// If conf.autoremove is true, the modal element will be removed from the DOM
// once the modal is hidden.
// If conf.micromodal is true, open a micromodal modal else open a bootstrap modal
// conf also accepts the following optional properties:
// on_show: Callback to run when the modal is triggered to show.
// on_shown: Callback to run when the modal is shown.
// on_hide: Callback to run when the modal is triggered to hide.
// on_hidden: Callback to run when the modal is hidden.
export function open_modal(selector, conf) {
if (selector === undefined) {
blueslip.error("Undefined selector was passed into open_modal");
@@ -169,6 +174,10 @@ export function open_modal(selector, conf) {
// animation is complete.
micromodal.addClass("modal--open");
micromodal.removeClass("modal--opening");
if (conf.on_shown) {
conf.on_shown();
}
} else if (animation_name === "mmfadeOut") {
// Equivalent to bootstrap's "hidden.bs.modal" event
@@ -176,13 +185,17 @@ export function open_modal(selector, conf) {
if (conf.autoremove) {
micromodal.remove();
}
if (conf.on_hidden) {
conf.on_hidden();
}
}
});
Micromodal.show(selector, {
disableFocus: true,
openClass: "modal--opening",
...conf.micromodal_opts,
onShow: conf?.on_show,
onClose: conf?.on_hide,
});
return;
}