Fix scroll jank when loading demo page

1j01 · Sep 4, 2021 · 73827e9 · 73827e9
1 parent 21983f0
commit 73827e9
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,6 +7,7 @@
 		"haha",
 		"Hilight",
 		"iframes",
+		"jank",
 		"janky",
 		"jspaint",
 		"LOGFONTW",

diff --git a/demo/demo.js b/demo/demo.js
@@ -63,7 +63,7 @@ $(()=> {
 	$menubar.appendTo("#menubar-example");
 
 	var $app_window_1 = new $Window({title: "Application Window", resizable: true});
-	$app_window_1.$content.append($("#app-window-example-content"));
+	$app_window_1.$content.append($("#app-window-example-content").attr("hidden", null));
 
 	$app_window_1.$Button("Open Another Window", ()=> {
 		var $new_window = new $Window({title: "Testing, Testing, 123"});
@@ -74,7 +74,7 @@ $(()=> {
 	});
 
 	var $tool_window_1 = new $Window({ title: "Tool Window", toolWindow: true });
-	$tool_window_1.$content.append($("#tool-window-example-content"));
+	$tool_window_1.$content.append($("#tool-window-example-content").attr("hidden", null));
 	$tool_window_1.on("close", (event) => {
 		event.preventDefault();
 	});
@@ -196,4 +196,18 @@ InfoWindow=255 255 225
 		// });
 	}
 
+	// Users of library: DON'T WORRY ABOUT THIS STUFF
+	// This is just for the demo page, to prevent scroll jank when loading the page.
+	// This is only needed because of all the dynamic content that is interspersed with text.
+	// Usually you would have floating windows, that aren't trying to also fit into a document.
+	let static_styles = "";
+	for (selector of window_list.map(([, el_id]) => `#${el_id}`).concat([
+		"#scrollbar-demos",
+		"#menubar-example",
+	])) {
+		const el = $(selector)[0];
+		static_styles += `${selector} { width: ${el.offsetWidth}px; height: ${el.offsetHeight}px; }\n`;
+	}
+	window.static_styles = static_styles; // export these static styles to the demo's HTML (manually)
+
 });
diff --git a/demo/index.html b/demo/index.html
@@ -84,8 +84,19 @@
 			}
 
 			body {
-				overflow: scroll;
+				overflow: scroll; /* show off the custom scrollbars :) */
 			}
+
+			/*
+			These styles are generated by demo.js, exported via window.static_styles,
+			in order to reduce jank when the demo is loaded.
+			*/
+			#app-window-example { width: 200px; height: 135px; }
+			#tool-window-example { width: 195px; height: 107px; }
+			#app-window-2-positioner { width: 227px; height: 231px; }
+			#tool-window-2-positioner { width: 218px; height: 95px; }
+			#scrollbar-demos { width: 1240px; height: 557px; }
+			#menubar-example { width: 1240px; height: 21px; }
 		</style>
 	</head>
 	<body>
@@ -97,7 +108,7 @@
 		<main>
 			<h1>os-gui.js</h1>
 			<h2>Scrollbars</h2>
-			<div>
+			<div id="scrollbar-demos">
 				<div class="scrollbar-demo">
 					<div class="scrollbar-button decrement horizontal" style="display: inline-block;"></div><div class="scrollbar-button increment horizontal" style="display: inline-block;"></div>
 					<div class="scrollbar-button decrement vertical"></div>
@@ -125,14 +136,14 @@ <h2>MenuBar</h2>
 			<h2>Application Window</h2>
 			<div>
 				<div id="app-window-example"></div>
-				<div id="app-window-example-content">
+				<div id="app-window-example-content" hidden>
 					<p>Hello World!</p>
 				</div>
 			</div>
 			<h2>Tool Window</h2>
 			<div>
 				<div id="tool-window-example"></div>
-				<div id="tool-window-example-content">
+				<div id="tool-window-example-content" hidden>
 					<p>I am a tool window.</p>
 				</div>
 			</div>