show TOC and local Graph

secure-77 · Jan 14, 2024 · f076a61 · f076a61
1 parent d889216
commit f076a61
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 58 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -16,6 +16,7 @@
 - updated vis-network to 9.1.9
 - added new custom logo and social media section
 - fixed issue Folder arrow marker randomly disappears [#94](https://github.com/secure-77/Perlite/issues/94)
+- changed to show TOC and local Graph at the same time
 
 
 ## 1.5.7

diff --git a/docker-compose-build.yml b/docker-compose-build.yml
@@ -12,6 +12,7 @@ services:
       - ALLOWED_FILE_LINK_TYPES=pdf,mp4
       - DISABLE_POP_HOVER=true
       - SHOW_TOC=true
+      - SHOW_LOCAL_GRAPH=true
       - HOME_FILE=README
       - FONT_SIZE=15
       - HTML_SAFE_MODE=true

diff --git a/docker-compose-dev.yml b/docker-compose-dev.yml
@@ -12,7 +12,8 @@ services:
       - ABSOLUTE_PATHES=false
       - ALLOWED_FILE_LINK_TYPES=pdf,mp4
       - DISABLE_POP_HOVER=false
-      - SHOW_TOC=false
+      - SHOW_TOC=true
+      - SHOW_LOCAL_GRAPH=true
       - HOME_FILE=README
       - FONT_SIZE=15
       - HTML_SAFE_MODE=true

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -12,7 +12,8 @@ services:
       - ABSOLUTE_PATHES=false
       - ALLOWED_FILE_LINK_TYPES=pdf,mp4
       - DISABLE_POP_HOVER=false
-      - SHOW_TOC=false
+      - SHOW_TOC=true
+      - SHOW_LOCAL_GRAPH=true
       - HOME_FILE=README
       - FONT_SIZE=15
       - HTML_SAFE_MODE=true

diff --git a/perlite/.js/perlite.js b/perlite/.js/perlite.js
@@ -25,18 +25,20 @@ if ($('#disablePopHovers').data('option') == true && localStorage.getItem("disab
 }
 
 // show toc
-if ($('#showTOC').data('option') == true && localStorage.getItem("showTOC") === null) {
+if ($('#showTOC').data('option') == false || localStorage.getItem("showTOC") === false) {
 
-  $('.clickable-icon.view-action[aria-label="Open outline"]').css('display', 'none')
-  $('.clickable-icon.view-action[aria-label="Open localGraph"]').css('display', 'unset')
+  localStorage.setItem("showTOC", "false")
+  $('#outline').css('display', 'none')
+}
 
-  localStorage.setItem("showTOC", "true")
-  $('#mynetwork').css('display', 'none')
-  $('#outline').css('display', 'unset')
+if ($('#showLocalGraph').data('option') == false || localStorage.getItem("showLocalGraph") === false) {
 
+  localStorage.setItem("showLocalGraph", "false")
+  $('#localGraph').css('display', 'none')
 }
 
 
+
 /**
  * scroll to anchor
  * @param {String} aid
@@ -1025,8 +1027,8 @@ $(document).ready(function () {
     $('.clickable-icon.side-dock-ribbon-action[aria-label="Open graph view"]').css('display', 'none')
     $('.clickable-icon.view-action[aria-label="Open outline"]').css('display', 'none')
     $('.clickable-icon.view-action[aria-label="Open localGraph"]').css('display', 'none')
-    $('#mynetwork').css('display', 'none')
-    $('#outline').css('display', 'unset')
+    $('#localGraph').css('display', 'none')
+    $('#outline').css('display', 'inline')
 
   }
 
@@ -1456,16 +1458,12 @@ $(document).ready(function () {
   });
 
 
-  // show toc
-  if (localStorage.getItem("showTOC") === 'true') {
-
-    $('.clickable-icon.view-action[aria-label="Open outline"]').css('display', 'none')
-    $('.clickable-icon.view-action[aria-label="Open localGraph"]').css('display', 'unset')
+  // // show toc
+  // if (localStorage.getItem("showTOC") === 'true') {
 
-    //$('#mynetwork').css('display', 'none')
-    $('#outline').css('display', 'unset')
+  //   $('#outline').css('display', 'unset')
 
-  }
+  // }
 
 
 
@@ -1736,22 +1734,28 @@ $(document).ready(function () {
   // local Graph & Toc (outline) Switch
   $('.clickable-icon.view-action[aria-label="Open outline"]').click(function (e) {
 
-    $('.clickable-icon.view-action[aria-label="Open outline"]').css('display', 'none')
-    $('.clickable-icon.view-action[aria-label="Open localGraph"]').css('display', 'unset')
+    console.log('click')
+    if ($('#outline').css('display') == 'inline') {
+      localStorage.setItem("showTOC", "false")
+      $('#outline').css('display', 'none')
+      console.log('into')
 
-    localStorage.setItem("showTOC", "true")
-    $('#mynetwork').css('display', 'none')
-    $('#outline').css('display', 'unset')
+    } else {
+      localStorage.setItem("showTOC", "true")
+      $('#outline').css('display', 'inline')
+    }
+
   });
 
   $('.clickable-icon.view-action[aria-label="Open localGraph"]').click(function (e) {
 
-    $('.clickable-icon.view-action[aria-label="Open outline"]').css('display', 'unset')
-    $('.clickable-icon.view-action[aria-label="Open localGraph"]').css('display', 'none')
-
-    localStorage.setItem("showTOC", "false")
-    $('#mynetwork').css('display', 'unset')
-    $('#outline').css('display', 'none')
+    if ($('#localGraph').css('display') == 'inline') {
+      localStorage.setItem("showLocalGraph", "false")
+      $('#localGraph').css('display', 'none')
+    } else {
+      localStorage.setItem("showLocalGraph", "true")
+      $('#localGraph').css('display', 'inline')
+    }
   });
 
 

diff --git a/perlite/helper.php b/perlite/helper.php
@@ -43,13 +43,16 @@
 $lineBreaks = empty(getenv('LINE_BREAKS')) ? true : filter_var(getenv('LINE_BREAKS'), FILTER_VALIDATE_BOOLEAN);
 
 // file types
-$allowedFileLinkTypes = empty(getenv('ALLOWED_FILE_LINK_TYPES')) ? ['pdf','mp4'] : explode(",", getenv('ALLOWED_FILE_LINK_TYPES'));
+$allowedFileLinkTypes = empty(getenv('ALLOWED_FILE_LINK_TYPES')) ? ['pdf', 'mp4'] : explode(",", getenv('ALLOWED_FILE_LINK_TYPES'));
 
 // disable PopHovers
 $disablePopHovers = empty(getenv('DISABLE_POP_HOVER')) ? "false" : getenv('DISABLE_POP_HOVER');
 
-// show TOC instead of graph
-$showTOC = empty(getenv('SHOW_TOC')) ? "false" : getenv('SHOW_TOC');
+// show TOC
+$showTOC = empty(getenv('SHOW_TOC')) ? "true" : getenv('SHOW_TOC');
+
+// show local Graph
+$showLocalGraph = empty(getenv('SHOW_LOCAL_GRAPH')) ? "true" : getenv('SHOW_TOC');
 
 // Set home page from environment variable
 $index = empty(getenv('HOME_FILE')) ? "README" : getenv('HOME_FILE');
@@ -67,20 +70,20 @@
 if (getenv('SITE_LOGO')) {
 	$customSection = '<div class="sm-site-title">&nbsp;</div>
                     <div class="custom-page">
-					<img class="custom-page-logo" src="'. getenv('SITE_LOGO') .'" alt="Custom Logo">
+					<img class="custom-page-logo" src="' . getenv('SITE_LOGO') . '" alt="Custom Logo">
 					<div> &nbsp;</div>';
-	
-					$customSection = $customSection . '<div class="sm-site-desc"><i>'. $siteDescription . '</i></div>
+
+	$customSection = $customSection . '<div class="sm-site-desc"><i>' . $siteDescription . '</i></div>
 
 					<div><ul class="social-media-list">';
-					if (getenv('SITE_GITHUB')) {
-						$customSection = $customSection . '<li><a href="'.getenv('SITE_GITHUB').'"><img class="social-logo" src=".styles\github-color.svg" alt="Github Logo"></a></li>';
-					}
-					
-					// set custom homepage or current site url
-					$siteHomepage = empty(getenv('SITE_HOMEPAGE')) ? $siteURL : getenv('SITE_HOMEPAGE');
-					$customSection = $customSection . '<li><a href="https://twitter.com/'. substr($siteTwitter,1) .'"><img class="social-logo" src=".styles\x-color.svg" alt="X Logo"></a></li>
-						<li><a href="'.$siteHomepage.'"><img class="social-logo" src=".styles\fontawesome-color.svg" alt="Homepage Logo"></a></li>
+	if (getenv('SITE_GITHUB')) {
+		$customSection = $customSection . '<li><a href="' . getenv('SITE_GITHUB') . '"><img class="social-logo" src=".styles\github-color.svg" alt="Github Logo"></a></li>';
+	}
+
+	// set custom homepage or current site url
+	$siteHomepage = empty(getenv('SITE_HOMEPAGE')) ? $siteURL : getenv('SITE_HOMEPAGE');
+	$customSection = $customSection . '<li><a href="https://twitter.com/' . substr($siteTwitter, 1) . '"><img class="social-logo" src=".styles\x-color.svg" alt="X Logo"></a></li>
+						<li><a href="' . $siteHomepage . '"><img class="social-logo" src=".styles\fontawesome-color.svg" alt="Homepage Logo"></a></li>
 					</ul>';
 
 	$customSection = $customSection . '</div></div>';
@@ -538,6 +541,7 @@ function loadSettings($rootDir)
 
 	global $disablePopHovers;
 	global $showTOC;
+	global $showLocalGraph;
 	global $index;
 	global $siteTitle;
 	global $siteType;
@@ -607,6 +611,7 @@ function loadSettings($rootDir)
 	// default settings
 	$defaultSettings .= '<link id="disablePopHovers" data-option="' . $disablePopHovers . '"</link>';
 	$defaultSettings .= '<link id="showTOC" data-option="' . $showTOC . '"</link>';
+	$defaultSettings .= '<link id="showLocalGraph" data-option="' . $showLocalGraph . '"</link>';
 	$defaultSettings .= '<link id="index" data-option="' . $index . '"</link>';
 
 

diff --git a/perlite/index.php b/perlite/index.php
@@ -252,7 +252,7 @@ class="svg-icon lucide-x">
                                         <li><a href="https://twitter.com/secure_sec77"><img class="social-logo" src="x-color.svg" alt="Custom Logo"></a></li>
                                         <li><a href="https://secure77.de"><img class="social-logo" src="fontawesome-color.svg" alt="Custom Logo"></a></li>
                                     </ul> -->
-                                    
+
                                     <!-- <div><ul class="social-media-list">
                                         <li><img class="social-logo" src="github-color.svg" alt="Custom Logo"> &nbsp;<a href="https://github.com/secure-77">Secure-77</a></li>
                                         <li><img class="social-logo" src="x-color.svg" alt="Custom Logo"> &nbsp;<a href="https://github.com/secure-77">Twitter (X)</a></li>
@@ -261,7 +261,7 @@ class="svg-icon lucide-x">
 
                                     </div>
                                     </div> -->
-                                
+
                                     <!-- nav sidebar-left -->
                                     <div class="nav-header">
                                         <div class="nav-buttons-container">
@@ -699,7 +699,7 @@ class="svg-icon lucide-pin">
                                         <div class="nav-header">
                                             <div class="view-header-nav-buttons">
                                                 <a class="clickable-icon view-action" aria-label="Open localGraph"
-                                                    style="display: none"><svg xmlns="http://www.w3.org/2000/svg"
+                                                    ><svg xmlns="http://www.w3.org/2000/svg"
                                                         width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                         stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                         stroke-linejoin="round" class="svg-icon lucide-git-fork">
@@ -732,19 +732,20 @@ class="svg-icon lucide-list">
 
                                         <div class="backlink-pane node-insert-event" style="position: relative;">
 
-                                        
-                                        <div id="outline" class="outline" style="display: none">
-                                        <div class="sidebar-top">        
-                                        <h3>Content</h3>
-</div>
+
+                                            <div id="outline" class="outline" style="display: unset">
+                                                <div class="sidebar-top">
+                                                    <h3>Content</h3>
+                                                </div>
 
                                                 <div id="toc"></div>
 
-                                        </div>
-
-                                        <h3>Graph</h3>    
-
-                                        <div id="mynetwork"></div>
+                                            </div>
+                                            <div id=localGraph>
+                                            <h3>Graph</h3>
+
+                                            <div id="mynetwork"></div>
+                                            </div>
                                             <div class="tree-item-self" aria-label-position="left"><span
                                                     class="tree-item-icon collapse-icon"><svg
                                                         xmlns="http://www.w3.org/2000/svg" width="24" height="24"
@@ -753,12 +754,12 @@ class="tree-item-icon collapse-icon"><svg
                                                         class="svg-icon right-triangle">
                                                         <path d="M3 8L12 17L21 8"></path>
                                                     </svg></span>
-                                                    <div class="tree-item-inner">Linked mentions</div>
+                                                <div class="tree-item-inner">Linked mentions</div>
                                                 <div class="tree-item-flair-outer"><span class="tree-item-flair"
                                                         id="nodeCount">0</span></div>
 
                                             </div>
-                                            
+
 
                                         </div>
                                     </div>