Simplify the log tree implementation a bit

In particular use the :last-child selector, which is non-standard but
supported by all major browsers.
This commit is contained in:
Eelco Dolstra 2013-02-19 17:14:02 +01:00
parent 8c37f46955
commit 4266632eb0
3 changed files with 45 additions and 54 deletions

View file

@ -34,7 +34,7 @@
/* Set the appearance of the toggle depending on whether the /* Set the appearance of the toggle depending on whether the
corresponding subtree is initially shown or hidden. */ corresponding subtree is initially shown or hidden. */
$(".logTreeToggle").map(function() { $(".tree-toggle").map(function() {
if ($(this).siblings("ul:hidden").length == 0) { if ($(this).siblings("ul:hidden").length == 0) {
$(this).text("-"); $(this).text("-");
} else { } else {
@ -43,7 +43,7 @@
}); });
/* When a toggle is clicked, show or hide the subtree. */ /* When a toggle is clicked, show or hide the subtree. */
$(".logTreeToggle").click(function() { $(".tree-toggle").click(function() {
if ($(this).siblings("ul:hidden").length != 0) { if ($(this).siblings("ul:hidden").length != 0) {
$(this).siblings("ul").show(); $(this).siblings("ul").show();
$(this).text("-"); $(this).text("-");
@ -54,16 +54,16 @@
}); });
/* Implementation of the expand all link. */ /* Implementation of the expand all link. */
$(".logTreeExpandAll").click(function() { $(".tree-expand-all").click(function() {
$(".logTreeToggle", $(this).parent().siblings(".toplevel")).map(function() { $(".tree-toggle", $(this).parent().siblings(".tree")).map(function() {
$(this).siblings("ul").show(); $(this).siblings("ul").show();
$(this).text("-"); $(this).text("-");
}); });
}); });
/* Implementation of the collapse all link. */ /* Implementation of the collapse all link. */
$(".logTreeCollapseAll").click(function() { $(".tree-collapse-all").click(function() {
$(".logTreeToggle", $(this).parent().siblings(".toplevel")).map(function() { $(".tree-toggle", $(this).parent().siblings(".tree")).map(function() {
$(this).siblings("ul").hide(); $(this).siblings("ul").hide();
$(this).text("+"); $(this).text("+");
}); });

View file

@ -3,37 +3,34 @@
padding: 0.3em; padding: 0.3em;
} }
ul.nesting, ul.toplevel {
ul.tree, ul.subtree {
padding: 0; padding: 0;
margin: 0; margin: 0;
}
ul.toplevel {
list-style-type: none; list-style-type: none;
} }
.line, .head { /* Indent each tree level. */
padding-top: 0em; li.tree-line {
}
ul.nesting li.line, ul.nesting li.lastline {
position: relative; position: relative;
list-style-type: none;
}
ul.nesting li.line {
padding-left: 2.0em; padding-left: 2.0em;
} }
ul.nesting li.lastline { li.tree-line:last-child {
padding-left: 2.1em; /* for the 0.1em border-left in .lastline > .lineconn */ padding-left: 2.1em; /* for the 0.1em border-left in the last child */
} }
li.line { /* Draw vertical tree lines next to all children except the last. */
li.tree-line {
border-left: 0.1em solid #6185a0; border-left: 0.1em solid #6185a0;
} }
li.line > span.lineconn, li.lastline > span.lineconn { li.tree-line:last-child {
border-left: 0;
}
/* Draw horizontal tree lines to all children. */
span.tree-conn {
position: absolute; position: absolute;
height: 0.65em; height: 0.65em;
left: 0em; left: 0em;
@ -41,14 +38,21 @@ li.line > span.lineconn, li.lastline > span.lineconn {
border-bottom: 0.1em solid #6185a0; border-bottom: 0.1em solid #6185a0;
} }
li.lastline > span.lineconn { /* Draw the vertical tree line to the last child. */
li.tree-line:last-child > span.tree-conn {
border-left: 0.1em solid #6185a0; border-left: 0.1em solid #6185a0;
} }
.tree-toggle {
text-decoration: none;
font-family: monospace;
font-size: larger;
}
em.storeref { em.storeref {
color: #500000; color: #500000;
position: relative; position: relative;
width: 100%; width: 100%;
} }
@ -75,12 +79,6 @@ em.storeref:hover span.popup {
} }
.logTreeToggle {
text-decoration: none;
font-family: monospace;
font-size: larger;
}
span.code { span.code {
white-space: pre-wrap; white-space: pre-wrap;
font-family: monospace; font-family: monospace;

View file

@ -8,11 +8,11 @@
<xsl:template match="logfile"> <xsl:template match="logfile">
<p> <p>
<a href="javascript:" class="btn btn-info logTreeExpandAll"><i class="icon-plus icon-white"></i> Expand all</a> <a href="javascript:" class="btn btn-info tree-expand-all"><i class="icon-plus icon-white"></i> Expand all</a>
<xsl:text> </xsl:text> <xsl:text> </xsl:text>
<a href="javascript:" class="btn btn-info logTreeCollapseAll"><i class="icon-minus icon-white"></i> Collapse all</a> <a href="javascript:" class="btn btn-info tree-collapse-all"><i class="icon-minus icon-white"></i> Collapse all</a>
</p> </p>
<ul class='toplevel'> <ul class='tree'>
<xsl:for-each select='line|nest'> <xsl:for-each select='line|nest'>
<li> <li>
<xsl:apply-templates select='.'/> <xsl:apply-templates select='.'/>
@ -21,7 +21,7 @@
</ul> </ul>
</xsl:template> </xsl:template>
<xsl:template match="nest"> <xsl:template match="nest">
<!-- The tree should be collapsed by default if all children are <!-- The tree should be collapsed by default if all children are
@ -29,40 +29,33 @@
<!-- <xsl:variable name="collapsed" <!-- <xsl:variable name="collapsed"
select="count(.//line[not(@priority = 3)]) = 0 or ./head[@priority = 3]" /> --> select="count(.//line[not(@priority = 3)]) = 0 or ./head[@priority = 3]" /> -->
<xsl:variable name="collapsed" select="count(.//*[@error]) = 0"/> <xsl:variable name="collapsed" select="count(.//*[@error]) = 0"/>
<xsl:variable name="style"><xsl:if test="$collapsed">display: none;</xsl:if></xsl:variable> <xsl:variable name="style"><xsl:if test="$collapsed">display: none;</xsl:if></xsl:variable>
<xsl:variable name="arg"><xsl:choose><xsl:when test="$collapsed">true</xsl:when><xsl:otherwise>false</xsl:otherwise></xsl:choose></xsl:variable> <xsl:variable name="arg"><xsl:choose><xsl:when test="$collapsed">true</xsl:when><xsl:otherwise>false</xsl:otherwise></xsl:choose></xsl:variable>
<xsl:if test="line|nest"> <xsl:if test="line|nest">
<a href="javascript:" class="logTreeToggle"></a> <a href="javascript:" class="tree-toggle"></a>
<xsl:text> </xsl:text> <xsl:text> </xsl:text>
</xsl:if> </xsl:if>
<xsl:apply-templates select='head'/> <xsl:apply-templates select='head'/>
<!-- Be careful to only generate <ul>s if there are <li>s, otherwise its malformed. --> <!-- Be careful to only generate <ul>s if there are <li>s, otherwise its malformed. -->
<xsl:if test="line|nest"> <xsl:if test="line|nest">
<ul class='nesting' style="{$style}">
<xsl:for-each select='line|nest'>
<!-- Is this the last line? If so, mark it as such so that it <ul class='subtree' style="{$style}">
can be rendered differently. --> <xsl:for-each select='line|nest'>
<xsl:variable name="class"><xsl:choose><xsl:when test="position() != last()">line</xsl:when><xsl:otherwise>lastline</xsl:otherwise></xsl:choose></xsl:variable> <li class='tree-line'>
<span class='tree-conn' />
<li class='{$class}'> <xsl:apply-templates select='.'/>
<span class='lineconn' />
<span class='linebody'>
<xsl:apply-templates select='.'/>
</span>
</li> </li>
</xsl:for-each> </xsl:for-each>
</ul> </ul>
</xsl:if> </xsl:if>
</xsl:template> </xsl:template>
<xsl:template match="head|line"> <xsl:template match="head|line">
<span class="code"> <span class="code">
<xsl:if test="@error"> <xsl:if test="@error">
@ -78,12 +71,12 @@
</span> </span>
</xsl:template> </xsl:template>
<xsl:template match="storeref"> <xsl:template match="storeref">
<em class='storeref'> <em class='storeref'>
<span class='popup'><xsl:apply-templates/></span> <span class='popup'><xsl:apply-templates/></span>
<span class='elided'>/...</span><xsl:apply-templates select='name'/><xsl:apply-templates select='path'/> <span class='elided'>/...</span><xsl:apply-templates select='name'/><xsl:apply-templates select='path'/>
</em> </em>
</xsl:template> </xsl:template>
</xsl:stylesheet> </xsl:stylesheet>