ts: Migrate scroll_bar.js to typescript.

Remove the winjs specific `getScrollbarWidth` property while we're at it; 
WinJS isn't relevant anymore.

Reorders methods due to TypeScript files enforcing define-before-use when
this commit was drafted.
This commit is contained in:
Adarsh Tiwari 2023-04-02 00:13:58 +05:30 committed by GitHub
parent 6199be39da
commit eed6f67fca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 13 deletions

View File

@ -144,7 +144,7 @@ EXEMPT_FILES = make_set(
"web/src/reminder.js",
"web/src/resize.js",
"web/src/rows.js",
"web/src/scroll_bar.js",
"web/src/scroll_bar.ts",
"web/src/search_pill_widget.js",
"web/src/sent_messages.js",
"web/src/sentry.ts",

View File

@ -9,11 +9,10 @@ import {user_settings} from "./user_settings";
// number of element widths based on the value detected here.
//
// From https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript
function getScrollbarWidth() {
function getScrollbarWidth(): number {
const outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.append(outer);
@ -34,9 +33,17 @@ function getScrollbarWidth() {
return widthNoScroll - widthWithScroll;
}
let sbWidth;
export function set_layout_width(): void {
if (user_settings.fluid_layout_width) {
$(".header-main, .app .app-main, #compose-container").css("max-width", "inherit");
} else {
$(".header-main, .app .app-main, #compose-container").css("max-width", "1400px");
}
}
export function initialize() {
let sbWidth: number;
export function initialize(): void {
// Workaround for browsers with fixed scrollbars
sbWidth = getScrollbarWidth();
if (sbWidth > 0) {
@ -45,11 +52,3 @@ export function initialize() {
}
set_layout_width();
}
export function set_layout_width() {
if (user_settings.fluid_layout_width) {
$(".header-main, .app .app-main, #compose-container").css("max-width", "inherit");
} else {
$(".header-main, .app .app-main, #compose-container").css("max-width", "1400px");
}
}