Reverb - Expand TOC
On 1/9/2013 7:51 AM, Josh wrote: > As part of my ongoing attempt to move over to Reverb, I would like > complete control over the expansion/collapse of TOC icons. > > If I want it the icon to appear open or closed, I should be able to tell > it to do so. > > In WWHelp this was easy, I tagged the line with expand="true", or > exapand="false" > > No similar command in Reverb?
Josh,
I believe you are referring to the @expand attribute in the books.xml file, is that right?
Reverb does not presently have such a feature. However, you could simulate it by adding JavaScript to "Connect.asp" that expands your folders. It would leverage the parcel IDs assigned when "Connect.asp" is generated into "index.html". These correspond to your group context and group ID.
For example, for the ePublisher documentation set, our files appear as:
<!-- Parcels -->
<!-- -->
<div id="parcels">
<ul>
<li>
<div class="ww_skin_toc_entry ww_skin_toc_folder"><span class="ww_skin ww_skin_toc_dropdown ww_skin_toc_dropdown_closed"> </span><a id="welcome:-PSLHoOfCRk" href="01.Welcome%20to%20ePublisher.html" target="_self" title="Welcome to ePublisher">Welcome to ePublisher</a></div>
</li>
<li>
<div class="ww_skin_toc_entry ww_skin_toc_folder"><span class="ww_skin ww_skin_toc_dropdown ww_skin_toc_dropdown_closed"> </span><a id="designing:35jFuetcask" href="02.Designing%20Templates%20and%20Stationery.html" target="_self" title="Designing Templates and Stationery">Designing Templates and Stationery</a></div>
</li>
<li>
<div class="ww_skin_toc_entry ww_skin_toc_folder"><span class="ww_skin ww_skin_toc_dropdown ww_skin_toc_dropdown_closed"> </span><a id="preparing:8mVXggMJy44" href="03.Preparing%20and%20Publishing%20Content.html" target="_self" title="Preparing and Publishing Content">Preparing and Publishing Content</a></div>
</li>
<li>
<div class="ww_skin_toc_entry ww_skin_toc_folder"><span class="ww_skin ww_skin_toc_dropdown ww_skin_toc_dropdown_closed"> </span><a id="reference:XuDJXbqjfiI" href="04.Reference%20Information.html" target="_self" title="Reference Information">Reference Information</a></div>
</li>
</ul>
</div>The IDs are:
- welcome:-PSLHoOfCRk
- designing:35jFuetcask
- preparing:8mVXggMJy44
- reference:XuDJXbqjfiI
To expand them, call the method Connect.TOCFolder_Open() in "connect.js":
var a_element; a_element = Connect_Window.document.getElementById(a_id); div_element = Browser.FindParentWithTagName(a_element, 'div'); Connect.TOCFolder_Open(div_element);
When to call it occurs in the function Connect.Parcel_Load() near the bottom:
// Done!
//
Progress.Complete();
// Show
//
Connect.presentation_div.style.visibility = 'visible';
Here, you can add a new function to expand a hierarchy and give it a list of anchor IDs to expand (or even other TOC levels):
// Done!
//
Progress.Complete();
// Show
//
Connect.presentation_div.style.visibility = 'visible';
// Define expand TOC function
//
var ExpandTOCHierarchy = function (param_id) {
var a_element, div_element, parent_ul, parent_entry_div;
a_element = Connect_Window.document.getElementById(a_id);
div_element = Browser.FindParentWithTagName(a_element, 'div');
// Expand entry and parents
//
Connect.TOCFolder_Open(div_element);
parent_ul = Browser.FindParentWithTagName(div_element, 'ul');
while (parent_ul !== null) {
parent_entry_div = Browser.PreviousSiblingElementWithTagName(parent_ul, 'div');
if (parent_entry_div !== null) {
Connect.TOCFolder_Open(parent_entry_div);
}
parent_ul = Browser.FindParentWithTagName(parent_ul, 'ul');
}
};
// Process list of IDs to expand
//
var expand_ids = [ '', '', '' ];
var expand_ids_index;
for (expand_ids_index = 0; expand_ids_index < expand_ids.length ; expand_ids_index += 1) {
ExpandTOCHierarchy(expand_ids[expand_ids_index]);
}To cut down on code changes, I'd recommend the above code go into "connect.js", except for the definition for "expand_ids". That can be placed into "Connect.asp" and overridden as needed.
Finally, I do recommend you swing by Study Hall if you want to play around with this more.