1 files changed, 75 insertions, 38 deletions

diff --git a/lib/scripts/page.js b/lib/scripts/page.js
index 5da4a9cc0..4ab0bf9b5 100644
--- a/lib/scripts/page.js
+++ b/lib/scripts/page.js
@@ -10,7 +10,7 @@ dw_page = {
     init: function(){
         dw_page.sectionHighlight();
         jQuery('a.fn_top').mouseover(dw_page.footnoteDisplay);
-        dw_page.initTocToggle();
+        dw_page.makeToggle('#dw__toc h3','#dw__toc > div');
     },
 
     /**
@@ -22,19 +22,27 @@ dw_page = {
         jQuery('form.btn_secedit')
             .mouseover(function(){
                 var $tgt = jQuery(this).parent(),
-                    nr = $tgt.attr('class').match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2];
-
-                // Walk the DOM tree up (first previous siblings, then parents)
-                // until boundary element
-                while($tgt.length > 0 && !$tgt.hasClass('sectionedit' + nr)) {
-                    // $.last gives the DOM-ordered last element:
-                    // prev if present, else parent.
-                    $tgt = $tgt.prev().add($tgt.parent()).last();
-                    $tgt.addClass('section_highlight');
+                    nr = $tgt.attr('class').match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2],
+                    $highlight = jQuery(),                                             // holder for elements in the section to be highlighted
+                    $highlightWrap = jQuery('<div class="section_highlight"></div>');  // section highlight wrapper
+
+                // Walk the dom tree in reverse to find the sibling which is or contains the section edit marker
+                while($tgt.length > 0 && !($tgt.hasClass('sectionedit' + nr) || $tgt.find('.sectionedit' + nr).length)) {
+                    $tgt = $tgt.prev();
+                    $highlight = $highlight.add($tgt);
                 }
+              // insert the section highlight wrapper before the last element added to $highlight
+              $highlight.filter(':last').before($highlightWrap);
+              // and move the elements to be highlighted inside the section highlight wrapper
+              $highlight.detach().appendTo($highlightWrap);
             })
             .mouseout(function(){
-                jQuery('.section_highlight').removeClass('section_highlight');
+                // find the section highlight wrapper...
+                var $highlightWrap = jQuery('.section_highlight');
+                // ...move its children in front of it (as siblings)...
+                $highlightWrap.before($highlightWrap.children().detach());
+                // ...and remove the section highlight wrapper
+                $highlightWrap.detach();
             });
     },
 
@@ -93,48 +101,77 @@ dw_page = {
     },
 
     /**
-     * Adds the toggle switch to the TOC
+     * Makes an element foldable by clicking its handle
+     *
+     * This is used for the TOC toggling, but can be used for other elements
+     * as well. A state indicator is inserted into the handle and can be styled
+     * by CSS.
+     *
+     * @param selector handle What should be clicked to toggle
+     * @param selector content This element will be toggled
      */
-    initTocToggle: function() {
-        var $header, $clicky, $toc, $tocul, setClicky;
-        $header = jQuery('#toc__header');
-        if(!$header.length) {
-            return;
-        }
-        $toc = jQuery('#toc__inside');
-        $tocul = $toc.children('ul.toc');
+    makeToggle: function(handle, content, state){
+        var $handle, $content, $clicky, $child, setClicky;
+        $handle = jQuery(handle);
+        if(!$handle.length) return;
+        $content = jQuery(content);
+        if(!$content.length) return;
+
+        // we animate the children
+        $child = $content.children();
 
+        // class/display toggling
         setClicky = function(hiding){
             if(hiding){
                 $clicky.html('<span>+</span>');
-                $clicky[0].className = 'toc_open';
+                $handle.addClass('closed');
+                $handle.removeClass('open');
             }else{
-                $clicky.html('<span>&minus;</span>');
-                $clicky[0].className = 'toc_close';
+                $clicky.html('<span>−</span>');
+                $handle.addClass('open');
+                $handle.removeClass('closed');
             }
         };
 
-        $clicky = jQuery(document.createElement('span'))
-                        .attr('id','toc__toggle');
-        $header.css('cursor','pointer')
-               .click(function () {
-                    var hidden;
+        $handle[0].setState = function(state){
+            var hidden;
+            if(!state) state = 1;
+
+            // Assert that content instantly takes the whole space
+            $content.css('min-height', $content.height()).show();
 
-                    // Assert that $toc instantly takes the whole TOC space
-                    $toc.css('height', $toc.height()).show();
+            // stop any running animation
+            $child.stop(true, true);
 
-                    hidden = $tocul.stop(true, true).is(':hidden');
+            // was a state given or do we toggle?
+            if(state === -1) {
+                hidden = false;
+            } else if(state === 1) {
+                hidden = true;
+            } else {
+                hidden = $child.is(':hidden');
+            }
+
+            // update the state
+            setClicky(!hidden);
+
+            // Start animation and assure that $toc is hidden/visible
+            $child.dw_toggle(hidden, function () {
+                $content.toggle(hidden);
+                $content.css('min-height',''); // remove min-height again
+            });
+        };
 
-                    setClicky(!hidden);
+        // the state indicator
+        $clicky = jQuery(document.createElement('strong'));
 
-                    // Start animation and assure that $toc is hidden/visible
-                    $tocul.dw_toggle(hidden, function () {
-                        $toc.toggle(hidden);
-                    });
-                })
+        // click function
+        $handle.css('cursor','pointer')
+               .click($handle[0].setState)
                .prepend($clicky);
 
-        setClicky();
+        // initial state
+        $handle[0].setState(state);
     }
 };