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

ts: Migrate `scroll_util.js` to TypeScript. 

This commit migrates `scroll_util.js` to typescript. I made a helper
type `JQueryOrZJQuery` for the argument of `get_scroll_element` instead
of adding a `__zjquery` property to the global JQuery object because it
isn't being used anywhere outside of this function and hence it makes
sense to have a little helper type than to add the property to the global
object.
This commit is contained in:
Lalit 2023-04-27 09:14:27 +05:30 committed by Tim Abbott
parent b6aa004334
commit c7b8f0658b
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -149,7 +149,7 @@ EXEMPT_FILES = make_set(
"web/src/scheduled_messages.js",
"web/src/scheduled_messages_overlay_ui.js",
"web/src/scroll_bar.ts",
"web/src/scroll_util.js",
"web/src/scroll_util.ts",
"web/src/search_pill_widget.js",
"web/src/sent_messages.js",
"web/src/sentry.ts",

32
web/src/scroll_util.js → web/src/scroll_util.ts
View File

@ -1,7 +1,10 @@
import $ from "jquery";
import SimpleBar from "simplebar";
export function get_content_element($element) {
// This type is helpful for testing, where we may have a dummy object instead of an actual jquery object.
type JQueryOrZJQuery = {__zjquery?: true} & JQuery;
export function get_content_element($element: JQuery): JQuery {
const element = $element.expectOne()[0];
const sb = SimpleBar.instances.get(element);
if (sb) {
@ -10,9 +13,9 @@ export function get_content_element($element) {
return $element;
}
export function get_scroll_element($element) {
export function get_scroll_element($element: JQueryOrZJQuery): JQuery {
// For testing we just return the element itself.
if ($element && $element.__zjquery) {
if ($element?.__zjquery) {
return $element;
}
@ -23,12 +26,12 @@ export function get_scroll_element($element) {
} else if ("simplebar" in element.dataset) {
// The SimpleBar mutation observer hasn’t processed this element yet.
// Create the SimpleBar early in case we need to add event listeners.
return $(new SimpleBar(element).getScrollElement());
return $(new SimpleBar(element).getScrollElement()!);
}
return $element;
}
export function reset_scrollbar($element) {
export function reset_scrollbar($element: JQuery): void {
const element = $element.expectOne()[0];
const sb = SimpleBar.instances.get(element);
if (sb) {
@ -38,7 +41,11 @@ export function reset_scrollbar($element) {
}
}
export function scroll_delta(opts) {
export function scroll_delta(opts: {
elem_top: number;
elem_bottom: number;
container_height: number;
}): number {
const elem_top = opts.elem_top;
const container_height = opts.container_height;
const elem_bottom = opts.elem_bottom;
@ -58,16 +65,19 @@ export function scroll_delta(opts) {
return delta;
}
export function scroll_element_into_container($elem, $container, sticky_header_height = 0) {
export function scroll_element_into_container(
$elem: JQuery,
$container: JQuery,
sticky_header_height = 0,
): void {
// This does the minimum amount of scrolling that is needed to make
// the element visible. It doesn't try to center the element, so
// this will be non-intrusive to users when they already have
// the element visible.
$container = get_scroll_element($container);
const elem_top = $elem.position().top - sticky_header_height;
const elem_bottom = elem_top + $elem.innerHeight();
const container_height = $container.height() - sticky_header_height;
const elem_bottom = elem_top + ($elem.innerHeight() ?? 0);
const container_height = ($container.height() ?? 0) - sticky_header_height;
const opts = {
elem_top,
@ -81,5 +91,5 @@ export function scroll_element_into_container($elem, $container, sticky_header_h
return;
}
$container.scrollTop($container.scrollTop() + delta);
$container.scrollTop(($container.scrollTop() ?? 0) + delta);
}