xref: /template/sprintdoc/js/sidebar.js (revision 4055de39fa1d13689fd492775c7237dab417a8bd) 
1/**
2 * Sets up the sidebar behaviour
3 */
4jQuery(function () {
5    const $nav = jQuery('#dokuwiki__aside');
6    if (!$nav.length) return;
7
8    /**
9     * closes sidebar
10     */
11    const setWideContent = function () {
12        $nav.find('div.nav-panel').hide(); // close all panels
13        jQuery('body').addClass('wide-content');
14    };
15
16    /**
17     * opens the sidebar
18     */
19    const setDefaultContent = function () {
20        jQuery('body').removeClass('wide-content');
21
22    };
23
24    /**
25     * Accessibility helper, focuses the first link witih the given element
26     *
27     * @param {jQuery} $elem
28     */
29    const focusFirstSubLink = function ($elem) {
30        $elem.find('a').first().focus();
31    };
32
33    /**
34     * Toggle a navigation panel
35     *
36     * @param {jQuery} $toggler The h6 toggler
37     */
38    const toggleNav = function ($toggler) {
39        const $panel = $toggler.next('div.nav-panel');
40        const isOpen = $panel.is(':visible');
41        // open sidebar on interaction
42        setDefaultContent();
43        // toggle the panel, focus first link after opening
44        $panel.dw_toggle(!isOpen, function () {
45            if (!isOpen) {
46                focusFirstSubLink($panel);
47            }
48        });
49    };
50
51    /**
52     * Initialize the content navigation
53     *
54     * It mangles the sidebar content and handles inline Icon configuration
55     */
56    const initContentNav = function () {
57        const $main = $nav.find('nav.nav-main');
58        if (!$main.length) return;
59
60        const ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
61        const $elements = $main.find(ELEMENT);
62        $elements.each(function () {
63            const $me = jQuery(this);
64
65            // prepare text and the optional icon
66            const data = $me.text().split('@', 2);
67            const text = data[0].trim();
68            const $icon = jQuery('<span class="ico">')
69                .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
70                .wrapInner('<strong>');
71            if (data[1]) {
72                const src = data[1].trim();
73                $icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
74            }
75
76            // make the new toggler
77            const $toggler = jQuery('<a>')
78                    .addClass('nav')
79                    .attr('href', '#')
80                    .attr('role', 'heading')
81                    .attr('aria-level', '2')
82                    .text(text)
83                    .wrapInner('<span class="lbl">')
84                    .prepend($icon)
85                ;
86
87            // wrap all following siblings til the next element in a wrapper
88            const $wrap = jQuery('<div>')
89                .addClass('nav-panel');
90            const $sibs = $me.nextAll();
91            for (let i = 0; i < $sibs.length; i++) {
92                const $sib = jQuery($sibs[i]);
93                if ($sib.is(ELEMENT)) break;
94                $sib.detach().appendTo($wrap);
95            }
96            $wrap.insertAfter($me);
97
98            // replace element with toggler
99            $me.replaceWith($toggler);
100        });
101    };
102
103    /**
104     * Initialize the open/close toggling of menu entries
105     */
106    const initMenuHandling = function () {
107        $nav.on('click', 'a', function (e) {
108            toggleNav(jQuery(this));
109            e.preventDefault();
110        });
111    };
112
113    /**
114     * Make sure the content area is always as high as the sidebar
115     */
116    const initContentMinHeight = function () {
117        const $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
118        if ($sidebar.length == 1) {
119            const num = parseFloat($sidebar.height());
120            if (!isNaN(num)) {
121                jQuery('#dokuwiki__content').css('minHeight', num + 100);
122            }
123        }
124    };
125
126    /**
127     * Initialize the sidebar handle behaviour
128     */
129    const initSidebarToggling = function () {
130        const $toggler = jQuery('.togglelink.page_main-content').find('a');
131        $toggler.click(function (e) {
132            e.preventDefault();
133            if (jQuery('body').hasClass('wide-content')) {
134                setDefaultContent();
135            } else {
136                setWideContent();
137            }
138        });
139    };
140
141    /**
142     * Show sidebar when accessing the search
143     */
144    const initSearchToggling = function () {
145        jQuery('.toggleSearch').find('a').click(function (e) {
146            setDefaultContent();
147            e.preventDefault();
148            jQuery('#qsearch__in').focus();
149        });
150
151    };
152
153    /**
154     * Open and close the sidebar in mobile view
155     */
156    const initMobileToggling = function () {
157        jQuery('.menu-togglelink').find('a').click(function (e) {
158            e.preventDefault();
159            jQuery('#dokuwiki__aside').toggleClass('show');
160        });
161    };
162
163    // main
164    initContentNav();
165    initSidebarToggling();
166    initMenuHandling();
167    initContentMinHeight();
168    initSearchToggling();
169    initMobileToggling();
170});
171
172