-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
executable file
·121 lines (109 loc) · 3.57 KB
/
index.htm
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Blockstar File Manager</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="event.js"></script>
<script src="drag.js"></script>
<script src="node.js"></script>
<script src="block.js"></script>
<script src="splitter.js"></script>
<script src="resizer.js"></script>
<script src="container.js"></script>
</head>
<body>
<div style="padding: 2px; border: 3px solid #999; float: left;">
<div id="container"></div>
</div>
<br style="clear: both;" />
<form id="form">
<input type="button" value="Split V" onclick="if(layout.selected) layout.selected.split(true);" />
<input type="button" value="Split H" onclick="if(layout.selected) layout.selected.split(false);" />
<input type="button" value="Remove" onclick="if(layout.selected) layout.selected.remove();" />
<br /><textarea name="log" rows="10" cols="80"></textarea>
</form>
<script>
data = {
"data": {
"name": "Family Layout",
"short_name": "family2005"
},
"width": 1250,
"height": 975,
"root": {
"type": 2,
"width": 1250,
"height": 975,
"parent": "",
"split_id": 56053,
"position": 1,
"align": "",
"valign": "",
"size_is_percentage": 0,
"children": [
{
"type": 0,
"width": 234,
"height": 975,
"parent": 56053,
"split_id": 56054,
"position": 1,
"align": "",
"valign": "",
"size_is_percentage": 0,
"children": []
},
{
"type": 0,
"width": 1016,
"height": 975,
"parent": 56053,
"split_id": 56055,
"position": 2,
"align": "",
"valign": "",
"size_is_percentage": 0,
"children": []
}
]
}
};
var layout = new Container(document.getElementById("container")), f = document.forms.form;
layout.onselect = function(block){
f.log.value += "\nBlock #" + block.id + "(id=" + (block.data ? block.data.splitId : "") + "): selected";
block.element.className = "selected block";
};
layout.onunselect = function(block){
f.log.value += "\nBlock #" + block.id + "(id=" + (block.data ? block.data.splitId : "") + "): unselected";
block.element.className = "unselected block";
};
layout.onremove = function(block){
f.log.value += "\nBlock #" + block.id + "(id=" + (block.data ? block.data.splitId : "") + "): removed";
};
layout.onadd = function(block){
f.log.value += "\nBlock #" + block.id + ": added";
block.element.innerHTML = "Double click to edit me";
block.element.className = "unselected block";
block.element.ondblclick = function(){
this.innerHTML = prompt("Content", this.innerHTML);
};
};
layout.onsplit = function(splitter){
f.log.value += "\nSplitter #" + splitter.id + ": added";
};
layout.onexchange = function(blockA, blockB){
f.log.value += "\nBlock #" + blockA.id + " exchanged with Block #" + blockB.id;
};
layout.onstartdrag = function(block, dragger){
f.log.value += "\nDragging Block #" + block.id + " with the Dragger object [" + dragger + "]";
dragger.object.style.opacity = .5;
dragger.object.style.border = "solid";
dragger.object.style.filter = "alpha(opacity=50)";
};
layout.onstopdrag = function(block, dragger){
f.log.value += "\nStopped Dragging Block #" + block.id;
};
layout.build(data);
</script>
</body>
</html>