add jstree library

assets/js/drawTree.js

@@ -25,7 +25,9 @@ for (let path in content) {
     id: pageId,
     parentId: parentFolderId,
     name: pageTitle,
+    text: pageTitle,
     type: 'page',
+    a_attr  : {href : pathBase.slice(0, pathBase.length - 1) + path} ,
     href: pathBase.slice(0, pathBase.length - 1) + path
   })
 
@@ -43,6 +45,7 @@ for (let path in content) {
       id: '_' + folderId + '_',
       parentId: parentId,
       name: folderId.replace(/-/g, ' '),
+      text: folderId.replace(/-/g, ' '),
       type: 'folder',
       // type : Tree.FOLDER,
       level: level
@@ -82,33 +85,17 @@ tree.forEach((el) => {
 
 const structure = root.children;
 
-// a temporary function to traverse the tree and allowing to display something
-function* traverse(o, path = []) {
-  for (var i in o) {
-    const itemPath = path.concat(i);
-    yield [i, o[i], itemPath, o];
-    if (o[i] !== null && typeof o[i] == "object") {
-      //going one step down in the object tree!!
-      yield* traverse(o[i], itemPath);
-    }
-  }
-}
-
-// console.log(structure)
-for (var [key, value, path] of traverse(structure)) {
-  // console.log(key);
-  // console.log(value);
-  // console.log(path);
-  // console.log("---");
-  let doc = document.getElementById("tree").innerHTML
-  if (value?.type == "folder") {
-  document.getElementById("tree").innerHTML = doc +  '<h3>'+value.name + '</h3>'
-  }
-  if (value?.type == "page") {
-  document.getElementById("tree").innerHTML = doc +  '&emsp;<a href="' + value.href + '">'+ value.name+'</a><br/>'
-  }
-}
-
-return structure
+$(function () {
+  $('#jstree')
+    .on('click', function (e) {
+      $('#jstree').jstree(true).toggle_node(e.target);
+    })
+    .jstree({
+      core : {
+        dblclick_toggle : false,
+        'data' : structure},
+        "plugins" : [ "wholerow" ]
+    });
+});
 
 }

layouts/_default/single.html

@@ -52,6 +52,7 @@
       <aside data-sm1-2 data-md1-2 data-lg1-4 data-lg1 data-m1 data-sm2 data-xs3 class="singlePage">
         <div class="sticky page-end vertical">
           <h3> Menu </h3>
+          <div id="jstree"></div>
           <div id="tree"></div>
         </div>
       </aside>

layouts/partials/head.html

@@ -63,6 +63,12 @@
   {{ if $.Site.Data.config.enableColumnLayout }}
   {{ $drawTree := resources.Get "js/drawTree.js" | resources.Fingerprint "md5" | resources.Minify }}
   <script src="{{$drawTree.Permalink}}"></script>
+
+  {{ $jquery := resources.Get "js/jquery.js" | resources.Fingerprint "md5" | resources.Minify }}
+  <script src="{{$jquery.Permalink}}"></script>
+
+  {{ $jstree := resources.Get "js/jstree.js" | resources.Fingerprint "md5" | resources.Minify }}
+  <script src="{{$jstree.Permalink}}"></script>
   {{ end }}
 
   <!--  Preload page vars  -->
@@ -179,6 +185,8 @@
         const pathBase = siteBaseURL.pathname;
         drawTree(pathBase)
 
+        
+
         // Get the modal
         var modal = document.getElementById("myModal");