diff options
| -rw-r--r-- | lib/scripts/page.js | 57 | ||||
| -rw-r--r-- | lib/tpl/default/design.css | 10 | ||||
| -rw-r--r-- | lib/tpl/default/rtl.css | 3 | ||||
| -rw-r--r-- | lib/tpl/dokuwiki/css/_toc.css | 6 | ||||
| -rw-r--r-- | lib/tpl/dokuwiki/css/design.css | 8 | ||||
| -rw-r--r-- | lib/tpl/dokuwiki/main.php | 11 |
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>−</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; ?> |