-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
100 lines (91 loc) · 2.77 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
<html>
<head>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='jquery.tmpl.js'></script>
<script type='text/javascript' src='jquery.jkey-1.2.js'></script>
<style>
#editor {border: 0px; position: absolute; font-size: 1.0em;}
li, .node{font-size: 1.0em; width: 100%}
span {display:inline-block;
width: 100%}
</style>
</head>
<body>
<!-- Nodes -->
<form onSubmit="return false;">
<input id="editor"/>
</form>
<script type="text/html" id="pageTemplate" >
<div id="tree" >
<h1>${name}</h1>
<ul>
{{tmpl(nodes) "#nodeTemplate"}}
</ul>
</div>
</script>
<script type="text/html" id="nodeTemplate">
<li class="node">
<span>${name}</span>
<ul>
{{tmpl(nodes) "#nodeTemplate"}}
</ul>
</li>
</script>
<div class="notes">
Use 'ALT' and arrows to change the selection around.
Use 'CTRL' and arrows to move a node around the tree.
</div>
<div class="TODO">
<ul>
<li>Save/Load data from local file store</li>
<li>Expand/Collapse</li>
<li>Change up/down nagivation to respect expanded nodes</li>
</ul>
</div>
<form>
<table>
<tr>
<td>File to load:<input type="file" id="fileToLoad"></td>
<td><a href="javascript:loadFileAsText()">Load Selected File</a><td>
</tr>
<tr>
<td>Filename Save As:<input id="inputFileName"></input></td>
<td><a href="javascript:saveTextAsFile()">Save Results to File</a></td>
</tr>
</table>
</form>
</body>
<script type='text/javascript' src='./app.js'></script>
<script lang='text/javascript'>
var rootNode =
{name: "Things Left to do...", nodes:[
{name: 'Look', nodes:[
{name: 'Colour the scopes', nodes:[]},
{name: 'boarder around group while alt pressed', nodes:[]},
{name: 'drag-hand mouse icon and drop shadow when Ctrl+Alt pressed', nodes:[]},
]},
{name: 'Feel', nodes:[
{name: 'Expand/Collapse', nodes:[]},
{name: 'Split line with "enter"', nodes:[]},
{name: 'Don\'t delete the last node', nodes:[]},
{name: 'Delete node with kids', nodes:[]},
]},
{name: 'Function', nodes:[
{name: 'Save', nodes:[]},
{name: 'Load', nodes:[]},
{name: 'Undo', nodes:[]},
{name: 'Redo', nodes:[]},
{name: 'Auto-Save', nodes:[]},
{name: 'local_storage', nodes:[
{name: 'url defines doc key', nodes:[]},
{name: 'load from storage on load', nodes:[]},
{name: 'save to storage on edit', nodes:[]},
]},
]},
]};
$("#pageTemplate").tmpl(rootNode).appendTo($("body"));
$(".node > span").live("click", on_span_clicked);
edit_node($(".node").first());
setInterval("update_node_from_editor()",100);
</script>
</html>