From 5939959969429327ac9f2c157b09d3fd5b27a7b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jana=20Deutschl=C3=A4nder?= <deutschlaender@cosmocode.de>
Date: Thu, 5 Jan 2017 15:48:32 +0100
Subject: [PATCH 1/4] menu-toggle sidebar

---
 js/base/rem.min.js |  7 +++++++
 js/sidebar-menu.js | 38 ++++++++++++++++++++++++++++++++++++++
 script.js          |  3 +++
 3 files changed, 48 insertions(+)
 create mode 100644 js/base/rem.min.js

diff --git a/js/base/rem.min.js b/js/base/rem.min.js
new file mode 100644
index 0000000..7a96d75
--- /dev/null
+++ b/js/base/rem.min.js
@@ -0,0 +1,7 @@
+/**
+ * Module: rem - v1.3.2
+ * Description: A polyfill to parse CSS links and rewrite pixel equivalents into head for non supporting browsers
+ * Date Built: 2014-07-02
+ * Copyright (c) 2014  | Chuck Carpenter <chuck.carpenter@me.com>,Lucas Serven <lserven@gmail.com>;
+**/
+!function(e){"use strict";var t=function(){var e=document.createElement("div");return e.style.cssText="font-size: 1rem;",/rem/.test(e.style.fontSize)},n=function(){for(var e=document.getElementsByTagName("link"),t=[],n=0;n<e.length;n++)"stylesheet"===e[n].rel.toLowerCase()&&null===e[n].getAttribute("data-norem")&&t.push(e[n].href);return t},r=function(){for(var e=0;e<h.length;e++)l(h[e],o)},o=function(e,t){if(p.push(e.responseText),v.push(t),v.length===h.length){for(var n=0;n<v.length;n++)a(p[n],v[n]);(h=m.slice(0)).length>0?(v=[],p=[],m=[],r()):i()}},a=function(e,t){for(var n,r=d(e).replace(/\/\*[\s\S]*?\*\//g,""),o=/[\w\d\s\-\/\\\[\]:,.'"*()<>+~%#^$_=|@]+\{[\w\d\s\-\/\\%#:!;,.'"*()]+\d*\.?\d+rem[\w\d\s\-\/\\%#:!;,.'"*()]*\}/g,a=r.match(o),i=/\d*\.?\d+rem/g,s=r.match(i),c=/(.*\/)/,l=c.exec(t)[0],u=/@import (?:url\()?['"]?([^'\)"]*)['"]?\)?[^;]*/gm;null!==(n=u.exec(e));)m.push(0===n[1].indexOf("/")?n[1]:l+n[1]);null!==a&&0!==a.length&&(f=f.concat(a),g=g.concat(s))},i=function(){for(var e=/[\w\d\s\-\/\\%#:,.'"*()]+\d*\.?\d+rem[\w\d\s\-\/\\%#:!,.'"*()]*[;}]/g,t=0;t<f.length;t++){u+=f[t].substr(0,f[t].indexOf("{")+1);for(var n=f[t].match(e),r=0;r<n.length;r++)u+=n[r],r===n.length-1&&"}"!==u[u.length-1]&&(u+="\n}")}s()},s=function(){for(var e=0;e<g.length;e++)y[e]=Math.round(parseFloat(g[e].substr(0,g[e].length-3)*w))+"px";c()},c=function(){for(var e=0;e<y.length;e++)y[e]&&(u=u.replace(g[e],y[e]));var t=document.createElement("style");t.setAttribute("type","text/css"),t.id="remReplace",document.getElementsByTagName("head")[0].appendChild(t),t.styleSheet?t.styleSheet.cssText=u:t.appendChild(document.createTextNode(u))},l=function(t,n){try{var r=e.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP")||new ActiveXObject("Msxml2.XMLHTTP"):new XMLHttpRequest;r.open("GET",t,!0),r.onreadystatechange=function(){4===r.readyState&&n(r,t)},r.send(null)}catch(o){if(e.XDomainRequest){var a=new XDomainRequest;a.open("get",t),a.onload=function(){n(a,t)},a.onerror=function(){return!1},a.send()}}},d=function(t){return e.matchMedia||e.msMatchMedia||(t=t.replace(/@media[\s\S]*?\}\s*\}/g,"")),t};if(!t()){var u="",h=n(),m=[],f=[],g=[],p=[],v=[],y=[],w="";w=function(){var e,t=document,n=t.documentElement,r=t.body||t.createElement("body"),o=!t.body,a=t.createElement("div"),i=r.style.fontSize;return o&&n.appendChild(r),a.style.cssText="width:1em; position:absolute; visibility:hidden; padding: 0;",r.style.fontSize="1em",r.appendChild(a),e=a.offsetWidth,o?n.removeChild(r):(r.removeChild(a),r.style.fontSize=i),e}(),r()}}(window);
\ No newline at end of file
diff --git a/js/sidebar-menu.js b/js/sidebar-menu.js
index 449b782..371d3a0 100644
--- a/js/sidebar-menu.js
+++ b/js/sidebar-menu.js
@@ -36,8 +36,46 @@
         }
     };
 
+    var sideMenu = function(){
+        var $menu = $('.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();
+                                }
+                            }
+                        });
+                    });
+
+                    //FIXME: store current nav state with local storage
+                }
+
+
+            }
+
+        }catch(err){
+            alert('err');
+        }
+    };
+
     $(function(){
         mainMenu();
+        sideMenu();
     });
 
 } )( jQuery, spc );
