paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
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/narrow_title.js",
"web/src/navbar_alerts.js", "web/src/navbar_alerts.js",
"web/src/navigate.js", "web/src/navigate.js",
"web/src/overlay_util.ts",
"web/src/overlays.ts", "web/src/overlays.ts",
"web/src/padded_widget.ts", "web/src/padded_widget.ts",
"web/src/page_params.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 Micromodal from "micromodal";
import * as blueslip from "./blueslip"; import * as blueslip from "./blueslip";
import * as overlay_util from "./overlay_util";
type Hook = () => void; 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 { export function is_active(): boolean {
return Boolean(open_overlay_name); 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.addClass("show");
opts.$overlay.attr("aria-hidden", "false"); opts.$overlay.attr("aria-hidden", "false");
$(".app").attr("aria-hidden", "true"); $(".app").attr("aria-hidden", "true");
@@ -263,7 +250,7 @@ export function open_modal(
if (conf.on_show) { if (conf.on_show) {
conf.on_show(); conf.on_show();
} }
disable_scrolling(); overlay_util.disable_scrolling();
call_hooks(pre_open_hooks); call_hooks(pre_open_hooks);
} }
@@ -271,7 +258,7 @@ export function open_modal(
if (conf.on_hide) { if (conf.on_hide) {
conf.on_hide(); conf.on_hide();
} }
enable_scrolling(); overlay_util.enable_scrolling();
call_hooks(pre_close_hooks); call_hooks(pre_close_hooks);
} }
@@ -309,7 +296,7 @@ export function close_overlay(name: string): void {
$("#navbar-fixed-container").attr("aria-hidden", "false"); $("#navbar-fixed-container").attr("aria-hidden", "false");
active_overlay.close_handler(); active_overlay.close_handler();
enable_scrolling(); overlay_util.enable_scrolling();
} }
export function close_active(): void { export function close_active(): void {