paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-27 18:13:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

ts: Migrate scroll_util.js to TypeScript.

Browse Source 
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
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.js",
"web/src/scheduled_messages_overlay_ui.js", "web/src/scheduled_messages_overlay_ui.js",
"web/src/scroll_bar.ts", "web/src/scroll_bar.ts",
"web/src/scroll_util.js", "web/src/scroll_util.ts",
"web/src/search_pill_widget.js", "web/src/search_pill_widget.js",
"web/src/sent_messages.js", "web/src/sent_messages.js",
"web/src/sentry.ts", "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 $ from "jquery";
import SimpleBar from "simplebar"; 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 element = $element.expectOne()[0];
const sb = SimpleBar.instances.get(element); const sb = SimpleBar.instances.get(element);
if (sb) { if (sb) {
@@ -10,9 +13,9 @@ export function get_content_element($element) {
return $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. // For testing we just return the element itself.
if ($element && $element.__zjquery) { if ($element?.__zjquery) {
return $element; return $element;
} }
@@ -23,12 +26,12 @@ export function get_scroll_element($element) {
} else if ("simplebar" in element.dataset) { } else if ("simplebar" in element.dataset) {
// The SimpleBar mutation observer hasn’t processed this element yet. // The SimpleBar mutation observer hasn’t processed this element yet.
// Create the SimpleBar early in case we need to add event listeners. // Create the SimpleBar early in case we need to add event listeners.
return $(new SimpleBar(element).getScrollElement()); return $(new SimpleBar(element).getScrollElement()!);
} }
return $element; return $element;
} }
export function reset_scrollbar($element) { export function reset_scrollbar($element: JQuery): void {
const element = $element.expectOne()[0]; const element = $element.expectOne()[0];
const sb = SimpleBar.instances.get(element); const sb = SimpleBar.instances.get(element);
if (sb) { 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 elem_top = opts.elem_top;
const container_height = opts.container_height; const container_height = opts.container_height;
const elem_bottom = opts.elem_bottom; const elem_bottom = opts.elem_bottom;
@@ -58,16 +65,19 @@ export function scroll_delta(opts) {
return delta; 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 // This does the minimum amount of scrolling that is needed to make
// the element visible. It doesn't try to center the element, so // the element visible. It doesn't try to center the element, so
// this will be non-intrusive to users when they already have // this will be non-intrusive to users when they already have
// the element visible. // the element visible.
$container = get_scroll_element($container); $container = get_scroll_element($container);
const elem_top = $elem.position().top - sticky_header_height; const elem_top = $elem.position().top - sticky_header_height;
const elem_bottom = elem_top + $elem.innerHeight(); const elem_bottom = elem_top + ($elem.innerHeight() ?? 0);
const container_height = $container.height() - sticky_header_height; const container_height = ($container.height() ?? 0) - sticky_header_height;
const opts = { const opts = {
elem_top, elem_top,
@@ -81,5 +91,5 @@ export function scroll_element_into_container($elem, $container, sticky_header_h
return; return;
} }
$container.scrollTop($container.scrollTop() + delta); $container.scrollTop(($container.scrollTop() ?? 0) + delta);
} }