splitview: visibility

2026-04-24 10:38:59 +01:00 · 2019-07-10 12:06:14 +02:00
parent f857d0456d
commit a861b8bfd2
6 changed files with 508 additions and 8 deletions
--- a/test/splitview/public/index.html
+++ b/test/splitview/public/index.html
@@ -0,0 +1,73 @@
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<title>SplitView</title>
+	<style>
+		#container {
+			width: 400px;
+			height: 600px;
+			border: 1px solid black;
+		}
+
+		.view {
+			width: 100%;
+			height: 100%;
+			text-align: center;
+			vertical-align: middle;
+			color: white;
+			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+			font-weight: bold;
+			font-size: 40px;
+		}
+	</style>
+</head>
+
+<body>
+	<div id="container"></div>
+
+	<script src="/static/vs/loader.js"></script>
+	<script>
+		require.config({ baseUrl: '/static' });
+
+		const rand = (min, max) => min + Math.random() * (max - min);
+
+		require(['vs/base/browser/ui/splitview/splitview', 'vs/base/common/event'], ({ SplitView, Sizing }, { Event }) => {
+			class View {
+				static ID = 0;
+
+				constructor() {
+					this.element = document.createElement('div');
+					this.element.className = 'view';
+					this.element.style.backgroundColor = `hsl(${rand(1, 360)}, 50%, 70%)`;
+					this.element.textContent = `${View.ID++}`;
+					this.minimumSize = 100;
+					this.maximumSize = Number.POSITIVE_INFINITY;
+					this.onDidChange = Event.None;
+					this.snap = true;
+				}
+
+				layout(size, orientation) {
+					this.element.style.lineHeight = `${size}px`;
+				}
+			}
+
+			const container = document.getElementById('container');
+			const splitview = new SplitView(container, {});
+			splitview.layout(600);
+
+			const view1 = new View();
+			const view2 = new View();
+			const view3 = new View();
+
+			splitview.addView(view1, Sizing.Distribute);
+			splitview.addView(view2, Sizing.Distribute);
+			splitview.addView(view3, Sizing.Distribute);
+
+			const index = 2;
+			setInterval(() => splitview.setViewVisible(index, !splitview.isViewVisible(index)), 1000);
+		});
+	</script>
+</body>
+
+</html>