complete refactor of the sidebar behaviour javascript RES-754

Now all toggling of the sidebar and the related menus is done through
the same click handler. HTML has been unified. All sidebar related
content is now in a single include file instead of several. Icons for
the site tools user tools and trace have been added.

The CSS for the whole sidebar still has to be refactored.

css/area_main-sidebar.less

@@ -4,14 +4,14 @@
  * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-#dokuwiki__aside.main-sidebar {
+#dokuwiki__aside {
-    .nav-main {
     @icon-size: @font-size-big;
     @menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
 
     margin-left: @menu-margin; // moves *all* sidebar content to the right
 
-        .navi-toggle {
+    // the toggle element
+    h6 {
         cursor: pointer;
 
         height: @line-height-big;
@@ -46,9 +46,9 @@
                 vertical-align: baseline;
                 text-align: center;
                 color: @color-nav;
-                    border: 1px solid @color-nav;
+                border: 2px solid @color-nav;
-                    border-top-left-radius: 50%;
+                border-top-right-radius: 50%;
-                    border-bottom-right-radius: 50%;
+                border-bottom-left-radius: 50%;
 
             }
 
@@ -80,12 +80,15 @@
             }
         }
     }
+
+    // the panel (hidden by default)
+    div.nav-panel {
+        display: none;
     }
 }
 
 // FIXME check if the stuff below is still relevant
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1440px */
 

img/account-settings.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14M7,22H9V24H7V22M11,22H13V24H11V22M15,22H17V24H15V22Z" /></svg>

img/apple-safari.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,14.09 4.8,16 6.11,17.41L9.88,9.88L17.41,6.11C16,4.8 14.09,4 12,4M12,20A8,8 0 0,0 20,12C20,9.91 19.2,8 17.89,6.59L14.12,14.12L6.59,17.89C8,19.2 9.91,20 12,20M12,12L11.23,11.23L9.7,14.3L12.77,12.77L12,12M12,17.5H13V19H12V17.5M15.88,15.89L16.59,15.18L17.65,16.24L16.94,16.95L15.88,15.89M17.5,12V11H19V12H17.5M12,6.5H11V5H12V6.5M8.12,8.11L7.41,8.82L6.35,7.76L7.06,7.05L8.12,8.11M6.5,12V13H5V12H6.5Z" /></svg>

img/sitemap.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z" /></svg>

js/sidebar-menu.js

@@ -1,153 +0,0 @@
-( function( $, spc ) {
-
-    var addToggleLink = function($elem){
-            $elem.wrapInner('<a href="#toggleMenu" class="toggler"></a>');
-        },
-
-        setContentMinHeight = function(){
-            var $sidebar = $('.page-wrapper').find('> .tools').find('.col-xs-12');
-
-            if($sidebar.length == 1){
-                var h = $sidebar.height(),
-                    num = parseFloat(h);
-                if(!isNaN(num)){
-                    $('#dokuwiki__content').css('minHeight',num + 100);
-                }
-
-            }
-
-        },
-        setWideContent = function(){
-            var $openTogglers = $('.main-sidebar').find('.opened').find('.toggler');
-            $openTogglers.trigger( "click" );
-            $('body').addClass('wide-content');
-        },
-        setDefaultContent= function(){
-            $('body').removeClass('wide-content');
-
-        },
-        toggleState = function($toggler){
-            $toggler.toggleClass('closed');
-            $toggler.toggleClass('opened');
-        },
-        focusFirstSubLink = function($elem, is2nd){
-
-            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);
-                                }
-                                if($('body').hasClass('wide-content')){
-                                    setDefaultContent();
-                                }
-
-                            });
-                        });
-
-
-                        //FIXME: store current nav state with local storage
-                    }
-
-
-                }
-
-            }catch(err){
-
-            }
-        },
-        toggleMainContent = function(){
-            var $toggler = $('.togglelink.page_main-content').find('a');
-            $toggler.on("click", function (e) {
-                e.preventDefault();
-                var $link = $(this);
-
-                if($('body').hasClass('wide-content')){
-                    setDefaultContent();
-                }else{
-                    setWideContent();
-                }
-
-            });
-        },
-        sideMenu = function(){
-            var $menus = $('.tools').find('.toggle-menu');
-
-
-            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) {
-
-                            $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);
-                                    }
-                                    if($('body').hasClass('wide-content')){
-                                        setDefaultContent();
-                                    }
-                                });
-                            });
-
-                            //FIXME: store current nav state with local storage
-                        }
-                    }
-                });
-
-
-            }catch(err){
-                //console.log('err');
-            }
-        };
-
-    $(function(){
-        mainMenu();
-        sideMenu();
-        toggleMainContent();
-        setContentMinHeight();
-    });
-
-} )( jQuery, spc );
-

