Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

resize: Convert module to typescript.

This commit is contained in:
evykassirer 2024-02-06 12:53:51 -08:00 committed by Tim Abbott
parent 4d6cfcb0ff
commit 49d79730b8
3 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tools/test-js-with-node
View File

@ -182,7 +182,7 @@ EXEMPT_FILES = make_set(
"web/src/reload.js",
"web/src/reload_setup.js",
"web/src/reminder.js",
"web/src/resize.js",
"web/src/resize.ts",
"web/src/resize_handler.js",
"web/src/rows.ts",
"web/src/scheduled_messages.ts",

79
web/src/resize.js → web/src/resize.ts
View File

@ -1,21 +1,24 @@
import autosize from "autosize";
import $ from "jquery";
import assert from "minimalistic-assert";
import * as blueslip from "./blueslip";
import * as compose_state from "./compose_state";
import * as compose_ui from "./compose_ui";
import * as message_viewport from "./message_viewport";
function get_bottom_whitespace_height() {
function get_bottom_whitespace_height(): number {
return message_viewport.height() * 0.4;
}
function get_new_heights() {
const res = {};
function get_new_heights(): {
stream_filters_max_height: number;
buddy_list_wrapper_max_height: number;
} {
const viewport_height = message_viewport.height();
const right_sidebar_shortcuts_height = $(".right-sidebar-shortcuts").outerHeight(true) ?? 0;
res.stream_filters_max_height =
let stream_filters_max_height =
viewport_height -
Number.parseInt($("#left-sidebar").css("paddingTop"), 10) -
Number.parseInt($("#left-sidebar-navigation-area").css("marginTop"), 10) -
@ -24,7 +27,7 @@ function get_new_heights() {
($("#private_messages_sticky_header").outerHeight(true) ?? 0);
// Don't let us crush the stream sidebar completely out of view
res.stream_filters_max_height = Math.max(80, res.stream_filters_max_height);
stream_filters_max_height = Math.max(80, stream_filters_max_height);
// RIGHT SIDEBAR
@ -35,12 +38,15 @@ function get_new_heights() {
($("#user_search_section").outerHeight(true) ?? 0) -
right_sidebar_shortcuts_height;
res.buddy_list_wrapper_max_height = Math.max(80, usable_height);
const buddy_list_wrapper_max_height = Math.max(80, usable_height);
return res;
return {
stream_filters_max_height,
buddy_list_wrapper_max_height,
};
}
export function watch_manual_resize(element) {
export function watch_manual_resize(element: string): (() => void)[] | undefined {
const box = document.querySelector(element);
if (!box) {
@ -48,27 +54,24 @@ export function watch_manual_resize(element) {
return undefined;
}
const meta = {
box,
height: null,
mousedown: false,
};
let height: number;
let mousedown = false;
const box_handler = function () {
meta.mousedown = true;
meta.height = meta.box.clientHeight;
const box_handler = function (): void {
mousedown = true;
height = box.clientHeight;
};
meta.box.addEventListener("mousedown", box_handler);
box.addEventListener("mousedown", box_handler);
// If the user resizes the textarea manually, we use the
// callback to stop autosize from adjusting the height.
// It will be re-enabled when this component is next opened.
const body_handler = function () {
if (meta.mousedown === true) {
meta.mousedown = false;
if (meta.height !== meta.box.clientHeight) {
meta.height = meta.box.clientHeight;
autosize.destroy($(element)).height(meta.height + "px");
const body_handler = function (): void {
if (mousedown) {
mousedown = false;
if (height !== box.clientHeight) {
height = box.clientHeight;
autosize.destroy($(element)).height(height + "px");
}
}
};
@ -77,7 +80,7 @@ export function watch_manual_resize(element) {
return [box_handler, body_handler];
}
export function reset_compose_message_max_height(bottom_whitespace_height) {
export function reset_compose_message_max_height(bottom_whitespace_height: number): void {
// If the compose-box is open, we set the `max-height` property of
// `compose-textarea` and `preview-textarea`, so that the
// compose-box's maximum extent does not overlap the last message
@ -89,10 +92,10 @@ export function reset_compose_message_max_height(bottom_whitespace_height) {
bottom_whitespace_height = get_bottom_whitespace_height();
}
const compose_height = $("#compose").get(0).getBoundingClientRect().height;
const compose_height = $("#compose").get(0)!.getBoundingClientRect().height;
const compose_textarea_height = Math.max(
$("textarea#compose-textarea").get(0).getBoundingClientRect().height,
$("#preview_message_area").get(0).getBoundingClientRect().height,
$("textarea#compose-textarea").get(0)!.getBoundingClientRect().height,
$("#preview_message_area").get(0)!.getBoundingClientRect().height,
);
const compose_non_textarea_height = compose_height - compose_textarea_height;
@ -112,7 +115,7 @@ export function reset_compose_message_max_height(bottom_whitespace_height) {
$("#scroll-to-bottom-button-container").css("bottom", compose_height);
}
export function resize_bottom_whitespace() {
export function resize_bottom_whitespace(): void {
const bottom_whitespace_height = get_bottom_whitespace_height();
$("html").css("--max-unexpanded-compose-height", `${bottom_whitespace_height}px`);
// The height of the compose box is tied to that of
@ -126,7 +129,7 @@ export function resize_bottom_whitespace() {
}
}
export function resize_stream_subscribers_list() {
export function resize_stream_subscribers_list(): void {
// Calculates the height of the subscribers list in stream settings.
// This avoids the stream settings from overflowing the container and
// having a scroll bar.
@ -149,36 +152,40 @@ export function resize_stream_subscribers_list() {
);
let total_height_of_classes_above_subscribers_list = 0;
$classes_above_subscribers_list.each(function () {
total_height_of_classes_above_subscribers_list += $(this).outerHeight(true);
const outer_height = $(this).outerHeight(true);
assert(outer_height !== undefined);
total_height_of_classes_above_subscribers_list += outer_height;
});
const subscribers_list_header_height = 30;
const margin_between_tab_switcher_and_add_subscribers_title = 20;
const subscriptions_info_height = $subscriptions_info.height();
assert(subscriptions_info_height !== undefined);
const subscribers_list_height =
$subscriptions_info.height() -
subscriptions_info_height -
total_height_of_classes_above_subscribers_list -
subscribers_list_header_height -
margin_between_tab_switcher_and_add_subscribers_title;
$("html").css("--stream-subscriber-list-max-height", `${subscribers_list_height}px`);
}
export function resize_stream_filters_container() {
export function resize_stream_filters_container(): void {
const h = get_new_heights();
resize_bottom_whitespace();
$("#left_sidebar_scroll_container").css("max-height", h.stream_filters_max_height);
}
export function resize_sidebars() {
export function resize_sidebars(): void {
const h = get_new_heights();
$("#buddy_list_wrapper").css("max-height", h.buddy_list_wrapper_max_height);
$("#left_sidebar_scroll_container").css("max-height", h.stream_filters_max_height);
}
export function update_recent_view_filters_height() {
export function update_recent_view_filters_height(): void {
const recent_view_filters_height = $("#recent_view_filter_buttons").outerHeight(true) ?? 0;
$("html").css("--recent-topics-filters-height", `${recent_view_filters_height}px`);
}
function resize_navbar_alerts() {
function resize_navbar_alerts(): void {
const navbar_alerts_height = $("#navbar_alerts_wrapper").height();
document.documentElement.style.setProperty(
"--navbar-alerts-wrapper-height",
@ -192,7 +199,7 @@ function resize_navbar_alerts() {
}
}
export function resize_page_components() {
export function resize_page_components(): void {
resize_navbar_alerts();
resize_sidebars();
resize_bottom_whitespace();

4
web/styles/zulip.css
View File

@ -151,7 +151,7 @@ body {
--browser-overlay-scrollbar-width: 10px;
/* This is a rough estimate for height occupied by Recent Conversations filters.
We expect `resize.js` to update this once UI is initialized. */
We expect `resize.ts` to update this once UI is initialized. */
--recent-topics-filters-height: 50px;
/* Overlay heights for streams modal */
@ -166,7 +166,7 @@ body {
/*
Maximum height of the compose box when it is not in expanded state. This
is equal to the height of `#bottom_whitespace`. We expect resize.js to
is equal to the height of `#bottom_whitespace`. We expect resize.ts to
replace it with its pixel calculation since even if `vh` has great support,
it can change depending on browser / OS on mobile devices.
*/