xref: /template/sprintdoc/js/sidebar.js (revision 9d8dba14895bab5a7f4470498af7099e73bfb9f5)
1/**
2 * Initialize the sidebar to have a toggleable menu system with icon support
3 */
4jQuery(function () {
5    const $nav = jQuery('#dokuwiki__aside').find('nav.nav-main');
6    if (!$nav.length) return;
7
8    const ELEMENT = 'h2'; // FIXME move to config
9    const $elements = $nav.find(ELEMENT);
10    $elements.each(function () {
11        const $me = jQuery(this);
12
13        // prepare text and the optional icon
14        const data = $me.text().split('@', 2);
15        const text = data[0].trim();
16        const $icon = jQuery('<span>')
17            .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase());
18        if (data[1]) {
19            const src = data[1].trim();
20            const $svg = jQuery('<img>');
21            $svg.attr('src', DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg='+src+'&f=__link__');
22            $svg.on('load', function () {
23                $icon.html($svg);
24            });
25        }
26
27        // make the new toggler
28        const $toggler = jQuery('<h6>')
29                .addClass('navi-toggle')
30                .text(text)
31                .prepend($icon)
32            ;
33
34        // wrap all following sibling til the next element in a wrapper
35        const $wrap = jQuery('<div>').addClass('navi-pane');
36        const $sibs = $me.nextAll();
37        for (let i = 0; i < $sibs.length; i++) {
38            if ($sibs[i].tagName.toLowerCase() === ELEMENT) break;
39            const $sib = jQuery($sibs[i]);
40            $sib.detach().appendTo($wrap);
41        }
42        $wrap.hide();
43        $wrap.insertAfter($me);
44
45        // replace element with toggler
46        $me.replaceWith($toggler);
47
48        // add toggling the wrapper
49        $toggler.click(function () {
50            $wrap.dw_toggle(undefined, function () {
51                $me.toggleClass('open');
52            });
53        });
54
55    });
56
57});
58