diff options
| -rw-r--r-- | lib/scripts/behaviour.js | 26 | ||||
| -rw-r--r-- | lib/scripts/page.js | 13 | ||||
| -rw-r--r-- | lib/tpl/dokuwiki/main.php | 4 |
3 files changed, 27 insertions, 16 deletions
diff --git a/lib/scripts/behaviour.js b/lib/scripts/behaviour.js index 97955dad9..b05949a90 100644 --- a/lib/scripts/behaviour.js +++ b/lib/scripts/behaviour.js @@ -1,37 +1,41 @@ /** * Hides elements with a slide animation * - * @param fn optional callback to run after hiding + * @param {function} fn optional callback to run after hiding + * @param {bool} noaria supress aria-expanded state setting * @author Adrian Lang <mail@adrianlang.de> */ -jQuery.fn.dw_hide = function(fn) { - this.attr('aria-expanded', 'false'); +jQuery.fn.dw_hide = function(fn, noaria) { + if(!noaria) this.attr('aria-expanded', 'false'); return this.slideUp('fast', fn); }; /** * Unhides elements with a slide animation * - * @param fn optional callback to run after hiding + * @param {function} fn optional callback to run after hiding + * @param {bool} noaria supress aria-expanded state setting * @author Adrian Lang <mail@adrianlang.de> */ -jQuery.fn.dw_show = function(fn) { - this.attr('aria-expanded', 'true'); +jQuery.fn.dw_show = function(fn, noaria) { + if(!noaria) this.attr('aria-expanded', 'true'); return this.slideDown('fast', fn); }; /** * Toggles visibility of an element using a slide element * - * @param bool the current state of the element (optional) + * @param {bool} state the current state of the element (optional) + * @param {function} fn callback after the state has been toggled + * @param {bool} noaria supress aria-expanded state setting */ -jQuery.fn.dw_toggle = function(bool, fn) { +jQuery.fn.dw_toggle = function(state, fn, noaria) { return this.each(function() { var $this = jQuery(this); - if (typeof bool === 'undefined') { - bool = $this.is(':hidden'); + if (typeof state === 'undefined') { + state = $this.is(':hidden'); } - $this[bool ? "dw_show" : "dw_hide" ](fn); + $this[state ? "dw_show" : "dw_hide" ](fn, noaria); }); }; diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 7b4958d82..a179ae2a8 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -109,8 +109,14 @@ dw_page = { * 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 + * To properly reserve space for the expanded element, the sliding animation is + * done on the children of the content. To make that look good and to make sure aria + * attributes are assigned correctly, it's recommended to make sure that the content + * element contains a single child element only. + * + * @param {selector} handle What should be clicked to toggle + * @param {selector} content This element will be toggled + * @param {int} state initial state (-1 = open, 1 = closed) */ makeToggle: function(handle, content, state){ var $handle, $content, $clicky, $child, setClicky; @@ -160,8 +166,9 @@ dw_page = { // Start animation and assure that $toc is hidden/visible $child.dw_toggle(hidden, function () { $content.toggle(hidden); + $content.attr('aria-expanded', hidden); $content.css('min-height',''); // remove min-height again - }); + }, true); }; // the state indicator diff --git a/lib/tpl/dokuwiki/main.php b/lib/tpl/dokuwiki/main.php index 165230e8a..eea1df71a 100644 --- a/lib/tpl/dokuwiki/main.php +++ b/lib/tpl/dokuwiki/main.php @@ -38,12 +38,12 @@ $showSidebar = $hasSidebar && ($ACT=='show'); <!-- ********** ASIDE ********** --> <div id="dokuwiki__aside"><div class="pad aside include group"> <h3 class="toggle"><?php echo $lang['sidebar'] ?></h3> - <div class="content"> + <div class="content"><div class="group"> <?php tpl_flush() ?> <?php tpl_includeFile('sidebarheader.html') ?> <?php tpl_include_page($conf['sidebar'], true, true) ?> <?php tpl_includeFile('sidebarfooter.html') ?> - </div> + </div></div> </div></div><!-- /aside --> <?php endif; ?> |