From 63c1c9a37a5f9bd9883b16dcc33e6307047401a3 Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Tue, 10 Oct 2023 11:31:16 +0000 Subject: [PATCH] overlays: Extract enable / disable scrolling to a util module. --- tools/test-js-with-node | 1 + web/src/overlay_util.ts | 15 +++++++++++++++ web/src/overlays.ts | 23 +++++------------------ 3 files changed, 21 insertions(+), 18 deletions(-) create mode 100644 web/src/overlay_util.ts diff --git a/tools/test-js-with-node b/tools/test-js-with-node index 2da6eafff9..79d0145926 100755 --- a/tools/test-js-with-node +++ b/tools/test-js-with-node @@ -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", diff --git a/web/src/overlay_util.ts b/web/src/overlay_util.ts new file mode 100644 index 0000000000..ee5580c771 --- /dev/null +++ b/web/src/overlay_util.ts @@ -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"}); +} diff --git a/web/src/overlays.ts b/web/src/overlays.ts index 426ff2b118..49847c3290 100644 --- a/web/src/overlays.ts +++ b/web/src/overlays.ts @@ -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 {