js/sidebar.js

@@ -1,12 +1,64 @@
 /**
- * Initialize the sidebar to have a toggleable menu system with icon support
+ * Sets up the sidebar behaviour
  */
 jQuery(function () {
-    const $nav = jQuery('#dokuwiki__aside').find('nav.nav-main');
+    const $nav = jQuery('#dokuwiki__aside');
     if (!$nav.length) return;
 
+    /**
+     * closes sidebar
+     */
+    const setWideContent = function () {
+        $nav.find('div.nav-panel').hide(); // close all panels
+        jQuery('body').addClass('wide-content');
+    };
+
+    /**
+     * opens the sidebar
+     */
+    const setDefaultContent = function () {
+        jQuery('body').removeClass('wide-content');
+
+    };
+
+    /**
+     * Accessibility helper, focuses the first link witih the given element
+     *
+     * @param {jQuery} $elem
+     */
+    const focusFirstSubLink = function ($elem) {
+        $elem.find('a').first().focus();
+    };
+
+    /**
+     * Toggle a navigation panel
+     *
+     * @param {jQuery} $toggler The h6 toggler
+     */
+    const toggleNav = function ($toggler) {
+        const $panel = $toggler.next('div.nav-panel');
+        const isOpen = $panel.is(':visible');
+        // open sidebar on interaction
+        setDefaultContent();
+        // toggle the panel, focus first link after opening
+        $panel.dw_toggle(!isOpen, function () {
+            if (!isOpen) {
+                focusFirstSubLink($panel);
+            }
+        });
+    };
+
+    /**
+     * Initialize the content navigation
+     *
+     * It mangles the sidebar content and handles inline Icon configuration
+     */
+    const initContentNav = function () {
+        const $main = $nav.find('nav.nav-main');
+        if (!$main.length) return;
+
         const ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
-    const $elements = $nav.find(ELEMENT);
+        const $elements = $main.find(ELEMENT);
         $elements.each(function () {
             const $me = jQuery(this);
 
@@ -23,32 +75,69 @@ jQuery(function () {
 
             // make the new toggler
             const $toggler = jQuery('<h6>')
-                .addClass('navi-toggle')
+                    .attr('role', 'heading')
+                    .attr('aria-level', '2')
                     .text(text)
                     .prepend($icon)
                 ;
 
-        // wrap all following sibling til the next element in a wrapper
+            // wrap all following siblings til the next element in a wrapper
-        const $wrap = jQuery('<div>').addClass('navi-pane');
+            const $wrap = jQuery('<div>')
+                .addClass('nav-panel');
             const $sibs = $me.nextAll();
             for (let i = 0; i < $sibs.length; i++) {
                 const $sib = jQuery($sibs[i]);
                 if ($sib.is(ELEMENT)) break;
                 $sib.detach().appendTo($wrap);
             }
-        $wrap.hide();
             $wrap.insertAfter($me);
 
             // replace element with toggler
             $me.replaceWith($toggler);
-
-        // add toggling the wrapper
-        $toggler.click(function () {
-            $wrap.dw_toggle(undefined, function () {
-                $me.toggleClass('open');
         });
+    };
+
+    /**
+     * Initialize the open/close toggling of menu entries
+     */
+    const initMenuHandling = function () {
+        $nav.on('click', 'h6', function () {
+            toggleNav(jQuery(this));
+        });
+    };
+
+    /**
+     * Make sure the content area is always as high as the sidebar
+     */
+    const initContentMinHeight = function () {
+        const $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
+        if ($sidebar.length == 1) {
+            const num = parseFloat($sidebar.height());
+            if (!isNaN(num)) {
+                jQuery('#dokuwiki__content').css('minHeight', num + 100);
+            }
+        }
+    };
+
+    /**
+     * Initialize the sidebar handle behaviour
+     */
+    const initSidebarToggling = function () {
+        const $toggler = jQuery('.togglelink.page_main-content').find('a');
+        $toggler.click(function (e) {
+            e.preventDefault();
+            if (jQuery('body').hasClass('wide-content')) {
+                setDefaultContent();
+            } else {
+                setWideContent();
+            }
+        });
+    };
+
+    // main
+    initContentNav();
+    initSidebarToggling();
+    initMenuHandling();
+    initContentMinHeight();
 });
 
-    });
-
-});

main.php

@@ -168,59 +168,14 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
                             ?>
                         </div><!-- .search -->
 
-                        <div id="dokuwiki__aside" class="menu main-sidebar">
+                        <div id="dokuwiki__aside">
                             <?php
-
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* main menu */
+/* sidebar */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                                include('tpl/nav-main.php');
+                                include('tpl/main-sidebar-nav.php');
                             ?>
-                        </div><!-- .menu -->
+                        </div><!-- .aside -->
-
-                        <div class="side-tools main-sidebar toggle-menu">
-                            <?php
-
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* site tools */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                                include('tpl/nav-sitetools.php');
-                            ?>
-                        </div><!-- .side-tools -->
-                        <div class="side-tools main-sidebar toggle-menu">
-                            <?php
-
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* user tools */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                            include('tpl/nav-usermenu.php');
-                            ?>
-                        </div><!-- .side-tools -->
-
-                        <div class="side-tools main-sidebar toggle-menu">
-                            <?php
-
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* trace */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                            include('tpl/nav-trace.php');
-                            ?>
-                        </div><!-- .side-tools -->
-
-                        <div class="sidebarfooter main-sidebar">
-                            <?php
-
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* Include Hook: sidebarfooter.html */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                                tpl_includeFile('sidebarfooter.html')
-                            ?>
-                        </div><!-- .sidebarheader -->
 
                     </div><!-- .col -->
                 </div><!-- .row -->

script.js

@@ -3,8 +3,5 @@
 
 /* DOKUWIKI:include js/plugins/do_tasks.js */
 
-/* DOKUWIKI:include js/sidebar-menu.js */
 /* DOKUWIKI:include js/meta-box.js */
-
-
 /* DOKUWIKI:include js/sidebar.js */

tpl/main-sidebar-nav.php

@@ -0,0 +1,71 @@
+<nav class="nav-main">
+    <?php /* main navigation, loaded from sidebar, fixed up by javascript */
+    tpl_include_page($conf['sidebar'], 1, 1);
+    ?>
+</nav>
+
+
+<nav class="nav-sitetools">
+    <h6 role="heading" aria-level="2">
+        <span><?php echo inlineSVG(__DIR__ . '/../img/sitemap.svg')?></span>
+        <?php echo $lang['site_tools']; ?>
+    </h6>
+    <div class="nav-panel">
+        <ul>
+            <?php
+            tpl_toolsevent(
+                'sitetools',
+                array(
+                    'recent' => tpl_action('recent', 1, 'li', 1),
+                    'media' => tpl_action('media', 1, 'li', 1),
+                    'index' => tpl_action('index', 1, 'li', 1),
+                )
+            );
+            ?>
+        </ul>
+    </div>
+</nav>
+
+
+<nav class="nav-usermenu">
+    <h6 role="heading" aria-level="2">
+        <span><?php echo inlineSVG(__DIR__ . '/../img/account-settings.svg')?></span>
+        <?php echo $lang['user_tools']; ?></h6>
+    <div class="nav-panel">
+        <ul>
+            <?php /* dokuwiki user tools */
+            tpl_toolsevent(
+                'usertools',
+                array(
+                    'login' => tpl_action('login', 1, 'li', 1),
+                    'admin' => tpl_action('admin', 1, 'li', 1),
+                    'register' => tpl_action('register', 1, 'li', 1),
+                )
+            );
+            ?>
+        </ul>
+    </div>
+</nav>
+
+
+<?php if($conf['breadcrumbs']): ?>
+    <nav class="nav-trace">
+        <h6 role="heading" aria-level="2">
+            <span><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg')?></span>
+            <?php echo tpl_getLang('head_menu_trace'); ?></h6>
+        <div class="nav-panel">
+            <ul>
+                <?php /* trace breadcrumbs as list */
+                // FIXME move to helper class
+                $crumbs = breadcrumbs();
+                $crumbs = array_reverse($crumbs, true);
+                foreach($crumbs as $id => $name) {
+                    echo '<li>';
+                    tpl_link(wl($id), hsc($name), 'class="breadcrumbs" title="' . $id . '"');
+                    echo '</li>';
+                }
+                ?>
+            </ul>
+        </div>
+    </nav>
+<?php endif ?>

tpl/nav-main.php

@@ -1,12 +0,0 @@
-<?php
-    if (!defined('DOKU_INC')) die();
-    if ($showSidebar):
-
-    echo "<nav class=\"nav-main\">";
-    echo "<h6 class=\"sr-only\" role=\"heading\" aria-level=\"2\">".tpl_getLang('head_menu_main')."</h6>";
-    echo PHP_EOL;
-    tpl_include_page($conf['sidebar'], 1, 1);
-    echo PHP_EOL;
-    echo "</nav>";
-
-    endif ?>

tpl/nav-sitetools.php

@@ -1,14 +0,0 @@
-<?php
-    if (!defined('DOKU_INC')) die();
-
-    if ($showSidebar): ?>
-
-                                <nav id="dokuwiki__sitetools" class="nav-sitetools">
-                                    <h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['site_tools']; ?></h6>
-                                    <ul><?php tpl_toolsevent('sitetools', array(
-                                                'recent'    => tpl_action('recent', 1, 'li', 1),
-                                                'media'     => tpl_action('media', 1, 'li', 1),
-                                                'index'     => tpl_action('index', 1, 'li', 1),
-                                            )); ?></ul>
-                                </nav>
-    <?php endif ?>

tpl/nav-trace.php

@@ -1,11 +0,0 @@
-<?php
-    if (!defined('DOKU_INC')) die();
-
-    if ($conf['useacl'] && $showTools): ?>
-
-                            <nav class="nav-trace <?php echo $navClass?>">
-                                <h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_trace'); ?></h6>
-                                <div class="trace"><p><?php tpl_breadcrumbs(); ?></p></div>
-                            </nav><!-- #dokuwiki__usertools -->
-    <?php endif ?>
-

tpl/nav-usermenu.php

@@ -1,23 +0,0 @@
-<?php
-    if (!defined('DOKU_INC')) die();
-
-    if ($conf['useacl'] && $showTools): ?>
-
-                            <nav class="nav-usermenu <?php echo $navClass?>">
-                                <h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['user_tools']; ?></h6>
-                                <ul>
-                                    <li class="log"><?php tpl_actionlink('login'); ?></li>
-                                    <?php if($_SERVER['REMOTE_USER']){
-                                        echo '<a class="profile" href="'.wl(tpl_getConf('user_ns').$_SERVER['REMOTE_USER'].':') . '">'.hsc($USERINFO['name']).'</a>';
-                                    }?>
-
-                                    <?php /* dokuwiki user tools */
-                                    tpl_toolsevent('usertools', array(
-                                        'admin'     => tpl_action('admin', 1, 'li', 1),
-                                        'register'  => tpl_action('register', 1, 'li', 1),
-                                    )); ?>
-
-                                </ul>
-                            </nav><!-- #dokuwiki__usertools -->
-    <?php endif ?>
-