From 3396e972a5ad64f18b1e9a6376e84345bf8058b6 Mon Sep 17 00:00:00 2001
From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com>
Date: Sun, 10 Jul 2022 08:05:17 +0100
Subject: [PATCH] move elements into drawTree()

---
 assets/js/drawTree.js      | 31 ++++++++++++--
 layouts/partials/head.html | 82 ++++++++++++--------------------------
 2 files changed, 53 insertions(+), 60 deletions(-)

diff --git a/assets/js/drawTree.js b/assets/js/drawTree.js
index ff8daa98f..538cec13b 100644
--- a/assets/js/drawTree.js
+++ b/assets/js/drawTree.js
@@ -80,12 +80,35 @@ tree.forEach((el) => {
   parentEl.children = [...(parentEl.children || []), el];
 });
 
-// display tree structure
-// from https://www.cssscript.com/folder-tree-json/
-
-// keep track of the original node objects
 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
 
 }
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 78a634db2..935a2a32d 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -156,61 +156,6 @@
         throwOnError : false
       });
 
-      const siteBaseURL = new URL(BASE_URL);
-      const pathBase = siteBaseURL.pathname;
-
-      // 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);
-          }
-        }
-      }
-
-      {{if $.Site.Data.config.enableColumnLayout}}
-        drawTree(pathBase).then(
-          function(structure) {
-              // 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/>'
-                }
-              }
-            }
-          );
-      {{end}}
-
-      // Get the modal
-      var modal = document.getElementById("myModal");
-
-      // Get the button that opens the modal
-      var btn = document.getElementById("myBtn");
-
-      // Get the <span> element that closes the modal
-      var span = document.getElementsByClassName("close")[0];
-
-      // When the user clicks the button, open the modal
-      btn.onclick = function() {
-        modal.style.display = "block";
-      }
-
-      // When the user clicks on <span> (x), close the modal
-      span.onclick = function() {
-        modal.style.display = "none";
-      }
-
       // When the user clicks anywhere outside of the modal, close it
       window.onclick = function(event) {
         if (event.target == modal) {
@@ -218,8 +163,33 @@
         }
       }
 
-
       {{end}}
+
+      {{if $.Site.Data.config.enableColumnLayout}}
+        const siteBaseURL = new URL(BASE_URL);
+        const pathBase = siteBaseURL.pathname;
+        drawTree(pathBase)
+
+        // Get the modal
+        var modal = document.getElementById("myModal");
+
+        // Get the button that opens the modal
+        var btn = document.getElementById("myBtn");
+
+        // Get the <span> element that closes the modal
+        var span = document.getElementsByClassName("close")[0];
+
+        // When the user clicks the button, open the modal
+        btn.onclick = function() {
+          modal.style.display = "block";
+        }
+
+        // When the user clicks on <span> (x), close the modal
+        span.onclick = function() {
+          modal.style.display = "none";
+        }
+      {{end}}
+
     };
   </script>
   {{if $.Site.Data.config.enableSPA}}