From 43edb319d4139813256780d7be0f0d9de7fcf325 Mon Sep 17 00:00:00 2001 From: Ray Date: Mon, 8 Jan 2024 21:41:43 +0000 Subject: [PATCH 1/6] Changed to using class --- bbtreeview.js | 392 ---------------- bbtreeview.min.js | 7 - bbtreeviewnode.js | 408 ----------------- build.bat | 17 + .../bbtreeview.min.css | 0 build/bbtreeview.min.js | 7 + bbtreeview.css => src/bbtreeview.css | 0 src/bbtreeview.js | 397 +++++++++++++++++ src/bbtreeviewnode.js | 418 ++++++++++++++++++ src/version.txt | 4 + 10 files changed, 843 insertions(+), 807 deletions(-) delete mode 100644 bbtreeview.js delete mode 100644 bbtreeview.min.js delete mode 100644 bbtreeviewnode.js create mode 100644 build.bat rename bbtreeview.min.css => build/bbtreeview.min.css (100%) create mode 100644 build/bbtreeview.min.js rename bbtreeview.css => src/bbtreeview.css (100%) create mode 100644 src/bbtreeview.js create mode 100644 src/bbtreeviewnode.js create mode 100644 src/version.txt diff --git a/bbtreeview.js b/bbtreeview.js deleted file mode 100644 index fa5bb92..0000000 --- a/bbtreeview.js +++ /dev/null @@ -1,392 +0,0 @@ -/** - * BBTreeview - * @version v0.1.1.006 (2023/09/27 2218) - */ -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); - - // Setup events - node.SetupEvents(); - - return true; -}; - -BBTreeview.prototype.Remove = function(id) { - const a = this; - - const node = a.Find(id); - if (node == null) { - return false; - } - - node.Remove(); - - return true; -}; - -BBTreeview.prototype.Default = function() { - return { - TreeviewOptions: { - ID: null, - ShowCheckbox: false, - ShowSelection: true, - EnablePullUp: false, - ShowIcon: true - }, - TreeNodeOptions: { - ID: null, - ParentID: null, - Name: "", - Hint: "", - Value: "", - Icon: "folder", - Checked: false, - Tag: null - } - }; -}; - -BBTreeview.prototype.Clear = function() { - const a = this; - - a.initialise(a.Options); -}; - -BBTreeview.prototype.CollapseAll = function() { - const a = this; - - a.GetAllNodes().forEach(function(e) { - e.Collapse(); - }); -}; - -BBTreeview.prototype.ExpandAll = function() { - const a = this; - - a.GetAllNodes().forEach(function(e) { - e.Expand(); - }); -}; - -BBTreeview.prototype.CheckAll = function(value) { - const a = this; - - if (!a.Options.ShowCheckbox) { - return; - } - - a.GetAllNodes().forEach(function(e) { - e.Check(value); - }); -}; - -BBTreeview.prototype.Find = function(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; - } - - let treenode = new BBTreeviewNode(this); - treenode.Load(node[0]); - - // console.log(treenode); - - return treenode; -}; - -BBTreeview.prototype.FindByName = function(value) { - const a = this; - - let response = []; - a.GetAllNodes().forEach(function(e) { - if (e.Name != value) { - return; - } - - response.push(e); - }); - - return response; -}; - -BBTreeview.prototype.FindByValue = function(value) { - const a = this; - - let response = []; - a.GetAllNodes().forEach(function(e) { - if (e.Value != value) { - return; - } - - response.push(e); - }); - - return response; -}; - -BBTreeview.prototype.GetAllNodes = function() { - 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; -}; - -BBTreeview.prototype.GetCheckedNodes = function() { - const a = this; - - let response = []; - a.GetAllNodes().forEach(function(e) { - if (!e.Checked) { - return; - } - - response.push(e); - }); - - return response; -}; - -BBTreeview.prototype.GetCheckedValues = function() { - const a = this; - - let response = []; - a.GetCheckedNodes().map(function(e) { - response.push(e.Value); - }); - - return response; -}; - - -BBTreeview.prototype.GetCheckedTags = function() { - const a = this; - - let response = []; - a.GetCheckedNodes().map(function(e) { - response.push(e.Tag); - }); - - return response; -}; - -BBTreeview.prototype.GetSelectedNode = function() { - const a = this; - - let response = null; - a.GetAllNodes().forEach(function(e) { - if (e.Highlighted) { - response = e; - - return false; - } - }); - - return response; -}; - -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 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; -}; - -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(); - } - - if (_options.Tag == null) { - _options.Tag = ""; - } - - return _options; -}; - -BBTreeview.prototype.isNullOrWhitespace = function(value) { - if (typeof (value) == "undefined") { - return true; - } - - if (value == null) { - return true; - } - - return (value.toString().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) { - 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; -}; diff --git a/bbtreeview.min.js b/bbtreeview.min.js deleted file mode 100644 index 2731a75..0000000 --- a/bbtreeview.min.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * BBTreeview - * @version v0.1.1.006 (2023/09/27 2218) - */ -function BBTreeview(options){const a=undefined;this.initialise(options)}BBTreeview.prototype.AddItem=function(options){const a=this,_options=a.getOptions(options);if(null!=a.Find(_options.ID))return!1;let parentNode=null;if(null!=_options.ParentID&&(parentNode=a.Find(_options.ParentID),null==parentNode))return!1;parentNode=null==parentNode?a.Container:parentNode.GetChildNode();const nodeHtml=a.generateNodeHtml(_options);a.appendHtml(parentNode,nodeHtml);const node=undefined;return a.Find(_options.ID).SetupEvents(),!0},BBTreeview.prototype.Remove=function(id){const a=undefined,node=this.Find(id);return null!=node&&(node.Remove(),!0)},BBTreeview.prototype.Default=function(){return{TreeviewOptions:{ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1,ShowIcon:!0},TreeNodeOptions:{ID:null,ParentID:null,Name:"",Hint:"",Value:"",Icon:"folder",Checked:!1,Tag:null}}},BBTreeview.prototype.Clear=function(){const a=this;a.initialise(a.Options)},BBTreeview.prototype.CollapseAll=function(){const a=undefined;this.GetAllNodes().forEach((function(e){e.Collapse()}))},BBTreeview.prototype.ExpandAll=function(){const a=undefined;this.GetAllNodes().forEach((function(e){e.Expand()}))},BBTreeview.prototype.CheckAll=function(value){const a=this;a.Options.ShowCheckbox&&a.GetAllNodes().forEach((function(e){e.Check(value)}))},BBTreeview.prototype.Find=function(id){const a=this;if(null==a.Container)return void console.log("BBTreeview container not found");const node=a.Container.querySelectorAll("li[data-bbtv-id='"+id+"']");if(node.length<=0)return null;let treenode=new BBTreeviewNode(this);return treenode.Load(node[0]),treenode},BBTreeview.prototype.FindByName=function(value){const a=undefined;let response=[];return this.GetAllNodes().forEach((function(e){e.Name==value&&response.push(e)})),response},BBTreeview.prototype.FindByValue=function(value){const a=undefined;let response=[];return this.GetAllNodes().forEach((function(e){e.Value==value&&response.push(e)})),response},BBTreeview.prototype.GetAllNodes=function(){const a=this,node=a.Container.querySelectorAll("li");if(node.length<=0)return[];let response=[];return node.forEach((function(e){const id=e.getAttribute("data-bbtv-id");if(a.isNullOrWhitespace(id))return;const myNode=a.Find(id);null!=myNode&&response.push(myNode)})),response},BBTreeview.prototype.GetCheckedNodes=function(){const a=undefined;let response=[];return this.GetAllNodes().forEach((function(e){e.Checked&&response.push(e)})),response},BBTreeview.prototype.GetCheckedValues=function(){const a=undefined;let response=[];return this.GetCheckedNodes().map((function(e){response.push(e.Value)})),response},BBTreeview.prototype.GetCheckedTags=function(){const a=undefined;let response=[];return this.GetCheckedNodes().map((function(e){response.push(e.Tag)})),response},BBTreeview.prototype.GetSelectedNode=function(){const a=undefined;let response=null;return this.GetAllNodes().forEach((function(e){if(e.Highlighted)return response=e,!1})),response},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);treeview.length<=0||null!=treeview[0]&&(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(1000001*Math.random())+100).toString()},BBTreeview.prototype.generateNodeHtml=function(options){const a=this;let tag="";a.isNullOrWhitespace(options.Tag)||(tag=encodeURIComponent(JSON.stringify(options.Tag)));let html='
  • ';return html+='
    ',a.Options.ShowCheckbox&&(html+='
    '),a.Options.ShowIcon?(html+='
    ',html+=''+options.Name+""):html+=''+options.Name+"",html+="
    ",html+="",html+="
    • ",html},BBTreeview.prototype.getNode=function(el){const a=this;let node=null;node=a.isTag(el,"li")?el:a.parentsUntilTagName(el,"li");const id=node.getAttribute("data-bbtv-id");return a.isNullOrWhitespace(id)?null:a.Find(id)},BBTreeview.prototype.getOptions=function(options){const a=this;let _options=Object.assign(a.Default().TreeNodeOptions,options);return null==_options.ID&&(_options.ID=a.generateID()),null==_options.Tag&&(_options.Tag=""),_options},BBTreeview.prototype.isNullOrWhitespace=function(value){return void 0===value||(null==value||value.toString().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;for(;void 0!==node.parentNode&&(node=node.parentNode,void 0!==node);){if(a.isTag(node,"ul")&&node.classList.contains("bbtreeview"))return null;if(a.isTag(node,tagName))break}return node}; - -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),a.Node.querySelectorAll("li").forEach((function(e){a.setCheckbox(e,value)}));let parentNode=a.GetParentNode();if(null!=parentNode)if(a.Treeview.Options.EnablePullUp)for(;;){const parentChecked=parentNode.querySelectorAll("li.x").length>0;if(a.setCheckbox(parentNode,parentChecked),parentNode=a.Treeview.getNode(parentNode),parentNode=parentNode.GetParentNode(),null==parentNode)break}else{let uncheckedCount=0;parentNode.querySelectorAll("li").forEach((function(e){e.classList.contains("x")||uncheckedCount++})),a.setCheckbox(parentNode,uncheckedCount<=0)}},BBTreeviewNode.prototype.Collapse=function(){const a=this;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;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");return void 0===checkboxes?null:checkboxes[0]},BBTreeviewNode.prototype.GetChildNode=function(){const a=undefined;let result=this.Node.querySelectorAll("ul");return result.length<=0?null:result[0]},BBTreeviewNode.prototype.GetChildNodes=function(){const a=undefined,childNode=this.GetChildNode();if(null==childNode)return[];let nodes=childNode.querySelectorAll("li");if(nodes.length<=0)return[];let result=[];return nodes.forEach((function(e){void 0!==e.parentNode&&e.parentNode==childNode&&result.push(e)})),result},BBTreeviewNode.prototype.GetTag=function(){const a=this;let tag=a.Node.getAttribute("data-bbtv-tag");return a.Treeview.isNullOrWhitespace(tag)?null:JSON.parse(decodeURIComponent(tag))},BBTreeviewNode.prototype.GetParentID=function(){const a=undefined,parentNode=this.GetParentNode();return null==parentNode?null: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;return!!a.Treeview.Options.ShowCheckbox&&a.Node.classList.contains("x")},BBTreeviewNode.prototype.IsExpanded=function(){const a=this;return!!a.Node.classList.contains("e")||!a.Node.classList.contains("c")&&null},BBTreeviewNode.prototype.IsHighlighted=function(){const a=undefined;return this.Container.classList.contains("highlighted")},BBTreeviewNode.prototype.Remove=function(){const a=this;null!=a.GetParentNode()&&(a.GetParentNode().classList.contains("e")&&a.GetParentNode().classList.remove("e"),a.GetParentNode().classList.contains("c")&&a.GetParentNode().classList.remove("c")),a.Node.parentNode.removeChild(a.Node)},BBTreeviewNode.prototype.SetupEvents=function(){const a=this;a.Node.addEventListener("click",(function(e){if(e.stopPropagation(),e.preventDefault(),!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);null!=myNode&&myNode.Toggle()})),a.Container.addEventListener("dblclick",(function(e){e.stopPropagation(),e.preventDefault();const myNode=a.Treeview.getNode(e.target);null!=myNode&&myNode.Toggle()})),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()})),a.GetCheckbox().addEventListener("dblclick",(function(e){e.stopPropagation(),e.preventDefault()}))),a.Container.addEventListener("mousedown",(function(e){e.stopPropagation(),e.preventDefault();const myNode=a.Treeview.getNode(e.target);null!=myNode&&(a.Treeview.Container.querySelectorAll("div.highlighted").forEach((function(e){e.classList.remove("highlighted")})),a.Treeview.Options.ShowSelection&&myNode.Container.classList.add("highlighted"))})),a.invalidateCollapsible()},BBTreeviewNode.prototype.Toggle=function(){const a=this;switch(a.IsExpanded()){case!0:a.Collapse();break;case!1:a.Expand()}},BBTreeviewNode.prototype.initialise=function(){const a=this},BBTreeviewNode.prototype.invalidateCollapsible=function(){const a=this;null!=a.GetParentNode()&&(a.GetParentNode().classList.contains("c")?a.Node.classList.add("hidden"):(a.GetParentNode().classList.contains("e")||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;for(;void 0!==node.parentNode&&(node=node.parentNode,void 0!==node);){if(a.isTag(node,"ul")&&node.classList.contains("bbtreeview"))return null;if(a.isTag(node,tagName))break}return node},BBTreeviewNode.prototype.setCheckbox=function(el,value){value?el.classList.contains("x")||el.classList.add("x"):el.classList.contains("x")&&el.classList.remove("x")}; \ No newline at end of file diff --git a/bbtreeviewnode.js b/bbtreeviewnode.js deleted file mode 100644 index 62c1916..0000000 --- a/bbtreeviewnode.js +++ /dev/null @@ -1,408 +0,0 @@ -/** - * BBTreeview - * @version v0.1.0.244 (2023/09/11 2327) - */ -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 - let parentNode = a.GetParentNode(); - if (parentNode == null) { - return; - } - - // Handle pull-ups - if (a.Treeview.Options.EnablePullUp) { - while (true) { - const parentChecked = (parentNode.querySelectorAll("li.x").length > 0); - - a.setCheckbox(parentNode, parentChecked); - - parentNode = a.Treeview.getNode(parentNode); - parentNode = parentNode.GetParentNode(); - - if (parentNode == null) { - break; - } - } - } else { - let uncheckedCount = 0; - - parentNode.querySelectorAll("li").forEach(function(e) { - if (e.classList.contains("x")) { - return; - } - - uncheckedCount++; - }); - - a.setCheckbox(parentNode, (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/build.bat b/build.bat new file mode 100644 index 0000000..d19fa8a --- /dev/null +++ b/build.bat @@ -0,0 +1,17 @@ +del bbtreeview.min.js +del bbtreeview.min.tmp +del build/bbtreeview.min.js + +cd src + +type version.txt >> ../bbtreeview.min.js + +"C:\B\Portable Files (dev)\Google Closure Compiler\closure-compiler-v20231112.jar" --js *.js --js_output_file ../bbtreeview.min.tmp + +cd.. + +type bbtreeview.min.tmp >> bbtreeview.min.js + +move bbtreeview.min.js build/bbtreeview.min.js + +del bbtreeview.min.tmp \ No newline at end of file diff --git a/bbtreeview.min.css b/build/bbtreeview.min.css similarity index 100% rename from bbtreeview.min.css rename to build/bbtreeview.min.css diff --git a/build/bbtreeview.min.js b/build/bbtreeview.min.js new file mode 100644 index 0000000..1afd2a7 --- /dev/null +++ b/build/bbtreeview.min.js @@ -0,0 +1,7 @@ +/** + * BBTreeview + * @version v0.1.2.011 (2024/01/07 0208) + */ +class BBTreeview{constructor(e){this.initialiseComponents(e)}initialiseComponents(e){this.Options=Object.assign(this.DefaultOptions.Treeview,e)}get Container(){let e=document.getElementsByTagName("body");return e.length<=0?null:(e=e[0].querySelectorAll(this.Options.ID),e.length<=0||(e[0].innerHTML='',e[0].querySelectorAll("ul.bbtreeview"),e.length<=0)?void 0:e[0])}get DefaultOptions(){return{Treeview:{ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1,ShowIcon:!0},TreeNode:{ID:null,ParentID:null,Name:"",Hint:"",Value:"",Icon:"folder",Checked:!1,Tag:null}}}AddItem(e){const t=this,n=t.getOptions(e);if(null!=t.Find(n.ID))return!1;let l=null;if(null!=n.ParentID&&(l=t.Find(n.ParentID),null==l))return!1;if(l=null==l?t.Container:l.GetChildNode(),null==l)return!1;const i=t.generateNodeHtml(n);t.appendHtml(l,i);t.Find(n.ID);return!0}Remove(e){const t=this.Find(e);return null!=t&&(t.Remove(),!0)}Clear(){this.initialiseComponents(this.Options)}CollapseAll(){this.GetAllNodes().forEach((function(e){e.Collapse()}))}ExpandAll(){this.GetAllNodes().forEach((function(e){e.Expand()}))}CheckAll(e){this.Options.ShowCheckbox&&this.GetAllNodes().forEach((function(t){t.IsChecked=e}))}Find(e){if(null==this.Container)return void console.log("BBTreeview container not found");const t=this.Container.querySelectorAll("li[data-bbtv-id='"+e+"']");if(t.length<=0)return null;let n=new BBTreeviewNode(this);return n.Load(t[0]),n}FindByName(e){let t=[];return this.GetAllNodes().forEach((function(n){n.Name==e&&t.push(n)})),t}FindByValue(e){let t=[];return this.GetAllNodes().forEach((function(n){n.Value==e&&t.push(n)})),t}GetAllNodes(){const e=this,t=e.Container.querySelectorAll("li");if(t.length<=0)return[];let n=[];return t.forEach((function(t){const l=t.getAttribute("data-bbtv-id");if(e.isNullOrWhitespace(l))return;const i=e.Find(l);null!=i&&n.push(i)})),n}GetCheckedNodes(){let e=[];return this.GetAllNodes().forEach((function(t){t.Checked&&e.push(t)})),e}GetCheckedValues(){let e=[];return this.GetCheckedNodes().map((function(t){e.push(t.Value)})),e}GetCheckedTags(){let e=[];return this.GetCheckedNodes().map((function(t){e.push(t.Tag)})),e}GetSelectedNode(){let e=null;return this.GetAllNodes().forEach((function(t){if(t.Highlighted)return e=t,!1})),e}appendHtml(e,t){let n=document.createElement("template");n.innerHTML=t,n=n.content.firstChild,e.appendChild(n)}generateID(){return"treeviewItem"+(Math.floor(1000001*Math.random())+100).toString()}generateNodeHtml(e){const t=this;let n="";t.isNullOrWhitespace(e.Tag)||(n=encodeURIComponent(JSON.stringify(e.Tag)));let l='
  • ';return l+='
    ',t.Options.ShowCheckbox&&(l+='
    '),t.Options.ShowIcon?(l+='
    ',l+=''+e.Name+""):l+=''+e.Name+"",l+="
    ",l+="",l+="
    • ",l}getNode(e){const t=this;let n=null;n=t.isTag(e,"li")?e:t.parentsUntilTagName(e,"li");const l=n.getAttribute("data-bbtv-id");return t.isNullOrWhitespace(l)?null:t.Find(l)}getOptions(e){const t=this;let n=Object.assign(t.DefaultOptions.TreeNode,e);return null==n.ID&&(n.ID=t.generateID()),null==n.Tag&&(n.Tag=""),n}isNullOrWhitespace(e){return void 0===e||(null==e||e.toString().trim().length<=0)}isTag(e,t){return e.tagName.toLowerCase()==t}parentsUntilTagName(e,t){const n=this;let l=e;for(;void 0!==l.parentNode&&(l=l.parentNode,void 0!==l);){if(n.isTag(l,"ul")&&l.classList.contains("bbtreeview"))return null;if(n.isTag(l,t))break}return l}} + +class BBTreeviewNode{constructor(e){const t=this;t.Treeview=e,t.ID=null,t.Node=null,t.Container=null,t.Label=null,t.Value=null,t.Name="",t.Hint="",t.ParentID=null,t.IsChecked=!1,t.Highlighted=!1,t.Tag=null,t.initialiseComponents()}initialiseComponents(){}get IsChecked(){return!!this.Treeview.Options.ShowCheckbox&&this.Node.classList.contains("x")}set IsChecked(e){const t=this;t.setCheckbox(t.Node,e),t.Node.querySelectorAll("li").forEach((function(n){t.setCheckbox(n,e)}));let n=t.ParentNode;if(null!=n)if(t.Treeview.Options.EnablePullUp)for(;;){const e=n.querySelectorAll("li.x").length>0;if(t.setCheckbox(n,e),n=t.Treeview.getNode(n),n=n.GetParentNode(),null==n)break}else{let e=0;n.querySelectorAll("li").forEach((function(t){t.classList.contains("x")||e++})),t.setCheckbox(n,e<=0)}}get IsExpanded(){return!!this.Node.classList.contains("e")||!this.Node.classList.contains("c")&&null}get IsHighlighted(){return this.Container.classList.contains("highlighted")}get Tag(){let e=this.Node.getAttribute("data-bbtv-tag");return this.Treeview.isNullOrWhitespace(e)?null:JSON.parse(decodeURIComponent(e))}get ParentNodeID(){const e=this.ParentNode;return null==e?null:e.getAttribute("data-bbtv-id")}get ParentNode(){return this.parentsUntilTagName(this.Node,"li")}Load(e){const t=this;t.ID=e.getAttribute("data-bbtv-id"),t.Node=e,t.Container=e.querySelectorAll("div.li")[0],t.Label=e.querySelectorAll("span")[0],t.Value=e.getAttribute("data-bbtv-value"),t.Name=t.Label.textContent,t.Hint=t.Label.getAttribute("title"),t.ParentID=t.ParentNodeID,t.IsChecked=t.IsChecked,t.Highlighted=t.IsHighlighted,t.Tag=t.Tag,t.initialiseComponents_Events()}Collapse(){const e=this;e.Node.classList.contains("e")&&(e.Node.classList.remove("e"),e.Node.classList.add("c")),e.GetChildNodes().forEach((function(e){e.classList.add("hidden")}))}Expand(){const e=this;e.Node.classList.contains("c")&&(e.Node.classList.remove("c"),e.Node.classList.add("e")),e.GetChildNodes().forEach((function(e){e.classList.remove("hidden")}))}GetCheckbox(){if(!this.Treeview.Options.ShowCheckbox)return null;const e=this.Node.querySelectorAll("div.icon.checkbox");return void 0===e?null:e[0]}GetChildNode(){let e=this.Node.querySelectorAll("ul");return e.length<=0?null:e[0]}GetChildNodes(){const e=this.GetChildNode();if(null==e)return[];let t=e.querySelectorAll("li");if(t.length<=0)return[];let n=[];return t.forEach((function(t){void 0!==t.parentNode&&t.parentNode==e&&n.push(t)})),n}Remove(){const e=this;null!=e.ParentNode&&(e.ParentNode.classList.contains("e")&&e.ParentNode.classList.remove("e"),e.ParentNode.classList.contains("c")&&e.ParentNode.classList.remove("c")),e.Node.parentNode.removeChild(e.Node)}Toggle(){const e=this;switch(e.IsExpanded){case!0:e.Collapse();break;case!1:e.Expand()}}initialiseComponents_Events(){const e=this;e.Node.addEventListener("click",(function(t){if(t.stopPropagation(),t.preventDefault(),!e.isTag(t.target,"li"))return;if(t.offsetX<0||t.offsetX>16||t.offsetY<0||t.offsetY>16)return;const n=e.Treeview.getNode(t.target);null!=n&&n.Toggle()})),e.Container.addEventListener("dblclick",(function(t){t.stopPropagation(),t.preventDefault();const n=e.Treeview.getNode(t.target);null!=n&&n.Toggle()})),e.Treeview.Options.ShowCheckbox&&(e.GetCheckbox().addEventListener("mousedown",(function(t){t.stopPropagation(),t.preventDefault(),e.IsChecked=!e.IsChecked})),e.GetCheckbox().addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault()})),e.GetCheckbox().addEventListener("dblclick",(function(e){e.stopPropagation(),e.preventDefault()}))),e.Container.addEventListener("mousedown",(function(t){t.stopPropagation(),t.preventDefault();const n=e.Treeview.getNode(t.target);null!=n&&(e.Treeview.Container.querySelectorAll("div.highlighted").forEach((function(e){e.classList.remove("highlighted")})),e.Treeview.Options.ShowSelection&&n.Container.classList.add("highlighted"))})),e.invalidateCollapsible()}invalidateCollapsible(){const e=this;null!=e.ParentNode&&(e.ParentNode.classList.contains("c")?e.Node.classList.add("hidden"):(e.ParentNode.classList.contains("e")||e.ParentNode.classList.add("e"),e.Node.classList.remove("hidden")))}isTag=function(e,t){return e.tagName.toLowerCase()==t};parentsUntilTagName(e,t){const n=this;let s=e;for(;void 0!==s.parentNode&&(s=s.parentNode,void 0!==s);){if(n.isTag(s,"ul")&&s.classList.contains("bbtreeview"))return null;if(n.isTag(s,t))break}return s}setCheckbox(e,t){t?e.classList.contains("x")||e.classList.add("x"):e.classList.contains("x")&&e.classList.remove("x")}} \ No newline at end of file diff --git a/bbtreeview.css b/src/bbtreeview.css similarity index 100% rename from bbtreeview.css rename to src/bbtreeview.css diff --git a/src/bbtreeview.js b/src/bbtreeview.js new file mode 100644 index 0000000..bbffd40 --- /dev/null +++ b/src/bbtreeview.js @@ -0,0 +1,397 @@ +class BBTreeview { + constructor(options) { + const a = this; + + a.initialiseComponents(options); + } + + + initialiseComponents(options) { + var a = this; + + a.Options = Object.assign(a.DefaultOptions.Treeview, options); + } + + + get Container() { + const a = this; + + let result = document.getElementsByTagName("body"); + if (result.length <= 0) { + return null; + } + + result = result[0].querySelectorAll(a.Options.ID); + if (result.length <= 0) { + return; + } + + result[0].innerHTML = ""; + + result[0].querySelectorAll("ul.bbtreeview"); + if (result.length <= 0) { + return; + } + + return result[0]; + } + + get DefaultOptions() { + return { + Treeview: { + ID: null, + ShowCheckbox: false, + ShowSelection: true, + EnablePullUp: false, + ShowIcon: true + }, + TreeNode: { + ID: null, + ParentID: null, + Name: "", + Hint: "", + Value: "", + Icon: "folder", + Checked: false, + Tag: null + } + }; + } + + AddItem(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(); + } + + if (parentNode == null) { + return false; + } + + const nodeHtml = a.generateNodeHtml(_options); + + // Add node + a.appendHtml(parentNode, nodeHtml); + + const node = a.Find(_options.ID); + + 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.IsChecked = 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; + } + + let treenode = new BBTreeviewNode(this); + treenode.Load(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.Checked) { + 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.Highlighted) { + response = e; + + return false; + } + }); + + return response; + } + + appendHtml(el, html) { + let node = document.createElement('template'); + node.innerHTML = html; + + node = node.content.firstChild; + + el.appendChild(node); + } + + 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; + } + + 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); + } + + getOptions(options) { + const a = this; + + let _options = Object.assign(a.DefaultOptions.TreeNode, options); + + if (_options.ID == null) { + _options.ID = a.generateID(); + } + + if (_options.Tag == null) { + _options.Tag = ""; + } + + return _options; + } + + 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; + } + +} \ No newline at end of file diff --git a/src/bbtreeviewnode.js b/src/bbtreeviewnode.js new file mode 100644 index 0000000..ae01e68 --- /dev/null +++ b/src/bbtreeviewnode.js @@ -0,0 +1,418 @@ +class BBTreeviewNode { + constructor(treeview) { + const a = this; + + a.Treeview = treeview; + + a.ID = null; + a.Node = null; + + a.Container = null; + a.Label = null; + a.Value = null; + + a.Name = ""; + a.Hint = ""; + + a.ParentID = null; + a.IsChecked = false; + a.Highlighted = false; + a.Tag = null; + + a.initialiseComponents(); + } + + + initialiseComponents() { + const a = this; + } + + + get IsChecked() { + const a = this; + + if (!a.Treeview.Options.ShowCheckbox) { + return false; + } + + return a.Node.classList.contains("x"); + } + + set IsChecked(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 + let parentNode = a.ParentNode; + if (parentNode == null) { + return; + } + + // Handle pull-ups + if (a.Treeview.Options.EnablePullUp) { + while (true) { + const parentChecked = (parentNode.querySelectorAll("li.x").length > 0); + + a.setCheckbox(parentNode, parentChecked); + + parentNode = a.Treeview.getNode(parentNode); + parentNode = parentNode.GetParentNode(); + + if (parentNode == null) { + break; + } + } + } else { + let uncheckedCount = 0; + + parentNode.querySelectorAll("li").forEach(function(e) { + if (e.classList.contains("x")) { + return; + } + + uncheckedCount++; + }); + + a.setCheckbox(parentNode, (uncheckedCount <= 0)); + } + } + + get IsExpanded() { + const a = this; + + if (a.Node.classList.contains("e")) { + return true; + } + + if (a.Node.classList.contains("c")) { + return false; + } + + return null; + } + + get IsHighlighted() { + const a = this; + + return (a.Container.classList.contains("highlighted")); + } + + get Tag() { + const a = this; + + let tag = a.Node.getAttribute("data-bbtv-tag"); + if (a.Treeview.isNullOrWhitespace(tag)) { + return null; + } + + return JSON.parse(decodeURIComponent(tag)); + } + + get ParentNodeID() { + const a = this; + + const parentNode = a.ParentNode; + if (parentNode == null) { + return null; + } + + return parentNode.getAttribute("data-bbtv-id"); + } + + get ParentNode() { + const a = this; + + return a.parentsUntilTagName(a.Node, "li"); + } + + + Load(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.ParentNodeID; + a.IsChecked = a.IsChecked; + a.Highlighted = a.IsHighlighted; + a.Tag = a.Tag; + + a.initialiseComponents_Events(); + } + + Collapse() { + 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"); + }); + } + + Expand() { + 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"); + }); + } + + GetCheckbox() { + 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]; + } + + GetChildNode() { + const a = this; + + let result = a.Node.querySelectorAll("ul"); + if (result.length <= 0) { + return null; + } + + return result[0]; + } + + GetChildNodes() { + 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; + } + + Remove() { + const a = this; + + if (a.ParentNode != null) { + if (a.ParentNode.classList.contains("e")) { + a.ParentNode.classList.remove("e"); + } + + if (a.ParentNode.classList.contains("c")) { + a.ParentNode.classList.remove("c"); + } + } + + a.Node.parentNode.removeChild(a.Node); + } + + Toggle() { + const a = this; + + switch (a.IsExpanded) { + case true: + a.Collapse(); + break; + case false: + a.Expand(); + break; + default: break; + } + } + + + initialiseComponents_Events() { + 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.IsChecked = !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(); + } + + invalidateCollapsible() { + const a = this; + + // Invalidate state + if (a.ParentNode == null) { + return; + } + + if (a.ParentNode.classList.contains("c")) { + a.Node.classList.add("hidden"); + } else if (a.ParentNode.classList.contains("e")) { + a.Node.classList.remove("hidden"); + } else { + a.ParentNode.classList.add("e"); + a.Node.classList.remove("hidden"); + } + } + + isTag = function(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; + } + + setCheckbox(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/src/version.txt b/src/version.txt new file mode 100644 index 0000000..2b80535 --- /dev/null +++ b/src/version.txt @@ -0,0 +1,4 @@ +/** + * BBTreeview + * @version v0.1.2.011 (2024/01/07 0208) + */ -- 2.45.2 From c9633654e5ce1ff4028f19015c4d06484556c1c1 Mon Sep 17 00:00:00 2001 From: Ray Date: Mon, 8 Jan 2024 23:45:52 +0000 Subject: [PATCH 2/6] Changed js compiler to npx with build script --- build.bat | 9 +++++++-- build/bbtreeview.min.js | 18 +++++++++++++++--- src/bbtreeview.js | 4 ++-- src/bbtreeviewnode.js | 32 +++++++++++++++----------------- 4 files changed, 39 insertions(+), 24 deletions(-) diff --git a/build.bat b/build.bat index d19fa8a..e8ed8f6 100644 --- a/build.bat +++ b/build.bat @@ -6,7 +6,12 @@ cd src type version.txt >> ../bbtreeview.min.js -"C:\B\Portable Files (dev)\Google Closure Compiler\closure-compiler-v20231112.jar" --js *.js --js_output_file ../bbtreeview.min.tmp +@REM "C:\B\Portable Files (dev)\Google Closure Compiler\closure-compiler-v20231112.jar" --js *.js --js_output_file ../bbtreeview.min.tmp +@REM npx google-closure-compiler --compilation_level=ADVANCED --js=*.js --js_output_file=../bbtreeview.min.tmp +@REM npx google-closure-compiler --compilation_level=ADVANCED --warning_level=VERBOSE --js=*.js --js_output_file=bbtreeview.min.tmp +@REM npx google-closure-compiler --warning_level=VERBOSE --js=*.js --js_output_file=bbtreeview.min.tmp + +move bbtreeview.min.tmp ../bbtreeview.min.tmp cd.. @@ -14,4 +19,4 @@ type bbtreeview.min.tmp >> bbtreeview.min.js move bbtreeview.min.js build/bbtreeview.min.js -del bbtreeview.min.tmp \ No newline at end of file +del bbtreeview.min.tmp diff --git a/build/bbtreeview.min.js b/build/bbtreeview.min.js index 1afd2a7..edafacd 100644 --- a/build/bbtreeview.min.js +++ b/build/bbtreeview.min.js @@ -2,6 +2,18 @@ * BBTreeview * @version v0.1.2.011 (2024/01/07 0208) */ -class BBTreeview{constructor(e){this.initialiseComponents(e)}initialiseComponents(e){this.Options=Object.assign(this.DefaultOptions.Treeview,e)}get Container(){let e=document.getElementsByTagName("body");return e.length<=0?null:(e=e[0].querySelectorAll(this.Options.ID),e.length<=0||(e[0].innerHTML='',e[0].querySelectorAll("ul.bbtreeview"),e.length<=0)?void 0:e[0])}get DefaultOptions(){return{Treeview:{ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1,ShowIcon:!0},TreeNode:{ID:null,ParentID:null,Name:"",Hint:"",Value:"",Icon:"folder",Checked:!1,Tag:null}}}AddItem(e){const t=this,n=t.getOptions(e);if(null!=t.Find(n.ID))return!1;let l=null;if(null!=n.ParentID&&(l=t.Find(n.ParentID),null==l))return!1;if(l=null==l?t.Container:l.GetChildNode(),null==l)return!1;const i=t.generateNodeHtml(n);t.appendHtml(l,i);t.Find(n.ID);return!0}Remove(e){const t=this.Find(e);return null!=t&&(t.Remove(),!0)}Clear(){this.initialiseComponents(this.Options)}CollapseAll(){this.GetAllNodes().forEach((function(e){e.Collapse()}))}ExpandAll(){this.GetAllNodes().forEach((function(e){e.Expand()}))}CheckAll(e){this.Options.ShowCheckbox&&this.GetAllNodes().forEach((function(t){t.IsChecked=e}))}Find(e){if(null==this.Container)return void console.log("BBTreeview container not found");const t=this.Container.querySelectorAll("li[data-bbtv-id='"+e+"']");if(t.length<=0)return null;let n=new BBTreeviewNode(this);return n.Load(t[0]),n}FindByName(e){let t=[];return this.GetAllNodes().forEach((function(n){n.Name==e&&t.push(n)})),t}FindByValue(e){let t=[];return this.GetAllNodes().forEach((function(n){n.Value==e&&t.push(n)})),t}GetAllNodes(){const e=this,t=e.Container.querySelectorAll("li");if(t.length<=0)return[];let n=[];return t.forEach((function(t){const l=t.getAttribute("data-bbtv-id");if(e.isNullOrWhitespace(l))return;const i=e.Find(l);null!=i&&n.push(i)})),n}GetCheckedNodes(){let e=[];return this.GetAllNodes().forEach((function(t){t.Checked&&e.push(t)})),e}GetCheckedValues(){let e=[];return this.GetCheckedNodes().map((function(t){e.push(t.Value)})),e}GetCheckedTags(){let e=[];return this.GetCheckedNodes().map((function(t){e.push(t.Tag)})),e}GetSelectedNode(){let e=null;return this.GetAllNodes().forEach((function(t){if(t.Highlighted)return e=t,!1})),e}appendHtml(e,t){let n=document.createElement("template");n.innerHTML=t,n=n.content.firstChild,e.appendChild(n)}generateID(){return"treeviewItem"+(Math.floor(1000001*Math.random())+100).toString()}generateNodeHtml(e){const t=this;let n="";t.isNullOrWhitespace(e.Tag)||(n=encodeURIComponent(JSON.stringify(e.Tag)));let l='
  • ';return l+='
    ',t.Options.ShowCheckbox&&(l+='
    '),t.Options.ShowIcon?(l+='
    ',l+=''+e.Name+""):l+=''+e.Name+"",l+="
    ",l+="
      ",l+="
      • ",l}getNode(e){const t=this;let n=null;n=t.isTag(e,"li")?e:t.parentsUntilTagName(e,"li");const l=n.getAttribute("data-bbtv-id");return t.isNullOrWhitespace(l)?null:t.Find(l)}getOptions(e){const t=this;let n=Object.assign(t.DefaultOptions.TreeNode,e);return null==n.ID&&(n.ID=t.generateID()),null==n.Tag&&(n.Tag=""),n}isNullOrWhitespace(e){return void 0===e||(null==e||e.toString().trim().length<=0)}isTag(e,t){return e.tagName.toLowerCase()==t}parentsUntilTagName(e,t){const n=this;let l=e;for(;void 0!==l.parentNode&&(l=l.parentNode,void 0!==l);){if(n.isTag(l,"ul")&&l.classList.contains("bbtreeview"))return null;if(n.isTag(l,t))break}return l}} - -class BBTreeviewNode{constructor(e){const t=this;t.Treeview=e,t.ID=null,t.Node=null,t.Container=null,t.Label=null,t.Value=null,t.Name="",t.Hint="",t.ParentID=null,t.IsChecked=!1,t.Highlighted=!1,t.Tag=null,t.initialiseComponents()}initialiseComponents(){}get IsChecked(){return!!this.Treeview.Options.ShowCheckbox&&this.Node.classList.contains("x")}set IsChecked(e){const t=this;t.setCheckbox(t.Node,e),t.Node.querySelectorAll("li").forEach((function(n){t.setCheckbox(n,e)}));let n=t.ParentNode;if(null!=n)if(t.Treeview.Options.EnablePullUp)for(;;){const e=n.querySelectorAll("li.x").length>0;if(t.setCheckbox(n,e),n=t.Treeview.getNode(n),n=n.GetParentNode(),null==n)break}else{let e=0;n.querySelectorAll("li").forEach((function(t){t.classList.contains("x")||e++})),t.setCheckbox(n,e<=0)}}get IsExpanded(){return!!this.Node.classList.contains("e")||!this.Node.classList.contains("c")&&null}get IsHighlighted(){return this.Container.classList.contains("highlighted")}get Tag(){let e=this.Node.getAttribute("data-bbtv-tag");return this.Treeview.isNullOrWhitespace(e)?null:JSON.parse(decodeURIComponent(e))}get ParentNodeID(){const e=this.ParentNode;return null==e?null:e.getAttribute("data-bbtv-id")}get ParentNode(){return this.parentsUntilTagName(this.Node,"li")}Load(e){const t=this;t.ID=e.getAttribute("data-bbtv-id"),t.Node=e,t.Container=e.querySelectorAll("div.li")[0],t.Label=e.querySelectorAll("span")[0],t.Value=e.getAttribute("data-bbtv-value"),t.Name=t.Label.textContent,t.Hint=t.Label.getAttribute("title"),t.ParentID=t.ParentNodeID,t.IsChecked=t.IsChecked,t.Highlighted=t.IsHighlighted,t.Tag=t.Tag,t.initialiseComponents_Events()}Collapse(){const e=this;e.Node.classList.contains("e")&&(e.Node.classList.remove("e"),e.Node.classList.add("c")),e.GetChildNodes().forEach((function(e){e.classList.add("hidden")}))}Expand(){const e=this;e.Node.classList.contains("c")&&(e.Node.classList.remove("c"),e.Node.classList.add("e")),e.GetChildNodes().forEach((function(e){e.classList.remove("hidden")}))}GetCheckbox(){if(!this.Treeview.Options.ShowCheckbox)return null;const e=this.Node.querySelectorAll("div.icon.checkbox");return void 0===e?null:e[0]}GetChildNode(){let e=this.Node.querySelectorAll("ul");return e.length<=0?null:e[0]}GetChildNodes(){const e=this.GetChildNode();if(null==e)return[];let t=e.querySelectorAll("li");if(t.length<=0)return[];let n=[];return t.forEach((function(t){void 0!==t.parentNode&&t.parentNode==e&&n.push(t)})),n}Remove(){const e=this;null!=e.ParentNode&&(e.ParentNode.classList.contains("e")&&e.ParentNode.classList.remove("e"),e.ParentNode.classList.contains("c")&&e.ParentNode.classList.remove("c")),e.Node.parentNode.removeChild(e.Node)}Toggle(){const e=this;switch(e.IsExpanded){case!0:e.Collapse();break;case!1:e.Expand()}}initialiseComponents_Events(){const e=this;e.Node.addEventListener("click",(function(t){if(t.stopPropagation(),t.preventDefault(),!e.isTag(t.target,"li"))return;if(t.offsetX<0||t.offsetX>16||t.offsetY<0||t.offsetY>16)return;const n=e.Treeview.getNode(t.target);null!=n&&n.Toggle()})),e.Container.addEventListener("dblclick",(function(t){t.stopPropagation(),t.preventDefault();const n=e.Treeview.getNode(t.target);null!=n&&n.Toggle()})),e.Treeview.Options.ShowCheckbox&&(e.GetCheckbox().addEventListener("mousedown",(function(t){t.stopPropagation(),t.preventDefault(),e.IsChecked=!e.IsChecked})),e.GetCheckbox().addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault()})),e.GetCheckbox().addEventListener("dblclick",(function(e){e.stopPropagation(),e.preventDefault()}))),e.Container.addEventListener("mousedown",(function(t){t.stopPropagation(),t.preventDefault();const n=e.Treeview.getNode(t.target);null!=n&&(e.Treeview.Container.querySelectorAll("div.highlighted").forEach((function(e){e.classList.remove("highlighted")})),e.Treeview.Options.ShowSelection&&n.Container.classList.add("highlighted"))})),e.invalidateCollapsible()}invalidateCollapsible(){const e=this;null!=e.ParentNode&&(e.ParentNode.classList.contains("c")?e.Node.classList.add("hidden"):(e.ParentNode.classList.contains("e")||e.ParentNode.classList.add("e"),e.Node.classList.remove("hidden")))}isTag=function(e,t){return e.tagName.toLowerCase()==t};parentsUntilTagName(e,t){const n=this;let s=e;for(;void 0!==s.parentNode&&(s=s.parentNode,void 0!==s);){if(n.isTag(s,"ul")&&s.classList.contains("bbtreeview"))return null;if(n.isTag(s,t))break}return s}setCheckbox(e,t){t?e.classList.contains("x")||e.classList.add("x"):e.classList.contains("x")&&e.classList.remove("x")}} \ No newline at end of file +class BBTreeview{constructor(a){this.Options=null;this.initialiseComponents(a)}initialiseComponents(a){this.Options=Object.assign(this.DefaultOptions.Treeview,a)}get Container(){let a=document.getElementsByTagName("body");if(0>=a.length)return null;a=a[0].querySelectorAll(this.Options.ID);if(!(0>=a.length||(a[0].innerHTML='',a[0].querySelectorAll("ul.bbtreeview"),0>=a.length)))return a[0]}get DefaultOptions(){return{Treeview:{ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1, +ShowIcon:!0},TreeNode:{ID:null,ParentID:null,Name:"",Hint:"",Value:"",Icon:"folder",Checked:!1,Tag:null}}}AddItem(a){a=this.getOptions(a);if(null!=this.Find(a.ID))return!1;let b=null;if(null!=a.ParentID&&(b=this.Find(a.ParentID),null==b))return!1;b=null==b?this.Container:b.GetChildNode();if(null==b)return!1;const c=this.generateNodeHtml(a);this.appendHtml(b,c);this.Find(a.ID);return!0}Remove(a){a=this.Find(a);if(null==a)return!1;a.Remove();return!0}Clear(){this.initialiseComponents(this.Options)}CollapseAll(){this.GetAllNodes().forEach(function(a){a.Collapse()})}ExpandAll(){this.GetAllNodes().forEach(function(a){a.Expand()})}CheckAll(a){this.Options.ShowCheckbox&& +this.GetAllNodes().forEach(function(b){b.IsChecked=a})}Find(a){if(null==this.Container)console.log("BBTreeview container not found");else{a=this.Container.querySelectorAll("li[data-bbtv-id='"+a+"']");if(0>=a.length)return null;var b=new BBTreeviewNode(this);b.Load(a[0]);return b}}FindByName(a){let b=[];this.GetAllNodes().forEach(function(c){c.Name==a&&b.push(c)});return b}FindByValue(a){let b=[];this.GetAllNodes().forEach(function(c){c.Value==a&&b.push(c)});return b}GetAllNodes(){const a=this,b=a.Container.querySelectorAll("li"); +if(0>=b.length)return[];let c=[];b.forEach(function(d){d=d.getAttribute("data-bbtv-id");a.isNullOrWhitespace(d)||(d=a.Find(d),null!=d&&c.push(d))});return c}GetCheckedNodes(){let a=[];this.GetAllNodes().forEach(function(b){b.Checked&&a.push(b)});return a}GetCheckedValues(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Value)});return a}GetCheckedTags(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Tag)});return a}GetSelectedNode(){let a=null;this.GetAllNodes().forEach(function(b){if(b.Highlighted)return a= +b,!1});return a}appendHtml(a,b){let c=document.createElement("template");c.innerHTML=b;c=c.content.firstChild;a.appendChild(c)}generateID(){return"treeviewItem"+(Math.floor(1000001*Math.random())+100).toString()}generateNodeHtml(a){var b="";this.isNullOrWhitespace(a.Tag)||(b=encodeURIComponent(JSON.stringify(a.Tag)));b='
    • ';b+='
      ';this.Options.ShowCheckbox&&(b+='
      ');this.Options.ShowIcon? +(b+='
      ',b+=''+a.Name+""):b+=''+a.Name+"";return b+"
        • "}getNode(a){a=(this.isTag(a,"li")?a:this.parentsUntilTagName(a,"li")).getAttribute("data-bbtv-id");return this.isNullOrWhitespace(a)?null:this.Find(a)}getOptions(a){a=Object.assign(this.DefaultOptions.TreeNode,a);null==a.ID&&(a.ID=this.generateID());null==a.Tag&&(a.Tag="");return a}isNullOrWhitespace(a){return"undefined"== +typeof a||null==a?!0:0>=a.toString().trim().length}isTag(a,b){return a.tagName.toLowerCase()==b}parentsUntilTagName(a,b){for(;"undefined"!=typeof a.parentNode;){a=a.parentNode;if("undefined"==typeof a)break;if(this.isTag(a,"ul")&&a.classList.contains("bbtreeview"))return null;if(this.isTag(a,b))break}return a}};class BBTreeviewNode{constructor(a){this.Treeview=a;this.Value=this.Label=this.Container=this.Node=this.ID=null;this.Hint=this.Name="";this.ParentID=null;this.Highlighted=this.IsChecked=!1;this.Tag=null;this.initialiseComponents()}initialiseComponents(){}get IsChecked(){return this.Treeview.Options.ShowCheckbox?this.Node.classList.contains("x"):!1}set IsChecked(a){const b=this;b.setCheckbox(b.Node,a);b.Node.querySelectorAll("li").forEach(function(d){b.setCheckbox(d,a)});let c=b.ParentNode;if(null!= +c)if(b.Treeview.Options.EnablePullUp)for(;;){const d=0=d)}}get IsExpanded(){return this.Node.classList.contains("e")?!0:this.Node.classList.contains("c")?!1:null}get IsHighlighted(){return this.Container.classList.contains("highlighted")}get Tag(){let a=this.Node.getAttribute("data-bbtv-tag"); +return this.Treeview.isNullOrWhitespace(a)?null:JSON.parse(decodeURIComponent(a))}get ParentNodeID(){const a=this.ParentNode;return null==a?null:a.getAttribute("data-bbtv-id")}get ParentNode(){return this.parentsUntilTagName(this.Node,"li")}Load(a){this.ID=a.getAttribute("data-bbtv-id");this.Node=a;this.Container=a.querySelectorAll("div.li")[0];this.Label=a.querySelectorAll("span")[0];this.Value=a.getAttribute("data-bbtv-value");this.Name=this.Label.textContent;this.Hint=this.Label.getAttribute("title"); +this.ParentID=this.ParentNodeID;this.IsChecked=this.IsChecked;this.Highlighted=this.IsHighlighted;this.Tag=this.Tag;this.initialiseComponents_Events()}Collapse(){this.Node.classList.contains("e")&&(this.Node.classList.remove("e"),this.Node.classList.add("c"));this.GetChildNodes().forEach(function(a){a.classList.add("hidden")})}Expand(){this.Node.classList.contains("c")&&(this.Node.classList.remove("c"),this.Node.classList.add("e"));this.GetChildNodes().forEach(function(a){a.classList.remove("hidden")})}GetCheckbox(){if(!this.Treeview.Options.ShowCheckbox)return null; +const a=this.Node.querySelectorAll("div.icon.checkbox");return"undefined"==typeof a?null:a[0]}GetChildNode(){let a=this.Node.querySelectorAll("ul");return 0>=a.length?null:a[0]}GetChildNodes(){const a=this.GetChildNode();if(null==a)return[];let b=a.querySelectorAll("li");if(0>=b.length)return[];let c=[];b.forEach(function(d){"undefined"!=typeof d.parentNode&&d.parentNode==a&&c.push(d)});return c}Remove(){null!=this.ParentNode&&(this.ParentNode.classList.contains("e")&&this.ParentNode.classList.remove("e"), +this.ParentNode.classList.contains("c")&&this.ParentNode.classList.remove("c"));this.Node.parentNode.removeChild(this.Node)}Toggle(){switch(this.IsExpanded){case !0:this.Collapse();break;case !1:this.Expand()}}initialiseComponents_Events(){const a=this;a.Node.addEventListener("click",function(b){b.stopPropagation();b.preventDefault();!a.isTag(b.target,"li")||0>b.offsetX||16b.offsetY||16 Date: Mon, 8 Jan 2024 23:48:22 +0000 Subject: [PATCH 3/6] Removed research files --- src/UCkji.png | Bin 13067 -> 0 bytes src/collapse.png | Bin 210 -> 0 bytes src/expand.png | Bin 232 -> 0 bytes src/treeview-check-boxes12231.png | Bin 7519 -> 0 bytes 4 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/UCkji.png delete mode 100644 src/collapse.png delete mode 100644 src/expand.png delete mode 100644 src/treeview-check-boxes12231.png diff --git a/src/UCkji.png b/src/UCkji.png deleted file mode 100644 index 5853d67cf127d606442f8f3aacd63059d340662d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 13067 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

        LFKV12( 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 BNpJuF diff --git a/src/expand.png b/src/expand.png deleted file mode 100644 index 8d92b45e2386e54cf45db3037b86df56d355b4cc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 232 zcmeAS@N?(olHy`uVBq!ia0vp^oFL4>1|%O$WD@{!3Opi<85sBugD~Uq{1qucLCF%= zh?3y^w370~qEv?R@^Zb*yzJuS#DY}4{G#;P?`))iib_3Q9780gmQFaxc_=`@<-W?d z1jcDkOiekiE%@Fb%2TmTCEruhD(=(6%|{wjr_a0@8F6!;_pC`Z8WT*^DwC>LCh^}s z&9LG_zm&xro%z}qXQw^jmDz4*{_w)gbXlvo8Gm Z!tAZ6Y{q$@&<*GS22WQ%mvv4FO#ta(Q|zf zgkD1E5JFK1AOYkC_bL0F`+fJhKk}^1XN@`MnD40bU6BuU)fnhl=>Px#gNFJ81M+hn z063>|o`U?(t!E{f{5a=rpr#Bc>u1B02UJc2)lLKbv)gLLftiSvca!pP1*hhH><|ArHGmO4k@~9meH=Sr>@~CKeG}+-pwp^6 zU@Y8F1nj8{-THJ=FKqc5e$I?VSBxIj$x)S{`%t9>JYLx#K^6V8Uv_(@HRRN-!xB&e zC`7(UtG8Tc(4`MDdgEdX9mrH7qx1g6SO3Ixon zAnjt)=(FGI49Fj_v1ogXU{wYYB08UfXxXp|Jj537)k{QbmvEx&letfE+-kb-?YEzr#Pt)3TS8sL7@L%~p|D`kbh5~{l zfmN_-2}tq?aUy7i3=zt<5BggV^F3OKMd0Ic{$D>(H%>R;!Q0!dC-bfHKigVKv5Y~E zyWm!0rkY;M`udKKzV{SKY|!-P$^JGjWNnZW9g@}hX=oD+n`}ixgGl)ZoO}qLG!5V0 zo(TwCU9prM-`=u9wd`U#0yB>efTv5lI8R^yWX!>GOCZO@gpX_~_Tw`&1-{+`hkj1W z$RQsffjPj!aeeDOr_Pc{bmsA~zSlvF@4;93#jVk4*>dbmqt9Xsupjp;|7GSAUw=B% zJ>r_mrL66;u)X|g=-9zbqc>y^K`5|vY^5Fem0>3jOBGJXT%>S;dwrWX znkx}o>-*s2ws8m~<9+JVmH{a>WwQFfq04o{4P#W_*k)rmcckukH>+HcgxF2P1?^8d zWrqAZ1VV%2h=`NDaSg5bY9~a<>5WT0c}Jwubm%G35LoVUIybd{Q0{t)bD35+s4Q=6 zlFKRhrdff~S}SH%H>exx#<$n3s8Snz$eDkJRyM$;NqOv-Z>ybd4PJ*wp;`}}^iHP= zGfAU*_YMU!e}26mLi{;7Ue^kT5uEPrjFxlAfzt@gIeQLJZg^x4`tq1Yci<^2i?7&a z!*|WhV{>5Q)revEVtHnZSK#VS-vJ2Sh?tMwg#K!mdW=Efcg9Z9O?wNB^}*}#Umc^% zkwiC?RgO@N;O{+UpjZ=eJV>-2trQ$O31?7*+T2BiEb1L(%7v`5H6D@n-}PAH0(}W1jL|6m z;0oWlrM?@do8YDEccn!E&cVt^QM^%UvIfQlQWnmZaP3#YY!|w*d(GFZiQl`tsm)Z``jA zg`ka9h5g#h6Ku!{o-t&(jqzkxFX(%Z#CAOD<*%dn#XZ%DXl4o$-531zP$!N*pLM)I zE9;Ob{y2wF>QIC}6deQ_T_oo!%D)dwBRg+ARg^?dVMp>jh|{$*D<2E#&lIjFC4D7L zrq@y+Ud$8O+cfQLvenpD$Kb~3`)7EVHet+etrJS_%u`q^;eLp|M;BYdO7J=5v89g! z9fS+I#5H9zT`_e?m+?vvwz@LgF>tE^pDYMI3K#jkd}q>E>Xk96r>ZTHC(d+9d2bV# z!YeDQS$c8^#FVr^gx}??a*_9F`7#O6pbB)`T=l_r>iRN0rsadyO%I724BY%*?;noT zb8v>lQ)-vW}<0c~d*yi7sJA%O8=k{z6hQg?+o%e;)Qnh7#oMLZl=dA+H zpqf6?T;zE}C>A``SSgRg9#|80a}&Bgp1 zBxg#*c-s@wego#`eW-tFi>IMJPSv7#$F|BL6is+^7ZGR$V~gy$F6E0sis<2JBrREE zN0^tJ-r5@4yr?E57y~OS?xgCi9cT*(#!?+sT^TgJrieJ6+ zpCcdG(9)I4(FiIKc4yMgHIi~D%Pq^Syu$JuwnfcFb*tHiqH1&>dcyAUp%zX`aueuY zi}M9WN)PJ5Lfj(IJzeTZKYyAv!Hb0+v4YXup8kskjZQd4R%rW240@8mFY$@Y%1!aq zNVYn2VwYC@*Cr_ywxYUV zH)MOLS9B6R-}7|zGxX;tBvrxa){s%{rZ1%uW8WT>Y{oyWOVp`4bkC+cDmyRmHz^o~ z-6!AknL+8vYO{$hotFkaW)jX$);86YwMPv8`SJLNvEEEEZkJ_k*`s&b>kl1mjWr%x zP;JwnIl-BfrNZ@QsH)=iyp&wAks-&DNuy%+SBuqjVUQ_k&6We3m|Ztdc`n~e#wPmQ`ug|LB)QY31-J?`Q-q!T#oUR4{`GcS;F2W>IN*(A^*ke z5?Po|@AOUg;bo>Y?xy>x6>n>@Wu>KQjbZR5z#UO`a)cIJ-Lz!>(6xIFrNj`;6DsQu zu?GxkA+^||hN7AuiA@x}!mmv)7IFdCWRAMaE=ag)NI|~U)HyTJ+Fj9cLtB3MoMHZu zWy7fbADb_^M7hl3RGHFDEo5cZbBq#{@`^d`lkF37Nn_}F`s z^=>Zh*8Iyz1xhj^YIPVhg?f}~mIp5>=25<<<`o4_sZu_>jHzXz!&$j`7kbCKZY7>N zCFiamUn5SxJhSL63*nRZM*E&kZp4^5r~ngOdMn*&sKqTIY1Jk)+H4(EP0!uj`t@I2 z6(`G7W6Ump8#Y?Am$lBSO&oCxSC?f7PKv@V9?Q5Iods$OEe)*WoOsR# z&qn%NG`AUy?Un6$2^d|C{^nE1;)}ORyFj2pw?7lI(&j|Wg~{NNYlDV~lU@Q-OYND6 z%PwE`4^2wRb4f3DOIUJFRErbwYqE7oUv*hCo%>R|8fKhZQS-$3ML!_>la~brygnUd zTp{(Cr%DC(+u_7$vqw}0)jca83GKZd!<9f%n2e2QHaJD-zkK~~!wnE37gx3{Y05Cx z{XDi=PZH^@pKw-(=-!vjKE*vYmPguspmbAi$+ z_i=GHx`Ub7Ar?V;OiGJ-H!D+ojik;psy)_9!?#cl>vufIV)6qe1KZkk zS`@sy8YgN#4*hwS7f_hHc+k*u^w+epy&d44C}GEo9GYlN%1$L@BHAx%?t@Xs1?)nn zM!NlTyiIplZj-#c#UVT9Q9$^+E%MoCO13SP*wcf1^K`QDFezR6f3V7r+;gJw7L{OOL{D5h=1j%NQ}i~ zVgKvgk4jbzGQ>o17EhP;Z zPx}kfozbH5sh52rt8Jqn9pxvYtebN$&9vY1v9sV=`Ls!z%DOv{xF_sdcFX=Y;yL|f zR(WW9SDq3im<0r3^Ldl~H5^<`6WgDe7PgqEcUz8P8GFT9{n~9&+8yJF!47}E;%y3{ z;_}u21`@0Kdu^``kd)nZOoz<$*NgVLyz7Jr2aD&$bU3LeQ&)H*+-%d6r}*lGyJFbB zn)KFFFJ{Iii&Wr; zz(X@9|10>3jkUZ)@2pl;YL(vrZjKHC)5_HrB_Kh-6>xko?G=-o%(q#t7Kr_t+1#1K z8~3ePdf&vC2OOI5Ul<+uTBk!HYbKIP*c#9uO@4;X;N9cxWo!v8&#-q4qN=>l@DP;z zISchDZLwfsPW2X_#5CMMMiU&F8^TX)IgjJQ|18Y@Iv*C38Ni5;?;)UEI0>vM+A#8k zgyVN=3w3%LC|ijlQZrNjzr0PLfRCKmqREM^#S*`R8tWoo2=)+Mm2wUSoP+gFi1Fjd z_Nb6`f!&)(8d6NgJQ0HDXQF?>dL)!72e*BY!O2f#Kf6MG@4gpjmQXIbPs6Cg66*HZ zc^yb;*~e}T?UF3|F#hcsTAnby$j=1)HdeDy`^y4Y`c5b9V|7?nu};zJFzZ}O(te3Y zY^J)^BVB}>CX6-lP|jEr%G*L@y>X^R;PHb63i^IDSB`dB_>vA(r+ED5?<86%*+bC@!=~~Q1sPHu zIB1%i$Tk5G#Y4!M^inX)&{~wUl3^-yO)!>D>b7{!a|5*LuD?s9rx7rx=z`_b)+1P6 zD0*?!)Sh<&J4u=%a6r8()jG#`$ldAtyxB5L@J$iMLfoZ~$m;^qF)re9ZJY1>#!WBf zH67U#B)k-HNd(IYEB#kvNJR7u?+!_ZGv$-`b<$l;uhN5vY=l%qu6$xYmC46Yx+Iy~ zo&9xAB5+si;+K-xs zMMwM1*BTb(3yf5C@|2;*U|?}nk^5^bAgWk@GrA@6T;IW(M3o}0l90v&wKH=416*=9 zc~1PPw2FH6w(!^oneJLQt(g1j87>W7K&eHogc#<+I2w|!Hm+^x7sDkYdoCJ6c6h(B zJn$QOgjyjOaQSbg{(rc~-@#u$@e{6ZbgrQPpbZ5szth9j-b=3F`i?WyGl618TF{<@mA)w&3qg^yH@P6G7g4!k$4R8C=OdAj3#{RUTivCDY&1uq@R4vU$s+i z5WYzyE8L}{=u5(Y%C+9AD5j1kp$E}iAds9_ zr5(qbtP%pwI0%m-`Au5wZISbaE_9IkPasJdD&qH#YdK#L7$$9rtH%XjCxz`PlQyU8 zw?Bnas>O21`>tQX2QGJC{Y{jjYHO(xZBsS~Mh>}eqzr`+4pNx&KN-YqyUrLDQhbg$ zu?2A?xkvjbT5h*j{3YX!d%?#)@xz5+tA;0g>&BR>1T=hWrqOS6icEVBWRQz_dnC77 z%pl}^%k_+)oi6^2rwf&x97j#dIKbKk$=4%XZR+Cj(PW}nT_OIh5f7(E&m?J<%pq@K zQRC&%Rv$b@u)JB>P)cX+jB{mB^El6XP*j+abHqe?!wHaAHi)y}xdv0Mit`FuRb+~P z&BFuJ@Jc3PXJ>;~)8XV*;EP`wnx?Zfj(XpT^Xp~gg|3wO7UF_=IE&PkJ6-v#!+sXiXnN&>RLI?l?5L6mYKTC=TDnz8cITBHLEa znVrk~^MYz>oNFFiq#7wMJdX?aGyZ+vhXySw(#{E`-X|hZzG*(IKTknt&WB!EYDnVN zE*GF>p-)@N6#en5h)<@zgc zGLc^Q=I`?F0;)+&acy~WI#WK=O4U*=7s{+#G`YpfDF+30O9V~-4ySgLRy)c0Ijo6~ zP;{Cu3x9kw;D(44S#{lV%X)Q5gP3;i6LsZH(7b&u6^Y5Jjb^x%MoXJCtoZq#1iqc8 z#^?8_2PNP(-;q#W$5?9C%g?UP^Hf&^Zg9%tsf>Au4h@uTC+Dtl6h6|l;wuI(22fV; zy?@2xxJLge~CaIkt&W_rhhcws(C&4dB?SKv_5i+{Y7I_ z;u}*qaW)oJe60w*Srx;6$J_TduzYK+!0-aNBWx%+w89fSvgT)(U5ZyalcatX=dHBrE)2L53A zkFl5Hd*LSmlQU2Jb5cQ&S1}H$|H4g{cjf61V#2zE_m|~J=O!OcnPk|?x&g=FF|79y*~ft7|2Pl9ms$F%+Ri%s?||xNNLv>kKTe)G+lzH}w97Bz7Vt`wdX-hV zT~0+BA#H<+H`3lb&F{cU&SvFl9FZCS*UnE(`KMX9%(JAr=;NK9no9ORVa_Jc5Jc?p z`77;Q*1tEY%XNF>AN9KBY#eyCS~Uf^S<>x&tm`#P=&z+m?tr=vFrKoxc9ZFH-p#s)Lqd&>^8ho}GpmS& z{x`+>?mq5D;OQ`V*}H(`zfqtmO?#X08cy@MUIL=B*e;6HZ;a1*3qthx+_0&%6CNzK zLwZfxI>}n7${c~r$0`HCLVhLG0m6skHW9~N7e7tx>G-+wuVP1``5F{4yt%s%5^rxi z`y{kC_autPk5g+K@%?B@0zME+`47jU9cPOj`7c_=n;j-{g=C66|J2_!p0xRm+EJ=iebey zate0tYFBBYqOyZfS?sG8f)2=8x$huO&nrs;DEn(0w|=zbkD>q#72OAA%8$bS4^(CtXaE2J -- 2.45.2 From 4ec97bd4d60487ec3cb1ffbe243af4b8a422a60d Mon Sep 17 00:00:00 2001 From: Ray Date: Tue, 9 Jan 2024 02:12:51 +0000 Subject: [PATCH 4/6] Refactor to resolve compiler issues --- build/bbtreeview.min.js | 8 +++---- src/bbtreeview.js | 47 ++++++++++++++++++++--------------------- src/bbtreeviewnode.js | 5 +++++ 3 files changed, 32 insertions(+), 28 deletions(-) diff --git a/build/bbtreeview.min.js b/build/bbtreeview.min.js index edafacd..ad04017 100644 --- a/build/bbtreeview.min.js +++ b/build/bbtreeview.min.js @@ -2,13 +2,13 @@ * BBTreeview * @version v0.1.2.011 (2024/01/07 0208) */ -class BBTreeview{constructor(a){this.Options=null;this.initialiseComponents(a)}initialiseComponents(a){this.Options=Object.assign(this.DefaultOptions.Treeview,a)}get Container(){let a=document.getElementsByTagName("body");if(0>=a.length)return null;a=a[0].querySelectorAll(this.Options.ID);if(!(0>=a.length||(a[0].innerHTML='

          ',a[0].querySelectorAll("ul.bbtreeview"),0>=a.length)))return a[0]}get DefaultOptions(){return{Treeview:{ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1, -ShowIcon:!0},TreeNode:{ID:null,ParentID:null,Name:"",Hint:"",Value:"",Icon:"folder",Checked:!1,Tag:null}}}AddItem(a){a=this.getOptions(a);if(null!=this.Find(a.ID))return!1;let b=null;if(null!=a.ParentID&&(b=this.Find(a.ParentID),null==b))return!1;b=null==b?this.Container:b.GetChildNode();if(null==b)return!1;const c=this.generateNodeHtml(a);this.appendHtml(b,c);this.Find(a.ID);return!0}Remove(a){a=this.Find(a);if(null==a)return!1;a.Remove();return!0}Clear(){this.initialiseComponents(this.Options)}CollapseAll(){this.GetAllNodes().forEach(function(a){a.Collapse()})}ExpandAll(){this.GetAllNodes().forEach(function(a){a.Expand()})}CheckAll(a){this.Options.ShowCheckbox&& +class BBTreeview{constructor(a){this.Options=null;this.initialiseComponents(a)}initialiseComponents(a){this.Options=Object.assign({ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1,ShowIcon:!0},a)}get Container(){let a=document.getElementsByTagName("body");if(0>=a.length)return null;a=a[0].querySelectorAll(this.Options.ID);if(!(0>=a.length||(a[0].innerHTML='
            ',a[0].querySelectorAll("ul.bbtreeview"),0>=a.length)))return a[0]}AddItem(a){a=this.getOptions(a);if(null!= +this.Find(a.ID))return!1;let b=null;if(null!=a.ParentID&&(b=this.Find(a.ParentID),null==b))return!1;b=null==b?this.Container:b.GetChildNode();if(null==b)return!1;const c=this.generateNodeHtml(a);this.appendHtml(b,c);this.Find(a.ID);return!0}Remove(a){a=this.Find(a);if(null==a)return!1;a.Remove();return!0}Clear(){this.initialiseComponents(this.Options)}CollapseAll(){this.GetAllNodes().forEach(function(a){a.Collapse()})}ExpandAll(){this.GetAllNodes().forEach(function(a){a.Expand()})}CheckAll(a){this.Options.ShowCheckbox&& this.GetAllNodes().forEach(function(b){b.IsChecked=a})}Find(a){if(null==this.Container)console.log("BBTreeview container not found");else{a=this.Container.querySelectorAll("li[data-bbtv-id='"+a+"']");if(0>=a.length)return null;var b=new BBTreeviewNode(this);b.Load(a[0]);return b}}FindByName(a){let b=[];this.GetAllNodes().forEach(function(c){c.Name==a&&b.push(c)});return b}FindByValue(a){let b=[];this.GetAllNodes().forEach(function(c){c.Value==a&&b.push(c)});return b}GetAllNodes(){const a=this,b=a.Container.querySelectorAll("li"); if(0>=b.length)return[];let c=[];b.forEach(function(d){d=d.getAttribute("data-bbtv-id");a.isNullOrWhitespace(d)||(d=a.Find(d),null!=d&&c.push(d))});return c}GetCheckedNodes(){let a=[];this.GetAllNodes().forEach(function(b){b.Checked&&a.push(b)});return a}GetCheckedValues(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Value)});return a}GetCheckedTags(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Tag)});return a}GetSelectedNode(){let a=null;this.GetAllNodes().forEach(function(b){if(b.Highlighted)return a= b,!1});return a}appendHtml(a,b){let c=document.createElement("template");c.innerHTML=b;c=c.content.firstChild;a.appendChild(c)}generateID(){return"treeviewItem"+(Math.floor(1000001*Math.random())+100).toString()}generateNodeHtml(a){var b="";this.isNullOrWhitespace(a.Tag)||(b=encodeURIComponent(JSON.stringify(a.Tag)));b='
          • ';b+='
            ';this.Options.ShowCheckbox&&(b+='
            ');this.Options.ShowIcon? -(b+='
            ',b+=''+a.Name+""):b+=''+a.Name+"";return b+"
              • "}getNode(a){a=(this.isTag(a,"li")?a:this.parentsUntilTagName(a,"li")).getAttribute("data-bbtv-id");return this.isNullOrWhitespace(a)?null:this.Find(a)}getOptions(a){a=Object.assign(this.DefaultOptions.TreeNode,a);null==a.ID&&(a.ID=this.generateID());null==a.Tag&&(a.Tag="");return a}isNullOrWhitespace(a){return"undefined"== -typeof a||null==a?!0:0>=a.toString().trim().length}isTag(a,b){return a.tagName.toLowerCase()==b}parentsUntilTagName(a,b){for(;"undefined"!=typeof a.parentNode;){a=a.parentNode;if("undefined"==typeof a)break;if(this.isTag(a,"ul")&&a.classList.contains("bbtreeview"))return null;if(this.isTag(a,b))break}return a}};class BBTreeviewNode{constructor(a){this.Treeview=a;this.Value=this.Label=this.Container=this.Node=this.ID=null;this.Hint=this.Name="";this.ParentID=null;this.Highlighted=this.IsChecked=!1;this.Tag=null;this.initialiseComponents()}initialiseComponents(){}get IsChecked(){return this.Treeview.Options.ShowCheckbox?this.Node.classList.contains("x"):!1}set IsChecked(a){const b=this;b.setCheckbox(b.Node,a);b.Node.querySelectorAll("li").forEach(function(d){b.setCheckbox(d,a)});let c=b.ParentNode;if(null!= +(b+='
              ',b+=''+a.Name+""):b+=''+a.Name+"";return b+"
                "}getNode(a){a=(this.isTag(a,"li")?a:this.parentsUntilTagName(a,"li")).getAttribute("data-bbtv-id");return this.isNullOrWhitespace(a)?null:this.Find(a)}getOptions(a){a=Object.assign({ID:null,ParentID:null,Name:"",Hint:"",Value:"",Icon:"folder",Checked:!1,Tag:null},a);null==a.ID&&(a.ID=this.generateID());null==a.Tag&& +(a.Tag="");return a}isNullOrWhitespace(a){return"undefined"==typeof a||null==a?!0:0>=a.toString().trim().length}isTag(a,b){return a.tagName.toLowerCase()==b}parentsUntilTagName(a,b){for(;"undefined"!=typeof a.parentNode;){a=a.parentNode;if("undefined"==typeof a)break;if(this.isTag(a,"ul")&&a.classList.contains("bbtreeview"))return null;if(this.isTag(a,b))break}return a}};class BBTreeviewNode{constructor(a){this.Treeview=a;this.Value=this.Label=this.Container=this.Node=this.ID=null;this.Hint=this.Name="";this.ParentID=null;this.Highlighted=this.IsChecked=!1;this.Tag=null;this.initialiseComponents()}initialiseComponents(){}get IsChecked(){return this.Treeview.Options.ShowCheckbox?this.Node.classList.contains("x"):!1}set IsChecked(a){const b=this;b.setCheckbox(b.Node,a);b.Node.querySelectorAll("li").forEach(function(d){b.setCheckbox(d,a)});let c=b.ParentNode;if(null!= c)if(b.Treeview.Options.EnablePullUp)for(;;){const d=0=d)}}get IsExpanded(){return this.Node.classList.contains("e")?!0:this.Node.classList.contains("c")?!1:null}get IsHighlighted(){return this.Container.classList.contains("highlighted")}get Tag(){let a=this.Node.getAttribute("data-bbtv-tag"); return this.Treeview.isNullOrWhitespace(a)?null:JSON.parse(decodeURIComponent(a))}get ParentNodeID(){const a=this.ParentNode;return null==a?null:a.getAttribute("data-bbtv-id")}get ParentNode(){return this.parentsUntilTagName(this.Node,"li")}Load(a){this.ID=a.getAttribute("data-bbtv-id");this.Node=a;this.Container=a.querySelectorAll("div.li")[0];this.Label=a.querySelectorAll("span")[0];this.Value=a.getAttribute("data-bbtv-value");this.Name=this.Label.textContent;this.Hint=this.Label.getAttribute("title"); this.ParentID=this.ParentNodeID;this.IsChecked=this.IsChecked;this.Highlighted=this.IsHighlighted;this.Tag=this.Tag;this.initialiseComponents_Events()}Collapse(){this.Node.classList.contains("e")&&(this.Node.classList.remove("e"),this.Node.classList.add("c"));this.GetChildNodes().forEach(function(a){a.classList.add("hidden")})}Expand(){this.Node.classList.contains("c")&&(this.Node.classList.remove("c"),this.Node.classList.add("e"));this.GetChildNodes().forEach(function(a){a.classList.remove("hidden")})}GetCheckbox(){if(!this.Treeview.Options.ShowCheckbox)return null; diff --git a/src/bbtreeview.js b/src/bbtreeview.js index 4daed17..aa4dc2b 100644 --- a/src/bbtreeview.js +++ b/src/bbtreeview.js @@ -1,3 +1,9 @@ +/** + * BBTreeview + * + * @suppress {missingProperties} + * @suppress {undefinedVars} + */ class BBTreeview { constructor(options) { this.Options = null; @@ -9,7 +15,13 @@ class BBTreeview { initialiseComponents(options) { var a = this; - a.Options = Object.assign(a.DefaultOptions.Treeview, options); + a.Options = Object.assign({ + ID: null, + ShowCheckbox: false, + ShowSelection: true, + EnablePullUp: false, + ShowIcon: true + }, options); } @@ -36,28 +48,6 @@ class BBTreeview { return result[0]; } - get DefaultOptions() { - return { - Treeview: { - ID: null, - ShowCheckbox: false, - ShowSelection: true, - EnablePullUp: false, - ShowIcon: true - }, - TreeNode: { - ID: null, - ParentID: null, - Name: "", - Hint: "", - Value: "", - Icon: "folder", - Checked: false, - Tag: null - } - }; - } - AddItem(options) { const a = this; const _options = a.getOptions(options); @@ -335,7 +325,16 @@ class BBTreeview { getOptions(options) { const a = this; - let _options = Object.assign(a.DefaultOptions.TreeNode, options); + let _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(); diff --git a/src/bbtreeviewnode.js b/src/bbtreeviewnode.js index c9440f0..1623976 100644 --- a/src/bbtreeviewnode.js +++ b/src/bbtreeviewnode.js @@ -1,3 +1,8 @@ +/*** + * BBTreeviewNode + * + * @suppress {missingProperties} + */ class BBTreeviewNode { constructor(treeview) { this.Treeview = treeview; -- 2.45.2 From 09815c251e60a6cd5bcbcff79733802d28fe1d22 Mon Sep 17 00:00:00 2001 From: Ray Date: Tue, 9 Jan 2024 15:10:08 +0000 Subject: [PATCH 5/6] Moved files Fixed render issue with Tags --- build/bbtreeview.min.js | 27 ++++++++------- checkbox.png => build/checkbox.png | Bin collapse.png => build/collapse.png | Bin expand.png => build/expand.png | Bin folder.png => build/folder.png | Bin line.png => build/line.png | Bin uncheckbox.png => build/uncheckbox.png | Bin demo-test.html | 10 +++--- src/bbtreeview.js | 46 ++++++++++++++++++++++--- src/bbtreeviewnode.js | 20 ++++++----- src/checkbox.png | Bin 0 -> 337 bytes src/collapse.png | Bin 0 -> 185 bytes src/expand.png | Bin 0 -> 199 bytes src/folder.png | Bin 0 -> 322 bytes src/line.png | Bin 0 -> 125 bytes src/uncheckbox.png | Bin 0 -> 234 bytes 16 files changed, 72 insertions(+), 31 deletions(-) rename checkbox.png => build/checkbox.png (100%) rename collapse.png => build/collapse.png (100%) rename expand.png => build/expand.png (100%) rename folder.png => build/folder.png (100%) rename line.png => build/line.png (100%) rename uncheckbox.png => build/uncheckbox.png (100%) create mode 100644 src/checkbox.png create mode 100644 src/collapse.png create mode 100644 src/expand.png create mode 100644 src/folder.png create mode 100644 src/line.png create mode 100644 src/uncheckbox.png diff --git a/build/bbtreeview.min.js b/build/bbtreeview.min.js index ad04017..48c8dbc 100644 --- a/build/bbtreeview.min.js +++ b/build/bbtreeview.min.js @@ -2,18 +2,19 @@ * BBTreeview * @version v0.1.2.011 (2024/01/07 0208) */ -class BBTreeview{constructor(a){this.Options=null;this.initialiseComponents(a)}initialiseComponents(a){this.Options=Object.assign({ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1,ShowIcon:!0},a)}get Container(){let a=document.getElementsByTagName("body");if(0>=a.length)return null;a=a[0].querySelectorAll(this.Options.ID);if(!(0>=a.length||(a[0].innerHTML='
                  ',a[0].querySelectorAll("ul.bbtreeview"),0>=a.length)))return a[0]}AddItem(a){a=this.getOptions(a);if(null!= -this.Find(a.ID))return!1;let b=null;if(null!=a.ParentID&&(b=this.Find(a.ParentID),null==b))return!1;b=null==b?this.Container:b.GetChildNode();if(null==b)return!1;const c=this.generateNodeHtml(a);this.appendHtml(b,c);this.Find(a.ID);return!0}Remove(a){a=this.Find(a);if(null==a)return!1;a.Remove();return!0}Clear(){this.initialiseComponents(this.Options)}CollapseAll(){this.GetAllNodes().forEach(function(a){a.Collapse()})}ExpandAll(){this.GetAllNodes().forEach(function(a){a.Expand()})}CheckAll(a){this.Options.ShowCheckbox&& +class BBTreeview{constructor(a){this.Options=null;this.initialiseComponents(a)}initialiseComponents(a){this.Options=Object.assign({ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1,ShowIcon:!0},a);this.createContainer()}get Container(){let a=document.getElementsByTagName("body");if(0>=a.length)return null;a=a[0].querySelectorAll(this.Options.ID);if(0>=a.length)return null;0>=a[0].querySelectorAll("ul.bbtreeview").length&&(a[0].innerHTML='
                    ');a=a[0].querySelectorAll("ul.bbtreeview"); +return 0>=a.length?null:a[0]}AddItem(a){var b=this.getOptions(a);if(null!=this.Find(b.ID))return!1;a=null;if(null!=b.ParentID&&(a=this.Find(b.ParentID),null==a))return!1;a=null==a?this.Container:a.GetChildNode();if(null==a)return!1;b=this.generateNodeHtml(b);this.appendHtml(a,b);return!0}Remove(a){a=this.Find(a);if(null==a)return!1;a.Remove();return!0}Clear(){this.initialiseComponents(this.Options)}CollapseAll(){this.GetAllNodes().forEach(function(a){a.Collapse()})}ExpandAll(){this.GetAllNodes().forEach(function(a){a.Expand()})}CheckAll(a){this.Options.ShowCheckbox&& this.GetAllNodes().forEach(function(b){b.IsChecked=a})}Find(a){if(null==this.Container)console.log("BBTreeview container not found");else{a=this.Container.querySelectorAll("li[data-bbtv-id='"+a+"']");if(0>=a.length)return null;var b=new BBTreeviewNode(this);b.Load(a[0]);return b}}FindByName(a){let b=[];this.GetAllNodes().forEach(function(c){c.Name==a&&b.push(c)});return b}FindByValue(a){let b=[];this.GetAllNodes().forEach(function(c){c.Value==a&&b.push(c)});return b}GetAllNodes(){const a=this,b=a.Container.querySelectorAll("li"); if(0>=b.length)return[];let c=[];b.forEach(function(d){d=d.getAttribute("data-bbtv-id");a.isNullOrWhitespace(d)||(d=a.Find(d),null!=d&&c.push(d))});return c}GetCheckedNodes(){let a=[];this.GetAllNodes().forEach(function(b){b.Checked&&a.push(b)});return a}GetCheckedValues(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Value)});return a}GetCheckedTags(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Tag)});return a}GetSelectedNode(){let a=null;this.GetAllNodes().forEach(function(b){if(b.Highlighted)return a= -b,!1});return a}appendHtml(a,b){let c=document.createElement("template");c.innerHTML=b;c=c.content.firstChild;a.appendChild(c)}generateID(){return"treeviewItem"+(Math.floor(1000001*Math.random())+100).toString()}generateNodeHtml(a){var b="";this.isNullOrWhitespace(a.Tag)||(b=encodeURIComponent(JSON.stringify(a.Tag)));b='
                  • ';b+='
                    ';this.Options.ShowCheckbox&&(b+='
                    ');this.Options.ShowIcon? -(b+='
                    ',b+=''+a.Name+""):b+=''+a.Name+"";return b+"
                      • "}getNode(a){a=(this.isTag(a,"li")?a:this.parentsUntilTagName(a,"li")).getAttribute("data-bbtv-id");return this.isNullOrWhitespace(a)?null:this.Find(a)}getOptions(a){a=Object.assign({ID:null,ParentID:null,Name:"",Hint:"",Value:"",Icon:"folder",Checked:!1,Tag:null},a);null==a.ID&&(a.ID=this.generateID());null==a.Tag&& -(a.Tag="");return a}isNullOrWhitespace(a){return"undefined"==typeof a||null==a?!0:0>=a.toString().trim().length}isTag(a,b){return a.tagName.toLowerCase()==b}parentsUntilTagName(a,b){for(;"undefined"!=typeof a.parentNode;){a=a.parentNode;if("undefined"==typeof a)break;if(this.isTag(a,"ul")&&a.classList.contains("bbtreeview"))return null;if(this.isTag(a,b))break}return a}};class BBTreeviewNode{constructor(a){this.Treeview=a;this.Value=this.Label=this.Container=this.Node=this.ID=null;this.Hint=this.Name="";this.ParentID=null;this.Highlighted=this.IsChecked=!1;this.Tag=null;this.initialiseComponents()}initialiseComponents(){}get IsChecked(){return this.Treeview.Options.ShowCheckbox?this.Node.classList.contains("x"):!1}set IsChecked(a){const b=this;b.setCheckbox(b.Node,a);b.Node.querySelectorAll("li").forEach(function(d){b.setCheckbox(d,a)});let c=b.ParentNode;if(null!= -c)if(b.Treeview.Options.EnablePullUp)for(;;){const d=0=d)}}get IsExpanded(){return this.Node.classList.contains("e")?!0:this.Node.classList.contains("c")?!1:null}get IsHighlighted(){return this.Container.classList.contains("highlighted")}get Tag(){let a=this.Node.getAttribute("data-bbtv-tag"); -return this.Treeview.isNullOrWhitespace(a)?null:JSON.parse(decodeURIComponent(a))}get ParentNodeID(){const a=this.ParentNode;return null==a?null:a.getAttribute("data-bbtv-id")}get ParentNode(){return this.parentsUntilTagName(this.Node,"li")}Load(a){this.ID=a.getAttribute("data-bbtv-id");this.Node=a;this.Container=a.querySelectorAll("div.li")[0];this.Label=a.querySelectorAll("span")[0];this.Value=a.getAttribute("data-bbtv-value");this.Name=this.Label.textContent;this.Hint=this.Label.getAttribute("title"); -this.ParentID=this.ParentNodeID;this.IsChecked=this.IsChecked;this.Highlighted=this.IsHighlighted;this.Tag=this.Tag;this.initialiseComponents_Events()}Collapse(){this.Node.classList.contains("e")&&(this.Node.classList.remove("e"),this.Node.classList.add("c"));this.GetChildNodes().forEach(function(a){a.classList.add("hidden")})}Expand(){this.Node.classList.contains("c")&&(this.Node.classList.remove("c"),this.Node.classList.add("e"));this.GetChildNodes().forEach(function(a){a.classList.remove("hidden")})}GetCheckbox(){if(!this.Treeview.Options.ShowCheckbox)return null; -const a=this.Node.querySelectorAll("div.icon.checkbox");return"undefined"==typeof a?null:a[0]}GetChildNode(){let a=this.Node.querySelectorAll("ul");return 0>=a.length?null:a[0]}GetChildNodes(){const a=this.GetChildNode();if(null==a)return[];let b=a.querySelectorAll("li");if(0>=b.length)return[];let c=[];b.forEach(function(d){"undefined"!=typeof d.parentNode&&d.parentNode==a&&c.push(d)});return c}Remove(){null!=this.ParentNode&&(this.ParentNode.classList.contains("e")&&this.ParentNode.classList.remove("e"), -this.ParentNode.classList.contains("c")&&this.ParentNode.classList.remove("c"));this.Node.parentNode.removeChild(this.Node)}Toggle(){switch(this.IsExpanded){case !0:this.Collapse();break;case !1:this.Expand()}}initialiseComponents_Events(){const a=this;a.Node.addEventListener("click",function(b){b.stopPropagation();b.preventDefault();!a.isTag(b.target,"li")||0>b.offsetX||16b.offsetY||16=a.length||(a=a[0].querySelectorAll(this.Options.ID),0>=a.length||(a[0].innerHTML='
                        '))}generateID(){return"treeviewItem"+(Math.floor(1000001*Math.random())+100).toString()}generateNodeHtml(a){var b="";this.isNullOrWhitespace(a.Tag)||(b=encodeURIComponent(JSON.stringify(a.Tag))); +b='
                      • ';b+='
                        ';this.Options.ShowCheckbox&&(b+='
                        ');this.Options.ShowIcon?(b+='
                        ',b+=''+a.Name+""):b+=''+a.Name+"";return b+"
                          • "}getNode(a){a=(this.isTag(a,"li")?a:this.parentsUntilTagName(a,"li")).getAttribute("data-bbtv-id");return this.isNullOrWhitespace(a)? +null:this.Find(a)}getOptions(a){a=Object.assign({ID:null,ParentID:null,Name:"",Hint:"",Value:"",Icon:"folder",Checked:!1,Tag:null},a);null==a.ID&&(a.ID=this.generateID());null==a.Tag&&(a.Tag="");return a}isNullOrWhitespace(a){return"undefined"==typeof a||null==a?!0:0>=a.toString().trim().length}isTag(a,b){return a.tagName.toLowerCase()==b}parentsUntilTagName(a,b){for(;"undefined"!=typeof a.parentNode;){a=a.parentNode;if("undefined"==typeof a)break;if(this.isTag(a,"ul")&&a.classList.contains("bbtreeview"))return null; +if(this.isTag(a,b))break}return a}};class BBTreeviewNode{constructor(a){this.Treeview=a;this.Value=this.Label=this.Container=this.Node=this.ID=null;this.Hint=this.Name="";this.initialiseComponents()}initialiseComponents(){}get IsChecked(){return this.Treeview.Options.ShowCheckbox?this.Node.classList.contains("x"):!1}set IsChecked(a){const b=this;b.setCheckbox(b.Node,a);b.Node.querySelectorAll("li").forEach(function(d){b.setCheckbox(d,a)});let c=b.ParentNode;if(null!=c)if(b.Treeview.Options.EnablePullUp)for(;;){const d=0=d)}}get IsExpanded(){return this.Node.classList.contains("e")?!0:this.Node.classList.contains("c")?!1:null}get IsHighlighted(){return this.Container.classList.contains("highlighted")}get Tag(){let a=this.Node.getAttribute("data-bbtv-tag");return this.Treeview.isNullOrWhitespace(a)?null:JSON.parse(decodeURIComponent(a))}get ParentID(){return this.ParentNodeID}get ParentNodeID(){const a= +this.ParentNode;return null==a?null:a.getAttribute("data-bbtv-id")}get ParentNode(){return this.parentsUntilTagName(this.Node,"li")}Load(a){this.ID=a.getAttribute("data-bbtv-id");this.Node=a;this.Container=a.querySelectorAll("div.li")[0];this.Label=a.querySelectorAll("span")[0];this.Value=a.getAttribute("data-bbtv-value");this.Name=this.Label.textContent;this.Hint=this.Label.getAttribute("title");this.initialiseComponents_Events()}Collapse(){this.Node.classList.contains("e")&&(this.Node.classList.remove("e"), +this.Node.classList.add("c"));this.GetChildNodes().forEach(function(a){a.classList.add("hidden")})}Expand(){this.Node.classList.contains("c")&&(this.Node.classList.remove("c"),this.Node.classList.add("e"));this.GetChildNodes().forEach(function(a){a.classList.remove("hidden")})}GetCheckbox(){if(!this.Treeview.Options.ShowCheckbox)return null;const a=this.Node.querySelectorAll("div.icon.checkbox");return"undefined"==typeof a?null:a[0]}GetChildNode(){let a=this.Node.querySelectorAll("ul");return 0>= +a.length?null:a[0]}GetChildNodes(){const a=this.GetChildNode();if(null==a)return[];let b=a.querySelectorAll("li");if(0>=b.length)return[];let c=[];b.forEach(function(d){"undefined"!=typeof d.parentNode&&d.parentNode==a&&c.push(d)});return c}Remove(){null!=this.ParentNode&&(this.ParentNode.classList.contains("e")&&this.ParentNode.classList.remove("e"),this.ParentNode.classList.contains("c")&&this.ParentNode.classList.remove("c"));this.Node.parentNode.removeChild(this.Node)}Toggle(){switch(this.IsExpanded){case !0:this.Collapse(); +break;case !1:this.Expand()}}initialiseComponents_Events(){const a=this;a.Node.addEventListener("click",function(b){b.stopPropagation();b.preventDefault();!a.isTag(b.target,"li")||0>b.offsetX||16b.offsetY||16 --> - - - + + + + + diff --git a/src/bbtreeview.js b/src/bbtreeview.js index aa4dc2b..d6d5a52 100644 --- a/src/bbtreeview.js +++ b/src/bbtreeview.js @@ -22,6 +22,8 @@ class BBTreeview { EnablePullUp: false, ShowIcon: true }, options); + + a.createContainer(); } @@ -35,14 +37,16 @@ class BBTreeview { result = result[0].querySelectorAll(a.Options.ID); if (result.length <= 0) { - return; + return null; } - result[0].innerHTML = "
                            "; + if (result[0].querySelectorAll("ul.bbtreeview").length <= 0) { + result[0].innerHTML = "
                              "; + } - result[0].querySelectorAll("ul.bbtreeview"); + result = result[0].querySelectorAll("ul.bbtreeview"); if (result.length <= 0) { - return; + return null; } return result[0]; @@ -81,7 +85,7 @@ class BBTreeview { // Add node a.appendHtml(parentNode, nodeHtml); - const node = a.Find(_options.ID); + // const node = a.Find(_options.ID); return true; } @@ -267,7 +271,39 @@ class BBTreeview { node = node.content.firstChild; + console.log(el); + console.log(node); + el.appendChild(node); + + // const frag = document.createDocumentFragment(); + // const span = document.createElement("span"); + // span.innerHTML = html; + + // for (var i = 0; i < span.childNodes.length; i++) { + // frag.appendChild(span.childNodes[i]); + // } + + // console.log(el); + // console.log(frag); + + // el.appendChild(frag); + } + + createContainer() { + const a = this; + + let result = document.getElementsByTagName("body"); + if (result.length <= 0) { + return; + } + + result = result[0].querySelectorAll(a.Options.ID); + if (result.length <= 0) { + return; + } + + result[0].innerHTML = "
                                "; } generateID() { diff --git a/src/bbtreeviewnode.js b/src/bbtreeviewnode.js index 1623976..cb8702f 100644 --- a/src/bbtreeviewnode.js +++ b/src/bbtreeviewnode.js @@ -17,10 +17,9 @@ class BBTreeviewNode { this.Name = ""; this.Hint = ""; - this.ParentID = null; - this.IsChecked = false; - this.Highlighted = false; - this.Tag = null; + // this.ParentID = null; + // this.IsChecked = false; + // this.Highlighted = false; this.initialiseComponents(); } @@ -117,6 +116,8 @@ class BBTreeviewNode { return JSON.parse(decodeURIComponent(tag)); } + get ParentID() { return this.ParentNodeID; } + get ParentNodeID() { const a = this; @@ -148,10 +149,10 @@ class BBTreeviewNode { a.Name = a.Label.textContent; a.Hint = a.Label.getAttribute("title"); - a.ParentID = a.ParentNodeID; - a.IsChecked = a.IsChecked; - a.Highlighted = a.IsHighlighted; - a.Tag = a.Tag; + // a.ParentID = a.ParentNodeID; + // a.IsChecked = a.IsChecked; + // a.Highlighted = a.IsHighlighted; + // a.Tag = a.Tag; a.initialiseComponents_Events(); } @@ -407,6 +408,9 @@ class BBTreeviewNode { } setCheckbox(el, value) { + + console.log(el); + if (value) { if (!el.classList.contains("x")) { el.classList.add("x"); diff --git a/src/checkbox.png b/src/checkbox.png new file mode 100644 index 0000000000000000000000000000000000000000..d5615108deb291e4dae5fd696e77e71b708894b6 GIT binary patch literal 337 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|SkfJR9T^xl z_H+M9WCij$3p^r=85sBuf-vKbiP>*~g3ml%978PplO=vN2znVyNJ~#=Sm~zljEOse zJ-%_rzc)8G?-kHn#i(%7K}~I$wSb_{hxhmGMHRO4Wiar&v@|wydNnhM2OOMwdAa}n z-~a#H+fP`}a#+F6Lq>)FNinmbjKb~*_5qD16EwL>jyfvv8nLk1G4XC>eq`>jbGd`~ zfv<|Y8F*&QoXOfK(xvNgfcJ_9OX^|<9%c{LE9MX0-{1efQAERS!ol!_AA6cN1v0cT zK0iNyKgXB#%mTZW65ETPpNnnMa%5Cl%Dmuph@_F|!@$E>;JVWk ee!c?-7#RL!!lvI66}TXMsm# zF#`kNArNL1)$nQn3aWd$IEF}EPEHUJ5eZ2!C@d^AOyFRg#Asl&*G84Wm1U8eb3i}< ZBZHzM*EO$=bs<1444$rjF6*2UngAnZG_n8y literal 0 HcmV?d00001 diff --git a/src/expand.png b/src/expand.png new file mode 100644 index 0000000000000000000000000000000000000000..72f77673d71288cf01f3f535c86b9a89891cf74f GIT binary patch literal 199 zcmeAS@N?(olHy`uVBq!ia0vp^oFL4?3?zm2ODh8@#^NA%Cx&(BWL^R}Ea{HEjtmSN z`?>!lvI6-k0X`wFXV0Epvu4e?bLUpATJ`_`|CK9O=H})~Nl6tH6euYvF*7r-UcI`d zzU(tlJ!gSOWHAE+-yslY6xHx*01E1Ox;TbNTux395fKSVFeof6G)&+q^ep6Ln53$( nsW_E;4zF1Iii=`ESq26>Kkm1NTc*zf>SOS9^>bP0l+XkKT>&~= literal 0 HcmV?d00001 diff --git a/src/folder.png b/src/folder.png new file mode 100644 index 0000000000000000000000000000000000000000..8527862cf8e4e872637387de11b4c82e151fbf6d GIT binary patch literal 322 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|SkfJR9T^xl z_H+M9WCij$3p^r=85sBufiR<}hF1en@VcjqV~B-+@&XZqeO3<>51%-(rQzX!`_vT@ z9Dn|wKX5@YZR29DQ^z?a;^%+ab^OpV{qqM`A7Bwp{_**z5jlR|HgZoyB0Alcv(Jk=Kr*0a|Vuo zfBzo)@c1(Gfi6|G&Dujh7jm9{fIjn`(sh<}({61~E&x@h)g$ zjF@a>_~7{R-~a#p`S+vYVM%xNb!1@J z*w6hZkrl}2EbxddW?8eR=RK_O2U#}J9|A{9u3;Thx N44$rjF6*2Ung9~g97O;C literal 0 HcmV?d00001 diff --git a/src/uncheckbox.png b/src/uncheckbox.png new file mode 100644 index 0000000000000000000000000000000000000000..8b6fd109ddc1a92ecd2875850d2acbe2771b4990 GIT binary patch literal 234 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|SkfJR9T^xl z_H+M9WCij$3p^r=85sBuf-vKbiP>*~g7uy*jv*HQ$r8UB1ig$Uq@|}btaMX&#>Ab# z9^bg*-SU4GYf8=LmXs|v_VpXV| zV5K3>Gh>0t&4eoqS`rRHRzH4!U$3RC{5a}KNyD2aD}^|AAD!~T#0hB%>smGBWf~e8 Z88(|+-jrup><4rTgQu&X%Q~loCIDfbN7(=X literal 0 HcmV?d00001 -- 2.45.2 From ae831786f0470bbbcac0199c72caaad99ebd4e17 Mon Sep 17 00:00:00 2001 From: Ray Date: Tue, 9 Jan 2024 21:26:40 +0000 Subject: [PATCH 6/6] Abandoned version 0.1.2.011 Refactored for release 0.1.2.044 with class architecture --- build/bbtreeview.min.js | 32 ++-- src/bbtreeview.js | 156 +++++++++---------- src/bbtreeviewnode.js | 330 +++++++++++++++++++--------------------- src/version.txt | 2 +- 4 files changed, 239 insertions(+), 281 deletions(-) diff --git a/build/bbtreeview.min.js b/build/bbtreeview.min.js index 48c8dbc..6c4f307 100644 --- a/build/bbtreeview.min.js +++ b/build/bbtreeview.min.js @@ -1,20 +1,18 @@ /** * BBTreeview - * @version v0.1.2.011 (2024/01/07 0208) + * @version v0.1.2.044 (2024/01/09 2118) */ -class BBTreeview{constructor(a){this.Options=null;this.initialiseComponents(a)}initialiseComponents(a){this.Options=Object.assign({ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1,ShowIcon:!0},a);this.createContainer()}get Container(){let a=document.getElementsByTagName("body");if(0>=a.length)return null;a=a[0].querySelectorAll(this.Options.ID);if(0>=a.length)return null;0>=a[0].querySelectorAll("ul.bbtreeview").length&&(a[0].innerHTML='
                                  ');a=a[0].querySelectorAll("ul.bbtreeview"); -return 0>=a.length?null:a[0]}AddItem(a){var b=this.getOptions(a);if(null!=this.Find(b.ID))return!1;a=null;if(null!=b.ParentID&&(a=this.Find(b.ParentID),null==a))return!1;a=null==a?this.Container:a.GetChildNode();if(null==a)return!1;b=this.generateNodeHtml(b);this.appendHtml(a,b);return!0}Remove(a){a=this.Find(a);if(null==a)return!1;a.Remove();return!0}Clear(){this.initialiseComponents(this.Options)}CollapseAll(){this.GetAllNodes().forEach(function(a){a.Collapse()})}ExpandAll(){this.GetAllNodes().forEach(function(a){a.Expand()})}CheckAll(a){this.Options.ShowCheckbox&& -this.GetAllNodes().forEach(function(b){b.IsChecked=a})}Find(a){if(null==this.Container)console.log("BBTreeview container not found");else{a=this.Container.querySelectorAll("li[data-bbtv-id='"+a+"']");if(0>=a.length)return null;var b=new BBTreeviewNode(this);b.Load(a[0]);return b}}FindByName(a){let b=[];this.GetAllNodes().forEach(function(c){c.Name==a&&b.push(c)});return b}FindByValue(a){let b=[];this.GetAllNodes().forEach(function(c){c.Value==a&&b.push(c)});return b}GetAllNodes(){const a=this,b=a.Container.querySelectorAll("li"); -if(0>=b.length)return[];let c=[];b.forEach(function(d){d=d.getAttribute("data-bbtv-id");a.isNullOrWhitespace(d)||(d=a.Find(d),null!=d&&c.push(d))});return c}GetCheckedNodes(){let a=[];this.GetAllNodes().forEach(function(b){b.Checked&&a.push(b)});return a}GetCheckedValues(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Value)});return a}GetCheckedTags(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Tag)});return a}GetSelectedNode(){let a=null;this.GetAllNodes().forEach(function(b){if(b.Highlighted)return a= -b,!1});return a}appendHtml(a,b){let c=document.createElement("template");c.innerHTML=b;c=c.content.firstChild;console.log(a);console.log(c);a.appendChild(c)}createContainer(){let a=document.getElementsByTagName("body");0>=a.length||(a=a[0].querySelectorAll(this.Options.ID),0>=a.length||(a[0].innerHTML='
                                    '))}generateID(){return"treeviewItem"+(Math.floor(1000001*Math.random())+100).toString()}generateNodeHtml(a){var b="";this.isNullOrWhitespace(a.Tag)||(b=encodeURIComponent(JSON.stringify(a.Tag))); -b='
                                  • ';b+='
                                    ';this.Options.ShowCheckbox&&(b+='
                                    ');this.Options.ShowIcon?(b+='
                                    ',b+=''+a.Name+""):b+=''+a.Name+"";return b+"
                                      • "}getNode(a){a=(this.isTag(a,"li")?a:this.parentsUntilTagName(a,"li")).getAttribute("data-bbtv-id");return this.isNullOrWhitespace(a)? -null:this.Find(a)}getOptions(a){a=Object.assign({ID:null,ParentID:null,Name:"",Hint:"",Value:"",Icon:"folder",Checked:!1,Tag:null},a);null==a.ID&&(a.ID=this.generateID());null==a.Tag&&(a.Tag="");return a}isNullOrWhitespace(a){return"undefined"==typeof a||null==a?!0:0>=a.toString().trim().length}isTag(a,b){return a.tagName.toLowerCase()==b}parentsUntilTagName(a,b){for(;"undefined"!=typeof a.parentNode;){a=a.parentNode;if("undefined"==typeof a)break;if(this.isTag(a,"ul")&&a.classList.contains("bbtreeview"))return null; -if(this.isTag(a,b))break}return a}};class BBTreeviewNode{constructor(a){this.Treeview=a;this.Value=this.Label=this.Container=this.Node=this.ID=null;this.Hint=this.Name="";this.initialiseComponents()}initialiseComponents(){}get IsChecked(){return this.Treeview.Options.ShowCheckbox?this.Node.classList.contains("x"):!1}set IsChecked(a){const b=this;b.setCheckbox(b.Node,a);b.Node.querySelectorAll("li").forEach(function(d){b.setCheckbox(d,a)});let c=b.ParentNode;if(null!=c)if(b.Treeview.Options.EnablePullUp)for(;;){const d=0=d)}}get IsExpanded(){return this.Node.classList.contains("e")?!0:this.Node.classList.contains("c")?!1:null}get IsHighlighted(){return this.Container.classList.contains("highlighted")}get Tag(){let a=this.Node.getAttribute("data-bbtv-tag");return this.Treeview.isNullOrWhitespace(a)?null:JSON.parse(decodeURIComponent(a))}get ParentID(){return this.ParentNodeID}get ParentNodeID(){const a= -this.ParentNode;return null==a?null:a.getAttribute("data-bbtv-id")}get ParentNode(){return this.parentsUntilTagName(this.Node,"li")}Load(a){this.ID=a.getAttribute("data-bbtv-id");this.Node=a;this.Container=a.querySelectorAll("div.li")[0];this.Label=a.querySelectorAll("span")[0];this.Value=a.getAttribute("data-bbtv-value");this.Name=this.Label.textContent;this.Hint=this.Label.getAttribute("title");this.initialiseComponents_Events()}Collapse(){this.Node.classList.contains("e")&&(this.Node.classList.remove("e"), -this.Node.classList.add("c"));this.GetChildNodes().forEach(function(a){a.classList.add("hidden")})}Expand(){this.Node.classList.contains("c")&&(this.Node.classList.remove("c"),this.Node.classList.add("e"));this.GetChildNodes().forEach(function(a){a.classList.remove("hidden")})}GetCheckbox(){if(!this.Treeview.Options.ShowCheckbox)return null;const a=this.Node.querySelectorAll("div.icon.checkbox");return"undefined"==typeof a?null:a[0]}GetChildNode(){let a=this.Node.querySelectorAll("ul");return 0>= -a.length?null:a[0]}GetChildNodes(){const a=this.GetChildNode();if(null==a)return[];let b=a.querySelectorAll("li");if(0>=b.length)return[];let c=[];b.forEach(function(d){"undefined"!=typeof d.parentNode&&d.parentNode==a&&c.push(d)});return c}Remove(){null!=this.ParentNode&&(this.ParentNode.classList.contains("e")&&this.ParentNode.classList.remove("e"),this.ParentNode.classList.contains("c")&&this.ParentNode.classList.remove("c"));this.Node.parentNode.removeChild(this.Node)}Toggle(){switch(this.IsExpanded){case !0:this.Collapse(); -break;case !1:this.Expand()}}initialiseComponents_Events(){const a=this;a.Node.addEventListener("click",function(b){b.stopPropagation();b.preventDefault();!a.isTag(b.target,"li")||0>b.offsetX||16b.offsetY||16=a.length?null:new BBTreeviewNode(this,a[0])}FindByName(a){let b=[];this.GetAllNodes().forEach(function(c){c.Name==a&&b.push(c)});return b}FindByValue(a){let b=[];this.GetAllNodes().forEach(function(c){c.Value==a&&b.push(c)});return b}GetAllNodes(){const a=this,b=a.Container.querySelectorAll("li");if(0>=b.length)return[];let c=[];b.forEach(function(d){d=d.getAttribute("data-bbtv-id"); +a.isNullOrWhitespace(d)||(d=a.Find(d),null!=d&&c.push(d))});return c}GetCheckedNodes(){let a=[];this.GetAllNodes().forEach(function(b){b.IsChecked&&a.push(b)});return a}GetCheckedValues(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Value)});return a}GetCheckedTags(){let a=[];this.GetCheckedNodes().map(function(b){a.push(b.Tag)});return a}GetSelectedNode(){let a=null;this.GetAllNodes().forEach(function(b){if(b.IsHighlighted)return a=b,!1});return a}appendHtml(a,b){let c=document.createElement("template"); +c.innerHTML=b;c=c.content.firstChild;a.appendChild(c)}createTreeview(){let a=this.getContainer();null!=a&&(a.innerHTML='
                                        ')}generateID(){return"treeviewItem"+(Math.floor(1000001*Math.random())+100).toString()}generateNodeHtml(a){var b="";this.isNullOrWhitespace(a.Tag)||(b=encodeURIComponent(JSON.stringify(a.Tag)));b='
                                      • ';b+='
                                        ';this.Options.ShowCheckbox&&(b+='
                                        '); +this.Options.ShowIcon?(b+='
                                        ',b+=''+a.Name+""):b+=''+a.Name+"";return b+"
                                          • "}getContainer(){let a=document.getElementsByTagName("body");if(!(0>=a.length||(a=a[0],a=a.querySelectorAll(this.Options.ID),0>=a.length)))return a=a[0]}getNode(a){a=(this.isTag(a,"li")?a:this.parentsUntilTagName(a,"li")).getAttribute("data-bbtv-id");return this.isNullOrWhitespace(a)?null:this.Find(a)}getTreeview(){let a= +this.getContainer();if(null!=a&&(a=a.querySelectorAll("ul.bbtreeview"),!(0>=a.length)))return a=a[0]}isNullOrWhitespace(a){return"undefined"==typeof a||null==a?!0:0>=a.toString().trim().length}isTag(a,b){return a.tagName.toLowerCase()==b}parentsUntilTagName(a,b){for(;"undefined"!=typeof a.parentNode;){a=a.parentNode;if("undefined"==typeof a)break;if(this.isTag(a,"ul")&&a.classList.contains("bbtreeview"))return null;if(this.isTag(a,b))break}return a}};class BBTreeviewNode{constructor(a,b){this.Treeview=a;this.Node=b}get Checkbox(){if(!this.Treeview.Options.ShowCheckbox)return null;const a=this.Node.querySelectorAll("div.icon.checkbox");return"undefined"==typeof a?null:a[0]}get ChildNode(){let a=this.Node.querySelectorAll("ul");return 0>=a.length?null:a[0]}get ChildNodes(){const a=this.ChildNode;if(null==a)return[];let b=a.querySelectorAll("li");if(0>=b.length)return[];let c=[];b.forEach(function(d){"undefined"!=typeof d.parentNode&&d.parentNode== +a&&c.push(d)});return c}get IsChecked(){return this.Treeview.Options.ShowCheckbox?this.Node.classList.contains("x"):!1}get Container(){return this.Node.querySelectorAll("div.li")[0]}get Hint(){return this.Label.getAttribute("title")}get ID(){return this.Node.getAttribute("data-bbtv-id")}get IsExpanded(){return this.Node.classList.contains("e")?!0:this.Node.classList.contains("c")?!1:null}get IsHighlighted(){return this.Container.classList.contains("highlighted")}get Label(){return this.Node.querySelectorAll("span")[0]}get Name(){return this.Label.textContent}get ParentID(){const a= +this.ParentNode;return null==a?null:a.getAttribute("data-bbtv-id")}get ParentNode(){return this.parentsUntilTagName(this.Node,"li")}get Tag(){let a=this.Node.getAttribute("data-bbtv-tag");return this.Treeview.isNullOrWhitespace(a)?null:JSON.parse(decodeURIComponent(a))}get Value(){return this.Node.getAttribute("data-bbtv-value")}Check(a){const b=this;b.setCheckbox(b.Node,a);b.Node.querySelectorAll("li").forEach(function(d){b.setCheckbox(d,a)});let c=b.ParentNode;if(null!=c)if(b.Treeview.Options.EnablePullUp)for(;;){const d= +0=d)}}Collapse(){this.Node.classList.contains("e")&&(this.Node.classList.remove("e"),this.Node.classList.add("c"));this.ChildNodes.forEach(function(a){a.classList.add("hidden")})}Expand(){this.Node.classList.contains("c")&&(this.Node.classList.remove("c"),this.Node.classList.add("e")); +this.ChildNodes.forEach(function(a){a.classList.remove("hidden")})}Remove(){null!=this.ParentNode&&(this.ParentNode.classList.contains("e")&&this.ParentNode.classList.remove("e"),this.ParentNode.classList.contains("c")&&this.ParentNode.classList.remove("c"));this.Node.parentNode.removeChild(this.Node)}InvalidateEvents(){const a=this;a.Node.addEventListener("click",function(b){b.stopPropagation();b.preventDefault();!a.isTag(b.target,"li")||0>b.offsetX||16b.offsetY||16"; - } - - result = result[0].querySelectorAll("ul.bbtreeview"); - if (result.length <= 0) { - return null; - } - - return result[0]; + return this.getTreeview(); } + AddItem(options) { const a = this; - const _options = a.getOptions(options); + 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) { @@ -73,11 +61,7 @@ class BBTreeview { if (parentNode == null) { parentNode = a.Container; } else { - parentNode = parentNode.GetChildNode(); - } - - if (parentNode == null) { - return false; + parentNode = parentNode.ChildNode; } const nodeHtml = a.generateNodeHtml(_options); @@ -85,7 +69,10 @@ class BBTreeview { // Add node a.appendHtml(parentNode, nodeHtml); - // const node = a.Find(_options.ID); + const node = a.Find(_options.ID); + + // Setup events + node.InvalidateEvents(); return true; } @@ -133,7 +120,7 @@ class BBTreeview { } a.GetAllNodes().forEach(function(e) { - e.IsChecked = value; + e.Check(value); }); } @@ -150,8 +137,7 @@ class BBTreeview { return null; } - let treenode = new BBTreeviewNode(this); - treenode.Load(node[0]); + const treenode = new BBTreeviewNode(this, node[0]); return treenode; } @@ -217,7 +203,7 @@ class BBTreeview { let response = []; a.GetAllNodes().forEach(function(e) { - if (!e.Checked) { + if (!e.IsChecked) { return; } @@ -238,7 +224,6 @@ class BBTreeview { return response; } - GetCheckedTags() { const a = this; @@ -255,7 +240,7 @@ class BBTreeview { let response = null; a.GetAllNodes().forEach(function(e) { - if (e.Highlighted) { + if (e.IsHighlighted) { response = e; return false; @@ -265,45 +250,23 @@ class BBTreeview { return response; } + appendHtml(el, html) { let node = document.createElement('template'); node.innerHTML = html; node = node.content.firstChild; - console.log(el); - console.log(node); - el.appendChild(node); - - // const frag = document.createDocumentFragment(); - // const span = document.createElement("span"); - // span.innerHTML = html; - - // for (var i = 0; i < span.childNodes.length; i++) { - // frag.appendChild(span.childNodes[i]); - // } - - // console.log(el); - // console.log(frag); - - // el.appendChild(frag); } - createContainer() { + createTreeview() { const a = this; - let result = document.getElementsByTagName("body"); - if (result.length <= 0) { - return; + let container = a.getContainer(); + if (container != null) { + container.innerHTML = "
                                            "; } - - result = result[0].querySelectorAll(a.Options.ID); - if (result.length <= 0) { - return; - } - - result[0].innerHTML = "
                                              "; } generateID() { @@ -339,6 +302,26 @@ class BBTreeview { 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; @@ -358,29 +341,26 @@ class BBTreeview { return a.Find(id); } - getOptions(options) { + getTreeview() { const a = this; - let _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(); + let container = a.getContainer(); + if (container == null) { + return; } - if (_options.Tag == null) { - _options.Tag = ""; + // if (container.querySelectorAll("ul.bbtreeview").length <= 0) { + // container.innerHTML = "
                                                "; + // } + + container = container.querySelectorAll("ul.bbtreeview"); + if (container.length <= 0) { + return; } - return _options; + container = container[0]; + + return container; } isNullOrWhitespace(value) { diff --git a/src/bbtreeviewnode.js b/src/bbtreeviewnode.js index cb8702f..1c8a64e 100644 --- a/src/bbtreeviewnode.js +++ b/src/bbtreeviewnode.js @@ -1,34 +1,71 @@ -/*** - * BBTreeviewNode - * - * @suppress {missingProperties} - */ class BBTreeviewNode { - constructor(treeview) { + constructor(treeview, node) { this.Treeview = treeview; + this.Node = node; - this.ID = null; - this.Node = null; - - this.Container = null; - this.Label = null; - this.Value = null; - - this.Name = ""; - this.Hint = ""; - - // this.ParentID = null; - // this.IsChecked = false; - // this.Highlighted = false; - - this.initialiseComponents(); + // this.initialiseComponents(); } + // initialiseComponents() { + // const a = this; - initialiseComponents() { + // } + + + get Checkbox() { 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]; } + get ChildNode() { + const a = this; + + let result = a.Node.querySelectorAll("ul"); + if (result.length <= 0) { + return null; + } + + return result[0]; + } + + get ChildNodes() { + const a = this; + + const childNode = a.ChildNode; + 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; + } get IsChecked() { const a = this; @@ -40,7 +77,80 @@ class BBTreeviewNode { return a.Node.classList.contains("x"); } - set IsChecked(value) { + get Container() { + return this.Node.querySelectorAll("div.li")[0]; + } + + get Hint() { + return this.Label.getAttribute("title"); + } + + get ID() { + return this.Node.getAttribute("data-bbtv-id"); + } + + get IsExpanded() { + const a = this; + + if (a.Node.classList.contains("e")) { + return true; + } + + if (a.Node.classList.contains("c")) { + return false; + } + + return null; + } + + get IsHighlighted() { + const a = this; + + return a.Container.classList.contains("highlighted"); + } + + get Label() { + return this.Node.querySelectorAll("span")[0]; + } + + get Name() { + return this.Label.textContent; + } + + get ParentID() { + const a = this; + + const parentNode = a.ParentNode; + if (parentNode == null) { + return null; + } + + return parentNode.getAttribute("data-bbtv-id"); + } + + get ParentNode() { + const a = this; + + return a.parentsUntilTagName(a.Node, "li"); + } + + get Tag() { + const a = this; + + let tag = a.Node.getAttribute("data-bbtv-tag"); + if (a.Treeview.isNullOrWhitespace(tag)) { + return null; + } + + return JSON.parse(decodeURIComponent(tag)); + } + + get Value() { + return this.Node.getAttribute("data-bbtv-value"); + } + + + Check(value) { const a = this; a.setCheckbox(a.Node, value); @@ -85,78 +195,6 @@ class BBTreeviewNode { } } - get IsExpanded() { - const a = this; - - if (a.Node.classList.contains("e")) { - return true; - } - - if (a.Node.classList.contains("c")) { - return false; - } - - return null; - } - - get IsHighlighted() { - const a = this; - - return (a.Container.classList.contains("highlighted")); - } - - get Tag() { - const a = this; - - let tag = a.Node.getAttribute("data-bbtv-tag"); - if (a.Treeview.isNullOrWhitespace(tag)) { - return null; - } - - return JSON.parse(decodeURIComponent(tag)); - } - - get ParentID() { return this.ParentNodeID; } - - get ParentNodeID() { - const a = this; - - const parentNode = a.ParentNode; - if (parentNode == null) { - return null; - } - - return parentNode.getAttribute("data-bbtv-id"); - } - - get ParentNode() { - const a = this; - - return a.parentsUntilTagName(a.Node, "li"); - } - - - Load(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.ParentNodeID; - // a.IsChecked = a.IsChecked; - // a.Highlighted = a.IsHighlighted; - // a.Tag = a.Tag; - - a.initialiseComponents_Events(); - } - Collapse() { const a = this; @@ -165,7 +203,7 @@ class BBTreeviewNode { a.Node.classList.add("c"); } - a.GetChildNodes().forEach(function(e) { + a.ChildNodes.forEach(function(e) { e.classList.add("hidden"); }); } @@ -178,66 +216,11 @@ class BBTreeviewNode { a.Node.classList.add("e"); } - a.GetChildNodes().forEach(function(e) { + a.ChildNodes.forEach(function(e) { e.classList.remove("hidden"); }); } - GetCheckbox() { - 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]; - } - - GetChildNode() { - const a = this; - - let result = a.Node.querySelectorAll("ul"); - if (result.length <= 0) { - return null; - } - - return result[0]; - } - - GetChildNodes() { - 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; - } - Remove() { const a = this; @@ -254,22 +237,7 @@ class BBTreeviewNode { a.Node.parentNode.removeChild(a.Node); } - Toggle() { - const a = this; - - switch (a.IsExpanded) { - case true: - a.Collapse(); - break; - case false: - a.Expand(); - break; - default: break; - } - } - - - initialiseComponents_Events() { + InvalidateEvents() { const a = this; // collapsible icon behaviour @@ -308,21 +276,21 @@ class BBTreeviewNode { // checkbox behaviour if (a.Treeview.Options.ShowCheckbox) { - a.GetCheckbox().addEventListener("mousedown", function(e){ + a.Checkbox.addEventListener("mousedown", function(e){ e.stopPropagation(); e.preventDefault(); - a.IsChecked = !a.IsChecked; + a.Check(!a.IsChecked); }); - a.GetCheckbox().addEventListener("click", function(e){ + a.Checkbox.addEventListener("click", function(e){ e.stopPropagation(); e.preventDefault(); // do nothing }); - a.GetCheckbox().addEventListener("dblclick", function(e){ + a.Checkbox.addEventListener("dblclick", function(e){ e.stopPropagation(); e.preventDefault(); @@ -355,6 +323,21 @@ class BBTreeviewNode { a.invalidateCollapsible(); } + Toggle() { + const a = this; + + switch (a.IsExpanded) { + case true: + a.Collapse(); + break; + case false: + a.Expand(); + break; + default: break; + } + } + + invalidateCollapsible() { const a = this; @@ -408,9 +391,6 @@ class BBTreeviewNode { } setCheckbox(el, value) { - - console.log(el); - if (value) { if (!el.classList.contains("x")) { el.classList.add("x"); diff --git a/src/version.txt b/src/version.txt index 2b80535..c126fb0 100644 --- a/src/version.txt +++ b/src/version.txt @@ -1,4 +1,4 @@ /** * BBTreeview - * @version v0.1.2.011 (2024/01/07 0208) + * @version v0.1.2.044 (2024/01/09 2118) */ -- 2.45.2