mirror of
https://github.com/zulip/zulip.git
synced 2025-11-10 17:07:07 +00:00
modal: Add support for modal event handlers.
This commit is contained in:
@@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user