.gitignore

@@ -1,2 +0,0 @@
-/dist
-/node_modules

build.bat

@@ -0,0 +1,22 @@
+del bbtreeview.min.js
+del bbtreeview.min.tmp
+del build/bbtreeview.min.js
+
+cd src
+
+type version.txt >> ../bbtreeview.min.js
+
+@REM "C:\B\Portable Files (dev)\Google Closure Compiler\closure-compiler-v20231112.jar" --js *.js --js_output_file ../bbtreeview.min.tmp
+@REM npx google-closure-compiler --compilation_level=ADVANCED --js=*.js --js_output_file=../bbtreeview.min.tmp
+@REM npx google-closure-compiler --compilation_level=ADVANCED --warning_level=VERBOSE --js=*.js --js_output_file=bbtreeview.min.tmp
+@REM npx google-closure-compiler --warning_level=VERBOSE --js=*.js --js_output_file=bbtreeview.min.tmp
+
+move bbtreeview.min.tmp ../bbtreeview.min.tmp
+
+cd..
+
+type bbtreeview.min.tmp >> bbtreeview.min.js
+
+move bbtreeview.min.js build/bbtreeview.min.js
+
+del bbtreeview.min.tmp

build/bbtreeview.min.css

@@ -0,0 +1,5 @@
+/**
+ * BBTreeview
+ * @version v0.1.1.006 (2023/09/27 2218)
+ */
+ ul.bbtreeview{background-image:url(line.png);background-position:4px 8px;background-repeat:repeat-y;list-style:none;padding:0;margin:0 0 0 8px}ul.bbtreeview ul{background-image:url(line.png);background-position:4px 8px;background-repeat:repeat-y;list-style:none;margin:0 0 0 8px;padding:0}ul.bbtreeview li{background-position:0 calc((1.2em - 9px)/ 2);background-repeat:no-repeat;cursor:default;display:block;padding-left:14px;width:100%}ul.bbtreeview li.c{background-image:url(expand.png)}ul.bbtreeview li.e{background-image:url(collapse.png)}ul.bbtreeview li.hidden{display:none}ul.bbtreeview div.li{display:block;height:1.2em;padding-left:4px}ul.bbtreeview div.li.highlighted{background-color:rgb(169,201,249,.7)}ul.bbtreeview div.li>div.icon{background-position:0 center;background-repeat:no-repeat;display:inline-block;height:100%;width:calc(16px)}ul.bbtreeview div.li>div.folder{background-image:url(folder.png)}ul.bbtreeview li>div.li>div.checkbox{background-image:url(uncheckbox.png)}ul.bbtreeview li.x>div.li>div.checkbox{background-image:url(checkbox.png)}ul.bbtreeview div.li>span{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;padding-left:6px;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}ul.bbtreeview div.li>span.noicon{padding-left:0!important}

build/bbtreeview.min.js

