9d8dba1489
This implements the JS logic as discussed in our meeting. A sidebar can now contain virtually any wiki syntax. (currently hardcoded) H2 elements will toggle all their following content which is wrapped in a wrapper div. This is currently implemented on top of the old JavaScript which should be removed. The toggle element should be made configurable. We probably want to reuse some of the toggle logic for the user tools.
57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
/**
|
|
* Initialize the sidebar to have a toggleable menu system with icon support
|
|
*/
|
|
jQuery(function () {
|
|
const $nav = jQuery('#dokuwiki__aside').find('nav.nav-main');
|
|
if (!$nav.length) return;
|
|
|
|
const ELEMENT = 'h2'; // FIXME move to config
|
|
const $elements = $nav.find(ELEMENT);
|
|
$elements.each(function () {
|
|
const $me = jQuery(this);
|
|
|
|
// prepare text and the optional icon
|
|
const data = $me.text().split('@', 2);
|
|
const text = data[0].trim();
|
|
const $icon = jQuery('<span>')
|
|
.text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase());
|
|
if (data[1]) {
|
|
const src = data[1].trim();
|
|
const $svg = jQuery('<img>');
|
|
$svg.attr('src', DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg='+src+'&f=__link__');
|
|
$svg.on('load', function () {
|
|
$icon.html($svg);
|
|
});
|
|
}
|
|
|
|
// make the new toggler
|
|
const $toggler = jQuery('<h6>')
|
|
.addClass('navi-toggle')
|
|
.text(text)
|
|
.prepend($icon)
|
|
;
|
|
|
|
// wrap all following sibling til the next element in a wrapper
|
|
const $wrap = jQuery('<div>').addClass('navi-pane');
|
|
const $sibs = $me.nextAll();
|
|
for (let i = 0; i < $sibs.length; i++) {
|
|
if ($sibs[i].tagName.toLowerCase() === ELEMENT) break;
|
|
const $sib = jQuery($sibs[i]);
|
|
$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');
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
});
|