From 19265a3d2c55c6000faebefd4f048a3874765e6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jana=20Deutschl=C3=A4nder?= <deutschlaender@cosmocode.de>
Date: Thu, 5 Jan 2017 17:04:48 +0100
Subject: [PATCH] sidebar toggle + scrolltobottom for trace on page load

---
 css/area_sidetools.less |   2 +-
 js/sidebar-menu.js      | 139 +++++++++++++++++++++++-----------------
 script.js               |   6 +-
 3 files changed, 84 insertions(+), 63 deletions(-)

diff --git a/css/area_sidetools.less b/css/area_sidetools.less
index 81205f1..7db9647 100644
--- a/css/area_sidetools.less
+++ b/css/area_sidetools.less
@@ -68,7 +68,7 @@
         border: 1px solid @color-border;
         background-color: @background_page-header;
         padding: .4rem;
-        max-height: 200px;
+        max-height: 6rem;
         overflow-y: auto;
         .bchead, .bcsep{
             display: none;
diff --git a/js/sidebar-menu.js b/js/sidebar-menu.js
index 371d3a0..1a87438 100644
--- a/js/sidebar-menu.js
+++ b/js/sidebar-menu.js
@@ -1,77 +1,100 @@
 ( function( $, spc ) {
 
-    var mainMenu = function(){
-        var $menu = $('.nav-main').find('> ul');
+    var addToggleLink = function($elem){
+            $elem.wrapInner('<a href="#toggleMenu" class="toggler"></a>');
+        },
+        toggleState = function($toggler){
+            $toggler.toggleClass('closed');
+            $toggler.toggleClass('opened');
+        },
+        focusFirstSubLink = function($elem, is2nd){
 
-        try{
-            if($menu.length > 0){
-                var $toggler = $menu.find('> li.level1 > .li'),
-                    $submenu = $menu.find('> li.level1 > ul');
-                if($toggler.length > 0 && $submenu.length > 0){
-                    $toggler.addClass('closed');
-                    $toggler.wrapInner('<a href="#toggleMenu" class="toggler"></a>');
-                    $toggler.each(function( index ) {
-                        $(this).on( "click", function(e) {
-                            e.preventDefault();
-                            var $this = $(this);
-                            $this.toggleClass('closed');
-                            $this.toggleClass('opened');
-                            if($this.hasClass('opened')){
-                                var $foc = $this.closest('li.level1').find('li.level2:first-child').find('a:first-child');
-                                if($foc.length > 0){
-                                    $foc.focus();
+            var $foc = (is2nd) ? $elem.find('a')[1] : $elem.find('a')[0];
+
+            if($foc){
+                $foc.focus();
+            }
+            return $foc;
+        },
+        focusLastSubLink = function($elem){
+
+            var $foc = $elem.find('a:last-child'),
+                height = $elem.find('p').scrollHeight;
+
+            if($foc){
+                $foc.focus();
+            }
+            $elem.scrollTop(height);
+            return $foc;
+        },
+
+        mainMenu = function(){
+            var $menu = $('.nav-main').find('> ul');
+
+            try{
+                if($menu.length > 0){
+                    var $toggler = $menu.find('> li.level1 > .li'),
+                        $submenu = $menu.find('> li.level1 > ul');
+                    if($toggler.length > 0 && $submenu.length > 0){
+
+                        $toggler.addClass('closed');
+                        addToggleLink($toggler);
+                        $toggler.each(function( index ) {
+                            $(this).on( "click", function(e) {
+                                e.preventDefault();
+                                var $this = $(this);
+                                toggleState($this);
+                                if($this.hasClass('opened')){
+                                    var $foc = focusFirstSubLink($this.closest('li.level1'), true);
                                 }
-                            }
+                            });
                         });
-                    });
 
-                    //FIXME: store current nav state with local storage
+                        //FIXME: store current nav state with local storage
+                    }
+
+
                 }
 
+            }catch(err){
 
             }
-
-        }catch(err){
-
-        }
-    };
-
-    var sideMenu = function(){
-        var $menu = $('.tools').find('.toggle-menu');
+        },
+        sideMenu = function(){
+            var $menus = $('.tools').find('.toggle-menu');
 
 
-        try{
-            if($menu.length > 0){
-                var $toggler = $menu.find('h6'),
-                    $submenu = $menu.find('nav > ul >li, nav > div');
-                if($toggler.length > 0 && $submenu.length > 0){
-                    $toggler.addClass('closed');
-                    $toggler.wrapInner('<a href="#toggleMenu" class="toggler"></a>');
-                    $toggler.each(function( index ) {
-                        $(this).on( "click", function(e) {
-                            e.preventDefault();
-                            var $this = $(this);
-                            $this.toggleClass('closed');
-                            $this.toggleClass('opened');
-                            if($this.hasClass('opened')){
-                                var $foc = $this.closest('li.level1').find('li.level2:first-child').find('a:first-child');
-                                if($foc.length > 0){
-                                    $foc.focus();
-                                }
-                            }
-                        });
-                    });
+            try{
+                $menus.each(function( ) {
+                    var $menu = $(this);
+                    if($menu.length > 0){
+                        var $toggler = $menu.find('h6'),
+                            $submenu = $menu.find('nav > ul, nav > div');
+                        if($toggler.length > 0 && $submenu.length > 0) {
 
-                    //FIXME: store current nav state with local storage
-                }
+                            $toggler.addClass('closed');
+                            addToggleLink($toggler);
+                            $toggler.each(function (index) {
+                                $(this).on("click", function (e) {
+                                    e.preventDefault();
+                                    var $this = $(this);
+                                    toggleState($this);
+                                    if ($this.hasClass('opened')) {
+                                        var $elem = ($submenu.is('div')) ? focusLastSubLink($submenu): focusFirstSubLink($submenu,false);
+                                    }
+                                });
+                            });
+
+                            //FIXME: store current nav state with local storage
+                        }
+                    }
+                });
 
 
+            }catch(err){
+                alert('err');
             }
-
-        }catch(err){
-            alert('err');
-        }
-    };
+        };
 
     $(function(){
         mainMenu();
diff --git a/script.js b/script.js
index 3f56cf0..166cae9 100755
--- a/script.js
+++ b/script.js
@@ -24,13 +24,11 @@
 
 } )( jQuery, spc, wikiLang );
 
-
 /* DOKUWIKI:include js/plugins/do_tasks.js */
 
+
+
 /* DOKUWIKI:include js/sidebar-menu.js */
 
 
 
-
-
-