class BBTreeview { constructor(options) { this.Options = {}; this.initialiseComponents(options); } initialiseComponents(options) { var a = this; a.Options = Object.assign({ ID: null, ShowCheckbox: false, ShowSelection: true, EnablePullUp: false, ShowIcon: true }, options); // Replace treeview a.createTreeview(); // a.Container = a.getTreeview(); } get Container() { return this.getTreeview(); } AddItem(options) { const a = this; const _options = Object.assign({ ID: null, ParentID: null, Name: "", Hint: "", Value: "", Icon: "folder", Checked: false, Tag: null }, options); if (_options.ID == null) _options.ID = a.generateID(); if (_options.Tag == null) _options.Tag = ""; // 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); // Setup events node.InvalidateEvents(); return true; } Remove(id) { const a = this; const node = a.Find(id); if (node == null) { return false; } node.Remove(); return true; } Clear() { const a = this; a.initialiseComponents(a.Options); } CollapseAll() { const a = this; a.GetAllNodes().forEach(function(e) { e.Collapse(); }); } ExpandAll() { const a = this; a.GetAllNodes().forEach(function(e) { e.Expand(); }); } CheckAll(value) { const a = this; if (!a.Options.ShowCheckbox) { return; } a.GetAllNodes().forEach(function(e) { e.Check(value); }); } Find(id) { const a = this; if (a.Container == null){ console.log("BBTreeview container not found"); return; } const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']"); if (node.length <= 0) { return null; } const treenode = new BBTreeviewNode(this, node[0]); return treenode; } FindByName(value) { const a = this; let response = []; a.GetAllNodes().forEach(function(e) { if (e.Name != value) { return; } response.push(e); }); return response; } FindByValue(value) { const a = this; let response = []; a.GetAllNodes().forEach(function(e) { if (e.Value != value) { return; } response.push(e); }); return response; } GetAllNodes() { const a = this; const node = a.Container.querySelectorAll("li"); if (node.length <= 0) { return []; } let response = []; node.forEach(function(e) { const id = e.getAttribute("data-bbtv-id"); if (a.isNullOrWhitespace(id)) { return; } const myNode = a.Find(id); if (myNode == null) { return; } response.push(myNode); }); return response; } GetCheckedNodes() { const a = this; let response = []; a.GetAllNodes().forEach(function(e) { if (!e.IsChecked) { return; } response.push(e); }); return response; } GetCheckedValues() { const a = this; let response = []; a.GetCheckedNodes().map(function(e) { response.push(e.Value); }); return response; } GetCheckedTags() { const a = this; let response = []; a.GetCheckedNodes().map(function(e) { response.push(e.Tag); }); return response; } GetSelectedNode() { const a = this; let response = null; a.GetAllNodes().forEach(function(e) { if (e.IsHighlighted) { response = e; return false; } }); return response; } appendHtml(el, html) { let node = document.createElement('template'); node.innerHTML = html; node = node.content.firstChild; el.appendChild(node); } createTreeview() { const a = this; let container = a.getContainer(); if (container != null) { container.innerHTML = ""; } } generateID() { return "treeviewItem" + (Math.floor(Math.random() * 1000001) + 100).toString(); } generateNodeHtml(options) { const a = this; let tag = ""; if (!a.isNullOrWhitespace(options.Tag)) { tag = encodeURIComponent(JSON.stringify(options.Tag)); } let html = '
  • '; html += '
    ' if (a.Options.ShowCheckbox) { html += '
    '; } if (a.Options.ShowIcon) { html += '
    '; html += '' + options.Name + ''; } else { html += '' + options.Name + ''; } html += '
    '; html += ''; html += '
  • '; return html; } getContainer() { const a = this; let result = document.getElementsByTagName("body"); if (result.length <= 0) { return; } result = result[0]; result = result.querySelectorAll(a.Options.ID); if (result.length <= 0) { return; } result = result[0]; return result; } getNode(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); } getTreeview() { const a = this; let container = a.getContainer(); if (container == null) { return; } // if (container.querySelectorAll("ul.bbtreeview").length <= 0) { // container.innerHTML = ""; // } container = container.querySelectorAll("ul.bbtreeview"); if (container.length <= 0) { return; } container = container[0]; return container; } isNullOrWhitespace(value) { if (typeof (value) == "undefined") { return true; } if (value == null) { return true; } return (value.toString().trim().length <= 0); } isTag(el, tagName) { return (el.tagName.toLowerCase() == tagName); } parentsUntilTagName(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; } }