@@ -0,0 +1,18 @@
+/**
+ * BBTreeview
+ * @version v0.1.2.044 (2024/01/09 2118)
+ */
+class BBTreeview{constructor(a){this.Options={};this.initialiseComponents(a)}initialiseComponents(a){this.Options=Object.assign({ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1,ShowIcon:!0},a);this.createTreeview()}get Container(){return this.getTreeview()}AddItem(a){a=Object.assign({ID:null,ParentID:null,Name:"",Hint:"",Value:"",Icon:"folder",Checked:!1,Tag:null},a);null==a.ID&&(a.ID=this.generateID());null==a.Tag&&(a.Tag="");if(null!=this.Find(a.ID))return!1;let b=null;if(null!=a.ParentID&&
+(b=this.Find(a.ParentID),null==b))return!1;b=null==b?this.Container:b.ChildNode;const c=this.generateNodeHtml(a);this.appendHtml(b,c);this.Find(a.ID).InvalidateEvents();return!0}Remove(a){a=this.Find(a);if(null==a)return!1;a.Remove();return!0}Clear(){this.initialiseComponents(this.Options)}CollapseAll(){this.GetAllNodes().forEach(function(a){a.Collapse()})}ExpandAll(){this.GetAllNodes().forEach(function(a){a.Expand()})}CheckAll(a){this.Options.ShowCheckbox&&this.GetAllNodes().forEach(function(b){b.Check(a)})}Find(a){if(null==
+this.Container)console.log("BBTreeview container not found");else return a=this.Container.querySelectorAll("li[data-bbtv-id='"+a+"']"),0>=a.length?null:new BBTreeviewNode(this,a[0])}FindByName(a){let b=[];this.GetAllNodes().forEach(function(c){c.Name==a&&b.push(c)});return b}FindByValue(a){let b=[];this.GetAllNodes().forEach(function(c){c.Value==a&&b.push(c)});return b}GetAllNodes(){const a=this,b=a.Container.querySelectorAll("li");if(0>=b.length)return[];let c=[];b.forEach(function(d){d=d.getAttribute("data-bbtv-id");
+a.isNullOrWhitespace(d)||(d=a.Find(d),null!=d&&c.push(d))});return c}GetCheckedNodes(){let a=[];this.GetAllNodes().forEach(function(b){b.IsChecked&&a.push(b)});return a}GetCheckedValues(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Value)});return a}GetCheckedTags(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Tag)});return a}GetSelectedNode(){let a=null;this.GetAllNodes().forEach(function(b){if(b.IsHighlighted)return a=b,!1});return a}appendHtml(a,b){let c=document.createElement("template");
+c.innerHTML=b;c=c.content.firstChild;a.appendChild(c)}createTreeview(){let a=this.getContainer();null!=a&&(a.innerHTML='<ul class="bbtreeview"></ul>')}generateID(){return"treeviewItem"+(Math.floor(1000001*Math.random())+100).toString()}generateNodeHtml(a){var b="";this.isNullOrWhitespace(a.Tag)||(b=encodeURIComponent(JSON.stringify(a.Tag)));b='<li data-bbtv-id="'+a.ID+'" data-bbtv-value="'+a.Value+'" data-bbtv-tag="'+b+'">';b+='<div class="li">';this.Options.ShowCheckbox&&(b+='<div class="icon checkbox"></div>');
+this.Options.ShowIcon?(b+='<div class="icon '+a.Icon+'"></div>',b+='<span title="'+a.Hint+'">'+a.Name+"</span>"):b+='<span class="noicon" title="'+a.Hint+'">'+a.Name+"</span>";return b+"</div><ul></ul></li>"}getContainer(){let a=document.getElementsByTagName("body");if(!(0>=a.length||(a=a[0],a=a.querySelectorAll(this.Options.ID),0>=a.length)))return a=a[0]}getNode(a){a=(this.isTag(a,"li")?a:this.parentsUntilTagName(a,"li")).getAttribute("data-bbtv-id");return this.isNullOrWhitespace(a)?null:this.Find(a)}getTreeview(){let a=
+this.getContainer();if(null!=a&&(a=a.querySelectorAll("ul.bbtreeview"),!(0>=a.length)))return a=a[0]}isNullOrWhitespace(a){return"undefined"==typeof a||null==a?!0:0>=a.toString().trim().length}isTag(a,b){return a.tagName.toLowerCase()==b}parentsUntilTagName(a,b){for(;"undefined"!=typeof a.parentNode;){a=a.parentNode;if("undefined"==typeof a)break;if(this.isTag(a,"ul")&&a.classList.contains("bbtreeview"))return null;if(this.isTag(a,b))break}return a}};class BBTreeviewNode{constructor(a,b){this.Treeview=a;this.Node=b}get Checkbox(){if(!this.Treeview.Options.ShowCheckbox)return null;const a=this.Node.querySelectorAll("div.icon.checkbox");return"undefined"==typeof a?null:a[0]}get ChildNode(){let a=this.Node.querySelectorAll("ul");return 0>=a.length?null:a[0]}get ChildNodes(){const a=this.ChildNode;if(null==a)return[];let b=a.querySelectorAll("li");if(0>=b.length)return[];let c=[];b.forEach(function(d){"undefined"!=typeof d.parentNode&&d.parentNode==
+a&&c.push(d)});return c}get IsChecked(){return this.Treeview.Options.ShowCheckbox?this.Node.classList.contains("x"):!1}get Container(){return this.Node.querySelectorAll("div.li")[0]}get Hint(){return this.Label.getAttribute("title")}get ID(){return this.Node.getAttribute("data-bbtv-id")}get IsExpanded(){return this.Node.classList.contains("e")?!0:this.Node.classList.contains("c")?!1:null}get IsHighlighted(){return this.Container.classList.contains("highlighted")}get Label(){return this.Node.querySelectorAll("span")[0]}get Name(){return this.Label.textContent}get ParentID(){const a=
+this.ParentNode;return null==a?null:a.getAttribute("data-bbtv-id")}get ParentNode(){return this.parentsUntilTagName(this.Node,"li")}get Tag(){let a=this.Node.getAttribute("data-bbtv-tag");return this.Treeview.isNullOrWhitespace(a)?null:JSON.parse(decodeURIComponent(a))}get Value(){return this.Node.getAttribute("data-bbtv-value")}Check(a){const b=this;b.setCheckbox(b.Node,a);b.Node.querySelectorAll("li").forEach(function(d){b.setCheckbox(d,a)});let c=b.ParentNode;if(null!=c)if(b.Treeview.Options.EnablePullUp)for(;;){const d=
+0<c.querySelectorAll("li.x").length;b.setCheckbox(c,d);c=b.Treeview.getNode(c);c=c.ParentNode;if(null==c)break}else{let d=0;c.querySelectorAll("li").forEach(function(e){e.classList.contains("x")||d++});b.setCheckbox(c,0>=d)}}Collapse(){this.Node.classList.contains("e")&&(this.Node.classList.remove("e"),this.Node.classList.add("c"));this.ChildNodes.forEach(function(a){a.classList.add("hidden")})}Expand(){this.Node.classList.contains("c")&&(this.Node.classList.remove("c"),this.Node.classList.add("e"));
+this.ChildNodes.forEach(function(a){a.classList.remove("hidden")})}Remove(){null!=this.ParentNode&&(this.ParentNode.classList.contains("e")&&this.ParentNode.classList.remove("e"),this.ParentNode.classList.contains("c")&&this.ParentNode.classList.remove("c"));this.Node.parentNode.removeChild(this.Node)}InvalidateEvents(){const a=this;a.Node.addEventListener("click",function(b){b.stopPropagation();b.preventDefault();!a.isTag(b.target,"li")||0>b.offsetX||16<b.offsetX||0>b.offsetY||16<b.offsetY||(b=a.Treeview.getNode(b.target),
+null!=b&&b.Toggle())});a.Container.addEventListener("dblclick",function(b){b.stopPropagation();b.preventDefault();b=a.Treeview.getNode(b.target);null!=b&&b.Toggle()});a.Treeview.Options.ShowCheckbox&&(a.Checkbox.addEventListener("mousedown",function(b){b.stopPropagation();b.preventDefault();a.Check(!a.IsChecked)}),a.Checkbox.addEventListener("click",function(b){b.stopPropagation();b.preventDefault()}),a.Checkbox.addEventListener("dblclick",function(b){b.stopPropagation();b.preventDefault()}));a.Container.addEventListener("mousedown",
+function(b){b.stopPropagation();b.preventDefault();b=a.Treeview.getNode(b.target);null!=b&&(a.Treeview.Container.querySelectorAll("div.highlighted").forEach(function(c){c.classList.remove("highlighted")}),a.Treeview.Options.ShowSelection&&b.Container.classList.add("highlighted"))});a.invalidateCollapsible()}Toggle(){switch(this.IsExpanded){case !0:this.Collapse();break;case !1:this.Expand()}}invalidateCollapsible(){null!=this.ParentNode&&(this.ParentNode.classList.contains("c")?this.Node.classList.add("hidden"):
+(this.ParentNode.classList.contains("e")||this.ParentNode.classList.add("e"),this.Node.classList.remove("hidden")))}isTag(a,b){return a.tagName.toLowerCase()==b}parentsUntilTagName(a,b){for(;"undefined"!=typeof a.parentNode;){a=a.parentNode;if("undefined"==typeof a)break;if(this.isTag(a,"ul")&&a.classList.contains("bbtreeview"))return null;if(this.isTag(a,b))break}return a}setCheckbox(a,b){b?a.classList.contains("x")||a.classList.add("x"):a.classList.contains("x")&&a.classList.remove("x")}};

