'
if (a.Options.ShowCheckbox) {
@@ -384,17 +286,6 @@ BBTreeview.prototype.generateNodeHtml = function(options) {
return html;
};
-// BBTreeview.prototype.getChildNode = function(node) {
-// const a = this;
-
-// let result = node.querySelectorAll("ul");
-// if (result.length <= 0) {
-// return null;
-// }
-
-// return result[0];
-// };
-
BBTreeview.prototype.getNode = function(el) {
const a = this;
@@ -418,10 +309,15 @@ BBTreeview.prototype.getOptions = function(options) {
const a = this;
let _options = Object.assign(a.Default().TreeNodeOptions, options);
+
if (_options.ID == null) {
_options.ID = a.generateID();
}
+ if (_options.Tag == null) {
+ _options.Tag = "";
+ }
+
return _options;
};
@@ -434,7 +330,7 @@ BBTreeview.prototype.isNullOrWhitespace = function(value) {
return true;
}
- return (value.trim().length <= 0);
+ return (value.toString().trim().length <= 0);
};
BBTreeview.prototype.isTag = function(el, tagName) {
@@ -447,6 +343,10 @@ BBTreeview.prototype.parentsUntilTagName = function(el, tagName) {
let node = el;
while (true) {
+ if (typeof(node.parentNode) == "undefined") {
+ break;
+ }
+
node = node.parentNode;
if (typeof(node) == "undefined") {
@@ -466,236 +366,3 @@ 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");
-// }
-// }
-// };
-
-
-
-
-
-
-function BBTreeviewNode(treeview)
-{
- const a = this;
-
- a.Treeview = treeview;
-
- a.initialise();
-};
-
-BBTreeviewNode.prototype.Load = function(node) {
- const a = this;
-
- a.ID = node.getAttribute("data-bbtv-id");
- a.Node = node;
-
- // a.ParentNode: a.GetParentNode(node[0]);
- // a.ChildNode: a.getChildNode(node[0]);
-
- a.Container = node.querySelectorAll("div.li")[0];
- a.Label = node.querySelectorAll("span")[0];
- // a.Checked = a.IsChecked();
- // a.Checkbox = a.GetCheckbox();
- a.Value = node.getAttribute("data-bbtv-value");
-};
-
-
-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++;
- });
-
- a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0));
- }
-};
-
-BBTreeviewNode.prototype.Collapse = function() {
- const a = this;
-
- 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;
-
- 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) {
- return null;
- }
-
- const checkboxes = a.Node.querySelectorAll("div.icon.checkbox");
- if (typeof(checkboxes) == "undefined") {
- return null;
- }
-
- return checkboxes[0];
-};
-
-BBTreeviewNode.prototype.GetChildNode = function() {
- const a = this;
-
- let result = a.Node.querySelectorAll("ul");
- if (result.length <= 0) {
- return null;
- }
-
- return result[0];
-};
-
-BBTreeviewNode.prototype.GetChildNodes = function() {
- const a = this;
-
- const childNode = a.GetChildNode();
- 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;
-};
-
-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) {
- return false;
- }
-
- return a.Node.classList.contains("x");
-};
-
-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")) {
- a.GetParentNode().classList.remove("c");
- }
- }
-
- a.Node.parentNode.removeChild(a.Node);
-};
-
-BBTreeviewNode.prototype.initialise = function() {
- const a = this;
-
- a.ID = null;
- a.ParentID = null;
- a.Name = "";
- a.Hint = "";
- a.Value = "";
- a.Icon = "folder";
- a.Checked = false;
-};
-
-BBTreeviewNode.prototype.isTag = function(el, tagName) {
- return (el.tagName.toLowerCase() == tagName);
-};
-
-BBTreeviewNode.prototype.parentsUntilTagName = function(el, tagName) {
- const a = this;
-
- let node = el;
-
- while (true) {
- node = node.parentNode;
-
- if (typeof(node) == "undefined") {
- break;
- }
-
- if (a.isTag(node, "ul")) {
- if (node.classList.contains("bbtreeview")) {
- return null;
- }
- }
-
- if (a.isTag(node, tagName)) {
- break;
- }
- }
-
- return node;
-};
-
-BBTreeviewNode.prototype.setCheckbox = function(el, value) {
- if (value) {
- if (!el.classList.contains("x")) {
- el.classList.add("x");
- }
- } else {
- if (el.classList.contains("x")) {
- el.classList.remove("x");
- }
- }
-};
diff --git a/bbtreeviewnode.js b/bbtreeviewnode.js
index 5e41c02..46fcf68 100644
--- a/bbtreeviewnode.js
+++ b/bbtreeviewnode.js
@@ -2,3 +2,387 @@
* BBTreeview
* @version v0.1.0.223 (2023/09/08 2027)
*/
+function BBTreeviewNode(treeview)
+{
+ const a = this;
+
+ a.Treeview = treeview;
+
+ 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++;
+ });
+
+ a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0));
+ }
+};
+
+BBTreeviewNode.prototype.Collapse = function() {
+ const a = this;
+
+ if (a.Node.classList.contains("e")) {
+ 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) {
+ return null;
+ }
+
+ const checkboxes = a.Node.querySelectorAll("div.icon.checkbox");
+ if (typeof(checkboxes) == "undefined") {
+ return null;
+ }
+
+ return checkboxes[0];
+};
+
+BBTreeviewNode.prototype.GetChildNode = function() {
+ const a = this;
+
+ let result = a.Node.querySelectorAll("ul");
+ if (result.length <= 0) {
+ return null;
+ }
+
+ return result[0];
+};
+
+BBTreeviewNode.prototype.GetChildNodes = function() {
+ const a = this;
+
+ const childNode = a.GetChildNode();
+ 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;
+};
+
+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));
+};
+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) {
+ return false;
+ }
+
+ return a.Node.classList.contains("x");
+};
+
+BBTreeviewNode.prototype.IsExpanded = function() {
+ const a = this;
+
+ if (a.Node.classList.contains("e")) {
+ return true;
+ }
+
+ if (a.Node.classList.contains("c")) {
+ return false;
+ }
+
+ 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")) {
+ a.GetParentNode().classList.remove("c");
+ }
+ }
+
+ a.Node.parentNode.removeChild(a.Node);
+};
+
+BBTreeviewNode.prototype.SetupEvents = function() {
+ const a = this;
+
+ // collapsible icon behaviour
+ a.Node.addEventListener("click", function(e){
+ e.stopPropagation();
+ e.preventDefault();
+
+ if (!a.isTag(e.target, "li")) {
+ return;
+ }
+
+ if ((e.offsetX < 0) || (e.offsetX > 16) || (e.offsetY < 0) || (e.offsetY > 16)) {
+ return;
+ }
+
+ const myNode = a.Treeview.getNode(e.target);
+ if (myNode == null) {
+ return;
+ }
+
+ 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.GetCheckbox().addEventListener("mousedown", function(e){
+ e.stopPropagation();
+ e.preventDefault();
+
+ a.Check(!a.IsChecked());
+ });
+
+ a.GetCheckbox().addEventListener("click", function(e){
+ e.stopPropagation();
+ e.preventDefault();
+
+ // do nothing
+ });
+
+ a.GetCheckbox().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.getNode(e.target);
+ if (myNode == null) {
+ return;
+ }
+
+ a.Treeview.Container.querySelectorAll("div.highlighted").forEach(function(e) {
+ e.classList.remove("highlighted");
+ });
+
+ // Don't show selection
+ if (!a.Treeview.Options.ShowSelection) {
+ return;
+ }
+
+ myNode.Container.classList.add("highlighted");
+ });
+
+ a.invalidateCollapsible();
+};
+
+BBTreeviewNode.prototype.Toggle = function() {
+ const a = this;
+
+ switch (a.IsExpanded()) {
+ case true:
+ a.Collapse();
+ break;
+ case false:
+ a.Expand();
+ break;
+ default: break;
+ }
+};
+
+BBTreeviewNode.prototype.initialise = function() {
+ const a = this;
+
+// a.ID = null;
+// 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) {
+ return;
+ }
+
+ if (a.GetParentNode().classList.contains("c")) {
+ a.Node.classList.add("hidden");
+ } else if (a.GetParentNode().classList.contains("e")) {
+ a.Node.classList.remove("hidden");
+ } else {
+ a.GetParentNode().classList.add("e");
+ a.Node.classList.remove("hidden");
+ }
+};
+
+BBTreeviewNode.prototype.isTag = function(el, tagName) {
+ return (el.tagName.toLowerCase() == tagName);
+};
+
+BBTreeviewNode.prototype.parentsUntilTagName = function(el, tagName) {
+ const a = this;
+
+ let node = el;
+
+ while (true) {
+ if (typeof(node.parentNode) == "undefined") {
+ break;
+ }
+
+ node = node.parentNode;
+
+ if (typeof(node) == "undefined") {
+ break;
+ }
+
+ if (a.isTag(node, "ul")) {
+ if (node.classList.contains("bbtreeview")) {
+ return null;
+ }
+ }
+
+ if (a.isTag(node, tagName)) {
+ break;
+ }
+ }
+
+ return node;
+};
+
+BBTreeviewNode.prototype.setCheckbox = function(el, value) {
+ 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/demo-test.html b/demo-test.html
index 84b0ec9..a600979 100644
--- a/demo-test.html
+++ b/demo-test.html
@@ -28,7 +28,7 @@
-
Create demo treeview with checkboxes
+
Create demo treeview with checkboxes and selection enabled
@@ -44,6 +44,42 @@
+
+
+
Find a treenode
+
+
+
+
+
+
+
+
+
+
Get treenodes
+
+
+
+
+
+
+
+
+
+
+
+
+
Various
+
+
+
+
+
+
+
+
+
+