Archived
1
0
This repository has been archived on 2024-09-09. You can view files and clone it, but cannot push or open issues or pull requests.
code-server/test/ui/splitview/public/index.html
Joe Previte be3e823608 Squashed 'lib/vscode/' content from commit e5a624b788
git-subtree-dir: lib/vscode
git-subtree-split: e5a624b788d92b8d34d1392e4c4d9789406efe8f
2020-12-15 15:52:33 -07:00

261 lines
7.0 KiB
HTML

<html>
<head>
<meta charset="utf-8">
<title>Splitview</title>
<style>
#container {
width: 800px;
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: 20px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="buttons"></div>
<div id="container"></div>
<script src="/static/vs/loader.js"></script>
<script>
require.config({ baseUrl: '/static' });
const params = location.search.split(/[?&]/);
const testGrid = params.findIndex(p => p === 'grid') >= 0;
const testDeserialization = params.findIndex(p => p === 'deserialize') >= 0;
if (testGrid) {
require(['vs/base/browser/ui/grid/grid', 'vs/base/common/event'], ({ Grid, Sizing, Direction, SerializableGrid }, { Event }) => {
const buttons = document.getElementById('buttons');
let grid;
class View {
static ID = 0;
constructor(label, minimumWidth, maximumWidth, minimumHeight, maximumHeight, snap) {
this.id = View.ID++;
this.label = label;
this.minimumWidth = minimumWidth;
this.maximumWidth = maximumWidth;
this.minimumHeight = minimumHeight;
this.maximumHeight = maximumHeight;
this.snap = snap;
this.onDidChange = Event.None;
this.element = document.createElement('div');
this.element.className = 'view';
this.element.style.backgroundColor = `hsl(${(this.id * 41) % 360}, 50%, 70%)`;
this.element.textContent = this.label;
this.button = document.createElement('button');
this.button.onclick = () => grid.setViewVisible(this, !grid.isViewVisible(this));
buttons.appendChild(this.button);
this.setVisible(true);
}
layout(width, height, top, left) {
this.element.innerHTML = `(${top}, ${left})<br />(${width}, ${height})`;
}
setVisible(visible) {
this.button.textContent = visible ? `hide ${this.label}` : `show ${this.label}`;
}
}
const editor = new View('editor', 200, Number.POSITIVE_INFINITY, 200, Number.POSITIVE_INFINITY);
const statusbar = new View('status', 0, Number.POSITIVE_INFINITY, 20, 20);
const activitybar = new View('activity', 50, 50, 0, Number.POSITIVE_INFINITY);
const sidebar = new View('sidebar', 200, Number.POSITIVE_INFINITY, 0, Number.POSITIVE_INFINITY, true);
const panel = new View('panel', 0, Number.POSITIVE_INFINITY, 200, Number.POSITIVE_INFINITY, true);
if (testDeserialization) {
const viewMap = {
['activitybar']: activitybar,
['editor']: editor,
['panel']: panel,
['sidebar']: sidebar,
['statusbar']: statusbar
};
const gridViewDescriptor = {
root: {
type: 'branch',
size: 800,
data: [
{
type: 'branch',
size: 580,
data: [
{
type: 'leaf',
size: activitybar.maximumWidth,
data: { type: 'activitybar' },
visible: true
},
{
type: 'leaf',
size: 200,
data: { type: 'sidebar' },
visible: true
},
{
type: 'branch',
size: 550,
data: [
{
type: 'leaf',
size: 380,
data: { type: 'editor' },
visible: true
},
{
type: 'leaf',
size: 200,
data: { type: 'panel' },
visible: true
}
]
}
]
},
{
type: 'leaf',
size: statusbar.maximumHeight,
data: { type: "statusbar" },
visible: true
}
]
},
orientation: 0,
width: 800,
height: 600
};
const fromJSON = ({ type }) => viewMap[type];
grid = SerializableGrid.deserialize(
gridViewDescriptor,
{ fromJSON },
{ proportionalLayout: false }
);
container.appendChild(grid.element);
grid.layout(800, 600);
} else {
grid = new Grid(editor, {});
const container = document.getElementById('container');
container.appendChild(grid.element);
grid.layout(800, 600);
grid.addView(statusbar, Sizing.Distribute, editor, Direction.Down);
grid.addView(activitybar, Sizing.Distribute, editor, Direction.Left);
grid.addView(sidebar, 250, editor, Direction.Left);
grid.addView(panel, 200, editor, Direction.Down);
}
});
}
else {
require(['vs/base/browser/ui/splitview/splitview', 'vs/base/common/event'], ({ SplitView, Sizing }, { Event }) => {
const buttons = document.getElementById('buttons');
let splitview;
class View {
static ID = 0;
constructor(minimumSize, maximumSize) {
this.id = View.ID++;
this.element = document.createElement('div');
this.element.className = 'view';
this.element.style.backgroundColor = `hsl(${(this.id * 41) % 360}, 50%, 70%)`;
this.element.textContent = `${this.id}`;
this.minimumSize = typeof minimumSize === 'number' ? minimumSize : 100;
this.maximumSize = typeof maximumSize === 'number' ? maximumSize : Number.POSITIVE_INFINITY;
this.onDidChange = Event.None;
this.snap = !minimumSize && !maximumSize;
this.button = document.createElement('button');
this.button.onclick = () => splitview.setViewVisible(this.id, !splitview.isViewVisible(this.id));
buttons.appendChild(this.button);
this.setVisible(true);
}
layout(size, orientation) {
this.element.style.lineHeight = `${size}px`;
}
setVisible(visible) {
this.button.textContent = visible ? `hide ${this.id}` : `show ${this.id}`;
}
}
const container = document.getElementById('container');
const views = [new View(100, 100), new View(), new View(), new View(), new View()];
if (testDeserialization) {
const splitViewDescriptor = {
views: [
{
view: views[0],
size: 100,
visible: true
},
{
view: views[1],
size: 100,
visible: false
},
{
view: views[2],
size: 100,
visible: true
},
{
view: views[3],
size: 200,
visible: true
},
{
view: views[4],
size: 200,
visible: true
}
]
};
splitview = new SplitView(container, { descriptor: splitViewDescriptor, orientation: 0 });
splitview.layout(600);
} else {
// Create a new split view from scratch
splitview = new SplitView(container, {});
splitview.layout(600);
splitview.addView(views[0], Sizing.Distribute);
splitview.addView(views[1], Sizing.Distribute);
splitview.addView(views[2], Sizing.Distribute);
splitview.addView(views[3], Sizing.Distribute);
splitview.addView(views[4], Sizing.Distribute);
}
});
}
</script>
</body>
</html>