Merge branch 'master' of git://github.com/splitbrain/dokuwiki

1 files changed, 56 insertions, 28 deletions

diff --git a/lib/scripts/page.js b/lib/scripts/page.js
index 5da4a9cc0..74aca9c06 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');
     },
 
     /**
@@ -93,48 +93,76 @@ 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);
+            });
+        };
 
-                    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);
     }
 };