-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtree.html
79 lines (68 loc) · 2.36 KB
/
tree.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
<!--
Displays json in collapsible tree
- objects are displayed as collapsible nodes
- functions are displayed as button
- strings are displayed as input (type=text)
- arrays are displayed as datalist (drop-down)
- disabled if name starts with _
-->
<html><head>
<meta charset="utf-8" />
<style>
* { font-family: sans-serif; font-size: small; cursor: default; }
#main { position: relative; margin: 50px; background: whitesmoke; }
ul { list-style-type: none; margin-bottom: .75em; padding-left: 2em; }
li { margin-bottom: 3px; }
[collapse] > ul { display: none; }
[collapse=expanded] > ul { display: block; }
[collapse]:before { content: "\25B6\a0"; color: darkgrey; }
[collapse=expanded]:before { content: "\25E5\a0"; }
input { position: absolute; left: 250px; right: 0px; cursor: text; }
input:hover { box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); }
[disabled] { color: grey; }
</style>
</head><body><div id="main"></div>
<script src="classicmodels.json"></script>
<script>
var html = '';
buildTree=(entity)=>{
//console.log(entity+' '+typeof entity);
html += '<ul>';
for(var member of Object.keys(entity)){
if(typeof entity[member] == 'object' && !Array.isArray(entity[member])){
html += '<li collapse><span onclick="collapse(event)">'+member+'</span>';
buildTree(entity[member]);
html += '</li>';
}
else if(typeof entity[member] == 'function'){
var fun = entity[member].toString();
fun = fun.substring(fun.indexOf("{") + 1, fun.lastIndexOf("}"));
html += '<li><button onclick="'+fun+'">'+member+'</button></li>';
}
else{
if(member[0]=='_')
html += '<li disabled>'+member.substr(1)+'<input disabled ';
else
html += '<li>'+member+'<input ';
if(Array.isArray(entity[member])){
html += 'list="'+member+'"><datalist id="'+member+'">';
for(var item of entity[member])
html += '<option value="'+item+'" />';
html += '</datalist></li>';
}
else
html += 'value="'+entity[member]+'"></li>';
}
}
html += '</ul>';
}
collapse =(event)=>{
if(event.target.parentElement.getAttribute("collapse")=="expanded")
event.target.parentElement.setAttribute("collapse", "collapsed");
else
event.target.parentElement.setAttribute("collapse", "expanded");
}
buildTree(metadata);
document.getElementById("main").innerHTML = html;
//console.log(html);
</script>