collapse/expand entire tree works

EOCOnline · Sep 26, 2024 · 808bf08 · 808bf08
1 parent 6ff3f99
commit 808bf08
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 5 deletions.
diff --git a/themes/eoconline/layouts/OrgChart/org-tree.css b/themes/eoconline/layouts/OrgChart/org-tree.css
@@ -50,7 +50,7 @@ body {
     rgba(44, 187, 99, 0.15) 0 16px 32px;
     */
   display: inline-block;
-  transition: all 500ms;
+  transition: all 400ms;
 }
 
 #TreeOptions input:hover {
@@ -169,7 +169,7 @@ label.tree_label:before {
 
 :checked ~ label.tree_label:before {
   content: "–";
-  background: #601616;
+  background: #414040;
 }
 
 /* ————————————————————–

diff --git a/themes/eoconline/layouts/OrgChart/org-tree.html b/themes/eoconline/layouts/OrgChart/org-tree.html
@@ -1,4 +1,5 @@
-<!--  originally based on https://codepen.io/bisserof/pen/nrMveb  -->
+<!--  originally based on https://codepen.io/bisserof/pen/nrMveb
+-->
 
 <!doctype html>
 <html lang="en">
@@ -16,8 +17,8 @@
   <body>
     <div id="TreeOptions">
       <div>Tree Options:<br /></div>
-      <input type="button" value="Collapse Entire Tree" onclick="" />
-      <input type="button" value="Expand Entire Tree" onclick="" />
+      <input type="button" value="Collapse Entire Tree" onclick="collapseTree();" />
+      <input type="button" value="Expand Entire Tree" onclick="expandTree();" />
 
       <div>
         <label title="Font size in em's" id="fontSizeLabel">
@@ -35,6 +36,8 @@
       </div>
     </div>
 
+    <ul id="JSONunorderedList"></ul>
+
     <ul class="tree">
       <li>
         <input type="checkbox" id="c1" />

diff --git a/themes/eoconline/layouts/OrgChart/org-tree.js b/themes/eoconline/layouts/OrgChart/org-tree.js
@@ -25,3 +25,97 @@ function setFontSize(el) {
   }
   document.querySelector(".tree").style.fontSize = fontSize + 'em';
 }
+
+function expandTree() {
+  var checkboxes = document.querySelector(".tree").getElementsByTagName("input");
+  for (var i = 0; i < checkboxes.length; ++i) { checkboxes[i].checked = "checked"; }
+  console.log("expanded " + checkboxes.length + "tree nodes");
+}
+
+function collapseTree() {
+  var checkboxes = document.querySelector(".tree").getElementsByTagName("input");
+  for (var i = 0; i < checkboxes.length; ++i) { checkboxes[i].checked = ""; }
+  console.log("Collapsed " + checkboxes.length + "tree nodes");
+}
+
+/*
+window.onload = () => {
+  createList(data);
+  markupArray.push("</ul>");
+  $("#list").html(markupArray.join(""));
+};
+*/
+
+dataSource = {
+  id: 1,
+  name: "Lao Lao",
+  title: "general manager",
+  children: [
+    { id: 2, name: "Bo Miao", title: "department manager" },
+    {
+      id: 3,
+      name: "Su Miao",
+      title: "department manager",
+      children: [
+        { id: 4, name: "Tie Hua", title: "senior engineer" },
+        {
+          id: 5,
+          name: "Hei Hei",
+          title: "senior engineer",
+          children: [
+            { id: 6, name: "Pang Pang", title: "engineer" },
+            { id: 7, name: "Xiang Xiang", title: "UE engineer" },
+          ],
+        },
+      ],
+    },
+    { id: 8, name: "Yu Jie", title: "department manager" },
+    { id: 9, name: "Yu Li", title: "department manager" },
+    { id: 10, name: "Hong Miao", title: "department manager" },
+    { id: 11, name: "Yu Wei", title: "department manager" },
+    { id: 12, name: "Yu Tie", title: "department manager" },
+  ],
+};
+
+// https://stackoverflow.com/questions/6692538/generate-unordered-list-from-json-data
+
+var jsonObj = {
+  "labels": [{
+    "labelFont": "35pt Calibri", "labelLocation": { "x": 0.1483, "y": 0.75 }, "labelText": "fluffer"
+  },
+  { "labelFont": "35pt Calibri", "labelLocation": { "x": 0.666, "y": 0.666 }, "labelText": "nutter" }
+  ]
+}; //some json to display
+
+var listEl = document.getElementById('JSONunorderedList');
+makeList(jsonObj, listEl);
+
+function makeList(jsonObject, listElement) {
+  for (var i in jsonObject) {
+    console.log("processing: " + i.toString());
+    // iterate through the array or object
+    // insert the next child into the list as a <li>
+    var newLI = document.createElement('li');
+
+    if (jsonObject[i] instanceof Array) {
+      newLI.innerHTML = i + ": ARRAY";
+      newLI.className = "arrayOrObject"; //add a class tag so we can style differently
+    }
+    else if (jsonObject[i] instanceof Object) {
+      newLI.innerHTML = i + ": OBJECT";
+      newLI.className = "arrayOrObject"; //add a class tag so we can style differently
+    }
+    else
+      newLI.innerHTML = i + ': ' + jsonObject[i];
+
+    listElement.appendChild(newLI);
+    //insert a <ul> for nested nodes
+
+    if (jsonObject[i] instanceof Array || jsonObject[i] instanceof Object) {
+      var newUL = document.createElement('ul');
+      //newUL.innerHTML=i;
+      listElement.appendChild(newUL);
+      makeList(jsonObject[i], newUL);
+    }
+  }
+}