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

overlays: Extract enable / disable scrolling to a util module.

This commit is contained in:
Aman Agrawal 2023-10-10 11:31:16 +00:00 committed by Tim Abbott
parent 065420853f
commit 63c1c9a37a
3 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -150,6 +150,7 @@ EXEMPT_FILES = make_set(
"web/src/narrow_title.js",
"web/src/navbar_alerts.js",
"web/src/navigate.js",
"web/src/overlay_util.ts",
"web/src/overlays.ts",
"web/src/padded_widget.ts",
"web/src/page_params.ts",

15
web/src/overlay_util.ts Normal file
View File

@ -0,0 +1,15 @@
import $ from "jquery";
export function disable_scrolling(): void {
// Why disable scrolling?
// Since fixed / absolute positioned elements don't capture the scroll event unless
// they overflow their defined container. Since fixed / absolute elements are not treated
// as part of the document flow, we cannot capture `scroll` events on them and prevent propagation
// as event bubbling doesn't work naturally.
const scrollbar_width = window.innerWidth - document.documentElement.clientWidth;
$("html").css({"overflow-y": "hidden", "--disabled-scrollbar-width": `${scrollbar_width}px`});
}
export function enable_scrolling(): void {
$("html").css({"overflow-y": "scroll", "--disabled-scrollbar-width": "0px"});
}

23
web/src/overlays.ts
View File

@ -2,6 +2,7 @@ import $ from "jquery";
import Micromodal from "micromodal";
import * as blueslip from "./blueslip";
import * as overlay_util from "./overlay_util";
type Hook = () => void;
@ -52,20 +53,6 @@ function call_hooks(func_list: Hook[]): void {
}
}
export function disable_scrolling(): void {
// Why disable scrolling?
// Since fixed / absolute positioned elements don't capture the scroll event unless
// they overflow their defined container. Since fixed / absolute elements are not treated
// as part of the document flow, we cannot capture `scroll` events on them and prevent propagation
// as event bubbling doesn't work naturally.
const scrollbar_width = window.innerWidth - document.documentElement.clientWidth;
$("html").css({"overflow-y": "hidden", "--disabled-scrollbar-width": `${scrollbar_width}px`});
}
function enable_scrolling(): void {
$("html").css({"overflow-y": "scroll", "--disabled-scrollbar-width": "0px"});
}
export function is_active(): boolean {
return Boolean(open_overlay_name);
}
@ -151,7 +138,7 @@ export function open_overlay(opts: OverlayOptions): void {
},
};
disable_scrolling();
overlay_util.disable_scrolling();
opts.$overlay.addClass("show");
opts.$overlay.attr("aria-hidden", "false");
$(".app").attr("aria-hidden", "true");
@ -263,7 +250,7 @@ export function open_modal(
if (conf.on_show) {
conf.on_show();
}
disable_scrolling();
overlay_util.disable_scrolling();
call_hooks(pre_open_hooks);
}
@ -271,7 +258,7 @@ export function open_modal(
if (conf.on_hide) {
conf.on_hide();
}
enable_scrolling();
overlay_util.enable_scrolling();
call_hooks(pre_close_hooks);
}
@ -309,7 +296,7 @@ export function close_overlay(name: string): void {
$("#navbar-fixed-container").attr("aria-hidden", "false");
active_overlay.close_handler();
enable_scrolling();
overlay_util.enable_scrolling();
}
export function close_active(): void {