made TOC togling script more generic

Instead of a dedicated function to toggle the TOC we now have a function
that allows to use this functionality everywhere. This will be used to
toggle the sidebar in the mobile view (in an upcoming patch).

Note, this required some changes to the CSS (to make it more generic).
The CSS is still located in the TOC sections but should probably be
moved into its own section instead.

6 files changed, 61 insertions, 34 deletions

diff --git a/lib/scripts/page.js b/lib/scripts/page.js
index 6e7d7faf7..84af1f18b 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,47 +93,64 @@ 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 $wrapper, $header, $clicky, $toc, $tocul, setClicky;
-        $wrapper = jQuery('#dw__toc');
-        $header = jQuery('h3', $wrapper);
-        if(!$header.length) {
-            return;
-        }
-        $toc = jQuery('div', $wrapper).first();
-        $tocul = jQuery('ul', $toc);
+    makeToggle: function(handle, content){
+        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>');
-                $wrapper.addClass('close').removeClass('open');
+                $handle.addClass('toggle_open');
+                $handle.removeClass('toggle_close');
             }else{
                 $clicky.html('<span>&minus;</span>');
-                $wrapper.addClass('open').removeClass('close');
+                $handle.addClass('toggle_close');
+                $handle.removeClass('toggle_open');
             }
         };
 
-        $clicky = jQuery(document.createElement('strong'));
-        $header.css('cursor','pointer')
+        // the state indicator
+        $clicky = jQuery(document.createElement('strong'))
+                        .addClass('toggle');
+
+        // click function
+        $handle.css('cursor','pointer')
                .click(function () {
                     var hidden;
 
-                    // Assert that $toc instantly takes the whole TOC space
-                    $toc.css('height', $toc.height()).show();
+                    // Assert that content instantly takes the whole space
+                    $content.css('height', $content.height()).show();
 
-                    hidden = $tocul.stop(true, true).is(':hidden');
+                    // stop any running animation and get current state
+                    hidden = $child.stop(true, true).is(':hidden');
 
+                    // update the state
                     setClicky(!hidden);
 
                     // Start animation and assure that $toc is hidden/visible
-                    $tocul.dw_toggle(hidden, function () {
-                        $toc.toggle(hidden);
+                    $child.dw_toggle(hidden, function () {
+                        $content.toggle(hidden);
                     });
                 })
                .prepend($clicky);
 
+        // initial state
         setClicky();
     }
 };
diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css
index 300b62a15..44ccc0343 100644
--- a/lib/tpl/default/design.css
+++ b/lib/tpl/default/design.css
@@ -565,23 +565,25 @@ div.dokuwiki #dw__toc h3 {
   font-size: 1em;
 }
 
-div.dokuwiki #dw__toc h3 strong {
+div.dokuwiki .toggle_close .toggle,
+div.dokuwiki .toggle_open .toggle {
     border: 0.4em solid __background_alt__;
     float: right;
     display: block;
     margin: 0.4em 3px 0 0;
 }
 
-div.dokuwiki #dw__toc h3 strong span {
+div.dokuwiki .toggle_open .toggle span,
+div.dokuwiki .toggle_close .toggle span {
     display: none;
 }
 
-div.dokuwiki #dw__toc.close h3 strong {
+div.dokuwiki .toggle_close .toggle {
     margin-top: 0.4em;
     border-top: 0.4em solid __text__;
 }
 
-div.dokuwiki #dw__toc.open h3 strong {
+div.dokuwiki .toggle_open .toggle {
     margin-top: 0;
     border-bottom: 0.4em solid __text__;
 }
diff --git a/lib/tpl/default/rtl.css b/lib/tpl/default/rtl.css
index 32a8ddb6d..b9dd82902 100644
--- a/lib/tpl/default/rtl.css
+++ b/lib/tpl/default/rtl.css
@@ -98,7 +98,8 @@ div.dokuwiki #dw__toc h3 {
   text-align: right;
 }
 
-div.dokuwiki #dw__toc h3 strong {
+div.dokuwiki .toggle_close .toggle,
+div.dokuwiki .toggle_open .toggle {
     float: left;
     margin: 0.4em 0 0 3px;
 }
diff --git a/lib/tpl/dokuwiki/css/_toc.css b/lib/tpl/dokuwiki/css/_toc.css
index e62bb0a7a..71cc4096a 100644
--- a/lib/tpl/dokuwiki/css/_toc.css
+++ b/lib/tpl/dokuwiki/css/_toc.css
@@ -26,11 +26,13 @@
     font-weight: bold;
 }
 
-#dw__toc h3 strong {
+.toggle_open .toggle,
+.toggle_close .toggle {
     float: right;
     margin: 0 .2em;
 }
-[dir=rtl] #dw__toc h3 strong {
+[dir=rtl] .toggle_open .toggle,
+[dir=rtl] .toggle_close .toggle {
     float: left;
 }
 
diff --git a/lib/tpl/dokuwiki/css/design.css b/lib/tpl/dokuwiki/css/design.css
index 8ebeca6da..2d0af6ad1 100644
--- a/lib/tpl/dokuwiki/css/design.css
+++ b/lib/tpl/dokuwiki/css/design.css
@@ -412,17 +412,19 @@
     letter-spacing: .1em;
 }
 
-#dw__toc h3 strong {
+.toggle_open .toggle,
+.toggle_close .toggle {
     background: transparent url(images/toc-arrows.png) 0 0;
     width: 8px;
     height: 5px;
     margin: .4em 0 0;
 }
-#dw__toc.close strong {
+.toggle_close .toggle {
     background-position: 0 -5px;
 }
 
-#dw__toc strong span {
+.toggle_open .toggle span,
+.toggle_close .toggle span {
     display: none;
 }
 
diff --git a/lib/tpl/dokuwiki/main.php b/lib/tpl/dokuwiki/main.php
index 57c94f174..5e8eb7517 100644
--- a/lib/tpl/dokuwiki/main.php
+++ b/lib/tpl/dokuwiki/main.php
@@ -37,10 +37,13 @@ $showSidebar = $conf['sidebar'] && page_exists($conf['sidebar']) && ($ACT=='show
             <?php if($showSidebar): ?>
                 <!-- ********** ASIDE ********** -->
                 <div id="dokuwiki__aside"><div class="pad include group">
-                    <?php tpl_flush() ?>
-                    <?php tpl_includeFile('sidebarheader.html') ?>
-                    <?php tpl_include_page($conf['sidebar']) ?>
-                    <?php tpl_includeFile('sidebarfooter.html') ?>
+                    <div class="a11y toggle"><?php echo hsc(ucfirst($conf['sidebar'])) ?></div>
+                    <div class="aside group">
+                        <?php tpl_flush() ?>
+                        <?php tpl_includeFile('sidebarheader.html') ?>
+                        <?php tpl_include_page($conf['sidebar']) ?>
+                        <?php tpl_includeFile('sidebarfooter.html') ?>
+                    </div>
                 </div></div><!-- /aside -->
             <?php endif; ?>