ts: Migrate `feedback_widget` to TypeScript.

This commit migrates `feedback_widget` module to TypeScript.
This commit is contained in:
Lalit 2023-05-04 16:28:14 +05:30 committed by Tim Abbott
parent e52eee330c
commit ebaabc6b68
2 changed files with 32 additions and 11 deletions

View File

@ -88,7 +88,7 @@ EXEMPT_FILES = make_set(
"web/src/emoji_picker.js", "web/src/emoji_picker.js",
"web/src/emojisets.js", "web/src/emojisets.js",
"web/src/favicon.ts", "web/src/favicon.ts",
"web/src/feedback_widget.js", "web/src/feedback_widget.ts",
"web/src/flatpickr.js", "web/src/flatpickr.js",
"web/src/gear_menu.ts", "web/src/gear_menu.ts",
"web/src/giphy.js", "web/src/giphy.js",

View File

@ -22,7 +22,23 @@ Code-wise it's a singleton widget that controls the DOM inside
*/ */
const meta = { type FeedbackWidgetMeta = {
hide_me_time: number | null;
alert_hover_state: boolean;
$container: JQuery | null;
opened: boolean;
handlers_set?: boolean;
undo?: () => void;
};
type FeedbackWidgetOptions = {
populate: (element: JQuery) => void;
title_text: string;
undo_button_text: string;
on_undo: () => void;
};
const meta: FeedbackWidgetMeta = {
hide_me_time: null, hide_me_time: null,
alert_hover_state: false, alert_hover_state: false,
$container: null, $container: null,
@ -35,12 +51,12 @@ const animate = {
return; return;
} }
if (meta.hide_me_time < Date.now() && !meta.alert_hover_state) { if ((meta.hide_me_time ?? 0) < Date.now() && !meta.alert_hover_state) {
animate.fadeOut(); animate.fadeOut();
return; return;
} }
setTimeout(animate.maybe_close, 100); setTimeout(() => animate.maybe_close(), 100);
}, },
fadeOut() { fadeOut() {
if (!meta.opened) { if (!meta.opened) {
@ -61,16 +77,21 @@ const animate = {
if (meta.$container) { if (meta.$container) {
meta.$container.fadeIn(500).addClass("show"); meta.$container.fadeIn(500).addClass("show");
meta.opened = true; meta.opened = true;
setTimeout(animate.maybe_close, 100); setTimeout(() => animate.maybe_close(), 100);
} }
}, },
}; };
function set_up_handlers() { function set_up_handlers(): void {
if (meta.handlers_set) { if (meta.handlers_set) {
return; return;
} }
if (!meta.$container) {
blueslip.error("$container not found for feedback widget.");
return;
}
meta.handlers_set = true; meta.handlers_set = true;
// if the user mouses over the notification, don't hide it. // if the user mouses over the notification, don't hide it.
@ -91,7 +112,7 @@ function set_up_handlers() {
meta.alert_hover_state = false; meta.alert_hover_state = false;
// add at least 2000ms but if more than that exists just keep the // add at least 2000ms but if more than that exists just keep the
// current amount. // current amount.
meta.hide_me_time = Math.max(meta.hide_me_time, Date.now() + 2000); meta.hide_me_time = Math.max(meta.hide_me_time ?? 0, Date.now() + 2000);
}); });
meta.$container.on("click", ".exit-me", () => { meta.$container.on("click", ".exit-me", () => {
@ -106,15 +127,15 @@ function set_up_handlers() {
}); });
} }
export function is_open() { export function is_open(): boolean {
return meta.opened; return meta.opened;
} }
export function dismiss() { export function dismiss(): void {
animate.fadeOut(); animate.fadeOut();
} }
export function show(opts) { export function show(opts: FeedbackWidgetOptions): void {
if (!opts.populate) { if (!opts.populate) {
blueslip.error("programmer needs to supply populate callback."); blueslip.error("programmer needs to supply populate callback.");
return; return;
@ -122,7 +143,7 @@ export function show(opts) {
meta.$container = $("#feedback_container"); meta.$container = $("#feedback_container");
const html = render_feedback_container(); const html = render_feedback_container({});
meta.$container.html(html); meta.$container.html(html);
set_up_handlers(); set_up_handlers();