diff --git a/lib/scripts/page.js b/lib/scripts/page.js
index 6e7d7faf744cebc1371bb2a1ef3e5272775f59af..84af1f18b67004776b3cca3f86a22c5c1de64bd5 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>−</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 300b62a1560e163053646c2b05592ac35ff4fcf9..44ccc034356db38fef2d9d20ccb6c92e7a80f489 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 32a8ddb6d70bfd0120b75323d19462286fa92e26..b9dd82902dd75370d66de707d06a8a1e2e022795 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 e62bb0a7a6f75b54d54f67bacf1f850aa4729168..71cc4096abfbffc5dbddca1b0d0eb7e4fec369c7 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 8ebeca6dad84d4dcb82ce704414328c53ee9b6ad..2d0af6ad150a0a843d8c4238567e860bc0bd03d1 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 57c94f174da1488d6124c26e552bfb9ee801aa16..5e8eb75176302bf6d209f934af2d7b4b025c9166 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; ?>