/** * BBTreeview * @version v0.1.0.223 (2023/09/08 2027) */ function BBTreeview(options) { const a = this; a.initialise(options); }; BBTreeview.prototype.AddItem = function(options) { const a = this; const _options = a.getOptions(options); // Don't add duplicate if (a.Find(_options.ID) != null) { return false; } // Check parent exists let parentNode = null; if (_options.ParentID != null) { parentNode = a.Find(_options.ParentID); if (parentNode == null) { return false; } } if (parentNode == null) { parentNode = a.Container; } else { parentNode = parentNode.GetChildNode(); } const nodeHtml = a.generateNodeHtml(_options); // Add node a.appendHtml(parentNode, nodeHtml); const node = a.Find(_options.ID); // Events node.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.getNode(e.target); if (myNode == null) { return; } a.Toggle(myNode); }); // Setup checkbox events if (a.Options.ShowCheckbox) { node.GetCheckbox().addEventListener("mousedown", function(e){ e.stopPropagation(); e.preventDefault(); // node.Checked = !node.Checked; // a.CheckNode(node, node.Checked); node.Check(!node.IsChecked()); }); node.GetCheckbox().addEventListener("click", function(e){ e.stopPropagation(); e.preventDefault(); // do nothing }); node.GetCheckbox().addEventListener("dblclick", function(e){ e.stopPropagation(); e.preventDefault(); // do nothing }); } // node.Label.addEventListener("click", function(e){ // e.stopPropagation(); // e.preventDefault(); // }); // Highlighting node.Container.addEventListener("mousedown", function(e){ e.stopPropagation(); e.preventDefault(); const myNode = a.getNode(e.target); if (myNode == null) { return; } a.Container.querySelectorAll("div.highlighted").forEach(function(e) { e.classList.remove("highlighted"); }); // Don't show selection if (!a.Options.ShowSelection) { return; } myNode.Container.classList.add("highlighted"); }); // Toggle node.Container.addEventListener("dblclick", function(e){ e.stopPropagation(); e.preventDefault(); const myNode = a.getNode(e.target); if (myNode == null) { return; } a.Toggle(myNode); }); // Invalidate state if (node.GetParentNode() != null) { if (node.GetParentNode().classList.contains("c")) { node.Node.classList.add("hidden"); } else if (node.GetParentNode().classList.contains("e")) { node.Node.classList.remove("hidden"); } else { node.GetParentNode().classList.add("e"); node.Node.classList.remove("hidden"); } } return true; }; BBTreeview.prototype.Remove = function(id) { const a = this; const node = a.Find(id); if (node == null) { return false; } node.Remove(); // node.Node.parentNode.removeChild(node.Node); // if (node.GetParentNode() != null) { // if (node.GetParentNode().classList.contains("e")) { // node.GetParentNode().classList.remove("e"); // } // if (node.GetParentNode().classList.contains("c")) { // node.GetParentNode().classList.remove("c"); // } // } return true; }; BBTreeview.prototype.Default = function() { return { TreeviewOptions: { ID: null, ShowCheckbox: false, ShowSelection: true }, TreeNodeOptions: { ID: null, ParentID: null, Name: "", Hint: "", Value: "hello", Icon: "folder", Checked: false } }; }; // 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.GetParentNode() != null) { // let uncheckedCount = 0; // node.GetParentNode().querySelectorAll("li").forEach(function(e) { // if (e.classList.contains("x")) { // return; // } // uncheckedCount++; // }); // a.setNodeCheckbox(node.GetParentNode(), (uncheckedCount <= 0)); // } // }; BBTreeview.prototype.Clear = function() { const a = this; a.initialise(a.Options); }; // BBTreeview.prototype.CollapseNode = function(node) { // const a = this; // node.Node.classList.remove("e"); // node.Node.classList.add("c"); // a.GetChildNodes(node.Node).forEach(function(e) { // e.classList.add("hidden"); // }); // }; // BBTreeview.prototype.ExpandNode = function(node) { // const a = this; // node.Node.classList.remove("c"); // node.Node.classList.add("e"); // a.GetChildNodes(node.Node).forEach(function(e) { // e.classList.remove("hidden"); // }); // }; BBTreeview.prototype.Find = function(id) { const a = this; const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']"); if (node.length <= 0) { return null; } let treenode = new BBTreeviewNode(this); treenode.Load(node[0]); console.log(treenode); return treenode; // let response = { // ID: id, // Node: 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], // 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; if (node.Node.classList.contains("c")) { // a.ExpandNode(node); node.Expand(); } else if (node.Node.classList.contains("e")) { // a.CollapseNode(node); node.Collapse(); } else { // do nothing } }; 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]; a.Container.innerHTML = ""; 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() { return "treeviewItem" + (Math.floor(Math.random() * 1000001) + 100).toString(); }; BBTreeview.prototype.generateNodeHtml = function(options) { const a = this; let html = '
  • '; html += '
    ' if (a.Options.ShowCheckbox) { html += '
    '; } html += '
    '; html += '' + options.Name + ''; html += '
    '; html += ''; html += '
  • '; 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; 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); }; BBTreeview.prototype.getOptions = function(options) { const a = this; let _options = Object.assign(a.Default().TreeNodeOptions, options); if (_options.ID == null) { _options.ID = a.generateID(); } return _options; }; BBTreeview.prototype.isNullOrWhitespace = function(value) { if (typeof (value) == "undefined") { return true; } if (value == null) { return true; } return (value.trim().length <= 0); }; BBTreeview.prototype.isTag = function(el, tagName) { return (el.tagName.toLowerCase() == tagName); }; BBTreeview.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; }; // 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"); } } };