From e78ffc6c795d20035c6384a96b80f1b7249a7578 Mon Sep 17 00:00:00 2001
From: Anna Dabrowska <dabrowska@cosmocode.de>
Date: Mon, 13 May 2019 18:19:31 +0200
Subject: [PATCH] Separate states of different sidebars

---
 Template.php  |  5 +++--
 js/sidebar.js | 19 +++++++++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/Template.php b/Template.php
index 32f4920..7f93528 100644
--- a/Template.php
+++ b/Template.php
@@ -115,10 +115,11 @@ class Template {
         global $ID;
         global $conf;
 
+        // id of the current sidebar, each sidebar must have its own state
+        $header = sprintf('<div id="sidebarId" class="%s"></div>', page_findnearest($conf['sidebar']));
         // add tabs if multiple navigation types available
-        $header = '';
         if ($this->plugins['sitemapnavi'] !== null) {
-            $header = '<ul class="sidebar-tabs">';
+            $header .= '<ul class="sidebar-tabs">';
             $header .= '<li class="' . ($this->nav === 'sidebar' ? 'active' : '') . '">' .
                 '<a href="' . wl($ID, ['nav' => 'sidebar']) . '">'.tpl_getLang('nav_sidebar').'</a></li>';
             $header .= '<li class="' . ($this->nav === 'sitemap' ? 'active' : '') . '">' .
diff --git a/js/sidebar.js b/js/sidebar.js
index a5193c4..bb33be1 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -9,6 +9,13 @@ 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
          */
@@ -24,11 +31,11 @@ jQuery(function () {
          */
         removeToggleStorage = function () {
             for (var index=0; index <= window.sessionStorage.length; index += 1) {
-                var item = window.sessionStorage.getItem('sidebar-section-' + index + '-open');
+                var item = window.sessionStorage.getItem('sidebar-section-' + sidebarId + '-' + index + '-open');
                 if (!item) {
                     continue;
                 }
-                window.sessionStorage.setItem('sidebar-section-' + index + '-open', 'false');
+                window.sessionStorage.setItem('sidebar-section-' + sidebarId + '-' + index + '-open', 'false');
             }
         },
 
@@ -72,7 +79,7 @@ jQuery(function () {
                     $toggler.removeClass('is-open');
                 }
             });
-            window.sessionStorage.setItem('sidebar-section-' + $toggler.data('index') + '-open', !isOpen);
+            window.sessionStorage.setItem('sidebar-section-' + sidebarId + '-' + $toggler.data('index') + '-open', !isOpen);
         },
 
         /**
@@ -138,7 +145,7 @@ jQuery(function () {
                     $toggler.parent('li').addClass('toggler');
                 }
 
-                if (window.sessionStorage.getItem('sidebar-section-' + index + '-open') === 'true') {
+                if (window.sessionStorage.getItem('sidebar-section-' + sidebarId + '-' + index + '-open') === 'true') {
                     $wrap.css('display', 'block');
                     setTogglerClass($toggler,'is-open');
                 }
@@ -288,10 +295,10 @@ jQuery(function () {
                     tIndex = y + index;
                 $toggler.data('index', tIndex);
 
-                var item = window.sessionStorage.getItem('sidebar-section-' + tIndex + '-open');
+                var item = window.sessionStorage.getItem('sidebar-section-' + sidebarId + '-' + tIndex + '-open');
                 if (item) {
                     if(isWideContent) {
-                        window.sessionStorage.setItem('sidebar-section-' + tIndex + '-open', 'false');
+                        window.sessionStorage.setItem('sidebar-section-' + sidebarId + '-' + tIndex + '-open', 'false');
                     } else {
                         if (item === 'true') {
                             jQuery(this).find('.nav-panel').css('display', 'block');