Files
zulip/static/js/confirm_dialog.js
sahil839 c87c4f92ee confirm_dialog: Rename variables and classes used in templates.
This commit renames the variables, functions used in confirm_dialog.js
and classes and ids used in confirm_dialog.hbs.

This change is made so that we can easily migrate edit_fields_modal to
use this same code with some more changes.

We will change the file names and correspondingly import variables in
the next commit.
2021-07-14 12:21:24 -07:00

123 lines
3.8 KiB
JavaScript

import $ from "jquery";
import render_dialog_widget from "../templates/confirm_dialog.hbs";
import render_dialog_heading from "../templates/confirm_dialog_heading.hbs";
import * as blueslip from "./blueslip";
import * as overlays from "./overlays";
import * as settings_data from "./settings_data";
/*
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 dialog active at any
time.
6) If a modal wants a loading spinner, it should pass loading_spinner: true.
This will show a loading spinner when the yes button is clicked.
The caller is responsible for calling hide_dialog_spinner()
to hide the spinner in both success and error handlers.
*/
export function hide_dialog_spinner() {
$(".dialog_submit_button .loader").hide();
$(".dialog_submit_button span").show();
$(".dialog_submit_button").prop("disabled", false);
$("#dialog_widget_modal .close-modal-btn").prop("disabled", false);
}
export function show_dialog_spinner() {
$(".dialog_submit_button .loader").css("display", "inline-block");
$(".dialog_submit_button span").hide();
$(".dialog_submit_button").prop("disabled", true);
$("#dialog_widget_modal .close-modal-btn").prop("disabled", true);
if (!settings_data.using_dark_theme()) {
$(".dialog_submit_button object").on("load", function () {
const doc = this.getSVGDocument();
const $svg = $(doc).find("svg");
$svg.find("rect").css("fill", "#000");
});
}
}
export function launch(conf) {
const html = render_dialog_widget({fade: conf.fade});
const 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_submit_button",
"on_click",
"parent",
];
for (const f of conf_fields) {
if (conf[f] === undefined) {
blueslip.error("programmer omitted " + f);
}
}
conf.parent.append(dialog);
// Close any existing modals--on settings screens you can
// have multiple buttons that need confirmation.
if (overlays.is_modal_open()) {
overlays.close_modal("#dialog_widget_modal");
}
dialog.find(".dialog_heading").html(
render_dialog_heading({
heading_text: conf.html_heading,
link: conf.help_link,
}),
);
dialog.find(".dialog_body").append(conf.html_body);
const submit_button_span = dialog.find(".dialog_submit_button span");
submit_button_span.html(conf.html_submit_button);
const submit_button = dialog.find(".dialog_submit_button");
// Set up handlers.
submit_button.on("click", () => {
if (conf.loading_spinner) {
show_dialog_spinner();
} else {
overlays.close_modal("#dialog_widget_modal");
}
conf.on_click();
});
dialog.on("hidden.bs.modal", () => {
dialog.remove();
});
// Open the modal
overlays.open_modal("#dialog_widget_modal");
conf.parent.on("shown.bs.modal", () => {
submit_button.trigger("focus");
});
}