extension to make TOC easier to manipulate with js/css

Anonymous avatarAnonymous created an issue

An alternative toctree directive that wraps the HTML TOC in a containing element - a div with class 'toc-holder'. An implementation is here:

http://bitbucket.org/djerdo/musette/src/tip/musette/html/sphinxtoctree2.py

The specific motivation for this is the need to convert a TOC to a YUI TreeView (http://developer.yahoo.com/yui/treeview). With the above extension, the required javascript should is a bit neater than otherwise, eg. something like:

YAHOO.util.Event.onDOMReady( function() {
    var holders = YAHOO.util.Dom.getElementsByClassName('toctree-holder', 'div');
    var holder, tocs, toc, subtocs, tree;
    for (i=0; i<holders.length; i++) {
         holder = holders[i];
          tocs = holder.getElementsByTagName('ul');
          if (tocs.length) {
              toc = tocs[0];
              subtocs = toc.getElementsByTagName('ul');
              if (!subtocs.length) {
              //the TOC has no subtocs, don't want a treeview
                  continue
              }
              else {
                  tree = new YAHOO.widget.TreeView(holder);
                  tree.render();
              }
          }
      }
})

Without the extension, it's not as easy to determine if a list is a TOC or not.

Comments (3)

  1. Log in to comment
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.