demo-test.html

@@ -11,10 +11,10 @@
   <!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
 
   <!-- <link href="bbtreeview.css" rel="stylesheet" /> -->
-  <!-- <link href="build/bbtreeview.min.css" rel="stylesheet" /> -->
+  <link href="build/bbtreeview.min.css" rel="stylesheet" />
-  <!-- <link href="src/treeview.css" rel="stylesheet" /> -->
+  <!-- <script src="bbtreeview.min.js"></script> -->
-
+  <script src="src/bbtreeview.js"></script>
-  <script src="dist/treeview.dist.js"></script>
+  <script src="src/bbtreeviewnode.js"></script>
 
   <title></title>
 </head>
@@ -31,35 +31,16 @@
     <div class="panel">
 
       <p>Create demo treeview</p>
-      <p>
+      <p><button onclick="CreateTreeview(1)">Create Treeview (Checkbox and Selection)</button></p>
-        <input type="checkbox" id="checkbox1" checked>
+      <p><button onclick="CreateTreeview(2)">Create Treeview (Checkbox, Hide Selection, Enable Pull-Ups)</button></p>
-        <label for="checkbox1">Show checkbox</label>
+      <p><button onclick="CreateTreeview(3)">Create Treeview (No Checkbox, Selection)</button></p>
-        <br>
+      <p><button onclick="CreateTreeview(4)">Create Treeview (No Checkbox, No Icons, Selection)</button></p>
-
-        <input type="checkbox" id="checkbox2" checked>
-        <label for="checkbox2">Show selection</label>
-        <br>
-
-        <input type="checkbox" id="checkbox3" checked>
-        <label for="checkbox3">Show icon</label>
-        <br>
-
-        <input type="checkbox" id="checkbox4">
-        <label for="checkbox4">Enable guardian behaviour (a child checks its parent)</label>
-        <br>
-
-        <input type="checkbox" id="checkbox5" checked>
-        <label for="checkbox5">Enable cascade checking (check parent when all its children are checked)</label>
-        <br>
-
-      </p>
-      <p><button onclick="CreateTreeview()">Create Treeview</button></p>
 
     </div>
     <div class="panel">
 
       <p>Load sample nodes</p>
-      <p></p><button onclick="LoadTreeview()">Load Treeview</button></p>
+      <button onclick="LoadTreeview()">Load Treeview</button>
 
     </div>
     <div class="panel">
