From 808bf08e5d1694f4fd66604f2f185cfe29ba109f Mon Sep 17 00:00:00 2001 From: JCornelison Date: Wed, 25 Sep 2024 19:56:08 -0700 Subject: [PATCH] collapse/expand entire tree works --- .../eoconline/layouts/OrgChart/org-tree.css | 4 +- .../eoconline/layouts/OrgChart/org-tree.html | 9 +- themes/eoconline/layouts/OrgChart/org-tree.js | 94 +++++++++++++++++++ 3 files changed, 102 insertions(+), 5 deletions(-) diff --git a/themes/eoconline/layouts/OrgChart/org-tree.css b/themes/eoconline/layouts/OrgChart/org-tree.css index f99e0e2..c0db2c0 100644 --- 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 index 189ad64..9264025 100644 --- a/themes/eoconline/layouts/OrgChart/org-tree.html +++ b/themes/eoconline/layouts/OrgChart/org-tree.html @@ -1,4 +1,5 @@ - + @@ -16,8 +17,8 @@
Tree Options:
- - + +
+ + "); + $("#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
  • + 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