Table of contents
- 1. What is it
- 1.1. History
- 2. How do I install it?
- 3. How do I use it?
- 3.1. Naked
- 3.2. Nakeder
- 3.3. Nicely Clothed
- 4. DekiScript Source
Please discuss this template in this forum thread.
What is it
This template generates a collapsible table of contents (TOC) for the current page. It's useful if, for whatever reason, you want to embed the TOC in the page contents, but don't want it to (in the case of a large page) consume a giant chunk of real-estate all by itself. In my experience, many novice Mindtouch users don't notice the "Table of Contents" button in the toolbar; putting the TOC in the page itself rectifies that.
This template is a much-simplified variant of CollapsibleTree.
As written, this template requires Lyons (9.02.x).
History
| Version | Date | Author | Description |
| 1.21 | 13-Oct-2011 | neilw | Added class "collapsibleTOC" to the container div, to simplify CSS targeting |
| 1.20 | 8-Mar-2011 | neilw | Removed all dependency on wiki TOC functions, everything's in Javascript now. Should work. |
| 1.10 | 9-Aug-2010 | neilw | Add option to remove numbering from TOC |
| 1.01 | 19-Apr-2010 | neilw | Eliminated FOUC (at least on 9.12) |
| 1.00 | 2-Sept-2009 | neilw | First published version |
How do I install it?
NOTE: You must have UNSAFECONTENT permissions to install this template successfully.
These instructions will help you install the template'CollapsibleTOC' on your wiki quickly and correctly.
Perform the following steps:
- Copy the template source code:
- If the code in the "HTML Source" area below is not already visible and selected, click the "View" button to display and select it.
- Copy it to your clipboard (CTRL-C).
- Create a new template on your wiki:
- Select the Tools->Templates menu item on your wiki
- Click "New Page" button. This will open the editor on a new page with the title "Template:Page Title".
- Replace "Page Title" with the name of the template.
- Paste in the source code:
- In the editor, click the "View->Source" menu item to view the HTML source of the page.
- Select all text (CTRL-A).
- Paste in the template source code from the clipboard (CTRL-V).
- Click "Save" button.
HTML Source for Template:CollapsibleTOC
How do I use it?
Naked
This template takes no arguments; it simply generates the collapsible TOC for the current page. So this code:
{{ collapsibleTOC() }}
Produces this:
Nakeder
Specify "false" to the numbering option to remove numbering from the TOC:
{{ collapsibleTOC(false) }} or {{ collapsibleTOC{ numbering: false } }}
Produces this:
Nicely Clothed
Note that the template does not enclose its output in any kind of table or anything. This frees you to style it as you like. For example, here's a version inside a simple table:
| Table of Contents |
DekiScript Source
For your viewing pleasure only. Please use the installation instructions above to install the template.
// CollapsibleTOC template, by neilw, 2009
// Versions
// 1.00 9/2/09 neilw
// 1.01 4/19/10 neilw Use wiki.toc() instead of page.toc to reduce FOUC
// 1.10 8/9/10 neilw added option to remove numbering
// 1.20 3/8/11 neilw Eliminated use of wiki.toc(). Now just do it all in JS
// 1.21 10/13/11 neilw Added class "collapsibleTOC" to container div
// USAGE: CollapsibleTOC()
// This outputs a collapsible table of contents for the current page. The output is
// "raw", without any enclosing table or anything, so you can wrap it in whatever
// style you like.
var numbering = $0 ?? $numbering ?? true;
// Output
<html>
// Scripts go in the head
<head>
//
// First script element is unique to each template call, passing args to the common code
//
<script type="text/javascript">"
DekiWiki.$(document).ready(function($) { collapse_toc($, "..json.emit(@id)..","..json.emit(numbering).."); });
"</script>
//
// This script element is always the same, so only one copy will end up on the page even if the
// template is called multiple times
//
<script type="text/javascript">"
function collapse_toc($, id, numbers) {
// Insert the TOC into the container
var $div = $('#' + id);
$div.html($('#pageToc').html());
$div.find('.pageToc').show().find('h5:first').hide();
// Find the list
var $list = $div.find('ol:first');
if ($list.length == 0) {
alert(\"ERROR: CollapsibleTree: can\'t find the TOC\");
return;
}
// Recursively traverse list
collapse_toc_recurse($, $list, numbers);
// Show it!
$div.show();
}
function collapse_toc_recurse($, $list, numbers) {
// Make each list item collapsible
$list.children('li').each(function () {
// Get rid of bullet and insert icon in front of each list item
$(this).css({'margin-left':'0', 'padding-left':'0', 'list-style-type':'none'}).
prepend('<span class=\"icon\"><img style=\"vertical-align: middle; margin-bottom: 5px\" src=\"/skins/common/icons/icon-trans.gif\" /> </span>');
// Remove numbering if necessary
if (!numbers) $(this).find('span:eq(1)').remove();
// Find and hide inner OL, if any
var $ol = $(this).children('ol:first').hide();
var $img = $(this).find('img:first');
// If appropriate, link icon to toggle function and recurse
if ($ol.length) {
$img.attr('class', 'contract');
$img.css('cursor','pointer').click(function() {
if ($ol.css('display') == 'none') {
$ol.slideDown('fast');
$(this).attr('class', 'expand');
}
else {
$ol.slideUp ('fast');
$(this).attr('class', 'contract');
}
return(false);
});
// recurse
collapse_toc_recurse($, $ol, numbers);
}
});
}
"</script>
</head>
// Content goes in the body
<body>
<div id=(@id) class="collapsibleTOC" style="display:none;" />;
</body>
</html>
- Was this page helpful?
- Tag page
- What links here
| Images 0 | ||
|---|---|---|
| No images to display in the gallery. |
Copyright © 2011 MindTouch, Inc. Powered by
I've updated the installation instructions to avoid these problems altogether. If you're game, try re-installing using the new instructions and see if they work better.
The new procedure going straight to Source mode bypassed the other problems and works fine. This looks like a more consistent way to go since it avoids changes the editor may make.
Saw your forum post about this. I'm not exactly sure what steps are necessary to make this show up in the "Save as PDF". I realize now that the last update I made to this template pretty much guarantees this will *not* show up in the PDF. I'll have to think about this a bit; in the meantime if PDF printing is an important feature, then you should probably go back to page.toc, and we'll figure out a way to suppress the section numbering. Should be possible with CSS. I'll respond back in the forums.
I just updated the template to make this easier. Just target div.collapsibleTOC with some CSS and it should work.