7 lines
11 KiB
JavaScript
7 lines
11 KiB
JavaScript
/**
|
|
* 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='<ul class="bbtreeview"></ul>',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='<li data-bbtv-id="'+options.ID+'" data-bbtv-value="'+options.Value+'" data-bbtv-tag="'+tag+'">';return html+='<div class="li">',a.Options.ShowCheckbox&&(html+='<div class="icon checkbox"></div>'),a.Options.ShowIcon?(html+='<div class="icon '+options.Icon+'"></div>',html+='<span title="'+options.Hint+'">'+options.Name+"</span>"):html+='<span class="noicon" title="'+options.Hint+'">'+options.Name+"</span>",html+="</div>",html+="<ul></ul>",html+="</li>",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")}; |