From 9d8dba14895bab5a7f4470498af7099e73bfb9f5 Mon Sep 17 00:00:00 2001
From: Andreas Gohr <andi@splitbrain.org>
Date: Mon, 13 Feb 2017 15:17:18 +0100
Subject: [PATCH] New sidebar JavaScript logic

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.
---
 js/sidebar.js | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++
 script.js     |  3 +++
 2 files changed, 60 insertions(+)
 create mode 100644 js/sidebar.js

diff --git a/js/sidebar.js b/js/sidebar.js
new file mode 100644
index 0000000..16b9232
--- /dev/null
+++ b/js/sidebar.js
@@ -0,0 +1,57 @@
+/**
+ * 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');
+            });
+        });
+
+    });
+
+});
diff --git a/script.js b/script.js
index 73e1f93..c9d2ca4 100755
--- a/script.js
+++ b/script.js
@@ -33,3 +33,6 @@ var $_LANG = {};
 
 /* DOKUWIKI:include js/sidebar-menu.js */
 /* DOKUWIKI:include js/meta-box.js */
+
+
+/* DOKUWIKI:include js/sidebar.js */