* Collapsable trees.
This commit is contained in:
parent
c2fc2c13c9
commit
84c617966b
|
@ -7,6 +7,7 @@
|
|||
<xsl:template match="logfile">
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="treebits.js" />
|
||||
<link rel="stylesheet" href="logfile.css" type="text/css" />
|
||||
<title>Log File</title>
|
||||
</head>
|
||||
|
@ -23,6 +24,7 @@
|
|||
</xsl:template>
|
||||
|
||||
<xsl:template match="nest">
|
||||
<script type='text/javascript'>showTreeToggle("show","hide")</script>
|
||||
<xsl:apply-templates select='head'/>
|
||||
<ul class='nesting'>
|
||||
<xsl:for-each select='line|nest'>
|
||||
|
|
|
@ -23,7 +23,7 @@ ul.nesting li.line {
|
|||
}
|
||||
|
||||
ul.nesting li.lastline {
|
||||
padding-left: 1.2em;
|
||||
padding-left: 1.2em; // for the 0.1em border-left in .lastline > .lineconn
|
||||
}
|
||||
|
||||
li.line {
|
||||
|
@ -43,15 +43,13 @@ li.lastline > span.lineconn {
|
|||
}
|
||||
|
||||
|
||||
em.storeref
|
||||
{
|
||||
em.storeref {
|
||||
color: #500000;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
em.storeref:hover
|
||||
{
|
||||
em.storeref:hover {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
|
@ -71,3 +69,13 @@ em.storeref:hover
|
|||
em.storeref:hover span.popup {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
.toggle {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.showTree, .hideTree {
|
||||
font-family: monospace;
|
||||
font-size: larger;
|
||||
}
|
50
src/log2xml/treebits.js
Normal file
50
src/log2xml/treebits.js
Normal file
|
@ -0,0 +1,50 @@
|
|||
/* Acknowledgement: this is based on the Wikipedia table-of-contents
|
||||
* toggle. */
|
||||
|
||||
|
||||
var idCounter = 0;
|
||||
|
||||
|
||||
function showTreeToggle(show,hide) {
|
||||
if (document.getElementById) {
|
||||
var id = "toggle_" + idCounter;
|
||||
document.writeln(
|
||||
'<a href="javascript:toggleTree(\'' + id + '\')" class="toggle" id="' + id + '">' +
|
||||
'<span class="showTree" style="display: none;">+</span>' +
|
||||
'<span class="hideTree">-</span>' +
|
||||
'</a>');
|
||||
idCounter = idCounter + 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function toggleTree(id) {
|
||||
|
||||
var href = document.getElementById(id);
|
||||
|
||||
var node = href;
|
||||
var tree = null;
|
||||
while (node != null) {
|
||||
if (node.className == "nesting") tree = node;
|
||||
node = node.nextSibling;
|
||||
}
|
||||
|
||||
node = href.firstChild;
|
||||
var hideTree = null;
|
||||
var showTree = null;
|
||||
while (node != null) {
|
||||
if (node.className == "showTree") showTree = node;
|
||||
else if (node.className == "hideTree") hideTree = node;
|
||||
node = node.nextSibling;
|
||||
}
|
||||
|
||||
if (tree.style.display == 'none') {
|
||||
tree.style.display = '';
|
||||
hideTree.style.display = '';
|
||||
showTree.style.display = 'none';
|
||||
} else {
|
||||
tree.style.display = 'none';
|
||||
hideTree.style.display = 'none';
|
||||
showTree.style.display = '';
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue