mr-legend_wiki/lib/tpl/sprintdoc/js/sidebar.js

/**
 * Sets up the sidebar behaviour
 *
 *  @author Andreas Gohr <gohr@cosmocode.de>
 *  @author Michael Große <gohr@cosmocode.de>
 *  @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */
jQuery(function () {
    var $nav = jQuery('#dokuwiki__aside');
    if (!$nav.length) return;

    // id of the current sidebar, used to differentiate states
    var sidebarId = '';
    var divId = jQuery('#sidebarId');
    if (typeof divId !== 'undefined') {
        sidebarId = divId.attr('class').split(' ')[0];
    }

        /**
         * closes sidebar
         */
    var setWideContent = function () {
            $nav.find('div.nav-panel').hide(); // close all panels
            jQuery('body').addClass('wide-content');
            removeToggleStorage();
            window.sessionStorage.setItem('wide-content', true);
        },

        /**
         * removes information about the toggle-state
         */
        removeToggleStorage = function () {
            for (var index=0; index <= window.sessionStorage.length; index += 1) {
                var item = window.sessionStorage.getItem('sidebar-section-' + sidebarId + '-' + index + '-open');
                if (!item) {
                    continue;
                }
                window.sessionStorage.setItem('sidebar-section-' + sidebarId + '-' + index + '-open', 'false');
            }
        },

        /**
         * opens the sidebar
         */
        setDefaultContent = function () {
            jQuery('body').removeClass('wide-content');
            window.sessionStorage.setItem('wide-content', false);
        },

        /**
         * Accessibility helper, focuses the first link witih the given element
         *
         * @param {jQuery} $elem
         */
        focusFirstSubLink = function ($elem) {
            $elem.find('a').first().focus();
        },

        removeOpenStates = function() {
            $nav.find('.is-open').removeClass('is-open');
        },

        /**
         * Toggle a navigation panel
         *
         * @param {jQuery} $toggler The a toggler
         */
         toggleNav = function ($toggler) {
            var $panel = $toggler.parent().next('div.nav-panel');
            var 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);
                    $toggler.addClass('is-open');
                } else {
                    $toggler.removeClass('is-open');
                }
            });
            window.sessionStorage.setItem('sidebar-section-' + sidebarId + '-' + $toggler.data('index') + '-open', !isOpen);
        },

        /**
         * Initialize the content navigation
         *
         * It mangles the sidebar content and handles inline Icon configuration
         */
        initContentNav = function () {
            var $main = $nav.find('nav.nav-main');
            if (!$main.length) return;

            if(jQuery('body').hasClass('wide-content')) {
                removeToggleStorage();
            }

            var ELEMENT = JSINFO.template.sprintdoc.sidebar_toggle_elements;
            var $elements = $main.find(ELEMENT);
            $elements.each(function (index) {
                var $me = jQuery(this),

                // prepare text and the optional icon
                    data = $me.text().split('@', 2),
                    text = data[0].trim();

                var $icon = jQuery('<span class="ico">')
                    .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
                    .wrapInner('<strong>');
                if (data[1]) {
                    var src = data[1].trim();
                    $icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
                }

                // make the new toggler
                var $toggler = jQuery('<a>')
                        .attr('href', '#')
                        .attr('role', 'heading')
                        .attr('aria-level', '2')
                        .text(text)
                        .wrapInner('<span class="lbl">')
                        .prepend($icon)
                        .data('index', index)
                    ;
                $toggler = jQuery('<div class="nav">').prepend($toggler);

                // wrap all following siblings til the next element in a wrapper
                var $wrap = jQuery('<div>')
                    .addClass('nav-panel');
                var $sibs = $me.nextAll();

                for (var i = 0; i < $sibs.length; i++) {
                    var $sib = jQuery($sibs[i]);
                    if ($sib.is(ELEMENT)) break;
                    $sib.detach().appendTo($wrap);
                    addContentMenuCurrentStates($sib, $toggler);
                }

                /*
                 * if there is only one subitem with a link, disable toggling
                 * and use a direct link.
                 */
                var $links = jQuery($wrap[0]).find('a');
                if ($links.length === 1 && $links.first().attr('href') !== '#') {
                    $toggler.children().first().attr('href', jQuery($links[0]).attr('href'));
                } else {
                    $wrap.insertAfter($me);

                    if ($toggler.parent('li').length) {
                        $toggler.parent('li').addClass('toggler');
                    }

                    if (window.sessionStorage.getItem('sidebar-section-' + sidebarId + '-' + index + '-open') === 'true') {
                        $wrap.css('display', 'block');
                        setTogglerClass($toggler,'is-open');
                    }
                }

                // replace element with toggler
                $me.replaceWith($toggler);
            });

            // fade in the navigation (was hidden until now
            $main.css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 200);
        },

        /**
         * Initialize the open/close toggling of menu entries
         */
        initMenuHandling = function () {
            $nav.on('click', 'div.nav a', function (e) {
                if (jQuery(this).attr('href').startsWith('#')) {
                    toggleNav(jQuery(this));
                    e.preventDefault();
                }
            });
        },

        /**
         * adds a given class to the toggler link
         * @param $toggler link or parent of link to whom the class is added
         * @param classVal class to be added
         */
        setTogglerClass = function ($toggler, classVal) {
            if($toggler.is('a')) {
                $toggler.addClass(classVal);
            } else {
                $toggler.find('a').addClass(classVal);
            }
        },

        /**
         * marks a $toggler link as active if the following menu has an active state
         * @param $menuObj jQuery Object of the menu / container
         * @param $toggler
         */
        addContentMenuCurrentStates = function ($menuObj, $toggler) {
            if($menuObj[0] && String($menuObj[0].innerHTML).indexOf('curid') > 0) {
                setTogglerClass($toggler,'is-active');
            }
        },

        /**
         * Make sure the content area is always as high as the sidebar
         */
        initContentMinHeight = function () {
            var $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
            if ($sidebar.length == 1) {
                var num = parseFloat($sidebar.height());
                if (!isNaN(num)) {
                    jQuery('#dokuwiki__content').css('minHeight', num + 100);
                }
            }
        },

        /**
         * Initialize the sidebar handle behaviour
         */
        initSidebarToggling = function () {
            var $toggler = jQuery('.togglelink.page_main-content').find('a');
            $toggler.click(function (e) {
                e.preventDefault();
                if (jQuery('body').hasClass('wide-content')) {
                    setDefaultContent();
                } else {
                    setWideContent();
                    removeOpenStates();
                }
            });

            if (window.sessionStorage.getItem('wide-content') === 'true') {
                setWideContent();
            }
        },

        /**
         * Show sidebar when accessing the search
         */
        initSearchToggling = function () {
            jQuery('.toggleSearch').find('a').click(function (e) {
                setDefaultContent();
                e.preventDefault();
                jQuery('#qsearch__in').focus();
            });

        },

        /**
         * Open and close the sidebar in mobile view
         */
        initMobileToggling = function () {
            jQuery('.menu-togglelink').find('a').click(function (e) {
                e.preventDefault();
                var $body = jQuery('body');
                $body.toggleClass('show-mobile-sidebar');
            });
        },

        /**
         * set is-active class if body has at least one of the given selectors
         * @param selectorArray Array of selectors
         * @param $nav container in which the $toggler is situated
         */
        setActive = function(selectorArray, $nav) {
            for(var i=0; i< selectorArray.length; i++) {
                var mode = selectorArray[i];
                if(jQuery('body').is('.do-'+mode)){
                    setTogglerClass($nav.find('.nav'),'is-active');
                    $nav.find('a[href*="do='+mode+'"]').wrapAll('<span class="curid"></span>');
                }
            }
        },

        /**
         * sets active states in site tool menu and user tool menu for certain modes
         * adds sessionStorage behaviour equivalent approach to content menus
         *
         */
        initTemplateMenues = function () {
            var $body = jQuery('body'),
                $siteTools = $nav.find('> .nav-sitetools'),
                $userTools = $nav.find('> .nav-usermenu'),
                $templateMenus = $nav.find('> nav:not(.nav-main)'),

                stModes = ['recent', 'media', 'index'],
                utModes = ['profile','admin'],
                isWideContent = false;

            /* set active states for site tool menu and user tool menu */
            setActive(stModes,$siteTools);
            setActive(utModes,$userTools);

            if($body.is('.do-show') && $body.is('.wide-content')) {
                window.sessionStorage.setItem('wide-content', true);
                isWideContent = true;
            }



            /* set data attributes for sessionStorage and check onload if one of the template menus should be opened */
            $templateMenus.each(function( index ) {
                var $t = jQuery(this).find('.nav'),
                    y = $nav.find('.nav-main').find('.nav').length,
                    $toggler = ($t.is('a')) ? $t : $t.find('a:last'),
                    tIndex = y + index;
                $toggler.data('index', tIndex);

                var item = window.sessionStorage.getItem('sidebar-section-' + sidebarId + '-' + tIndex + '-open');
                if (item) {
                    if(isWideContent) {
                        window.sessionStorage.setItem('sidebar-section-' + sidebarId + '-' + tIndex + '-open', 'false');
                    } else {
                        if (item === 'true') {
                            jQuery(this).find('.nav-panel').css('display', 'block');
                            setTogglerClass($toggler, 'is-open');
                        }
                    }
                }
                //console.log(window.sessionStorage);

            });

        };


    // main
    initContentNav();
    initSidebarToggling();
    initTemplateMenues();
    initMenuHandling();
    initContentMinHeight();
    initSearchToggling();
    initMobileToggling();
});