Merge pull request 'release/0.1.2.011' (#3) from release/0.1.2.011 into master

Reviewed-on: Ray/bbtreeview#3

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

@@ -1,5 +1,5 @@
 /**
  * BBTreeview
- * @version v0.1.0.223 (2023/09/08 2027)
+ * @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{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

@@ -10,12 +10,11 @@
   <!-- <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
   <!-- <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="src/bbtreeview.css" rel="stylesheet" /> -->
+  <!-- <link href="bbtreeview.css" rel="stylesheet" /> -->
-  <!-- <script src="src/bbtreeview.js"></script> -->
+  <link href="build/bbtreeview.min.css" rel="stylesheet" />
-  <!-- <script src="src/bbtreeviewnode.js"></script> -->
+  <!-- <script src="bbtreeview.min.js"></script> -->
-
+  <script src="src/bbtreeview.js"></script>
-  <link href="bbtreeview.min.css" rel="stylesheet" />
+  <script src="src/bbtreeviewnode.js"></script>
-  <script src="bbtreeview.min.js"></script>
 
   <title></title>
 </head>
@@ -31,26 +30,31 @@
   <div class="column">
     <div class="panel">
 
-      <p>Create demo treeview with checkboxes and selection enabled</p>
+      <p>Create demo treeview</p>
-      <button onclick="CreateTreeview()">Create Treeview</button>
+      <p><button onclick="CreateTreeview(1)">Create Treeview (Checkbox and Selection)</button></p>
+      <p><button onclick="CreateTreeview(2)">Create Treeview (Checkbox, Hide Selection, Enable Pull-Ups)</button></p>
+      <p><button onclick="CreateTreeview(3)">Create Treeview (No Checkbox, Selection)</button></p>
+      <p><button onclick="CreateTreeview(4)">Create Treeview (No Checkbox, No Icons, Selection)</button></p>
+
+    </div>
+    <div class="panel">
+
+      <p>Load sample nodes</p>
+      <button onclick="LoadTreeview()">Load Treeview</button>
 
     </div>
     <div class="panel">
 
       <p>Clear treeview</p>
+      <p>
         <button onclick="ClearTreeview()">Clear Treeview</button>
-
-    </div>
-    <div class="panel">
-
-      <p>Remove the "Program Files" treenode</p>
         <button onclick="RemoveTreeNode()">Remove Treenode</button>
+      </p>
 
     </div>
     <div class="panel">
 
       <p>Find a treenode</p>
-      <p>
         <button onclick="FindTreeNode()">Find Treenode By ID</button>
         <button onclick="FindTreeNodesByName()">Find Treenode By Name</button>
         <button onclick="FindTreeNodesByValue()">Find Treenode By Value</button>
@@ -64,6 +68,7 @@
         <button onclick="GetAllTreeNodes()">Get All Treenodes</button>
         <button onclick="GetSelectedTreeNode()">Get Highlighted Treenode</button>
         <button onclick="GetCheckedTreeNodes()">Get Checked Treenodes</button>
+        <button onclick="GetCheckedTags()">Get Checked Treenode Tags</button>
       </p>
       <p>
         <button onclick="GetCheckedValues()">Get Checked Values</button>
@@ -90,11 +95,13 @@
   <style>
 
 body {
-  padding: 20px;
+  padding: 10px;
 }
 
 .column {
-  width: 50%; min-height:400px; float: left
+  float: left;
+  min-height: 400px;
+  width: 50%;
 }
 
 .panel {
@@ -111,16 +118,58 @@ body {
 
   <script>
 
-var treeview1 = new BBTreeview({
+CreateTreeview(1);
+LoadTreeview();
+
+
+function CreateTreeview(value){
+  switch (value) {
+    case 1:
+      window.treeview1 = new BBTreeview({
         ID: "#treeview1",
         ShowCheckbox: true,
         ShowSelection: true
       });
 
+      break;
+    case 2:
+      window.treeview1 = new BBTreeview({
+        ID: "#treeview1",
+        ShowCheckbox: true,
+        ShowSelection: false,
+        EnablePullUp: true
+      });
 
-function CreateTreeview(){
+      break;
+    case 3:
+      window.treeview1 = new BBTreeview({
+        ID: "#treeview1",
+        ShowCheckbox: false,
+        ShowSelection: true,
+        EnablePullUp: false
+      });
 
-  treeview1.AddItem({
+      break;
+    case 4:
+      window.treeview1 = new BBTreeview({
+        ID: "#treeview1",
+        ShowCheckbox: false,
+        ShowSelection: true,
+        EnablePullUp: false,
+        ShowIcon: false
+      });
+
+      break;
+    default:
+      break;
+  }
+
+  LoadTreeview();
+}
+
+function LoadTreeview(){
+
+  window.treeview1.AddItem({
     ID: "root",
     Name: "C:\\"
   });
@@ -135,7 +184,7 @@ function CreateTreeview(){
   ];
 
   for (let i=0; i<folders1.length; i++) {
-      treeview1.AddItem({
+    window.treeview1.AddItem({
       ID: "0_" + i,
       ParentID: "root",
       Name: folders1[i],
@@ -152,7 +201,7 @@ function CreateTreeview(){
   ];
 
   for (let i=0; i<folders12.length; i++) {
-      treeview1.AddItem({
+    window.treeview1.AddItem({
       ID: "0_2_" + i,
       ParentID: "0_2",
       Name: folders12[i],
@@ -166,7 +215,7 @@ function CreateTreeview(){
   ];
 
   for (let i=0; i<folders13.length; i++) {
-      treeview1.AddItem({
+    window.treeview1.AddItem({
       ID: "0_3_" + i,
       ParentID: "0_3",
       Name: folders13[i],
@@ -181,7 +230,7 @@ function CreateTreeview(){
   ];
 
   for (let i=0; i<folders15.length; i++) {
-      treeview1.AddItem({
+    window.treeview1.AddItem({
       ID: "0_5_" + i,
       ParentID: "0_5",
       Name: folders15[i],
@@ -189,7 +238,7 @@ function CreateTreeview(){
     });
   }
 
-  treeview1.AddItem({
+  window.treeview1.AddItem({
     ID: "0_2_3_0",
     ParentID: "0_2_3",
     Name: "en-GB",
@@ -199,15 +248,15 @@ function CreateTreeview(){
 }
 
 function ClearTreeview() {
-  treeview1.Clear();
+  window.treeview1.Clear();
 }
 
 function RemoveTreeNode() {
-  treeview1.Remove("0_2");
+  window.treeview1.Remove("0_2");
 }
 
 function FindTreeNode() {
-  let treenode = treeview1.Find("0_5");
+  let treenode = window.treeview1.Find("0_5");
 
   console.log(treenode);
 
@@ -215,7 +264,7 @@ function FindTreeNode() {
 }
 
 function FindTreeNodesByName() {
-  let treenodes = treeview1.FindByName("Common Files");
+  let treenodes = window.treeview1.FindByName("Common Files");
 
   console.log(treenodes);
 
@@ -223,7 +272,7 @@ function FindTreeNodesByName() {
 }
 
 function FindTreeNodesByValue() {
-  let treenodes = treeview1.FindByValue("Internet Explorer");
+  let treenodes = window.treeview1.FindByValue("Internet Explorer");
 
   console.log(treenodes);
 
@@ -231,7 +280,7 @@ function FindTreeNodesByValue() {
 }
 
 function GetSelectedTreeNode() {
-  let treenode = treeview1.GetSelectedNode();
+  let treenode = window.treeview1.GetSelectedNode();
 
   console.log(treenode);
 
@@ -239,7 +288,15 @@ function GetSelectedTreeNode() {
 }
 
 function GetCheckedTreeNodes() {
-  let treenodes = treeview1.GetCheckedNodes();
+  let treenodes = window.treeview1.GetCheckedNodes();
+
+  console.log(treenodes);
+
+  alert(JSON.stringify(treenodes));
+}
+
+function GetCheckedTags() {
+  let treenodes = window.treeview1.GetCheckedTags();
 
   console.log(treenodes);
 
@@ -247,7 +304,7 @@ function GetCheckedTreeNodes() {
 }
 
 function GetAllTreeNodes() {
-  let treenodes = treeview1.GetAllNodes();
+  let treenodes = window.treeview1.GetAllNodes();
 
   console.log(treenodes);
 
@@ -255,7 +312,7 @@ function GetAllTreeNodes() {
 }
 
 function GetCheckedValues() {
-  let treenodes = treeview1.GetCheckedValues();
+  let treenodes = window.treeview1.GetCheckedValues();
 
   console.log(treenodes);
 
@@ -263,19 +320,19 @@ function GetCheckedValues() {
 }
 
 function CollapseAll() {
-  treeview1.CollapseAll();
+  window.treeview1.CollapseAll();
 }
 
 function ExpandAll() {
-  treeview1.ExpandAll();
+  window.treeview1.ExpandAll();
 }
 
 function CheckAll() {
-  treeview1.CheckAll(true);
+  window.treeview1.CheckAll(true);
 }
 
 function UncheckAll() {
-  treeview1.CheckAll(false);
+  window.treeview1.CheckAll(false);
 }
 
 

src/bbtreeview.css

@@ -70,3 +70,7 @@ ul.bbtreeview div.li > span {
   vertical-align: top;
   white-space: nowrap;
 }
+
+ul.bbtreeview div.li > span.noicon {
+  padding-left: 0px !important;
+}

src/bbtreeview.js

@@ -1,17 +1,48 @@
-/**
+class BBTreeview {
- * BBTreeview
+  constructor(options) {
- * @version v0.1.0.223 (2023/09/08 2027)
+    this.Options = {};
- */
-function BBTreeview(options)
-{
-  const a = this;
 
-  a.initialise(options);
+    this.initialiseComponents(options);
-};
+  }
 
