diff --git a/bbtreeview.css b/bbtreeview.css index 7cd4bd9..c6733c7 100644 --- a/bbtreeview.css +++ b/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 { diff --git a/bbtreeview.js b/bbtreeview.js index 686759e..1f90b00 100644 --- a/bbtreeview.js +++ b/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 = '
  • '; + let html = '
  • '; html += '
    ' 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"); + } + } }; \ No newline at end of file diff --git a/checkbox.png b/checkbox.png new file mode 100644 index 0000000..d561510 Binary files /dev/null and b/checkbox.png differ diff --git a/src/UCkji.png b/src/UCkji.png new file mode 100644 index 0000000..5853d67 Binary files /dev/null and b/src/UCkji.png differ diff --git a/src/checkbox.svg b/src/checkbox.svg new file mode 100644 index 0000000..6ad9b6b --- /dev/null +++ b/src/checkbox.svg @@ -0,0 +1,64 @@ + + + + + + + diff --git a/src/treeview-check-boxes12231.png b/src/treeview-check-boxes12231.png new file mode 100644 index 0000000..6809043 Binary files /dev/null and b/src/treeview-check-boxes12231.png differ diff --git a/uncheckbox.png b/uncheckbox.png new file mode 100644 index 0000000..8b6fd10 Binary files /dev/null and b/uncheckbox.png differ