generating javascript navigation

["Skopik Pavel" <Pavel.Skopik@aipsafe.cz>]

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