2021-03-11 05:43:45 +01:00
|
|
|
import $ from "jquery";
|
|
|
|
|
2021-02-28 01:17:21 +01:00
|
|
|
import render_confirm_dialog from "../templates/confirm_dialog.hbs";
|
2021-05-06 10:03:41 +02:00
|
|
|
import render_confirm_dialog_heading from "../templates/confirm_dialog_heading.hbs";
|
2020-08-01 03:43:15 +02:00
|
|
|
|
2021-03-16 23:38:59 +01:00
|
|
|
import * as blueslip from "./blueslip";
|
2021-05-09 09:29:16 +02:00
|
|
|
import * as loading from "./loading";
|
2021-02-28 01:17:21 +01:00
|
|
|
import * as overlays from "./overlays";
|
2021-02-28 01:03:46 +01:00
|
|
|
|
2018-09-12 17:43:38 +02:00
|
|
|
/*
|
|
|
|
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.
|
|
|
|
|
2021-06-16 16:13:39 +02:00
|
|
|
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_confirm_dialog_spinner()
|
|
|
|
to hide the spinner in both success and error handlers.
|
2018-09-12 17:43:38 +02:00
|
|
|
*/
|
|
|
|
|
2021-05-09 09:29:16 +02:00
|
|
|
export function hide_confirm_dialog_spinner() {
|
|
|
|
const spinner = $("#confirm_dialog_spinner");
|
|
|
|
loading.destroy_indicator(spinner);
|
|
|
|
$("#confirm_dialog_modal > div.modal-footer > button").show();
|
|
|
|
}
|
|
|
|
|
|
|
|
export function show_confirm_dialog_spinner() {
|
|
|
|
const spinner = $("#confirm_dialog_spinner");
|
|
|
|
$("#confirm_dialog_modal > div.modal-footer > button").hide();
|
|
|
|
loading.make_indicator(spinner);
|
|
|
|
}
|
|
|
|
|
2021-02-28 01:17:21 +01:00
|
|
|
export function launch(conf) {
|
2021-06-09 16:35:08 +02:00
|
|
|
const html = render_confirm_dialog({fade: conf.fade});
|
2019-11-02 00:06:25 +01:00
|
|
|
const confirm_dialog = $(html);
|
2018-09-12 17:43:38 +02:00
|
|
|
|
2019-11-02 00:06:25 +01:00
|
|
|
const conf_fields = [
|
2018-09-12 17:43:38 +02:00
|
|
|
// The next three fields should be safe HTML. If callers
|
|
|
|
// interpolate user data into strings, they should use
|
|
|
|
// templates.
|
2020-07-15 01:29:15 +02:00
|
|
|
"html_heading",
|
|
|
|
"html_body",
|
|
|
|
"html_yes_button",
|
|
|
|
"on_click",
|
|
|
|
"parent",
|
2018-09-12 17:43:38 +02:00
|
|
|
];
|
|
|
|
|
js: Automatically convert _.each to for…of.
This commit was automatically generated by the following script,
followed by lint --fix and a few small manual lint-related cleanups.
import * as babelParser from "recast/parsers/babel";
import * as recast from "recast";
import * as tsParser from "recast/parsers/typescript";
import { builders as b, namedTypes as n } from "ast-types";
import { Context } from "ast-types/lib/path-visitor";
import K from "ast-types/gen/kinds";
import { NodePath } from "ast-types/lib/node-path";
import assert from "assert";
import fs from "fs";
import path from "path";
import process from "process";
const checkExpression = (node: n.Node): node is K.ExpressionKind =>
n.Expression.check(node);
const checkStatement = (node: n.Node): node is K.StatementKind =>
n.Statement.check(node);
for (const file of process.argv.slice(2)) {
console.log("Parsing", file);
const ast = recast.parse(fs.readFileSync(file, { encoding: "utf8" }), {
parser: path.extname(file) === ".ts" ? tsParser : babelParser,
});
let changed = false;
let inLoop = false;
let replaceReturn = false;
const visitLoop = (...args: string[]) =>
function(this: Context, path: NodePath) {
for (const arg of args) {
this.visit(path.get(arg));
}
const old = { inLoop };
inLoop = true;
this.visit(path.get("body"));
inLoop = old.inLoop;
return false;
};
recast.visit(ast, {
visitDoWhileStatement: visitLoop("test"),
visitExpressionStatement(path) {
const { expression, comments } = path.node;
let valueOnly;
if (
n.CallExpression.check(expression) &&
n.MemberExpression.check(expression.callee) &&
!expression.callee.computed &&
n.Identifier.check(expression.callee.object) &&
expression.callee.object.name === "_" &&
n.Identifier.check(expression.callee.property) &&
["each", "forEach"].includes(expression.callee.property.name) &&
[2, 3].includes(expression.arguments.length) &&
checkExpression(expression.arguments[0]) &&
(n.FunctionExpression.check(expression.arguments[1]) ||
n.ArrowFunctionExpression.check(expression.arguments[1])) &&
[1, 2].includes(expression.arguments[1].params.length) &&
n.Identifier.check(expression.arguments[1].params[0]) &&
((valueOnly = expression.arguments[1].params[1] === undefined) ||
n.Identifier.check(expression.arguments[1].params[1])) &&
(expression.arguments[2] === undefined ||
n.ThisExpression.check(expression.arguments[2]))
) {
const old = { inLoop, replaceReturn };
inLoop = false;
replaceReturn = true;
this.visit(
path
.get("expression")
.get("arguments")
.get(1)
.get("body")
);
inLoop = old.inLoop;
replaceReturn = old.replaceReturn;
const [right, { body, params }] = expression.arguments;
const loop = b.forOfStatement(
b.variableDeclaration("let", [
b.variableDeclarator(
valueOnly ? params[0] : b.arrayPattern([params[1], params[0]])
),
]),
valueOnly
? right
: b.callExpression(
b.memberExpression(right, b.identifier("entries")),
[]
),
checkStatement(body) ? body : b.expressionStatement(body)
);
loop.comments = comments;
path.replace(loop);
changed = true;
}
this.traverse(path);
},
visitForStatement: visitLoop("init", "test", "update"),
visitForInStatement: visitLoop("left", "right"),
visitForOfStatement: visitLoop("left", "right"),
visitFunction(path) {
this.visit(path.get("params"));
const old = { replaceReturn };
replaceReturn = false;
this.visit(path.get("body"));
replaceReturn = old.replaceReturn;
return false;
},
visitReturnStatement(path) {
if (replaceReturn) {
assert(!inLoop); // could use labeled continue if this ever fires
const { argument, comments } = path.node;
if (argument === null) {
const s = b.continueStatement();
s.comments = comments;
path.replace(s);
} else {
const s = b.expressionStatement(argument);
s.comments = comments;
path.replace(s, b.continueStatement());
}
return false;
}
this.traverse(path);
},
visitWhileStatement: visitLoop("test"),
});
if (changed) {
console.log("Writing", file);
fs.writeFileSync(file, recast.print(ast).code, { encoding: "utf8" });
}
}
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-06 06:19:47 +01:00
|
|
|
for (const f of conf_fields) {
|
2021-06-09 16:35:08 +02:00
|
|
|
if (conf[f] === undefined) {
|
2020-07-15 01:29:15 +02:00
|
|
|
blueslip.error("programmer omitted " + f);
|
2018-09-12 17:43:38 +02:00
|
|
|
}
|
js: Automatically convert _.each to for…of.
This commit was automatically generated by the following script,
followed by lint --fix and a few small manual lint-related cleanups.
import * as babelParser from "recast/parsers/babel";
import * as recast from "recast";
import * as tsParser from "recast/parsers/typescript";
import { builders as b, namedTypes as n } from "ast-types";
import { Context } from "ast-types/lib/path-visitor";
import K from "ast-types/gen/kinds";
import { NodePath } from "ast-types/lib/node-path";
import assert from "assert";
import fs from "fs";
import path from "path";
import process from "process";
const checkExpression = (node: n.Node): node is K.ExpressionKind =>
n.Expression.check(node);
const checkStatement = (node: n.Node): node is K.StatementKind =>
n.Statement.check(node);
for (const file of process.argv.slice(2)) {
console.log("Parsing", file);
const ast = recast.parse(fs.readFileSync(file, { encoding: "utf8" }), {
parser: path.extname(file) === ".ts" ? tsParser : babelParser,
});
let changed = false;
let inLoop = false;
let replaceReturn = false;
const visitLoop = (...args: string[]) =>
function(this: Context, path: NodePath) {
for (const arg of args) {
this.visit(path.get(arg));
}
const old = { inLoop };
inLoop = true;
this.visit(path.get("body"));
inLoop = old.inLoop;
return false;
};
recast.visit(ast, {
visitDoWhileStatement: visitLoop("test"),
visitExpressionStatement(path) {
const { expression, comments } = path.node;
let valueOnly;
if (
n.CallExpression.check(expression) &&
n.MemberExpression.check(expression.callee) &&
!expression.callee.computed &&
n.Identifier.check(expression.callee.object) &&
expression.callee.object.name === "_" &&
n.Identifier.check(expression.callee.property) &&
["each", "forEach"].includes(expression.callee.property.name) &&
[2, 3].includes(expression.arguments.length) &&
checkExpression(expression.arguments[0]) &&
(n.FunctionExpression.check(expression.arguments[1]) ||
n.ArrowFunctionExpression.check(expression.arguments[1])) &&
[1, 2].includes(expression.arguments[1].params.length) &&
n.Identifier.check(expression.arguments[1].params[0]) &&
((valueOnly = expression.arguments[1].params[1] === undefined) ||
n.Identifier.check(expression.arguments[1].params[1])) &&
(expression.arguments[2] === undefined ||
n.ThisExpression.check(expression.arguments[2]))
) {
const old = { inLoop, replaceReturn };
inLoop = false;
replaceReturn = true;
this.visit(
path
.get("expression")
.get("arguments")
.get(1)
.get("body")
);
inLoop = old.inLoop;
replaceReturn = old.replaceReturn;
const [right, { body, params }] = expression.arguments;
const loop = b.forOfStatement(
b.variableDeclaration("let", [
b.variableDeclarator(
valueOnly ? params[0] : b.arrayPattern([params[1], params[0]])
),
]),
valueOnly
? right
: b.callExpression(
b.memberExpression(right, b.identifier("entries")),
[]
),
checkStatement(body) ? body : b.expressionStatement(body)
);
loop.comments = comments;
path.replace(loop);
changed = true;
}
this.traverse(path);
},
visitForStatement: visitLoop("init", "test", "update"),
visitForInStatement: visitLoop("left", "right"),
visitForOfStatement: visitLoop("left", "right"),
visitFunction(path) {
this.visit(path.get("params"));
const old = { replaceReturn };
replaceReturn = false;
this.visit(path.get("body"));
replaceReturn = old.replaceReturn;
return false;
},
visitReturnStatement(path) {
if (replaceReturn) {
assert(!inLoop); // could use labeled continue if this ever fires
const { argument, comments } = path.node;
if (argument === null) {
const s = b.continueStatement();
s.comments = comments;
path.replace(s);
} else {
const s = b.expressionStatement(argument);
s.comments = comments;
path.replace(s, b.continueStatement());
}
return false;
}
this.traverse(path);
},
visitWhileStatement: visitLoop("test"),
});
if (changed) {
console.log("Writing", file);
fs.writeFileSync(file, recast.print(ast).code, { encoding: "utf8" });
}
}
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-06 06:19:47 +01:00
|
|
|
}
|
2018-09-12 17:43:38 +02:00
|
|
|
|
|
|
|
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()) {
|
2020-07-15 01:29:15 +02:00
|
|
|
overlays.close_modal("#confirm_dialog_modal");
|
2018-09-12 17:43:38 +02:00
|
|
|
}
|
|
|
|
|
2021-05-06 10:03:41 +02:00
|
|
|
confirm_dialog.find(".confirm_dialog_heading").html(
|
|
|
|
render_confirm_dialog_heading({
|
|
|
|
heading_text: conf.html_heading,
|
|
|
|
link: conf.help_link,
|
|
|
|
}),
|
|
|
|
);
|
2021-06-09 09:03:44 +02:00
|
|
|
confirm_dialog.find(".confirm_dialog_body").prepend(conf.html_body);
|
2018-09-12 17:43:38 +02:00
|
|
|
|
2020-07-15 01:29:15 +02:00
|
|
|
const yes_button = confirm_dialog.find(".confirm_dialog_yes_button");
|
2018-09-12 17:43:38 +02:00
|
|
|
|
|
|
|
yes_button.html(conf.html_yes_button);
|
|
|
|
|
|
|
|
// Set up handlers.
|
2020-07-15 01:29:15 +02:00
|
|
|
yes_button.on("click", () => {
|
2021-05-09 09:29:16 +02:00
|
|
|
if (conf.loading_spinner) {
|
|
|
|
show_confirm_dialog_spinner();
|
|
|
|
} else {
|
|
|
|
overlays.close_modal("#confirm_dialog_modal");
|
|
|
|
}
|
2018-09-12 17:43:38 +02:00
|
|
|
conf.on_click();
|
|
|
|
});
|
|
|
|
|
confirm_dialog: Make it usable outside settings.
* 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.
2021-03-20 10:51:17 +01:00
|
|
|
confirm_dialog.on("hidden.bs.modal", () => {
|
2018-09-12 17:43:38 +02:00
|
|
|
confirm_dialog.remove();
|
|
|
|
});
|
|
|
|
|
|
|
|
// Open the modal
|
2020-07-15 01:29:15 +02:00
|
|
|
overlays.open_modal("#confirm_dialog_modal");
|
2021-03-27 12:22:31 +01:00
|
|
|
|
|
|
|
conf.parent.on("shown.bs.modal", () => {
|
|
|
|
yes_button.trigger("focus");
|
|
|
|
});
|
2021-02-28 01:17:21 +01:00
|
|
|
}
|