Show/collapse Leafs works; file input clears on page refresh

EOCOnline · Oct 23, 2024 · 991e4b3 · 991e4b3
1 parent ba27b1a
commit 991e4b3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 22 deletions.
diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.css b/themes/eoconline/layouts/OrgChart/arc-tree.css
@@ -1,3 +1,4 @@
+/* Thx to https://codepen.io/bisserof/pen/nrMveb */
 :root {
   --treeCurves: #777;
   --objectColor: #3625b9;

diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.html b/themes/eoconline/layouts/OrgChart/arc-tree.html
@@ -1,6 +1,3 @@
-<!--  originally based on https://codepen.io/bisserof/pen/nrMveb
--->
-
 <!doctype html>
 <html lang="en">
   <head>
@@ -13,7 +10,7 @@
     <!-- link rel="icon" type="image/x-icon" href="./logo.jpg" / -->
     <link rel="stylesheet" href="./arc-tree.css" />
     <script defer src="./arc-tree.js"></script>
-    <script type="text/javascript" src="purify.min.js"></script>
+    <script defer type="text/javascript" src="./purify.min.js"></script>
   </head>
   <body>
     <div id="TreeOptions">
@@ -40,7 +37,7 @@
       </div>
     </div>
 
-    <label> Select a JSON file to view: <input type="file" onChange="fileChange(this.files[0])" /> </label>
+    <label> Select a JSON file to view: <input type="file" onChange="fileChange(this.files[0])" accept=".json" id="arcTreeFile" /> </label>
 
     <ul id="unorderedArcTree" class="tree"></ul>
   </body>

diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.js b/themes/eoconline/layouts/OrgChart/arc-tree.js
@@ -1,9 +1,11 @@
 // or ESM/TypeScript import
-import Ajv from "ajv"
+//import Ajv from "ajv"
 
 document.addEventListener("DOMContentLoaded", function () {
-  //console.clear();
+  console.clear();
+  console.log("DOM fully loaded and parsed");
   setFontSize(document.querySelector("#fontSize"));
+  document.getElementById("arcTreeFile").value = "";
 });
 
 
@@ -22,26 +24,24 @@ function isNumber(n) {
   return !isNaN(parseFloat(n)) && isFinite(n);
 }
 
-// BUG: Doesn't work!
 function collapseLeafs() {
-  var leafs = document.getElementsByClassName(".leaf");
-  var len = leafs.length;
-  console.log = "Collapsing all " + leafs.length + " leafs.";
-  for (var i = 0; i < len; i++) {
-    i.style.display = "none";
+  var leafs = document.getElementsByClassName("leaf");
+  var leafsLen = leafs.length;
+  console.log("Collapsing all " + leafsLen + " leafs.");
+  for (var i = 0; i < leafsLen; i++) {
+    leafs[i].style.display = "none";
   }
-  console.log("Collapsed all " + leafs.length + " leafs.");
+  console.log("Collapsed all " + leafsLen + " leafs.");
 }
 
-// BUG: Doesn't work!
 function showLeafs() {
-  var leafs = document.getElementsByClassName(".leaf");
-  var len = leafs.length;
-  console.log = "Displaying all " + leafs.length + " leafs.";
-  for (var i = 0; i < len; i++) {
-    i.style.display = "block";
+  var leafs = document.getElementsByClassName("leaf");
+  var leafsLen = leafs.length;
+  console.log("Displaying all " + leafsLen + " leafs.");
+  for (var i = 0; i < leafsLen; i++) {
+    leafs[i].style.display = "block";
   }
-  console.log("Displayed all " + leafs.length + " leafs.");
+  console.log("Displayed all " + leafsLen + " leafs.");
 }
 
 function collapseTree() {
@@ -100,6 +100,7 @@ function validateJson(json) {
   return true;
 }
 
+/*
 // https://ajv.js.org/guide/getting-started.html#basic-data-validation
 // https://www.npmjs.com/package/ajv
 
@@ -172,7 +173,7 @@ function uploadJson() {
     fileChange(file);
   }
 }
-
+*/
 
 
 /// Tree Creation functionality =====================