/** * 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.ChildNode; } 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); }); // 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"); }); 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.ParentNode != null) { if (node.ParentNode.classList.contains("c")) { node.Node.classList.add("hidden"); } else if (node.ParentNode.classList.contains("e")) { node.Node.classList.remove("hidden"); } else { node.ParentNode.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.Node.parentNode.removeChild(node.Node); if (node.ParentNode != null) { if (node.ParentNode.classList.contains("e")) { node.ParentNode.classList.remove("e"); } if (node.ParentNode.classList.contains("c")) { node.ParentNode.classList.remove("c"); } } return true; }; BBTreeview.prototype.Default = function() { return { TreeviewOptions: { ID: null, ShowCheckbox: false }, TreeNodeOptions: { ID: null, ParentID: null, Name: "", Hint: "", Icon: "folder", Checked: false } }; }; BBTreeview.prototype.CollapseNode = function(node) { const a = this; node.Node.classList.remove("e"); node.Node.classList.add("c"); node.Items.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"); node.Items.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 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], Items: a.getChildren(node[0]) }; // console.log(response); return response; }; BBTreeview.prototype.Toggle = function(node) { const a = this; if (node.Node.classList.contains("c")) { a.ExpandNode(node); } else if (node.Node.classList.contains("e")) { a.CollapseNode(node); } 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 = "