// super-simple HTML tree with expandable/collapsible nodes
sclass HTMLTree {
S headStuff() {
ret loadJQuery2() + hcss([[
.tree-toggler {
display: inline-block;
height: 1.3em;
width: 0.7em;
background: cornflowerblue;
padding-left: 0.5em;
padding-right: 0.5em;
/*line-height: 50px; */
text-align: center;
}
.tree-toggler a {
text-decoration: none;
}
]]) + hjs([[
function tree_expandCollapse(id) {
var children = $("#" + id);
children.toggle();
var vis = children.is(':visible');
$("#" + id + "_toggle a").html(vis ? "–" : "+");
}
]]);
}
S root(S contents) {
ret ul(contents);
}
S node(S nodeHTML, S... children) {
S id = aGlobalID();
ret div(
ahref_javascript(
"tree_expandCollapse(" + jsQuote(id) + ");",
"+"),
class := "tree-toggler", id := id + "_toggle")
+ " " + nodeHTML
+ ul(asList(children), +id, style := "display: none");
}
}