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"/>

��

�� <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>

��

��

�� <xsl:template

�� 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>

��

��

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

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

�� <xsl:apply-templates

�� mode="jstoc"/>

�� </xsl:template>

��

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

</xsl:stylesheet>

Any ideas are very appreciated.

Greetings,

Pavel �kop�k

docbook-apps message