diff --git a/script.js b/script.js
index b1ceb69..3f56cf0 100755
--- a/script.js
+++ b/script.js
@@ -26,8 +26,11 @@
 
 
 /* DOKUWIKI:include js/plugins/do_tasks.js */
+
 /* DOKUWIKI:include js/sidebar-menu.js */
 
 
 
 
+
+

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 2/4] 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 */
 
 
 
-
-
-

From d76e83a7bcb6365b3f0be92ab789c2c1226bb937 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jana=20Deutschl=C3=A4nder?= <deutschlaender@cosmocode.de>
Date: Thu, 5 Jan 2017 17:10:34 +0100
Subject: [PATCH 3/4] Format

---
 css/area_sidetools.less | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/css/area_sidetools.less b/css/area_sidetools.less
index 7db9647..ee5ee09 100644
--- a/css/area_sidetools.less
+++ b/css/area_sidetools.less
@@ -61,27 +61,29 @@
     ul,.trace{
         padding-left: (@icon-size + .5);
     }
+    
     ul{
         border-bottom: 1px solid @color-border;
     }
-    p{
+
+    p {
         border: 1px solid @color-border;
         background-color: @background_page-header;
         padding: .4rem;
         max-height: 6rem;
         overflow-y: auto;
-        .bchead, .bcsep{
+        .bchead, .bcsep {
             display: none;
         }
-        .breadcrumbs{
+        .breadcrumbs {
             padding: 0; margin: 0;
         }
-        bdi{
+        bdi {
             display: block;
             line-height: 125%;
             padding: .1rem 0;
         }
-        a{
+        a {
             cursor: pointer;
         }
     }

From 42f5d72185f2b28853d0738751f1132f4526afbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jana=20Deutschl=C3=A4nder?= <deutschlaender@cosmocode.de>
Date: Thu, 5 Jan 2017 17:12:06 +0100
Subject: [PATCH 4/4] Format

---
 css/area_sidetools.less | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/css/area_sidetools.less b/css/area_sidetools.less
index ee5ee09..0d70657 100644
--- a/css/area_sidetools.less
+++ b/css/area_sidetools.less
@@ -61,28 +61,33 @@
     ul,.trace{
         padding-left: (@icon-size + .5);
     }
-    
+
     ul{
         border-bottom: 1px solid @color-border;
     }
 
     p {
-        border: 1px solid @color-border;
-        background-color: @background_page-header;
-        padding: .4rem;
         max-height: 6rem;
         overflow-y: auto;
-        .bchead, .bcsep {
+        background-color: @background_page-header;
+        border: 1px solid @color-border;
+        padding: .4rem;
+                
+        .bchead,
+        .bcsep {
             display: none;
         }
+
         .breadcrumbs {
             padding: 0; margin: 0;
         }
+
         bdi {
             display: block;
             line-height: 125%;
             padding: .1rem 0;
         }
+
         a {
             cursor: pointer;
         }