paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-10 08:56:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

modal: Add support for modal event handlers.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

20
static/js/dialog_widget.js
View File

@@ -81,6 +81,10 @@ export function launch(conf) {
// * id: Custom id to the container element to modify styles. // * id: Custom id to the container element to modify styles.
// * single_footer_button: If true, don't include the "Cancel" button. // * single_footer_button: If true, don't include the "Cancel" button.
// * form_id: Id of the form element in the modal if it exists. // * 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) { for (const f of mandatory_fields) {
if (conf[f] === undefined) { if (conf[f] === undefined) {
@@ -133,12 +137,16 @@ export function launch(conf) {
overlays.open_modal("dialog_widget_modal", { overlays.open_modal("dialog_widget_modal", {
autoremove: true, autoremove: true,
micromodal: true, micromodal: true,
micromodal_opts: { on_show: () => {
onShow: () => { if (conf.focus_submit_on_open) {
if (conf.focus_submit_on_open) { submit_button.trigger("focus");
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,
}); });
} }

15
static/js/overlays.js
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 // If conf.autoremove is true, the modal element will be removed from the DOM
// once the modal is hidden. // once the modal is hidden.
// If conf.micromodal is true, open a micromodal modal else open a bootstrap modal // 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) { export function open_modal(selector, conf) {
if (selector === undefined) { if (selector === undefined) {
blueslip.error("Undefined selector was passed into open_modal"); blueslip.error("Undefined selector was passed into open_modal");
@@ -169,6 +174,10 @@ export function open_modal(selector, conf) {
// animation is complete. // animation is complete.
micromodal.addClass("modal--open"); micromodal.addClass("modal--open");
micromodal.removeClass("modal--opening"); micromodal.removeClass("modal--opening");
if (conf.on_shown) {
conf.on_shown();
}
} else if (animation_name === "mmfadeOut") { } else if (animation_name === "mmfadeOut") {
// Equivalent to bootstrap's "hidden.bs.modal" event // Equivalent to bootstrap's "hidden.bs.modal" event
@@ -176,13 +185,17 @@ export function open_modal(selector, conf) {
if (conf.autoremove) { if (conf.autoremove) {
micromodal.remove(); micromodal.remove();
} }
if (conf.on_hidden) {
conf.on_hidden();
}
} }
}); });
Micromodal.show(selector, { Micromodal.show(selector, {
disableFocus: true, disableFocus: true,
openClass: "modal--opening", openClass: "modal--opening",
...conf.micromodal_opts, onShow: conf?.on_show,
onClose: conf?.on_hide,
}); });
return; return;
} }