From 09815c251e60a6cd5bcbcff79733802d28fe1d22 Mon Sep 17 00:00:00 2001 From: Ray Date: Tue, 9 Jan 2024 15:10:08 +0000 Subject: [PATCH] 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