From a60beda6768087d4eea252cda7fb965ba496e51e Mon Sep 17 00:00:00 2001 From: evykassirer Date: Sun, 17 Nov 2024 17:24:32 -0800 Subject: [PATCH] settings_panel_menu: Convert module to typescript. --- tools/test-js-with-node | 2 +- web/src/admin.js | 2 +- web/src/click_handlers.js | 2 +- web/src/hashchange.js | 2 +- web/src/settings.js | 2 +- ...s_panel_menu.js => settings_panel_menu.ts} | 69 +++++++++++-------- web/src/settings_toggle.js | 2 +- web/src/ui_init.js | 2 +- web/src/user_card_popover.js | 2 +- 9 files changed, 49 insertions(+), 36 deletions(-) rename web/src/{settings_panel_menu.js => settings_panel_menu.ts} (83%) diff --git a/tools/test-js-with-node b/tools/test-js-with-node index 1f3b341536..57766ab33b 100755 --- a/tools/test-js-with-node +++ b/tools/test-js-with-node @@ -214,7 +214,7 @@ EXEMPT_FILES = make_set( "web/src/settings_muted_users.ts", "web/src/settings_notifications.ts", "web/src/settings_org.ts", - "web/src/settings_panel_menu.js", + "web/src/settings_panel_menu.ts", "web/src/settings_playgrounds.ts", "web/src/settings_preferences.ts", "web/src/settings_profile_fields.ts", diff --git a/web/src/admin.js b/web/src/admin.js index d8dbd3c876..cc9116bb2e 100644 --- a/web/src/admin.js +++ b/web/src/admin.js @@ -17,7 +17,7 @@ import * as settings_config from "./settings_config.ts"; import * as settings_data from "./settings_data.ts"; import * as settings_invites from "./settings_invites.ts"; import * as settings_org from "./settings_org.ts"; -import * as settings_panel_menu from "./settings_panel_menu.js"; +import * as settings_panel_menu from "./settings_panel_menu.ts"; import * as settings_sections from "./settings_sections.ts"; import * as settings_toggle from "./settings_toggle.js"; import * as settings_users from "./settings_users.ts"; diff --git a/web/src/click_handlers.js b/web/src/click_handlers.js index 3c2251049a..81e5469b95 100644 --- a/web/src/click_handlers.js +++ b/web/src/click_handlers.js @@ -29,7 +29,7 @@ import * as reactions from "./reactions.ts"; import * as recent_view_ui from "./recent_view_ui.ts"; import * as rows from "./rows.ts"; import * as server_events from "./server_events.js"; -import * as settings_panel_menu from "./settings_panel_menu.js"; +import * as settings_panel_menu from "./settings_panel_menu.ts"; import * as settings_preferences from "./settings_preferences.ts"; import * as settings_toggle from "./settings_toggle.js"; import * as sidebar_ui from "./sidebar_ui.ts"; diff --git a/web/src/hashchange.js b/web/src/hashchange.js index e25e02adf6..24529d490f 100644 --- a/web/src/hashchange.js +++ b/web/src/hashchange.js @@ -23,7 +23,7 @@ import * as recent_view_ui from "./recent_view_ui.ts"; import * as recent_view_util from "./recent_view_util.ts"; import * as scheduled_messages_overlay_ui from "./scheduled_messages_overlay_ui.ts"; import * as settings from "./settings.js"; -import * as settings_panel_menu from "./settings_panel_menu.js"; +import * as settings_panel_menu from "./settings_panel_menu.ts"; import * as settings_toggle from "./settings_toggle.js"; import * as sidebar_ui from "./sidebar_ui.ts"; import * as spectators from "./spectators.ts"; diff --git a/web/src/settings.js b/web/src/settings.js index f4690ececb..f53450ae53 100644 --- a/web/src/settings.js +++ b/web/src/settings.js @@ -16,7 +16,7 @@ import * as people from "./people.ts"; import * as settings_bots from "./settings_bots.ts"; import * as settings_config from "./settings_config.ts"; import * as settings_data from "./settings_data.ts"; -import * as settings_panel_menu from "./settings_panel_menu.js"; +import * as settings_panel_menu from "./settings_panel_menu.ts"; import * as settings_preferences from "./settings_preferences.ts"; import * as settings_sections from "./settings_sections.ts"; import * as settings_toggle from "./settings_toggle.js"; diff --git a/web/src/settings_panel_menu.js b/web/src/settings_panel_menu.ts similarity index 83% rename from web/src/settings_panel_menu.js rename to web/src/settings_panel_menu.ts index 6d2c8f07ca..d72edd3fbe 100644 --- a/web/src/settings_panel_menu.js +++ b/web/src/settings_panel_menu.ts @@ -3,34 +3,36 @@ import $ from "jquery"; import * as blueslip from "./blueslip.ts"; import * as browser_history from "./browser_history.ts"; import * as components from "./components.ts"; +import type {Toggle} from "./components.ts"; import {$t, $t_html} from "./i18n.ts"; import * as keydown_util from "./keydown_util.ts"; import * as popovers from "./popovers.ts"; import * as scroll_util from "./scroll_util.ts"; import * as settings_sections from "./settings_sections.ts"; import {redraw_active_users_list, redraw_deactivated_users_list} from "./settings_users.ts"; +import * as util from "./util.ts"; -export let normal_settings; -export let org_settings; +export let normal_settings: SettingsPanelMenu; +export let org_settings: SettingsPanelMenu; -export function mobile_deactivate_section() { +export function mobile_deactivate_section(): void { const $settings_overlay_container = $("#settings_overlay_container"); $settings_overlay_container.find(".right").removeClass("show"); $settings_overlay_container.find(".settings-header.mobile").removeClass("slide-left"); } -export function mobile_activate_section() { +export function mobile_activate_section(): void { const $settings_overlay_container = $("#settings_overlay_container"); $settings_overlay_container.find(".right").addClass("show"); $settings_overlay_container.find(".settings-header.mobile").addClass("slide-left"); } -function two_column_mode() { +function two_column_mode(): boolean { return $("#settings_overlay_container").css("--single-column") === undefined; } -function set_settings_header(key) { - const selected_tab_key = $("#settings_page .tab-switcher .selected").data("tab-key"); +function set_settings_header(key: string): void { + const selected_tab_key = $("#settings_page .tab-switcher .selected").attr("data-tab-key"); let header_prefix = $t_html({defaultMessage: "Personal settings"}); if (selected_tab_key === "organization") { header_prefix = $t_html({defaultMessage: "Organization settings"}); @@ -53,11 +55,18 @@ function set_settings_header(key) { } export class SettingsPanelMenu { - constructor(opts) { + $main_elem: JQuery; + hash_prefix: string; + $curr_li: JQuery; + current_tab: string; + current_user_settings_tab: string; + org_user_settings_toggler: Toggle; + + constructor(opts: {$main_elem: JQuery; hash_prefix: string}) { this.$main_elem = opts.$main_elem; this.hash_prefix = opts.hash_prefix; this.$curr_li = this.$main_elem.children("li").eq(0); - this.current_tab = this.$curr_li.data("section"); + this.current_tab = this.$curr_li.attr("data-section")!; this.current_user_settings_tab = "active"; this.org_user_settings_toggler = components.toggle({ html_class: "org-user-settings-switcher", @@ -84,7 +93,7 @@ export class SettingsPanelMenu { }); this.$main_elem.on("click", "li[data-section]", (e) => { - const section = $(e.currentTarget).attr("data-section"); + const section = $(e.currentTarget).attr("data-section")!; this.activate_section_or_default(section, this.current_user_settings_tab); // You generally want to add logic to activate_section, @@ -94,7 +103,7 @@ export class SettingsPanelMenu { }); } - show() { + show(): void { this.$main_elem.show(); const section = this.current_tab; const user_settings_tab = this.current_user_settings_tab; @@ -104,9 +113,9 @@ export class SettingsPanelMenu { this.$curr_li.trigger("focus"); } - show_org_user_settings_toggler() { + show_org_user_settings_toggler(): void { if ($("#admin-user-list").find(".tab-switcher").length === 0) { - const toggler_html = this.org_user_settings_toggler.get(); + const toggler_html = util.the(this.org_user_settings_toggler.get()); $("#admin-user-list .tab-container").html(toggler_html); // We need to re-register these handlers since they are @@ -116,16 +125,16 @@ export class SettingsPanelMenu { } } - hide() { + hide(): void { this.$main_elem.hide(); } - li_for_section(section) { + li_for_section(section: string): JQuery { const $li = $(`#settings_overlay_container li[data-section='${CSS.escape(section)}']`); return $li; } - set_key_handlers(toggler, $elem = this.$main_elem) { + set_key_handlers(toggler: Toggle, $elem = this.$main_elem): void { const {vim_left, vim_right, vim_up, vim_down} = keydown_util; keydown_util.handle({ $elem, @@ -145,17 +154,17 @@ export class SettingsPanelMenu { }); } - prev() { + prev(): boolean { this.$curr_li.prevAll(":visible").first().trigger("focus").trigger("click"); return true; } - next() { + next(): boolean { this.$curr_li.nextAll(":visible").first().trigger("focus").trigger("click"); return true; } - enter_panel() { + enter_panel(): boolean { const $panel = this.get_panel(); const $panel_elem = $panel.find("input:visible,button:visible,select:visible").first(); @@ -163,15 +172,19 @@ export class SettingsPanelMenu { return true; } - set_current_tab(tab) { + set_current_tab(tab: string): void { this.current_tab = tab; } - set_user_settings_tab(tab) { + set_user_settings_tab(tab: string): void { this.current_user_settings_tab = tab; } - activate_section_or_default(section, user_settings_tab, activate_section_for_mobile = true) { + activate_section_or_default( + section: string, + user_settings_tab: string, + activate_section_for_mobile = true, + ): void { popovers.hide_all(); if (!section) { // No section is given so we display the default. @@ -226,15 +239,15 @@ export class SettingsPanelMenu { set_settings_header(section); } - get_panel() { - const section = this.$curr_li.data("section"); + get_panel(): JQuery { + const section = this.$curr_li.attr("data-section")!; const sel = `[data-name='${CSS.escape(section)}']`; const $panel = $(".settings-section" + sel); return $panel; } } -export function initialize() { +export function initialize(): void { normal_settings = new SettingsPanelMenu({ $main_elem: $(".normal-settings-list"), hash_prefix: "settings/", @@ -245,17 +258,17 @@ export function initialize() { }); } -export function show_normal_settings() { +export function show_normal_settings(): void { org_settings.hide(); normal_settings.show(); } -export function show_org_settings() { +export function show_org_settings(): void { normal_settings.hide(); org_settings.show(); } -export function set_key_handlers(toggler) { +export function set_key_handlers(toggler: Toggle): void { normal_settings.set_key_handlers(toggler); org_settings.set_key_handlers(toggler); } diff --git a/web/src/settings_toggle.js b/web/src/settings_toggle.js index 15f4738dbc..8aaae9924b 100644 --- a/web/src/settings_toggle.js +++ b/web/src/settings_toggle.js @@ -2,7 +2,7 @@ import $ from "jquery"; import * as components from "./components.ts"; import {$t} from "./i18n.ts"; -import * as settings_panel_menu from "./settings_panel_menu.js"; +import * as settings_panel_menu from "./settings_panel_menu.ts"; let toggler; diff --git a/web/src/ui_init.js b/web/src/ui_init.js index c87cb43f7a..e0f9d28af7 100644 --- a/web/src/ui_init.js +++ b/web/src/ui_init.js @@ -106,7 +106,7 @@ import * as server_events from "./server_events.js"; import * as settings from "./settings.js"; import * as settings_data from "./settings_data.ts"; import * as settings_notifications from "./settings_notifications.ts"; -import * as settings_panel_menu from "./settings_panel_menu.js"; +import * as settings_panel_menu from "./settings_panel_menu.ts"; import * as settings_preferences from "./settings_preferences.ts"; import * as settings_realm_user_settings_defaults from "./settings_realm_user_settings_defaults.ts"; import * as settings_sections from "./settings_sections.ts"; diff --git a/web/src/user_card_popover.js b/web/src/user_card_popover.js index 0ec3a0d932..1194efc7f6 100644 --- a/web/src/user_card_popover.js +++ b/web/src/user_card_popover.js @@ -32,7 +32,7 @@ import * as people from "./people.ts"; import * as popover_menus from "./popover_menus.ts"; import {hide_all} from "./popovers.ts"; import * as rows from "./rows.ts"; -import * as settings_panel_menu from "./settings_panel_menu.js"; +import * as settings_panel_menu from "./settings_panel_menu.ts"; import * as sidebar_ui from "./sidebar_ui.ts"; import {current_user, realm} from "./state_data.ts"; import * as timerender from "./timerender.ts";