-
-
Notifications
You must be signed in to change notification settings - Fork 29
/
index.html
271 lines (247 loc) · 10.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dock-spawn-ts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="./page/assets/bootstrap.min.css">
<link rel="stylesheet" href="./page/assets/dock-spawn.css">
<style>
body {
padding-top: 60px;
}
</style>
<link rel="stylesheet" href="./page/assets/bootstrap-responsive.css">
<!-- Syntax Highlight -->
<link type="text/css" rel="stylesheet" href="./page/assets/sh_neon.min.css">
<script type="text/javascript" src="./page/assets/sh_main.min.js"></script>
<script type="text/javascript" src="./page/assets/sh_javascript.min.js"></script>
<body onload="sh_highlightDocument();">
<div id="navbar" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="https://node-projects.github.io/dock-spawn-ts/#">Dock Spawn TS</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="https://node-projects.github.io/dock-spawn-ts/#">Home</a></li>
<li><a href="https://github.com/node-projects/dock-spawn-ts/zipball/master">Download</a></li>
<li>
<a href="https://node-projects.github.io/dock-spawn-ts/#demos">Demo</a>
</li>
<li><a href="https://node-projects.github.io/dock-spawn-ts/#integration">Integration</a></li>
<li><a href="https://github.com/node-projects/dock-spawn-ts/issues">Support</a></li>
<li><a href="https://node-projects.github.io/dock-spawn-ts/#license">License</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<div class="row">
<div class="span5">
<h1>Dock Spawn TS</h1>
<p>
<span style="color: yellow">Dock Spawn TS is a Typescript fork of Dock Spawn, a Docking Framework for HTML.
It was originaly developed by <a href="https://github.com/coderespawn">https://github.com/coderespawn</a></span>
<br><br>
Dock Spawn is a web based dock layout engine that aids in creating flexible user interfaces by enabling
panels to be docked on the screen similar to Visual Studio IDE
</p>
<p>
<a class="btn btn-info btn-large" href="https://node-projects.github.io/dock-spawn-ts/#demos">View Demo</a>
<a class="btn btn-info btn-large" href="https://github.com/node-projects/dock-spawn-ts">View on GitHub</a>
</p></div>
<div class="span5">
<!-- Image gallery -->
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<img src="./page/assets/ide.png">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span4">
<h2>Docking</h2>
<p>Create complex layout through code or during runtime by docking panels on the screen.</p>
</div>
<div class="span4">
<h2>Floating Dialogs</h2>
<p>Create floating dialog boxes by undocking a panel. Floating dialog boxes could be dragged/resized</p>
</div>
<div class="span4">
<h2>Tabbed Panels</h2>
<p>Dock panels within other existing panels to place them in a tab control. Tabs can be undocked back into floating dialogs</p>
</div>
</div>
<div id="demos"></div>
<!-- Demos sub-section -->
<hr>
<br>
<h1>Demos</h1>
<div class="row">
<br>
<div class="span1"> </div>
<div class="span6">
<h2>Integrated Development Environment</h2>
<p>The sample demonstrates an IDE user interface.</p>
<a href="./page/demo/ide/demo.html" class="btn btn-primary btn-large">Launch</a>
<br><br>
<h2>Two Dock Spawn Containers</h2>
<p>The sample demonstrates the usage of two independet DockSpawn instances.</p>
<a href="./page/demo/demo_2.html" class="btn btn-primary btn-large">Launch</a>
</div>
</div>
<div id="integration"></div>
<!-- Integration sub-section -->
<hr>
<br>
<h1>Integration</h1>
<div class="row">
<br>
<div class="span6">
<p>Dock Spawn TS is written in <a href="https://www.typescriptlang.org/">Typescript.</a>
Start by importing the dock-spawn library into your project
</p><p></p>
<pre class="sh_javascript sh_sourceCode">
import { DockManager } from "./js/DockManager.js";
import { PanelContainer } from "./js/PanelContainer.js";
import { PanelType } from "./js/enums/PanelContainerType.js";
</pre>
<p>
Create a dock manager DIV element in the html page. This div would be converted to a dock manager,
which would enable panels to be docked on to it. There is no restriction on the size of this div.
It could take up the entire screen or have a fixed size
</p><p></p>
<pre class="sh_javascript sh_sourceCode">
let dockManager = new DockManager(document.getElementById('my_dock_manager'));
dockManager.initialize();
</pre>
<p>
Existing elements in the DOM can be converted to <em>Dock Panels</em> which would enable them
to be docked on to the dock manager created above. A dock panel wraps the provided content element
around a frame with a title bar and a close button.
<br><br>
You can also provide some options in a config object as a second parameter to the DockManager constructor.
<ul>
<li><b>escClosesWindow</b> - Escape Key closes Dialogs (default: true)</li>
<li><b>dialogRootElement</b> - Wich element should be used as root for dialogs (default: document.body)</li>
<li><b>moveOnlyWithinDockConatiner</b> - Move Dialogs only within DockSpawn root elment (default: false)</li>
</ul>
</p>
<p>
There are 2 different types for PanelContainer. "document" and "panel".
</p>
<p></p>
<pre class="sh_javascript sh_sourceCode">
let editor1 = new PanelContainer(document.getElementById("editor_div"), dockManager, null, PanelType.document);
let toolbox = new PanelContainer(document.getElementById("toolbox_div"), dockManager, null, PanelType.panel);
// ...
</pre>
<p>Now that the panels are created, dock them on the <em>dock manager</em>. Initially, the dock manager
contains a docked view, called the <em>Document Manager</em> which is the central area of the dock manager.
Get a reference to the document manager node
</p><p></p>
<pre class="sh_javascript sh_sourceCode">
let documentNode = dockManager.context.model.documentManagerNode;
</pre>
<p>Using this as a point of reference, lets dock the Solution Explorer to the left, taking up 20% of the space
</p><p></p>
<pre class="sh_javascript sh_sourceCode">
let solutionNode = dockManager.dockLeft(documentNode, solution, 0.20);
</pre>
<p>Dock the outline node inside the Solution Explorer (fill mode) to create a tabbed interface with these two panels
</p><p></p>
<pre class="sh_javascript sh_sourceCode">
let outlineNode = dockManager.dockFill(solutionNode, outline);
</pre>
<p>Notice the first argument in dockFill method is solutionNode, indicating that this is relative to the Solution Explorer.
This way, a dock hierarchy of arbitrary complexity can be created.
</p><p></p>
<pre class="sh_javascript sh_sourceCode">
let editor1Node = dockManager.dockFill(documentNode, editor1);
</pre>
Its a good idea to dock dominant panels (e.g. the Editor panel in an IDE) in the <em>Document Node</em> with fill mode
so that the documents are displayed as tabs in the document manager
<p>During runtime, dock panels can be undocked from their positions into floating dialog boxes, which can be dragged/resized
and docked in another location</p>
<p></p>
<p>You can also create dialogs directly from PanelContainers. This will create a Dialog at x:50 and y:70</p>
<pre class="sh_javascript sh_sourceCode">
dockManager.floatDialog(infovis, 50, 70);
</pre>
</div>
<div class="span6">
<pre class="sh_javascript sh_sourceCode">
// Convert a div to the dock manager. Panels can then be docked on to it
let divDockContainer = document.getElementById('dock_div');
let divDockManager = document.getElementById('my_dock_manager');
dockManager = new DockManager(divDockManager);
dockManager.initialize();
// Let the dock manager element fill in the entire screen
window.onresize = () => {
dockManager.resize(
divDockContainer.clientWidth,
divDockContainer.clientHeight
);
};
window.onresize(null);
// Convert existing elements on the page into "Panels".
// They can then be docked on to the dock manager
// Panels get a titlebar and a close button, and can also be
// converted to a floating dialog box which can be dragged / resized
let solution = new PanelContainer(document.getElementById("solution_window"), dockManager);
let properties = new PanelContainer(document.getElementById("properties_window"), dockManager);
let toolbox = new PanelContainer(document.getElementById("toolbox_window"), dockManager);
let outline = new PanelContainer(document.getElementById("outline_window"), dockManager);
let state = new PanelContainer(document.getElementById("state_window"), dockManager);
let output = new PanelContainer(document.getElementById("output_window"), dockManager);
let editor1 = new PanelContainer(document.getElementById("editor1_window"), dockManager, null, PanelType.document);
let editor2 = new PanelContainer(document.getElementById("editor2_window"), dockManager, null, PanelType.document);
editor2.hideCloseButton(true);
let infovis = new PanelContainer(document.getElementById("infovis"), dockManager); // invisible Dialog has no size, so size it manually
infovis.width = 600;
infovis.height = 400;
// Dock the panels on the dock manager
let documentNode = dockManager.context.model.documentManagerNode;
let outlineNode = dockManager.dockLeft(documentNode, outline, 0.15);
dockManager.dockFill(outlineNode, solution);
dockManager.dockDown(outlineNode, properties, 0.6);
let outputNode = dockManager.dockDown(documentNode, output, 0.2);
dockManager.dockRight(outputNode, state, 0.40);
dockManager.dockRight(documentNode, toolbox, 0.20);
dockManager.dockFill(documentNode, editor1);
dockManager.dockFill(documentNode, editor2);
dockManager.floatDialog(infovis, 50, 50);
</pre>
</div>
</div>
<!-- License sub-section -->
<div id="license"></div>
<hr>
<br>
<h1>License</h1>
<div class="row">
<br>
<div class="span8">
Dock Spawn TS is an open source software released under the MIT License. Refer
<a href="https://github.com/coderespawn/dock-spawn/blob/master/MIT-LICENSE.txt">
MIT-License.txt
</a> for more details
</div>
</div>
<hr>
<footer>
<p>© <a href="https://github.com/node-projects">node projects</a> 2019</p>
</footer>
</div>
</body></html>