-BBTreeview.prototype.AddItem = function(options) {
+  initialiseComponents(options) {
+    var a = this;
+
+    a.Options = Object.assign({
+      ID: null,
+      ShowCheckbox: false,
+      ShowSelection: true,
+      EnablePullUp: false,
+      ShowIcon: true
+    }, options);
+
+    // Replace treeview
+    a.createTreeview();
+
+    // a.Container = a.getTreeview();
+  }
+
+
+  get Container() {
+    return this.getTreeview();
+  }
+
+
+  AddItem(options) {
     const a = this;
-  const _options = a.getOptions(options);
+    const _options = Object.assign({
+      ID: null,
+      ParentID: null,
+      Name: "",
+      Hint: "",
+      Value: "",
+      Icon: "folder",
+      Checked: false,
+      Tag: null
+    }, options);
+
+    if (_options.ID == null) _options.ID = a.generateID();
+    if (_options.Tag == null) _options.Tag = "";
 
     // Don't add duplicate
     if (a.Find(_options.ID) != null) {
@@ -30,7 +61,7 @@ BBTreeview.prototype.AddItem = function(options) {
     if (parentNode == null) {
       parentNode = a.Container;
     } else {
-    parentNode = parentNode.GetChildNode();
+      parentNode = parentNode.ChildNode;
     }
 
     const nodeHtml = a.generateNodeHtml(_options);
@@ -41,12 +72,12 @@ BBTreeview.prototype.AddItem = function(options) {
     const node = a.Find(_options.ID);
 
     // Setup events
-  node.SetupEvents();
+    node.InvalidateEvents();
 
     return true;
-};
+  }
 
-BBTreeview.prototype.Remove = function(id) {
+  Remove(id) {
     const a = this;
 
     const node = a.Find(id);
@@ -57,51 +88,31 @@ BBTreeview.prototype.Remove = function(id) {
     node.Remove();
 
     return true;
-};
-
-BBTreeview.prototype.Default = function() {
-  return {
-    TreeviewOptions: {
-      ID: null,
-      ShowCheckbox: false,
-      ShowSelection: true
-    },
-    TreeNodeOptions: {
-      ID: null,
-      ParentID: null,
-      Name: "",
-      Hint: "",
-      Value: "",
-      Icon: "folder",
-      Checked: false,
-      Tag: null
   }
-  };
-};
 
-BBTreeview.prototype.Clear = function() {
+  Clear() {
     const a = this;
 
-  a.initialise(a.Options);
+    a.initialiseComponents(a.Options);
-};
+  }
 
-BBTreeview.prototype.CollapseAll = function() {
+  CollapseAll() {
     const a = this;
 
     a.GetAllNodes().forEach(function(e) {
       e.Collapse();
     });
-};
+  }
 
-BBTreeview.prototype.ExpandAll = function() {
+  ExpandAll() {
     const a = this;
 
     a.GetAllNodes().forEach(function(e) {
       e.Expand();
     });
-};
+  }
 
-BBTreeview.prototype.CheckAll = function(value) {
+  CheckAll(value) {
     const a = this;
 
     if (!a.Options.ShowCheckbox) {
@@ -111,25 +122,27 @@ BBTreeview.prototype.CheckAll = function(value) {
     a.GetAllNodes().forEach(function(e) {
       e.Check(value);
     });
-};
+  }
 
-BBTreeview.prototype.Find = function(id) {
+  Find(id) {
     const a = this;
 
+    if (a.Container == null){
+      console.log("BBTreeview container not found");
+      return;
+    }
+
     const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']");
     if (node.length <= 0) {
       return null;
     }
 
-  let treenode = new BBTreeviewNode(this);
+    const treenode = new BBTreeviewNode(this, node[0]);
-  treenode.Load(node[0]);
-
-  // console.log(treenode);
 
     return treenode;
-};
+  }
 
-BBTreeview.prototype.FindByName = function(value) {
+  FindByName(value) {
     const a = this;
 
     let response = [];
@@ -142,9 +155,9 @@ BBTreeview.prototype.FindByName = function(value) {
     });
 
     return response;
-};
+  }
 
-BBTreeview.prototype.FindByValue = function(value) {
+  FindByValue(value) {
     const a = this;
 
     let response = [];
@@ -157,9 +170,9 @@ BBTreeview.prototype.FindByValue = function(value) {
     });
 
     return response;
-};
+  }
 
-BBTreeview.prototype.GetAllNodes = function() {
+  GetAllNodes() {
     const a = this;
 
     const node = a.Container.querySelectorAll("li");
@@ -183,14 +196,14 @@ BBTreeview.prototype.GetAllNodes = function() {
     });
 
     return response;
-};
+  }
 
-BBTreeview.prototype.GetCheckedNodes = function() {
+  GetCheckedNodes() {
     const a = this;
 
     let response = [];
     a.GetAllNodes().forEach(function(e) {
-    if (!e.Checked) {
+      if (!e.IsChecked) {
         return;
       }
 
@@ -198,9 +211,9 @@ BBTreeview.prototype.GetCheckedNodes = function() {
     });
 
     return response;
-};
+  }
 
-BBTreeview.prototype.GetCheckedValues = function() {
+  GetCheckedValues() {
     const a = this;
 
     let response = [];
@@ -209,14 +222,25 @@ BBTreeview.prototype.GetCheckedValues = function() {
     });
 
     return response;
-};
+  }
 
-BBTreeview.prototype.GetSelectedNode = function() {
+  GetCheckedTags() {
+    const a = this;
+
+    let response = [];
+    a.GetCheckedNodes().map(function(e) {
+      response.push(e.Tag);
+    });
+
+    return response;
+  }
+
+  GetSelectedNode() {
     const a = this;
 
     let response = null;
     a.GetAllNodes().forEach(function(e) {
-    if (e.Highlighted) {
+      if (e.IsHighlighted) {
         response = e;
 
         return false;
@@ -224,45 +248,32 @@ BBTreeview.prototype.GetSelectedNode = function() {
     });
 
     return response;
-};
-
-BBTreeview.prototype.initialise = function(options) {
-  var a = this;
-
-  a.Options = Object.assign(a.Default().TreeviewOptions, options);
-
-  a.Container = null;
-
-  let treeview = document.getElementsByTagName("body")[0].querySelectorAll(a.Options.ID);
-  if (treeview.length <= 0) {
-    return;
   }
 
-  if (treeview[0] == null) {
-    return;
-  }
 
-  a.Container = treeview[0];
+  appendHtml(el, html) {
-
-  a.Container.innerHTML = "<ul class=\"bbtreeview\"></ul>";
-
-  a.Container = a.Container.querySelectorAll("ul.bbtreeview")[0];
-};
-
-BBTreeview.prototype.appendHtml = function(el, html) {
     let node = document.createElement('template');
     node.innerHTML = html;
 
     node = node.content.firstChild;
 
     el.appendChild(node);
-};
+  }
 
-BBTreeview.prototype.generateID = function() {
+  createTreeview() {
+    const a = this;
+
+    let container = a.getContainer();
+    if (container != null) {
+      container.innerHTML = "<ul class=\"bbtreeview\"></ul>";
+    }
+  }
+
+  generateID() {
     return "treeviewItem" + (Math.floor(Math.random() * 1000001) + 100).toString();
-};
+  }
 
-BBTreeview.prototype.generateNodeHtml = function(options) {
+  generateNodeHtml(options) {
     const a = this;
 
     let tag = "";
@@ -277,16 +288,41 @@ BBTreeview.prototype.generateNodeHtml = function(options) {
       html += '<div class="icon checkbox"></div>';
     }
 
+    if (a.Options.ShowIcon) {
       html += '<div class="icon ' + options.Icon + '"></div>';
       html += '<span title="' + options.Hint + '">' + options.Name + '</span>';
+    } else {
+      html += '<span class="noicon" title="' + options.Hint + '">' + options.Name + '</span>';
+    }
+
     html += '</div>';
     html += '<ul></ul>';
     html += '</li>';
 
     return html;
-};
+  }
 
-BBTreeview.prototype.getNode = function(el) {
+  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;
@@ -303,25 +339,31 @@ BBTreeview.prototype.getNode = function(el) {
     }
 
     return a.Find(id);
-};
+  }
 
-BBTreeview.prototype.getOptions = function(options) {
+  getTreeview() {
     const a = this;
 
-  let _options = Object.assign(a.Default().TreeNodeOptions, options);
+    let container = a.getContainer();
-
+    if (container == null) {
-  if (_options.ID == null) {
+      return;
-    _options.ID = a.generateID();
     }
 
-  if (_options.Tag == null) {
+    // if (container.querySelectorAll("ul.bbtreeview").length <= 0) {
-    _options.Tag = "";
+    //   container.innerHTML = "<ul class=\"bbtreeview\"></ul>";
+    // }
+
+    container = container.querySelectorAll("ul.bbtreeview");
+    if (container.length <= 0) {
+      return;
     }
 
-  return _options;
+    container = container[0];
-};
 
-BBTreeview.prototype.isNullOrWhitespace = function(value) {
+    return container;
+  }
+
+  isNullOrWhitespace(value) {
     if (typeof (value) == "undefined") {
       return true;
     }
@@ -331,13 +373,13 @@ BBTreeview.prototype.isNullOrWhitespace = function(value) {
     }
 
     return (value.toString().trim().length <= 0);
-};
+  }
 
-BBTreeview.prototype.isTag = function(el, tagName) {
+  isTag(el, tagName) {
     return (el.tagName.toLowerCase() == tagName);
-};
+  }
 
-BBTreeview.prototype.parentsUntilTagName = function(el, tagName) {
+  parentsUntilTagName(el, tagName) {
     const a = this;
 
     let node = el;
@@ -365,4 +407,6 @@ BBTreeview.prototype.parentsUntilTagName = function(el, tagName) {
     }
 
     return node;
-};
+  }
+
+}

src/bbtreeviewnode.js

@@ -1,89 +1,18 @@
-/**
+class BBTreeviewNode {
- * BBTreeview
+  constructor(treeview, node) {
- * @version v0.1.0.223 (2023/09/08 2027)
+    this.Treeview = treeview;
- */
+    this.Node = node;
-function BBTreeviewNode(treeview)
-{
-  const a = this;
 
-  a.Treeview = treeview;
+    // this.initialiseComponents();
-
-  a.initialise();
-};
-
-
-BBTreeviewNode.prototype.Load = function(node) {
-  const a = this;
-
-  a.ID = node.getAttribute("data-bbtv-id");
-  a.Node = node;
-
-  a.Container = node.querySelectorAll("div.li")[0];
-  a.Label = node.querySelectorAll("span")[0];
-  a.Value = node.getAttribute("data-bbtv-value");
-
-  a.Name = a.Label.textContent;
-  a.Hint = a.Label.getAttribute("title");
-
-  a.ParentID = a.GetParentID();
-  a.Checked = a.IsChecked();
-  a.Highlighted = a.IsHighlighted();
-  a.Tag = a.GetTag();
-};
-
-
-BBTreeviewNode.prototype.Check = function(value) {
-  const a = this;
-
-  a.setCheckbox(a.Node, value);
-
-  // Update children
-  a.Node.querySelectorAll("li").forEach(function(e) {
-    a.setCheckbox(e, value);
-  });
-
-  // Update parent state
-  if (a.GetParentNode() != null) {
-    let uncheckedCount = 0;
-    a.GetParentNode().querySelectorAll("li").forEach(function(e) {
-      if (e.classList.contains("x")) {
-        return;
   }
 
-      uncheckedCount++;
+  // initialiseComponents() {
-    });
+  //   const a = this;
 
-    a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0));
+  // }
-  }
-};
 
-BBTreeviewNode.prototype.Collapse = function() {
-  const a = this;
 
-  if (a.Node.classList.contains("e")) {
+  get Checkbox() {
-    a.Node.classList.remove("e");
-    a.Node.classList.add("c");
-  }
-
-  a.GetChildNodes().forEach(function(e) {
-    e.classList.add("hidden");
-  });
-};
-
-BBTreeviewNode.prototype.Expand = function() {
-  const a = this;
-
-  if (a.Node.classList.contains("c")) {
-    a.Node.classList.remove("c");
-    a.Node.classList.add("e");
-  }
-
-  a.GetChildNodes().forEach(function(e) {
-    e.classList.remove("hidden");
-  });
-};
-
-BBTreeviewNode.prototype.GetCheckbox = function() {
     const a = this;
 
     if (!a.Treeview.Options.ShowCheckbox) {
@@ -96,9 +25,9 @@ BBTreeviewNode.prototype.GetCheckbox = function() {
     }
 
     return checkboxes[0];
-};
+  }
 
-BBTreeviewNode.prototype.GetChildNode = function() {
+  get ChildNode() {
     const a = this;
 
     let result = a.Node.querySelectorAll("ul");
@@ -107,12 +36,12 @@ BBTreeviewNode.prototype.GetChildNode = function() {
     }
 
     return result[0];
-};
+  }
 
-BBTreeviewNode.prototype.GetChildNodes = function() {
+  get ChildNodes() {
     const a = this;
 
-  const childNode = a.GetChildNode();
+    const childNode = a.ChildNode;
     if (childNode == null) {
       return [];
     }
@@ -136,36 +65,9 @@ BBTreeviewNode.prototype.GetChildNodes = function() {
     });
 
     return result;
-};
-
-BBTreeviewNode.prototype.GetTag = function() {
-  const a = this;
-
-  let tag = a.Node.getAttribute("data-bbtv-tag");
-  if (a.Treeview.isNullOrWhitespace(tag)) {
-    return null;
   }
 
-  return JSON.parse(decodeURIComponent(tag));
+  get IsChecked() {
-};
-BBTreeviewNode.prototype.GetParentID = function() {
-  const a = this;
-
-  const parentNode = a.GetParentNode();
-  if (parentNode == null) {
-    return null;
-  }
-
-  return parentNode.getAttribute("data-bbtv-id");
-};
-
-BBTreeviewNode.prototype.GetParentNode = function() {
-  const a = this;
-
-  return a.parentsUntilTagName(a.Node, "li");
-};
-
-BBTreeviewNode.prototype.IsChecked = function() {
     const a = this;
 
     if (!a.Treeview.Options.ShowCheckbox) {
@@ -173,9 +75,21 @@ BBTreeviewNode.prototype.IsChecked = function() {
     }
 
     return a.Node.classList.contains("x");
-};
+  }
 
-BBTreeviewNode.prototype.IsExpanded = function() {
+  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() {
     const a = this;
 
     if (a.Node.classList.contains("e")) {
@@ -187,31 +101,143 @@ BBTreeviewNode.prototype.IsExpanded = function() {
     }
 
     return null;
-};
-
-BBTreeviewNode.prototype.IsHighlighted = function() {
-  const a = this;
-
-  return (a.Container.classList.contains("highlighted"));
-};
-
-BBTreeviewNode.prototype.Remove = function() {
-  const a = this;
-
-  if (a.GetParentNode() != null) {
-    if (a.GetParentNode().classList.contains("e")) {
-      a.GetParentNode().classList.remove("e");
   }
 
-    if (a.GetParentNode().classList.contains("c")) {
+  get IsHighlighted() {
-      a.GetParentNode().classList.remove("c");
+    const a = this;
+
+    return a.Container.classList.contains("highlighted");
+  }
+
+  get Label() {
+    return this.Node.querySelectorAll("span")[0];
+  }
+
+  get Name() {
+    return this.Label.textContent;
+  }
+
+  get ParentID() {
+    const a = this;
+
+    const parentNode = a.ParentNode;
+    if (parentNode == null) {
+      return null;
+    }
+
+    return parentNode.getAttribute("data-bbtv-id");
+  }
+
+  get ParentNode() {
+    const a = this;
+
+    return a.parentsUntilTagName(a.Node, "li");
+  }
+
+  get Tag() {
+    const a = this;
+
+    let tag = a.Node.getAttribute("data-bbtv-tag");
+    if (a.Treeview.isNullOrWhitespace(tag)) {
+      return null;
+    }
+
+    return JSON.parse(decodeURIComponent(tag));
+  }
+
+  get Value() {
+    return this.Node.getAttribute("data-bbtv-value");
+  }
+
+
+  Check(value) {
+    const a = this;
+
+    a.setCheckbox(a.Node, value);
+
+    // Update children
+    a.Node.querySelectorAll("li").forEach(function(e) {
+      a.setCheckbox(e, value);
+    });
+
+    // Update parent state
+    let parentNode = a.ParentNode;
+    if (parentNode == null) {
+      return;
+    }
+
+    // Handle pull-ups
+    if (a.Treeview.Options.EnablePullUp) {
+      while (true) {
+        const parentChecked = (parentNode.querySelectorAll("li.x").length > 0);
+
+        a.setCheckbox(parentNode, parentChecked);
+
+        parentNode = a.Treeview.getNode(parentNode);
+        parentNode = parentNode.ParentNode;
+
+        if (parentNode == null) {
+          break;
+        }
+      }
+    } else {
+      let uncheckedCount = 0;
+
+      parentNode.querySelectorAll("li").forEach(function(e) {
+        if (e.classList.contains("x")) {
+          return;
+        }
+
+        uncheckedCount++;
+      });
+
+      a.setCheckbox(parentNode, (uncheckedCount <= 0));
+    }
+  }
+
+  Collapse() {
+    const a = this;
+
+    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() {
+    const a = this;
+
+    if (a.ParentNode != null) {
+      if (a.ParentNode.classList.contains("e")) {
+        a.ParentNode.classList.remove("e");
+      }
+
+      if (a.ParentNode.classList.contains("c")) {
+        a.ParentNode.classList.remove("c");
       }
     }
 
     a.Node.parentNode.removeChild(a.Node);
-};
+  }
 
-BBTreeviewNode.prototype.SetupEvents = function() {
+  InvalidateEvents() {
     const a = this;
 
     // collapsible icon behaviour
@@ -250,21 +276,21 @@ BBTreeviewNode.prototype.SetupEvents = function() {
 
     // checkbox behaviour
     if (a.Treeview.Options.ShowCheckbox) {
-    a.GetCheckbox().addEventListener("mousedown", function(e){
+      a.Checkbox.addEventListener("mousedown", function(e){
         e.stopPropagation();
         e.preventDefault();
 
-      a.Check(!a.IsChecked());
+        a.Check(!a.IsChecked);
       });
 
-    a.GetCheckbox().addEventListener("click", function(e){
+      a.Checkbox.addEventListener("click", function(e){
         e.stopPropagation();
         e.preventDefault();
 
         // do nothing
       });
 
-    a.GetCheckbox().addEventListener("dblclick", function(e){
+      a.Checkbox.addEventListener("dblclick", function(e){
         e.stopPropagation();
         e.preventDefault();
 
@@ -295,12 +321,12 @@ BBTreeviewNode.prototype.SetupEvents = function() {
     });
 
     a.invalidateCollapsible();
-};
+  }
 
-BBTreeviewNode.prototype.Toggle = function() {
+  Toggle() {
     const a = this;
 
-  switch (a.IsExpanded()) {
+    switch (a.IsExpanded) {
       case true:
         a.Collapse();
         break;
@@ -309,43 +335,32 @@ BBTreeviewNode.prototype.Toggle = function() {
         break;
       default: break;
     }
-};
+  }
 
-BBTreeviewNode.prototype.initialise = function() {
-  const a = this;
 
-//   a.ID = null;
+  invalidateCollapsible() {
-//   a.ParentID = null;
-//   a.Name = "";
-//   a.Hint = "";
-//   a.Value = "";
-//   a.Icon = "folder";
-//   a.Checked = false;
-};
-
-BBTreeviewNode.prototype.invalidateCollapsible = function() {
     const a = this;
 
     // Invalidate state
-  if (a.GetParentNode() == null) {
+    if (a.ParentNode == null) {
       return;
     }
 
-  if (a.GetParentNode().classList.contains("c")) {
+    if (a.ParentNode.classList.contains("c")) {
       a.Node.classList.add("hidden");
-  } else if (a.GetParentNode().classList.contains("e")) {
+    } else if (a.ParentNode.classList.contains("e")) {
       a.Node.classList.remove("hidden");
     } else {
-    a.GetParentNode().classList.add("e");
+      a.ParentNode.classList.add("e");
       a.Node.classList.remove("hidden");
     }
-};
+  }
 
-BBTreeviewNode.prototype.isTag = function(el, tagName) {
+  isTag(el, tagName) {
     return (el.tagName.toLowerCase() == tagName);
-};
+  }
 
-BBTreeviewNode.prototype.parentsUntilTagName = function(el, tagName) {
+  parentsUntilTagName(el, tagName) {
     const a = this;
 
     let node = el;
@@ -373,9 +388,9 @@ BBTreeviewNode.prototype.parentsUntilTagName = function(el, tagName) {
     }
 
     return node;
-};
+  }
 
-BBTreeviewNode.prototype.setCheckbox = function(el, value) {
+  setCheckbox(el, value) {
     if (value) {
       if (!el.classList.contains("x")) {
         el.classList.add("x");
@@ -385,4 +400,6 @@ BBTreeviewNode.prototype.setCheckbox = function(el, value) {
         el.classList.remove("x");
       }
     }
-};
+  }
+
+}

src/version.txt

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