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
|
<html>
<head>
<style type="text/css">
html, body, div, p {
/* FIXME: how do we set the application font? */
padding: 0;
margin: 0;
}
div.row {
margin-left: 1em;
}
</style>
<script type="text/javascript">
function filterNodes (node, tagName)
{
var out = new Array();
for (var i = 0; i < node.childNodes.length; i++)
{
var elem = node.childNodes[i];
if (elem.tagName == tagName)
out.push(elem);
}
return out;
}
function getNodes(node)
{
return filterNodes(node, 'DIV');
}
function getContent(node)
{
return filterNodes(node, 'P')[0];
}
function insertRow (path, text)
{
var treeview = document.getElementById('treeview');
var parentnode = treeview;
var i;
// walk the tree
for (i = 0; i < path.length - 1; i++)
parentnode = getNodes(parentnode)[path[i]];
// create a new node
var newnode = document.createElement('div');
newnode.setAttribute('class', 'row');
// insert the new node into the tree
var nodes = getNodes(parentnode);
// console.log("path = " + path);
// console.log("i = " + i + ", path[i] = " + path[i] + ", nodes.length = " +
// nodes.length);
if (path[i] >= nodes.length)
parentnode.appendChild(newnode);
else
parentnode.insertBefore(newnode, nodes[path[i]]);
var contents = document.createElement('p');
newnode.appendChild(contents);
contents.innerHTML = text;
}
function changeRow (path, text)
{
var treeview = document.getElementById('treeview');
var node = treeview;
// console.log("path = " + path + ", text = '" + text + "'");
// walk the tree
for (var i = 0; i < path.length; i++)
node = getNodes(node)[path[i]];
// set the contents
var contents = getContent(node);
contents.innerHTML = text;
}
function deleteRow (path)
{
var treeview = document.getElementById('treeview');
var node = treeview;
// walk the tree
for (var i = 0; i < path.length; i++)
node = getNodes(node)[path[i]];
node.parentNode.removeChild(node);
}
function reorderRows (path, new_order)
{
var treeview = document.getElementById('treeview');
var node = treeview;
// walk the tree
for (var i = 0; i < path.length; i++)
node = getNodes(node)[path[i]];
var nodes = getNodes(node);
// remove all the nodes from the DOM
for (var i = 0; i < nodes.length; i++)
node.removeChild(nodes[i]);
// put them back in the new order
// For reference: new_order[new_pos] = old_pos
for (var i = 0; i < nodes.length; i++)
node.appendChild(nodes[new_order[i]]);
}
</script>
</head>
<body>
<div id="treeview">
</div>
</body>
</html>
|
