From 991e4b39b9ed507527bd61f5d04e30b3311877cb Mon Sep 17 00:00:00 2001 From: JCornelison Date: Wed, 23 Oct 2024 11:42:54 -0700 Subject: [PATCH] Show/collapse Leafs works; file input clears on page refresh --- .../eoconline/layouts/OrgChart/arc-tree.css | 1 + .../eoconline/layouts/OrgChart/arc-tree.html | 7 ++-- themes/eoconline/layouts/OrgChart/arc-tree.js | 35 ++++++++++--------- 3 files changed, 21 insertions(+), 22 deletions(-) diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.css b/themes/eoconline/layouts/OrgChart/arc-tree.css index 39bd435..2bdda5e 100644 --- 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 index b120604..9df6659 100644 --- a/themes/eoconline/layouts/OrgChart/arc-tree.html +++ b/themes/eoconline/layouts/OrgChart/arc-tree.html @@ -1,6 +1,3 @@ - - @@ -13,7 +10,7 @@ - +
@@ -40,7 +37,7 @@
- + diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.js b/themes/eoconline/layouts/OrgChart/arc-tree.js index 46a940c..e0fbf33 100644 --- 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 =====================