From 5c2ba6c8fa873472b329608aa787f8469c76173f Mon Sep 17 00:00:00 2001 From: Lalit Kumar Singh Date: Fri, 1 Sep 2023 13:48:48 +0530 Subject: [PATCH] ts: Migrate `avatar.js` module to TypeScript. --- tools/test-js-with-node | 2 +- web/src/{avatar.js => avatar.ts} | 25 +++++++++++++------------ web/src/page_params.ts | 2 ++ web/src/upload_widget.ts | 19 +++++++++++++------ 4 files changed, 29 insertions(+), 19 deletions(-) rename web/src/{avatar.js => avatar.ts} (83%) diff --git a/tools/test-js-with-node b/tools/test-js-with-node index ee247a2774..daaa53afb4 100755 --- a/tools/test-js-with-node +++ b/tools/test-js-with-node @@ -53,7 +53,7 @@ EXEMPT_FILES = make_set( "web/src/archive.js", "web/src/assets.d.ts", "web/src/attachments_ui.ts", - "web/src/avatar.js", + "web/src/avatar.ts", "web/src/billing/event_status.ts", "web/src/billing/helpers.ts", "web/src/billing/upgrade.ts", diff --git a/web/src/avatar.js b/web/src/avatar.ts similarity index 83% rename from web/src/avatar.js rename to web/src/avatar.ts index 948089e23c..eae381c4f6 100644 --- a/web/src/avatar.js +++ b/web/src/avatar.ts @@ -8,12 +8,13 @@ import {$t_html} from "./i18n"; import {page_params} from "./page_params"; import * as settings_data from "./settings_data"; import * as upload_widget from "./upload_widget"; +import type {UploadFunction, UploadWidget} from "./upload_widget"; -export function build_bot_create_widget() { +export function build_bot_create_widget(): UploadWidget { // We have to do strange gyrations with the file input to clear it, // where we replace it wholesale, so we generalize the file input with // a callback function. - const get_file_input = function () { + const get_file_input = function (): JQuery { return $("#bot_avatar_file_input"); }; @@ -34,9 +35,9 @@ export function build_bot_create_widget() { ); } -export function build_bot_edit_widget($target) { - const get_file_input = function () { - return $target.find(".edit_bot_avatar_file_input"); +export function build_bot_edit_widget($target: JQuery): UploadWidget { + const get_file_input = function (): JQuery { + return $target.find(".edit_bot_avatar_file_input"); }; const $file_name_field = $target.find(".edit_bot_avatar_file"); @@ -57,20 +58,20 @@ export function build_bot_edit_widget($target) { ); } -function display_avatar_delete_complete() { +function display_avatar_delete_complete(): void { $("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "hidden"}); $("#user-avatar-upload-widget .image-upload-text").show(); $("#user-avatar-source").show(); } -function display_avatar_delete_started() { +function display_avatar_delete_started(): void { $("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "visible"}); $("#user-avatar-upload-widget .image-upload-text").hide(); $("#user-avatar-upload-widget .image-delete-button").hide(); } -export function build_user_avatar_widget(upload_function) { - const get_file_input = function () { +export function build_user_avatar_widget(upload_function: UploadFunction): void { + const get_file_input = function (): JQuery { return $("#user-avatar-upload-widget .image_file_input").expectOne(); }; @@ -88,9 +89,9 @@ export function build_user_avatar_widget(upload_function) { $("#user-avatar-upload-widget .image-delete-button").on("click", (e) => { e.preventDefault(); e.stopPropagation(); - function delete_user_avatar() { + function delete_user_avatar(): void { display_avatar_delete_started(); - channel.del({ + void channel.del({ url: "/json/users/me/avatar", success() { display_avatar_delete_complete(); @@ -106,7 +107,7 @@ export function build_user_avatar_widget(upload_function) { }, }); } - const html_body = render_confirm_delete_user_avatar(); + const html_body = render_confirm_delete_user_avatar({}); confirm_dialog.launch({ html_heading: $t_html({defaultMessage: "Delete profile picture"}), diff --git a/web/src/page_params.ts b/web/src/page_params.ts index 22348a35a8..772ff3ee9d 100644 --- a/web/src/page_params.ts +++ b/web/src/page_params.ts @@ -3,6 +3,7 @@ import $ from "jquery"; const t1 = performance.now(); export const page_params: { apps_page_url: string; + avatar_source: string; corporate_enabled: boolean; development_environment: boolean; language_list: { @@ -19,6 +20,7 @@ export const page_params: { is_moderator: boolean; is_owner: boolean; is_spectator: boolean; + max_avatar_file_size_mib: number; muted_users: {id: number; timestamp: number}[]; needs_tutorial: boolean; page_load_time: number; diff --git a/web/src/upload_widget.ts b/web/src/upload_widget.ts index 9e881a9e17..140242cf2b 100644 --- a/web/src/upload_widget.ts +++ b/web/src/upload_widget.ts @@ -1,5 +1,16 @@ import {$t} from "./i18n"; +export type UploadWidget = { + clear(): void; + close(): void; +}; + +export type UploadFunction = ( + $file_input: JQuery, + night: boolean | null, + icon: boolean, +) => void; + const default_max_file_size = 5; const supported_types = ["image/jpeg", "image/png", "image/gif", "image/tiff"]; @@ -26,7 +37,7 @@ export function build_widget( $preview_text?: JQuery, $preview_image?: JQuery, max_file_upload_size = default_max_file_size, -): {clear(): void; close(): void} { +): UploadWidget { function accept(file: File): void { $file_name_field.text(file.name); $input_error.hide(); @@ -123,11 +134,7 @@ export function build_direct_upload_widget( $input_error: JQuery, // jQuery button to open file dialog $upload_button: JQuery, - upload_function: ( - $file_input: JQuery, - night: boolean | null, - icon: boolean, - ) => void, + upload_function: UploadFunction, max_file_upload_size = default_max_file_size, ): void { // default value of max uploaded file size