Regarding Table of Contents Creation

forrestfsu · #1 (**permalink**) June 21st, 2007, 10:55 AM

Hi All,

I'm new to XSLT, so here's my first problem. I'm attempting at automatically created a Table of Contents. I'm having problems creating the correct number to the left of the heading. For example, this is the output I want (given the example XML data provided):
1 This is a heading
2 This is another heading
  2.1 This is a subheading
    2.1.1 This is a sub-subheading
    2.1.2 This is a sub-subheading2
3 This is yet another heading

I have XML data which would be in the format of (the level attribute defines the level of indentation):

Code:

<structure level="1">
  <header>This is a heading</header>
  ...
</structure>
<structure level="1">
  <header>This is another heading</header>
  ...
</structure>
<structure level="2">
  <header>This is a subheading</header>
  ...
</structure>
<structure level="3">
  <header>This is a sub-subheading</header>
  ...
</structure>
<structure level="3">
  <header>This is a sub-subheading2</header>
  ...
</structure>
<structure level="1">
  <header>This is yet another heading</header>
  ...
</structure>

So far I have messed around with both using the count function and using xsl:number. I'm nowhere close, so figured I would ask for pointers. A snippit of my current xslt looks like this:

Code:

<xsl:for-each select="structure">
  <xsl:value-of select="1 + count(preceding::structure)"/>
  <xsl:value-of select="./header"/>
</xsl:for-each>

However, the output looks like this:
1 This is a heading
2 This is another heading
  3 This is a subheading
    4 This is a sub-subheading
    5 This is a sub-subheading2
6 This is yet another heading

Thanks in advance,
Jesse

mhkay · #2 (**permalink**) June 21st, 2007, 11:05 AM

Not an easy one. Can you use XSLT 2.0 or do you have constraints that tie you to 1.0?

The basic problem is that the hierarchic structure is implicit in the level numbers rather than being explicit in the markup. One approach is to first convert to a proper hierarchic structure; see http://www.idealliance.org/proceedin...mhk-paper.html for an example of doing that in XSLT 2.0. Or search for "XSLT positional grouping" for 1.0 solutions.

I think any 1.0 solution is going to involve a recursive walk up the (logical) tree.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

forrestfsu · #3 (**permalink**) June 21st, 2007, 11:45 AM

Unfortunately I'm stuck with 1.0. I think I might have a solution, so I'm going to give it a go. I'll post back soon hopefully with some more feedback.

Thanks

forrestfsu · #4 (**permalink**) June 21st, 2007, 12:15 PM

As part of my solution I'm attempting to modify the DOM tree by adding a new attribute to the structure element. However, this snippit of code does not seem to be working...any ideas why?

Code:

 
<xsl:for-each select="structure">
  <xsl:copy>
    <xsl:attribute name="idToc">BLA</xsl:attribute>
  </xsl:copy>
</xsl:for-each>

mhkay · #5 (**permalink**) June 21st, 2007, 01:17 PM

There's nothing wrong with that snippet. You error lies elsewhere.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

forrestfsu · #6 (**permalink**) June 21st, 2007, 02:05 PM

I will probably have to figure out where the error lies.

On a side note:
I can't determine if the

Code:

<xsl:copy>

is necessary though. I've been trying to read up on exactly what copy does, but it's still a bit hazy. Is this creating a completely separate DOM where the node that I copy can be modified?

mhkay · #7 (**permalink**) June 21st, 2007, 02:44 PM

XSLT always creates a new document by transforming the input document. The input document is never modified. xsl:copy creates a new element as a copy of the current element.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

forrestfsu · #8 (**permalink**) June 21st, 2007, 03:04 PM

Below is the portion of current code that I'm working on. I can't figure out why the first part of this script does not set each structure's "level" attribute to 10. Any ideas why?

Code:

       <xsl:for-each select="structure">
            <copy>
                <xsl:copy-of select="@*"/>
                <xsl:attribute name="level">10</xsl:attribute>
            </copy>
        </xsl:for-each>


        <div class="header"  id="tableOfContents" onclick="arrowFlip(this);flip('tableOfContentsBody');" style="cursor:pointer;">
            Table of Contents
        </div>
        <div class="body" id="tableOfContentsBody">
            <xsl:for-each select="structure">            
                <xsl:variable name="level"><xsl:value-of select="./@level"/></xsl:variable>
                <xsl:variable name="header"><xsl:value-of select="./header"/></xsl:variable>
                <xsl:choose>
                    <xsl:when test="$level=1">
                        <div class="tocHeader">
                            <b><a href="#{$header}Anchor{generate-id(.)}">



                            <span style="margin-left:16px"><xsl:value-of select="./header"/></span>
                            </a></b>
                        </div>
                    </xsl:when>
                    <xsl:otherwise>
                        <div style="padding-left:{$level*15-15}px;">
                            <a href="#{$header}Anchor{generate-id(.)}">



                            <span style="margin-left:16px"><xsl:value-of select="./header"/></span>
                            </a>
                        </div>
                    </xsl:otherwise>
                </xsl:choose>
            </xsl:for-each>

            <div class="miniButtons">
                <a href="javascript:collapseAll();"><img src="{$imageDirectory}../collapse.png" class="miniButtonsImg" />Collapse All</a> | 
                <a href="javascript:expandAll();"><img src="{$imageDirectory}../expand.png" class="miniButtonsImg" />Expand All</a> | 
                <a href="#coverPageAnchor"><img src="{$imageDirectory}../totop.png" class="miniButtonsImg" />Back To Top</a>
            </div>
        </div>

Need to download code?

Navigation