mirror of
https://github.com/zulip/zulip.git
synced 2025-11-04 14:03:30 +00:00
eb7b699ac9
* Currently, the confirm_dialog is used only in the settings pane, which already has the `new-style` class in the main `settings_overlay.hbs` file. So, the confirm modal is rendered correctly there. But to make it available for use outside of the settings pane, we add the `new-style` class to the confirm container itself, without which, the buttons look ugly. * The other change here is the click handler for removing the modal element. Previously, when the modal was closed (with any of the "yes"/"no"/"cross" buttons), there was a small time interval of around a second during which the modal had disappeared, but the background content was still in the faded-out state. This change fixes this glitch. This glitch was probably not noticable earlier, because the settings pane itself causes the background to be slightly faded out.
82 lines
2.2 KiB
JavaScript
82 lines
2.2 KiB
JavaScript
import $ from "jquery";
|
|
|
|
import render_confirm_dialog from "../templates/confirm_dialog.hbs";
|
|
|
|
import * as blueslip from "./blueslip";
|
|
import * as overlays from "./overlays";
|
|
|
|
/*
|
|
Look for confirm_dialog in settings_user_groups
|
|
to see an example of how to use this widget. It's
|
|
pretty simple to use!
|
|
|
|
Some things to note:
|
|
|
|
1) We create DOM on the fly, and we remove
|
|
the DOM once it's closed.
|
|
|
|
2) We attach the DOM for the modal to conf.parent,
|
|
and this temporary DOM location will influence
|
|
how styles work.
|
|
|
|
3) The cancel button is driven by bootstrap.js.
|
|
|
|
4) For settings, we have a click handler in settings.js
|
|
that will close the dialog via overlays.close_active_modal.
|
|
|
|
5) We assume that since this is a modal, you will
|
|
only ever have one confirm dialog active at any
|
|
time.
|
|
|
|
*/
|
|
|
|
export function launch(conf) {
|
|
const html = render_confirm_dialog();
|
|
const confirm_dialog = $(html);
|
|
|
|
const conf_fields = [
|
|
// The next three fields should be safe HTML. If callers
|
|
// interpolate user data into strings, they should use
|
|
// templates.
|
|
"html_heading",
|
|
"html_body",
|
|
"html_yes_button",
|
|
"on_click",
|
|
"parent",
|
|
];
|
|
|
|
for (const f of conf_fields) {
|
|
if (!conf[f]) {
|
|
blueslip.error("programmer omitted " + f);
|
|
}
|
|
}
|
|
|
|
conf.parent.append(confirm_dialog);
|
|
|
|
// Close any existing modals--on settings screens you can
|
|
// have multiple buttons that need confirmation.
|
|
if (overlays.is_modal_open()) {
|
|
overlays.close_modal("#confirm_dialog_modal");
|
|
}
|
|
|
|
confirm_dialog.find(".confirm_dialog_heading").html(conf.html_heading);
|
|
confirm_dialog.find(".confirm_dialog_body").html(conf.html_body);
|
|
|
|
const yes_button = confirm_dialog.find(".confirm_dialog_yes_button");
|
|
|
|
yes_button.html(conf.html_yes_button);
|
|
|
|
// Set up handlers.
|
|
yes_button.on("click", () => {
|
|
overlays.close_modal("#confirm_dialog_modal");
|
|
conf.on_click();
|
|
});
|
|
|
|
confirm_dialog.on("hidden.bs.modal", () => {
|
|
confirm_dialog.remove();
|
|
});
|
|
|
|
// Open the modal
|
|
overlays.open_modal("#confirm_dialog_modal");
|
|
}
|