Renamed to bbtreeview

Added checkboxes

bbtreeview.css

@@ -51,10 +51,10 @@ ul.bbtreeview div.li > div.folder {
 }
 
 ul.bbtreeview li > div.li > div.checkbox {
-  background-image: url("folder.png");
+  background-image: url("uncheckbox.png");
 }
 ul.bbtreeview li.x > div.li > div.checkbox {
-  background-image: url("folder.png");
+  background-image: url("checkbox.png");
 }
 
 ul.bbtreeview div.li > span {

bbtreeview.js

@@ -61,6 +61,32 @@ BBTreeview.prototype.AddItem = function(options) {
     a.Toggle(myNode);
   });
 
+  // Setup checkbox events
+  if (a.Options.ShowCheckbox) {
+    node.Checkbox.addEventListener("mousedown", function(e){
+      e.stopPropagation();
+      e.preventDefault();
+
+      node.Checked = !node.Checked;
+
+      a.CheckNode(node, node.Checked);
+    });
+
+    node.Checkbox.addEventListener("click", function(e){
+      e.stopPropagation();
+      e.preventDefault();
+
+      // do nothing
+    });
+
+    node.Checkbox.addEventListener("dblclick", function(e){
+      e.stopPropagation();
+      e.preventDefault();
+
+      // do nothing
+    });
+  }
+
   // node.Label.addEventListener("click", function(e){
   //   e.stopPropagation();
   //   e.preventDefault();
@@ -147,6 +173,7 @@ BBTreeview.prototype.Default = function() {
       ParentID: null,
       Name: "",
       Hint: "",
+      Value: "hello",
       Icon: "folder",
       Checked: false
     }
@@ -154,13 +181,41 @@ BBTreeview.prototype.Default = function() {
 };
 
 
+BBTreeview.prototype.CheckNode = function(node, value) {
+  const a = this;
+
+  a.setNodeCheckbox(node.Node, value);
+
+  // Update children
+  node.Node.querySelectorAll("li").forEach(function(e) {
+    a.setNodeCheckbox(e, value);
+  });
+
+  // Invalidate ParentNode
+  node.ParentNode = a.GetParentNode(node.Node);
+
+  // Update parent state
+  if (node.ParentNode != null) {
+    let uncheckedCount = 0;
+    node.ParentNode.querySelectorAll("li").forEach(function(e) {
+      if (e.classList.contains("x")) {
+        return;
+      }
+
+      uncheckedCount++;
+    });
+
+    a.setNodeCheckbox(node.ParentNode, (uncheckedCount <= 0));
+  }
+};
+
 BBTreeview.prototype.CollapseNode = function(node) {
   const a = this;
 
   node.Node.classList.remove("e");
   node.Node.classList.add("c");
 
-  node.Items.forEach(function(e) {
+  a.GetChildNodes(node.Node).forEach(function(e) {
     e.classList.add("hidden");
   });
 };
@@ -171,7 +226,7 @@ BBTreeview.prototype.ExpandNode = function(node) {
   node.Node.classList.remove("c");
   node.Node.classList.add("e");
 
-  node.Items.forEach(function(e) {
+  a.GetChildNodes(node.Node).forEach(function(e) {
     e.classList.remove("hidden");
   });
 };
@@ -188,17 +243,55 @@ BBTreeview.prototype.Find = function(id) {
   let response = {
     ID: id,
     Node: node[0],
-    ParentNode: a.getParentNode(node[0]),
+    ParentNode: a.GetParentNode(node[0]),
     ChildNode: a.getChildNode(node[0]),
     Container: node[0].querySelectorAll("div.li")[0],
     Label: node[0].querySelectorAll("span")[0],
-    Items: a.getChildren(node[0])
+    Checked: node[0].classList.contains("x"),
+    Checkbox: (a.Options.ShowCheckbox ? node[0].querySelectorAll("div.icon.checkbox")[0] : null),
+    Value: node[0].getAttribute("data-bbtv-value")
   };
 
   // console.log(response);
 
   return response;
 };
+
+BBTreeview.prototype.GetChildNodes = function(node) {
+  const a = this;
+
+  const childNode = a.getChildNode(node);
+  if (childNode == null) {
+    return [];
+  }
+
+  let nodes = childNode.querySelectorAll("li");
+  if (nodes.length <= 0) {
+    return [];
+  }
+
+  let result = [];
+  nodes.forEach(function(e) {
+    if (typeof(e.parentNode) == "undefined") {
+      return;
+    }
+
+    if (e.parentNode != childNode) {
+      return;
+    }
+
+    result.push(e);
+  });
+
+  return result;
+};
+
+BBTreeview.prototype.GetParentNode = function(node) {
+  const a = this;
+
+  return a.parentsUntilTagName(node, "li");
+};
+
 BBTreeview.prototype.Toggle = function(node) {
   const a = this;
 
@@ -251,7 +344,7 @@ BBTreeview.prototype.generateID = function() {
 BBTreeview.prototype.generateNodeHtml = function(options) {
   const a = this;
 
-  let html = '<li data-bbtv-id="' + options.ID + '">';
+  let html = '<li data-bbtv-id="' + options.ID + '" data-bbtv-value="' + options.Value + '">';
   html += '<div class="li">'
 
   if (a.Options.ShowCheckbox) {
@@ -278,35 +371,6 @@ BBTreeview.prototype.getChildNode = function(node) {
   return result[0];
 };
 
-BBTreeview.prototype.getChildren = function(node) {
-  const a = this;
-
-  const childNode = a.getChildNode(node);
-  if (childNode == null) {
-    return [];
-  }
-
-  let nodes = childNode.querySelectorAll("li");
-  if (nodes.length <= 0) {
-    return [];
-  }
-
-  let result = [];
-  nodes.forEach(function(e) {
-    if (typeof(e.parentNode) == "undefined") {
-      return;
-    }
-
-    if (e.parentNode != childNode) {
-      return;
-    }
-
-    result.push(e);
-  });
-
-  return result;
-};
-
 BBTreeview.prototype.getNode = function(el) {
   const a = this;
 
@@ -337,12 +401,6 @@ BBTreeview.prototype.getOptions = function(options) {
   return _options;
 };
 
-BBTreeview.prototype.getParentNode = function(node) {
-  const a = this;
-
-  return a.parentsUntilTagName(node, "li");
-};
-
 BBTreeview.prototype.isNullOrWhitespace = function(value) {
   if (typeof (value) == "undefined") {
     return true;
@@ -383,4 +441,18 @@ BBTreeview.prototype.parentsUntilTagName = function(el, tagName) {
   }
 
   return node;
+};
+
+BBTreeview.prototype.setNodeCheckbox = function(el, value) {
+  const a = this;
+
+  if (value) {
+    if (!el.classList.contains("x")) {
+      el.classList.add("x");
+    }
+  } else {
+    if (el.classList.contains("x")) {
+      el.classList.remove("x");
+    }
+  }
 };

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>