Enhanced Tree Options appearance, esp at startup

EOCOnline · Oct 2, 2024 · f8fe651 · f8fe651
1 parent 802a3d2
commit f8fe651
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.css b/themes/eoconline/layouts/OrgChart/arc-tree.css
@@ -93,7 +93,8 @@ body {
 #fontSizeValue {
   width: 2em;
   display: inline-block;
-  background-color: rgb(255, 255, 255);
+  background-color: #eee;
+  border: #000 1px solid;
   padding: 2px;
 }
 

diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.html b/themes/eoconline/layouts/OrgChart/arc-tree.html
@@ -23,11 +23,10 @@
 
       <div>
         <label title="Font size in em's" id="fontSizeLabel">
-          Font size: <span id="fontSizeValue">2</span> &nbsp;
+          Font size: <span id="fontSizeValue"></span> &nbsp;
 
-          <input type="range" value="2.5" step="0.5" min="0.5" max="5" id="fontSize" list="steplist" oninput="document.querySelector('#fontSizeValue').textContent = this.value" />
+          <input type="range" step="0.5" min="0.5" value="1.5" max="5" id="fontSize" list="steplist" onchange="setFontSize(this)" />
           <datalist id="steplist">
-            <option>0.5</option>
             <option>1.0</option>
             <option>2.0</option>
             <option>3.0</option>

diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.js b/themes/eoconline/layouts/OrgChart/arc-tree.js
@@ -1,6 +1,4 @@
-let fontSize = document.querySelector(".tree").style.fontSize;
-setFontSize(fontSize);
-let uniqueID = 0;
+
 
 document.querySelector("#fontSize").addEventListener("input", (e) => { setFontSize(e.target); });
 document.querySelector("#fontSize").addEventListener('keyup', (event) => {
@@ -14,13 +12,22 @@ document.querySelector("#fontSize").addEventListener('keyup', (event) => {
   }
 });
 
+//document.querySelector("#fontSize").value = 3.5;
+
+document.addEventListener("DOMContentLoaded", function () {
+  //console.log("Document loaded");
+  setFontSize(document.querySelector("#fontSize"));
+});
 
 function setFontSize(el) {
-  fontSize = el.value;
-  if (!isNumber(fontSize) || fontSize < 0.5) {
+  //console.log("Setting font size to: " + el.value);
+  let fontSize = el.value;
+  if (!isNumber(fontSize) || fontSize < 0.5 || fontSize > 5) {
     fontSize = 1;
   }
   document.querySelector(".tree").style.fontSize = fontSize + 'em';
+  document.querySelector("#fontSizeValue").innerHTML = fontSize;
+  document.querySelector("#fontSize").value = fontSize;
 }
 
 function isNumber(n) {
@@ -66,7 +73,7 @@ jsonObj =
   ]
 };
 
-traverse(jsonObj);
+//traverse(jsonObj);
 buildTree(jsonObj, document.getElementById('unorderedList'));
 var listItemHTML = "";
 var listLog = "";