generating javascript navigation

Hello,

 

recently I looked at a JavaScript
TOC navigation plugin for
DITA which uses the Yahoo treeview
library (http://developer.yahoo.com/yui/treeview/). I
would like to use this library for docbook html output
and generate javascript navigation tree.

 

The navigation is contained
in a javascript file and has following structure:

 

var objd0 = { label: "Book ", href:"index.html", target:"content"};

var d0 = new YAHOO.widget.TextNode(objd0, root, false);

 

var objd0e5 = { label:
"Preface ", href:"pr01.html", target:"content"};

var d0e5 = new YAHOO.widget.TextNode(objd0e5, root, false);

 

var objd0e10 = { label: "Chapter 1 ", href:"ch01.html", target:"content"};

var d0e10 = new YAHOO.widget.TextNode(objd0e10, root, false);

 

var objd0e13 = { label: "Section 1 ", href:"ch01.html#d0e13", target:"content"};

var d0e13 = new YAHOO.widget.TextNode(objd0e13, root, false);

 

So far I have been
able to generate working javascript but was not able
to get the right hierarchical structure of the
tree. When generating for example the section node
I need to get the ID of the
parent element (chapter, other section ect.).
Consider following example:

 

Having Chapter 1 and Section
1 I need to get the recursion the
right way. While component titles should have
the „root“ value 

 

var d0e13 = new YAHOO.widget.TextNode(objd0e13, root, false);

 

sections etc. should get
the ID of parent element instead.

 

 

My stylesheet is
based on Eclipse stylesheet:

 

<?xml version="1.0"
encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

    xmlns:ng="http://docbook.org/docbook-ng" xmlns:db="http://docbook.org/ns/docbook"

    xmlns:exsl="http://exslt.org/common" version="1.0" exclude-result-prefixes="exsl db ng">

 

    <xsl:import href="../html/chunk.xsl"/>

 

    <xsl:template match="/">

                            <xsl:call-template name="jstoc"/>

    </xsl:template>

 

    <xsl:template match="text()" mode="jstoc"/>

 

    <!-- generating
toctree.js -->

    <xsl:template name="jstoc">

        <xsl:call-template name="write.chunk">

            <xsl:with-param name="filename">

                <xsl:if test="$manifest.in.base.dir !=
0">

                    <xsl:value-of select="$base.dir"/>

                </xsl:if>

                <xsl:value-of select="'toctree.js'"/>

            </xsl:with-param>

            <xsl:with-param name="method" select="'text'"/>

            <xsl:with-param name="encoding" select="'utf-8'"/>

            <xsl:with-param name="indent" select="'yes'"/>

            <xsl:with-param name="content">

 

                <xsl:text>

                    var tree;

                    

                    function treeInit() {

                    tree = new YAHOO.widget.TreeView("treeDiv1");

                    var root = tree.getRoot();

                </xsl:text>

                

                <xsl:variable name="parent" select="'root'"/>

                

                <xsl:variable name="title">

                    <xsl:apply-templates select="/*" mode="title.markup"/>

                </xsl:variable>

                <xsl:variable name="href">

                    <xsl:call-template name="href.target.with.base.dir">

                        <xsl:with-param name="object" select="/"/>

                    </xsl:call-template>

                </xsl:variable>

 

                <xsl:variable name="self" select="generate-id()"/>

 

 

                <xsl:text>var </xsl:text>

                <xsl:value-of select="concat('obj', $self)"/>

                <xsl:text> = { label:
"</xsl:text>

                <xsl:value-of select="$title"/>

                <xsl:text> ", href:"</xsl:text>

                <xsl:value-of select="$href"/>

                <xsl:text>", target:"content"};</xsl:text>

 

                <xsl:text>var </xsl:text>

                <xsl:value-of select="$self"/>

                <xsl:text> = new YAHOO.widget.TextNode(</xsl:text>

                <xsl:value-of select="concat('obj', $self)"/>

                <xsl:text>, </xsl:text>

                <xsl:value-of select="'root'"/>

                <xsl:text>, false);</xsl:text>

 

                <xsl:apply-templates select="/*/*" mode="jstoc"/>

 

 

                <xsl:text>

                    tree.draw(); 

                    } 

                    

                    YAHOO.util.Event.addListener(window, "load", treeInit); 

                </xsl:text>

                

            </xsl:with-param>

        </xsl:call-template>

 

    </xsl:template>

 

    

    

    <!-- generating
entries for toc -->

    <xsl:template

        match="book|part|reference|preface|chapter|bibliography|appendix|article|glossary|section|sect1|sect2|sect3|sect4|sect5|refentry|colophon|bibliodiv|index"

        mode="jstoc">

 

        <xsl:variable name="title">

            <xsl:apply-templates select="." mode="title.markup"/>

        </xsl:variable>

 

        <xsl:variable name="href">

            <xsl:call-template name="href.target.with.base.dir">

                <xsl:with-param name="context" select="/"/>

            </xsl:call-template>

        </xsl:variable>

 

        <xsl:variable name="jsid" select="generate-id()"/>

 

        <xsl:text>var </xsl:text>

        <xsl:value-of select="concat('obj', $jsid)"/>

        <xsl:text> = { label:
"</xsl:text>

        <xsl:value-of select="$title"/>

        <xsl:text> ", href:"</xsl:text>

        <xsl:value-of select="$href"/>

        <xsl:text>", target:"content"};</xsl:text>

 

        <xsl:text>var </xsl:text>

        <xsl:value-of select="$jsid"/>

        <xsl:text> = new YAHOO.widget.TextNode(</xsl:text>

        <xsl:value-of select="concat('obj', $jsid)"/>

        <xsl:text>, </xsl:text>

        

        <!-- this
is the point where root or
ID of parent element should be generated
-->

        <xsl:value-of select="'root'"/>

        <xsl:text>, false);</xsl:text>

 

        <xsl:apply-templates

            select="part|reference|preface|chapter|bibliography|appendix|article|glossary|section|sect1|sect2|sect3|sect4|sect5|refentry|colophon|bibliodiv|index"

            mode="jstoc"/>

    </xsl:template>

    

    <xsl:template match="text()" mode="jstoc"/>

 

</xsl:stylesheet>

 

 

Any ideas are very appreciated.

 

Greetings,

Pavel ©kopík