@@ -137,30 +118,53 @@ body {
 
   <script>
 
-CreateTreeview();
+CreateTreeview(1);
 LoadTreeview();
 
 
-function CreateTreeview(){
+function CreateTreeview(value){
+  switch (value) {
+    case 1:
+      window.treeview1 = new BBTreeview({
+        ID: "#treeview1",
+        ShowCheckbox: true,
+        ShowSelection: true
+      });
 
-  const checkbox1 = document.getElementById("checkbox1").checked;
+      break;
-  const checkbox2 = document.getElementById("checkbox2").checked;
+    case 2:
-  const checkbox3 = document.getElementById("checkbox3").checked;
+      window.treeview1 = new BBTreeview({
-  const checkbox4 = document.getElementById("checkbox4").checked;
+        ID: "#treeview1",
-  const checkbox5 = document.getElementById("checkbox5").checked;
+        ShowCheckbox: true,
+        ShowSelection: false,
+        EnablePullUp: true
+      });
 
-  window.treeview1 = new LiteRyzJS.Treeview({
+      break;
-    ID: "#treeview1",
+    case 3:
-    ShowCheckbox: checkbox1,
+      window.treeview1 = new BBTreeview({
-    ShowSelection: checkbox2,
+        ID: "#treeview1",
-    ShowIcon: checkbox3,
+        ShowCheckbox: false,
-    EnableGuardian: checkbox4,
+        ShowSelection: true,
-    EnableCascade: checkbox5
+        EnablePullUp: false
-  });
+      });
+
+      break;
+    case 4:
+      window.treeview1 = new BBTreeview({
+        ID: "#treeview1",
+        ShowCheckbox: false,
+        ShowSelection: true,
+        EnablePullUp: false,
+        ShowIcon: false
+      });
+
+      break;
+    default:
+      break;
+  }
 
   LoadTreeview();
-
-  window.treeview1.ExpandAll();
 }
 
 function LoadTreeview(){

package.json

@@ -1,16 +0,0 @@
-{
-  "name": "LiteRyzJS/Treeview",
-  "version": "0.2.0.248",
-  "devDependencies": {
-    "css-loader": "^7.1.2",
-    "sass": "^1.77.8",
-    "sass-loader": "^16.0.0",
-    "style-loader": "^4.0.0",
-    "webpack": "^5.93.0",
-    "webpack-cli": "^5.1.4"
-  },
-  "scripts": {
-    "build": "webpack",
-    "watch": "webpack --watch"
-  }
-}

src/bbtreeview.css

@@ -0,0 +1,76 @@
+ul.bbtreeview {
+  background-image: url("line.png");
+  background-position: 4px 8px;
+  background-repeat: repeat-y;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 0 8px;
+}
+ul.bbtreeview ul {
+  background-image: url("line.png");
+  background-position: 4px 8px;
+  background-repeat: repeat-y;
+  list-style: none;
+  margin: 0 0 0 8px;
+  padding: 0;
+}
+ul.bbtreeview li {
+  background-position: 0px calc((1.2em - 9px)/2);
+  background-repeat: no-repeat;
+  cursor: default;
+  display: block;
+  padding-left: 14px;
+  width: 100%;
+}
+ul.bbtreeview li.c {
+  background-image: url("expand.png");
+}
+ul.bbtreeview li.e {
+  background-image: url("collapse.png");
+}
+ul.bbtreeview li.hidden {
+  display: none;
+}
+ul.bbtreeview div.li {
+  display: block;
+  height: 1.2em;
+  padding-left: 4px;
+}
+ul.bbtreeview div.li.highlighted {
+  background-color: rgb(169, 201, 249, 0.7);
+}
+ul.bbtreeview div.li > div.icon {
+  background-position: 0px center;
+  background-repeat: no-repeat;
+  display: inline-block;
+  height: 100%;
+  width: calc(16px);
+}
+ul.bbtreeview div.li > div.folder {
+  background-image: url("folder.png");
+}
+
+ul.bbtreeview li > div.li > div.checkbox {
+  background-image: url("uncheckbox.png");
+}
+ul.bbtreeview li.x > div.li > div.checkbox {
+  background-image: url("checkbox.png");
+}
+
+ul.bbtreeview div.li > span {
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: inline-block;
+  height: 1.2em;
+  line-height: 1.2em;
+  overflow: hidden;
+  padding-left: 6px;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+ul.bbtreeview div.li > span.noicon {
+  padding-left: 0px !important;
+}

src/bbtreeview.js

@@ -1,67 +1,30 @@
-import TreeviewNode from './treeviewnode.js';
+class BBTreeview {
-
-import '../treeview.scss';
-
-
-class Treeview {
   constructor(options) {
     this.Options = {};
 
-    this.#initialiseComponents(options);
+    this.initialiseComponents(options);
   }
 
-  #initialiseComponents(options) {
+  initialiseComponents(options) {
     var a = this;
 
     a.Options = Object.assign({
       ID: null,
       ShowCheckbox: false,
       ShowSelection: true,
-      EnableGuardian: false,
+      EnablePullUp: false,
-      EnableCascade: true,
       ShowIcon: true
     }, options);
 
-    a.#createTreeview();
+    // Replace treeview
+    a.createTreeview();
+
+    // a.Container = a.getTreeview();
   }
 
 
-  get Node() {
-    const a = this;
-
-    let result = document.getElementsByTagName("body");
-    if (result.length <= 0) {
-      return;
-    }
-
-    result = result[0];
-
-    result = result.querySelectorAll(a.Options.ID);
-    if (result.length <= 0) {
-      return;
-    }
-
-    result = result[0];
-
-    return result;
-  }
-
   get Container() {
-    const a = this;
+    return this.getTreeview();
-
-    let container = a.Node;
-    if (container == null) {
-      return;
-    }
-
-    container = container.querySelectorAll("ul.bbtreeview");
-    if (container.length <= 0) {
-      return;
-    }
-
-    container = container[0];
-
-    return container;
   }
 
 
@@ -78,7 +41,7 @@ class Treeview {
       Tag: null
     }, options);
 
-    if (_options.ID == null) _options.ID = a.#generateID();
+    if (_options.ID == null) _options.ID = a.generateID();
     if (_options.Tag == null) _options.Tag = "";
 
     // Don't add duplicate
@@ -101,15 +64,15 @@ class Treeview {
       parentNode = parentNode.ChildNode;
     }
 
-    const nodeHtml = a.#generateNodeHtml(_options);
+    const nodeHtml = a.generateNodeHtml(_options);
 
     // Add node
-    a.#appendHtml(parentNode, nodeHtml);
+    a.appendHtml(parentNode, nodeHtml);
 
     const node = a.Find(_options.ID);
 
     // Setup events
-    node.InitialiseComponents();
+    node.InvalidateEvents();
 
     return true;
   }
@@ -130,14 +93,14 @@ class Treeview {
   Clear() {
     const a = this;
 
-    a.#initialiseComponents(a.Options);
+    a.initialiseComponents(a.Options);
   }
 
   CollapseAll() {
     const a = this;
 
     a.GetAllNodes().forEach(function(e) {
-      e.Expand(false);
+      e.Collapse();
     });
   }
 
@@ -145,7 +108,7 @@ class Treeview {
     const a = this;
 
     a.GetAllNodes().forEach(function(e) {
-      e.Expand(true);
+      e.Expand();
     });
   }
 
@@ -165,7 +128,7 @@ class Treeview {
     const a = this;
 
     if (a.Container == null){
-      console.log("Treeview container not found");
+      console.log("BBTreeview container not found");
       return;
     }
 
@@ -174,7 +137,7 @@ class Treeview {
       return null;
     }
 
-    const treenode = new TreeviewNode(this, node[0]);
+    const treenode = new BBTreeviewNode(this, node[0]);
 
     return treenode;
   }
@@ -220,7 +183,7 @@ class Treeview {
     let response = [];
     node.forEach(function(e) {
       const id = e.getAttribute("data-bbtv-id");
-      if (a.#isNullOrWhitespace(id)) {
+      if (a.isNullOrWhitespace(id)) {
         return;
       }
 
@@ -287,27 +250,8 @@ class Treeview {
     return response;
   }
 
-  GetTreeNode(el) {
-    const a = this;
 
-    let node = null;
+  appendHtml(el, html) {
-    if (a.#isTag(el, "li")) {
-      node = el;
-    } else {
-      node = a.#parentsUntilTagName(el, "li");
-    }
-
-    const id = node.getAttribute("data-bbtv-id");
-
-    if (a.#isNullOrWhitespace(id)) {
-      return null;
-    }
-
-    return a.Find(id);
-  }
-
-
-  #appendHtml(el, html) {
     let node = document.createElement('template');
     node.innerHTML = html;
 
@@ -316,32 +260,30 @@ class Treeview {
     el.appendChild(node);
   }
 
-  #createTreeview() {
+  createTreeview() {
     const a = this;
 
-    let container = a.Node;
+    let container = a.getContainer();
     if (container != null) {
       container.innerHTML = "<ul class=\"bbtreeview\"></ul>";
     }
   }
 
-  #generateID() {
+  generateID() {
     return "treeviewItem" + (Math.floor(Math.random() * 1000001) + 100).toString();
   }
 
-  #generateNodeHtml(options) {
+  generateNodeHtml(options) {
     const a = this;
 
     let tag = "";
-    if (!a.#isNullOrWhitespace(options.Tag)) {
+    if (!a.isNullOrWhitespace(options.Tag)) {
       tag = encodeURIComponent(JSON.stringify(options.Tag));
     }
 
     let html = '<li data-bbtv-id="' + options.ID + '" data-bbtv-value="' + options.Value + '" data-bbtv-tag="' + tag + '">';
     html += '<div class="li">'
 
-    html += '<div class="icon expand"></div>';
-
     if (a.Options.ShowCheckbox) {
       html += '<div class="icon checkbox"></div>';
     }
@@ -360,7 +302,68 @@ class Treeview {
     return html;
   }
 
-  #isNullOrWhitespace(value) {
+  getContainer() {
+    const a = this;
+
+    let result = document.getElementsByTagName("body");
+    if (result.length <= 0) {
+      return;
+    }
+
+    result = result[0];
+
+    result = result.querySelectorAll(a.Options.ID);
+    if (result.length <= 0) {
+      return;
+    }
+
+    result = result[0];
+
+    return result;
+  }
+
+  getNode(el) {
+    const a = this;
+
+    let node = null;
+    if (a.isTag(el, "li")) {
+      node = el;
+    } else {
+      node = a.parentsUntilTagName(el, "li");
+    }
+
+    const id = node.getAttribute("data-bbtv-id");
+
+    if (a.isNullOrWhitespace(id)) {
+      return null;
+    }
+
+    return a.Find(id);
+  }
+
+  getTreeview() {
+    const a = this;
+
+    let container = a.getContainer();
+    if (container == null) {
+      return;
+    }
+
+    // if (container.querySelectorAll("ul.bbtreeview").length <= 0) {
+    //   container.innerHTML = "<ul class=\"bbtreeview\"></ul>";
+    // }
+
+    container = container.querySelectorAll("ul.bbtreeview");
+    if (container.length <= 0) {
+      return;
+    }
+
+    container = container[0];
+
+    return container;
+  }
+
+  isNullOrWhitespace(value) {
     if (typeof (value) == "undefined") {
       return true;
     }
@@ -372,11 +375,11 @@ class Treeview {
     return (value.toString().trim().length <= 0);
   }
 
-  #isTag(el, tagName) {
+  isTag(el, tagName) {
     return (el.tagName.toLowerCase() == tagName);
   }
 
-  #parentsUntilTagName(el, tagName) {
+  parentsUntilTagName(el, tagName) {
     const a = this;
 
     let node = el;
@@ -392,13 +395,13 @@ class Treeview {
         break;
       }
 
-      if (a.#isTag(node, "ul")) {
+      if (a.isTag(node, "ul")) {
         if (node.classList.contains("bbtreeview")) {
           return null;
         }
       }
 
-      if (a.#isTag(node, tagName)) {
+      if (a.isTag(node, tagName)) {
         break;
       }
     }
@@ -406,7 +409,4 @@ class Treeview {
     return node;
   }
 
-}
+}
-
-
-export default Treeview;

src/bbtreeviewnode.js

@@ -1,20 +1,16 @@
-class TreeviewNode {
+class BBTreeviewNode {
   constructor(treeview, node) {
     this.Treeview = treeview;
     this.Node = node;
+
+    // this.initialiseComponents();
   }
 
+  // initialiseComponents() {
+  //   const a = this;
 
-  get Expandbox() {
+  // }
-    const a = this;
 
-    const result = a.Node.querySelectorAll("div.icon.expand");
-    if (typeof(result) == "undefined") {
-      return null;
-    }
-
-    return result[0];
-  }
 
   get Checkbox() {
     const a = this;
@@ -23,12 +19,12 @@ class TreeviewNode {
       return null;
     }
 
-    const result = a.Node.querySelectorAll("div.icon.checkbox");
+    const checkboxes = a.Node.querySelectorAll("div.icon.checkbox");
-    if (typeof(result) == "undefined") {
+    if (typeof(checkboxes) == "undefined") {
       return null;
     }
 
-    return result[0];
+    return checkboxes[0];
   }
 
   get ChildNode() {
@@ -71,6 +67,16 @@ class TreeviewNode {
     return result;
   }
 
+  get IsChecked() {
+    const a = this;
+
+    if (!a.Treeview.Options.ShowCheckbox) {
+      return false;
+    }
+
+    return a.Node.classList.contains("x");
+  }
+
   get Container() {
     return this.Node.querySelectorAll("div.li")[0];
   }
@@ -83,23 +89,24 @@ class TreeviewNode {
     return this.Node.getAttribute("data-bbtv-id");
   }
 
-
+  get IsExpanded() {
-  get IsChecked() {
     const a = this;
 
-    if (!a.Treeview.Options.ShowCheckbox) {
+    if (a.Node.classList.contains("e")) {
+      return true;
+    }
+
+    if (a.Node.classList.contains("c")) {
       return false;
     }
 
-    return a.Node.classList.contains("x");
+    return null;
-  }
-
-  get IsExpanded() {
-    return this.Node.classList.contains("e");
   }
 
   get IsHighlighted() {
-    return this.Container.classList.contains("highlighted");
+    const a = this;
+
+    return a.Container.classList.contains("highlighted");
   }
 
   get Label() {
@@ -124,7 +131,7 @@ class TreeviewNode {
   get ParentNode() {
     const a = this;
 
-    return a.#parentsUntilTagName(a.Node, "li");
+    return a.parentsUntilTagName(a.Node, "li");
   }
 
   get Tag() {
@@ -146,35 +153,34 @@ class TreeviewNode {
   Check(value) {
     const a = this;
 
-    a.#setCheckbox(a.Node, value);
+    a.setCheckbox(a.Node, value);
 
     // Update children
     a.Node.querySelectorAll("li").forEach(function(e) {
-      a.#setCheckbox(e, value);
+      a.setCheckbox(e, value);
     });
 
+    // Update parent state
     let parentNode = a.ParentNode;
     if (parentNode == null) {
       return;
     }
 
     // Handle pull-ups
-    if (a.Treeview.Options.EnableGuardian) {
+    if (a.Treeview.Options.EnablePullUp) {
       while (true) {
         const parentChecked = (parentNode.querySelectorAll("li.x").length > 0);
 
-        a.#setCheckbox(parentNode, parentChecked);
+        a.setCheckbox(parentNode, parentChecked);
 
-        parentNode = a.Treeview.GetTreeNode(parentNode);
+        parentNode = a.Treeview.getNode(parentNode);
         parentNode = parentNode.ParentNode;
 
         if (parentNode == null) {
           break;
         }
       }
-    }
+    } else {
-
-    if (a.Treeview.Options.EnableCascade) {
       let uncheckedCount = 0;
 
       parentNode.querySelectorAll("li").forEach(function(e) {
@@ -185,15 +191,34 @@ class TreeviewNode {
         uncheckedCount++;
       });
 
-      a.#setCheckbox(parentNode, (uncheckedCount <= 0));
+      a.setCheckbox(parentNode, (uncheckedCount <= 0));
     }
-
   }
 
-  Expand(value) {
+  Collapse() {
     const a = this;
 
-    a.#setExpandbox(a.Node, value);
+    if (a.Node.classList.contains("e")) {
+      a.Node.classList.remove("e");
+      a.Node.classList.add("c");
+    }
+
+    a.ChildNodes.forEach(function(e) {
+      e.classList.add("hidden");
+    });
+  }
+
+  Expand() {
+    const a = this;
+
+    if (a.Node.classList.contains("c")) {
+      a.Node.classList.remove("c");
+      a.Node.classList.add("e");
+    }
+
+    a.ChildNodes.forEach(function(e) {
+      e.classList.remove("hidden");
+    });
   }
 
   Remove() {
@@ -212,99 +237,73 @@ class TreeviewNode {
     a.Node.parentNode.removeChild(a.Node);
   }
 
-  InitialiseComponents() {
+  InvalidateEvents() {
     const a = this;
 
-    // fold
+    // collapsible icon behaviour
-    a.#initialiseComponents_Expand();
+    a.Node.addEventListener("click", function(e){
-
-    // checkbox behaviour
-    a.#initialiseComponents_Checkbox();
-
-    // highlighting + collapsible
-    a.#initialiseComponents_Container();
-
-    a.Expand(a.IsExpanded);
-    a.Check(a.IsChecked);
-  }
-
-
-  #initialiseComponents_Expand() {
-    const a = this;
-
-    a.Expandbox.addEventListener("mousedown", function(e){
       e.stopPropagation();
       e.preventDefault();
 
-      a.Expand(!a.IsExpanded);
+      if (!a.isTag(e.target, "li")) {
-    });
+        return;
+      }
 
-    a.Expandbox.addEventListener("click", function(e){
+      if ((e.offsetX < 0) || (e.offsetX > 16) || (e.offsetY < 0) || (e.offsetY > 16)) {
-      e.stopPropagation();
+        return;
-      e.preventDefault();
+      }
 
-      // do nothing
+      const myNode = a.Treeview.getNode(e.target);
-    });
-
-    a.Expandbox.addEventListener("dblclick", function(e){
-      e.stopPropagation();
-      e.preventDefault();
-
-      // do nothing
-    });
-  }
-
-  #initialiseComponents_Checkbox() {
-    const a = this;
-
-    if (!a.Treeview.Options.ShowCheckbox) {
-      return;
-    }
-
-    a.Checkbox.addEventListener("mousedown", function(e){
-      e.stopPropagation();
-      e.preventDefault();
-
-      a.Check(!a.IsChecked);
-    });
-
-    a.Checkbox.addEventListener("click", function(e){
-      e.stopPropagation();
-      e.preventDefault();
-
-      // do nothing
-    });
-
-    a.Checkbox.addEventListener("dblclick", function(e){
-      e.stopPropagation();
-      e.preventDefault();
-
-      // do nothing
-    });
-  }
-
-  #initialiseComponents_Container() {
-    const a = this;
-
-    // collapsible
-    a.Container.addEventListener("dblclick", function(e){
-      e.stopPropagation();
-      e.preventDefault();
-
-      const myNode = a.Treeview.GetTreeNode(e.target);
       if (myNode == null) {
         return;
       }
 
-      a.Expand(!a.IsExpanded);
+      myNode.Toggle();
     });
 
+    // collapsible label behaviour
+    a.Container.addEventListener("dblclick", function(e){
+      e.stopPropagation();
+      e.preventDefault();
+
+      const myNode = a.Treeview.getNode(e.target);
+      if (myNode == null) {
+        return;
+      }
+
+      myNode.Toggle();
+    });
+
+    // checkbox behaviour
+    if (a.Treeview.Options.ShowCheckbox) {
+      a.Checkbox.addEventListener("mousedown", function(e){
+        e.stopPropagation();
+        e.preventDefault();
+
+        a.Check(!a.IsChecked);
+      });
+
+      a.Checkbox.addEventListener("click", function(e){
+        e.stopPropagation();
+        e.preventDefault();
+
+        // do nothing
+      });
+
+      a.Checkbox.addEventListener("dblclick", function(e){
+        e.stopPropagation();
+        e.preventDefault();
+
+        // do nothing
+      });
+    }
+
     // highlighting
     a.Container.addEventListener("mousedown", function(e){
       e.stopPropagation();
       e.preventDefault();
 
-      const myNode = a.Treeview.GetTreeNode(e.target);
+      const myNode = a.Treeview.getNode(e.target);
       if (myNode == null) {
         return;
       }
@@ -320,13 +319,48 @@ class TreeviewNode {
 
       myNode.Container.classList.add("highlighted");
     });
+
+    a.invalidateCollapsible();
   }
 
-  #isTag(el, tagName) {
+  Toggle() {
+    const a = this;
+
+    switch (a.IsExpanded) {
+      case true:
+        a.Collapse();
+        break;
+      case false:
+        a.Expand();
+        break;
+      default: break;
+    }
+  }
+
+
+  invalidateCollapsible() {
+    const a = this;
+
+    // Invalidate state
+    if (a.ParentNode == null) {
+      return;
+    }
+
+    if (a.ParentNode.classList.contains("c")) {
+      a.Node.classList.add("hidden");
+    } else if (a.ParentNode.classList.contains("e")) {
+      a.Node.classList.remove("hidden");
+    } else {
+      a.ParentNode.classList.add("e");
+      a.Node.classList.remove("hidden");
+    }
+  }
+
+  isTag(el, tagName) {
     return (el.tagName.toLowerCase() == tagName);
   }
 
-  #parentsUntilTagName(el, tagName) {
+  parentsUntilTagName(el, tagName) {
     const a = this;
 
     let node = el;
@@ -342,13 +376,13 @@ class TreeviewNode {
         break;
       }
 
-      if (a.#isTag(node, "ul")) {
+      if (a.isTag(node, "ul")) {
         if (node.classList.contains("bbtreeview")) {
           return null;
         }
       }
 
-      if (a.#isTag(node, tagName)) {
+      if (a.isTag(node, tagName)) {
         break;
       }
     }
@@ -356,29 +390,16 @@ class TreeviewNode {
     return node;
   }
 
-  #setCheckbox(el, value) {
+  setCheckbox(el, value) {
-    el.classList.remove("x");
-    el.classList.remove("o");
-
-    el.classList.add((value ? "x" : "o"));
-  }
-
-  #setExpandbox(el, value) {
-    el.classList.remove("e");
-    el.classList.remove("c");
-
     if (value) {
-      if (el.querySelectorAll("li").length > 0) {
+      if (!el.classList.contains("x")) {
-        el.classList.add("e");
+        el.classList.add("x");
-      } else {
-        el.classList.add("nc");
       }
     } else {
-      el.classList.add("c");
+      if (el.classList.contains("x")) {
+        el.classList.remove("x");
+      }
     }
   }
 
-}
+}
-
-
-export default TreeviewNode;

src/checkbox.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="feather feather-divide-square"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="checkbox.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="12.256517"
+     inkscape:cx="-2.9780075"
+     inkscape:cy="2.814829"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="845"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <rect
+     x="2.5662928"
+     y="2.5662928"
+     width="10.193273"
+     height="10.193273"
+     rx="1.132586"
+     ry="1.132586"
+     id="rect2"
+     style="stroke:#333333;stroke-width:1.13259;stroke-opacity:1"
+     inkscape:export-filename="L:\gitea-hiimray\bbtreeview\uncheckbox.png"
+     inkscape:export-xdpi="96"
+     inkscape:export-ydpi="96" />
+  <rect
+     x="5.1146226"
+     y="5.1146226"
+     width="5.0966134"
+     height="5.0966134"
+     rx="0.56629044"
+     ry="0.56629044"
+     id="rect2-7"
+     style="fill:#333333;fill-opacity:1;stroke:#333333;stroke-width:0.566292;stroke-opacity:1"
+     inkscape:export-filename="L:\gitea-hiimray\bbtreeview\checkbox.png"
+     inkscape:export-xdpi="96"
+     inkscape:export-ydpi="96" />
+</svg>

src/folder.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="feather feather-folder"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="folder.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="34.666667"
+     inkscape:cx="11.985577"
+     inkscape:cy="12.014423"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="845"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+     id="path2"
+     style="stroke:#ebc848;stroke-opacity:1;fill:#ffe999;fill-opacity:1" />
+</svg>

src/icon.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="feather feather-divide-square"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="icon.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="17.333333"
+     inkscape:cx="-0.60576923"
+     inkscape:cy="15.375"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="845"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <rect
+     x="2.4663463"
+     y="2.4663463"
+     width="8.3942308"
+     height="8.3942308"
+     rx="0.93269229"
+     ry="0.93269229"
+     id="rect2"
+     style="stroke:#a0a0a0;stroke-width:0.932692;stroke-opacity:1"
+     inkscape:export-filename="L:\gitea-hiimray\New folder\collapse.png"
+     inkscape:export-xdpi="96"
+     inkscape:export-ydpi="96" />
+  <line
+     x1="4.7980771"
+     y1="6.6634617"
+     x2="8.5288458"
+     y2="6.6634617"
+     id="line4"
+     style="stroke:#000000;stroke-width:0.932692;stroke-opacity:1"
+     inkscape:export-filename="L:\gitea-hiimray\New folder\collapse.png"
+     inkscape:export-xdpi="96"
+     inkscape:export-ydpi="96" />
+</svg>

src/index.js

@@ -1,5 +0,0 @@
-// src/index.js
-import Treeview from './treeview/treeview.js';
-
-
-export { Treeview };

src/treeview.scss

@@ -1,106 +0,0 @@
-$highlight-colour: rgb(169, 201, 249, 0.7);
-$icon-sprite: url("sprite.png");
-$line-image: url("line.png");
-$row-height: 1.2em;
-$icon-size: 16px;
-
-
-ul.bbtreeview {
-  background-image: $line-image;
-  background-repeat: repeat-y;
-  list-style: none;
-  padding: 0;
-  margin: 0 0 0 8px;
-
-
-  ul {
-    background-image: $line-image;
-    background-repeat: repeat-y;
-    list-style: none;
-    margin: 0 0 0 22px;
-    padding: 0;
-  }
-
-  li {
-    background-repeat: no-repeat;
-    cursor: default;
-    display: block;
-
-    div.icon.expand {
-      margin-right: 2px;
-    }
-
-  }
-
-  div.li {
-    height: $row-height;
-
-    span {
-      -webkit-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-      display: inline-block;
-      height: $row-height;
-      line-height: $row-height;
-      overflow: hidden;
-      padding-left: 6px;
-      text-overflow: ellipsis;
-      vertical-align: top;
-      white-space: nowrap;
-    }
-
-    span.noicon {
-      padding-left: 0px !important;
-    }
-
-  }
-
-  div.li.highlighted {
-    background-color:$highlight-colour;
-  }
-
-  div.icon {
-    background-position-x: 0px;
-    background-repeat: no-repeat;
-    display: inline-block;
-    height: $icon-size;
-    width: $icon-size;
-  }
-
-  div.icon.folder {
-    background-image: $icon-sprite;
-    background-position-y: calc(2 * $icon-size * -1);
-  }
-
-
-  .c > ul {
-    display: none;
-  }
-
-  .c > div > div.icon.expand {
-    background-image: $icon-sprite;
-    background-position-y: calc(4 * $icon-size * -1);
-  }
-
-  .e > div > div.icon.expand {
-    background-image: $icon-sprite;
-    background-position-y: calc(3 * $icon-size * -1);
-  }
-
-  .nc > div > div.icon.expand {
-    /* background-image: none; */
-    background-image: $icon-sprite;
-    background-position-y: calc(5 * $icon-size * -1);
-  }
-
-  .o > div > div.icon.checkbox {
-    background-image: $icon-sprite;
-    background-position-y: calc(1 * $icon-size * -1);
-  }
-
-  .x > div > div.icon.checkbox {
-    background-image: $icon-sprite;
-    background-position-y: calc(0 * $icon-size * -1);
-  }
-
-}

src/version.txt

@@ -0,0 +1,4 @@
+/**
+ * BBTreeview
+ * @version v0.1.2.044 (2024/01/09 2118)
+ */

webpack.config.js

@@ -1,60 +0,0 @@
-const path = require('path');
-const { version } = require('./package.json');
-const webpack = require('webpack');
-
-
-class PrependVersionPlugin {
-  apply(compiler) {
-    compiler.hooks.emit.tapAsync('PrependVersionPlugin', (compilation, callback) => {
-      Object.keys(compilation.assets).forEach((filename) => {
-        if (filename.endsWith('.js')) {
-          const asset = compilation.assets[filename];
-
-          const headerText = `/*!\n  * LiteRyzJS/Treeview v${version}\n  * Copyright 2023-2024 Ray Lam (https://www.hiimray.co.uk)\n  *\n  */\n`;
-
-          const newContent = headerText + asset.source();
-
-          compilation.assets[filename] = {
-            source: () => newContent,
-            size: () => newContent.length,
-          };
-        }
-      });
-
-      callback();
-    });
-  }
-}
-
-
-module.exports = {
-  entry: {
-    treeview: './src/index.js'
-  },
-  output: {
-    filename: `[name].dist.js`,
-    path: path.resolve(__dirname, 'dist'),
-    library: 'LiteRyzJS',
-    libraryTarget: 'umd',
-    globalObject: 'this'
-  },
-  mode: 'production',  // development|production
-  plugins: [
-    new webpack.DefinePlugin({
-        'process.env.VERSION': JSON.stringify(version)
-    }),
-    new PrependVersionPlugin()
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.scss$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'sass-loader'
-        ]
-      }
-    ]
-  }
-};