Added build pipeline
Changed to use sprites Added guardian and cascade options
This commit is contained in:
Ray
parent
105587dc5e
commit
f21c0e0049
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/dist
|
||||
/node_modules
|
||||
22
build.bat
22
build.bat
@ -1,22 +0,0 @@
|
||||
del bbtreeview.min.js
|
||||
del bbtreeview.min.tmp
|
||||
del build/bbtreeview.min.js
|
||||
|
||||
cd src
|
||||
|
||||
type version.txt >> ../bbtreeview.min.js
|
||||
|
||||
@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..
|
||||
|
||||
type bbtreeview.min.tmp >> bbtreeview.min.js
|
||||
|
||||
move bbtreeview.min.js build/bbtreeview.min.js
|
||||
|
||||
del bbtreeview.min.tmp
|
||||
5
build/bbtreeview.min.css
vendored
5
build/bbtreeview.min.css
vendored
@ -1,5 +0,0 @@
|
||||
/**
|
||||
* BBTreeview
|
||||
* @version v0.1.1.006 (2023/09/27 2218)
|
||||
*/
|
||||
ul.bbtreeview{background-image:url(line.png);background-position:4px 8px;background-repeat:repeat-y;list-style:none;padding:0;margin:0 0 0 8px}ul.bbtreeview ul{background-image:url(line.png);background-position:4px 8px;background-repeat:repeat-y;list-style:none;margin:0 0 0 8px;padding:0}ul.bbtreeview li{background-position:0 calc((1.2em - 9px)/ 2);background-repeat:no-repeat;cursor:default;display:block;padding-left:14px;width:100%}ul.bbtreeview li.c{background-image:url(expand.png)}ul.bbtreeview li.e{background-image:url(collapse.png)}ul.bbtreeview li.hidden{display:none}ul.bbtreeview div.li{display:block;height:1.2em;padding-left:4px}ul.bbtreeview div.li.highlighted{background-color:rgb(169,201,249,.7)}ul.bbtreeview div.li>div.icon{background-position:0 center;background-repeat:no-repeat;display:inline-block;height:100%;width:calc(16px)}ul.bbtreeview div.li>div.folder{background-image:url(folder.png)}ul.bbtreeview li>div.li>div.checkbox{background-image:url(uncheckbox.png)}ul.bbtreeview li.x>div.li>div.checkbox{background-image:url(checkbox.png)}ul.bbtreeview div.li>span{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;padding-left:6px;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}ul.bbtreeview div.li>span.noicon{padding-left:0!important}
|
||||
18
build/bbtreeview.min.js
vendored
18
build/bbtreeview.min.js
vendored
@ -1,18 +0,0 @@
|
||||
/**
|
||||
* BBTreeview
|
||||
* @version v0.1.2.044 (2024/01/09 2118)
|
||||
*/
|
||||
class BBTreeview{constructor(a){this.Options={};this.initialiseComponents(a)}initialiseComponents(a){this.Options=Object.assign({ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1,ShowIcon:!0},a);this.createTreeview()}get Container(){return this.getTreeview()}AddItem(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="");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.ChildNode;const c=this.generateNodeHtml(a);this.appendHtml(b,c);this.Find(a.ID).InvalidateEvents();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.Check(a)})}Find(a){if(null==
|
||||
this.Container)console.log("BBTreeview container not found");else return a=this.Container.querySelectorAll("li[data-bbtv-id='"+a+"']"),0>=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='<ul class="bbtreeview"></ul>')}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='<li data-bbtv-id="'+a.ID+'" data-bbtv-value="'+a.Value+'" data-bbtv-tag="'+b+'">';b+='<div class="li">';this.Options.ShowCheckbox&&(b+='<div class="icon checkbox"></div>');
|
||||
this.Options.ShowIcon?(b+='<div class="icon '+a.Icon+'"></div>',b+='<span title="'+a.Hint+'">'+a.Name+"</span>"):b+='<span class="noicon" title="'+a.Hint+'">'+a.Name+"</span>";return b+"</div><ul></ul></li>"}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<c.querySelectorAll("li.x").length;b.setCheckbox(c,d);c=b.Treeview.getNode(c);c=c.ParentNode;if(null==c)break}else{let d=0;c.querySelectorAll("li").forEach(function(e){e.classList.contains("x")||d++});b.setCheckbox(c,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||16<b.offsetX||0>b.offsetY||16<b.offsetY||(b=a.Treeview.getNode(b.target),
|
||||
null!=b&&b.Toggle())});a.Container.addEventListener("dblclick",function(b){b.stopPropagation();b.preventDefault();b=a.Treeview.getNode(b.target);null!=b&&b.Toggle()});a.Treeview.Options.ShowCheckbox&&(a.Checkbox.addEventListener("mousedown",function(b){b.stopPropagation();b.preventDefault();a.Check(!a.IsChecked)}),a.Checkbox.addEventListener("click",function(b){b.stopPropagation();b.preventDefault()}),a.Checkbox.addEventListener("dblclick",function(b){b.stopPropagation();b.preventDefault()}));a.Container.addEventListener("mousedown",
|
||||
function(b){b.stopPropagation();b.preventDefault();b=a.Treeview.getNode(b.target);null!=b&&(a.Treeview.Container.querySelectorAll("div.highlighted").forEach(function(c){c.classList.remove("highlighted")}),a.Treeview.Options.ShowSelection&&b.Container.classList.add("highlighted"))});a.invalidateCollapsible()}Toggle(){switch(this.IsExpanded){case !0:this.Collapse();break;case !1:this.Expand()}}invalidateCollapsible(){null!=this.ParentNode&&(this.ParentNode.classList.contains("c")?this.Node.classList.add("hidden"):
|
||||
(this.ParentNode.classList.contains("e")||this.ParentNode.classList.add("e"),this.Node.classList.remove("hidden")))}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}setCheckbox(a,b){b?a.classList.contains("x")||a.classList.add("x"):a.classList.contains("x")&&a.classList.remove("x")}};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 337 B |
Binary file not shown.
|
Before Width: | Height: | Size: 185 B |
BIN
build/expand.png
BIN
build/expand.png
Binary file not shown.
|
Before Width: | Height: | Size: 199 B |
BIN
build/folder.png
BIN
build/folder.png
Binary file not shown.
|
Before Width: | Height: | Size: 322 B |
BIN
build/line.png
BIN
build/line.png
Binary file not shown.
|
Before Width: | Height: | Size: 125 B |
Binary file not shown.
|
Before Width: | Height: | Size: 234 B |
@ -11,10 +11,10 @@
|
||||
<!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
|
||||
<!-- <link href="bbtreeview.css" rel="stylesheet" /> -->
|
||||
<link href="build/bbtreeview.min.css" rel="stylesheet" />
|
||||
<!-- <script src="bbtreeview.min.js"></script> -->
|
||||
<script src="src/bbtreeview.js"></script>
|
||||
<script src="src/bbtreeviewnode.js"></script>
|
||||
<!-- <link href="build/bbtreeview.min.css" rel="stylesheet" /> -->
|
||||
<link href="src/treeview.css" rel="stylesheet" />
|
||||
|
||||
<script src="dist/treeview.dist.js"></script>
|
||||
|
||||
<title></title>
|
||||
</head>
|
||||
@ -31,16 +31,35 @@
|
||||
<div class="panel">
|
||||
|
||||
<p>Create demo treeview</p>
|
||||
<p><button onclick="CreateTreeview(1)">Create Treeview (Checkbox and Selection)</button></p>
|
||||
<p><button onclick="CreateTreeview(2)">Create Treeview (Checkbox, Hide Selection, Enable Pull-Ups)</button></p>
|
||||
<p><button onclick="CreateTreeview(3)">Create Treeview (No Checkbox, Selection)</button></p>
|
||||
<p><button onclick="CreateTreeview(4)">Create Treeview (No Checkbox, No Icons, Selection)</button></p>
|
||||
<p>
|
||||
<input type="checkbox" id="checkbox1" checked>
|
||||
<label for="checkbox1">Show checkbox</label>
|
||||
<br>
|
||||
|
||||
<input type="checkbox" id="checkbox2" checked>
|
||||
<label for="checkbox2">Show selection</label>
|
||||
<br>
|
||||
|
||||
<input type="checkbox" id="checkbox3" checked>
|
||||
<label for="checkbox3">Show icon</label>
|
||||
<br>
|
||||
|
||||
<input type="checkbox" id="checkbox4">
|
||||
<label for="checkbox4">Enable guardian behaviour (a child checks its parent)</label>
|
||||
<br>
|
||||
|
||||
<input type="checkbox" id="checkbox5" checked>
|
||||
<label for="checkbox5">Enable cascade checking (check parent when all its children are checked)</label>
|
||||
<br>
|
||||
|
||||
</p>
|
||||
<p><button onclick="CreateTreeview()">Create Treeview</button></p>
|
||||
|
||||
</div>
|
||||
<div class="panel">
|
||||
|
||||
<p>Load sample nodes</p>
|
||||
<button onclick="LoadTreeview()">Load Treeview</button>
|
||||
<p></p><button onclick="LoadTreeview()">Load Treeview</button></p>
|
||||
|
||||
</div>
|
||||
<div class="panel">
|
||||
@ -118,53 +137,30 @@ body {
|
||||
|
||||
<script>
|
||||
|
||||
CreateTreeview(1);
|
||||
CreateTreeview();
|
||||
LoadTreeview();
|
||||
|
||||
|
||||
function CreateTreeview(value){
|
||||
switch (value) {
|
||||
case 1:
|
||||
window.treeview1 = new BBTreeview({
|
||||
ID: "#treeview1",
|
||||
ShowCheckbox: true,
|
||||
ShowSelection: true
|
||||
});
|
||||
function CreateTreeview(){
|
||||
|
||||
break;
|
||||
case 2:
|
||||
window.treeview1 = new BBTreeview({
|
||||
ID: "#treeview1",
|
||||
ShowCheckbox: true,
|
||||
ShowSelection: false,
|
||||
EnablePullUp: true
|
||||
});
|
||||
const checkbox1 = document.getElementById("checkbox1").checked;
|
||||
const checkbox2 = document.getElementById("checkbox2").checked;
|
||||
const checkbox3 = document.getElementById("checkbox3").checked;
|
||||
const checkbox4 = document.getElementById("checkbox4").checked;
|
||||
const checkbox5 = document.getElementById("checkbox5").checked;
|
||||
|
||||
break;
|
||||
case 3:
|
||||
window.treeview1 = new BBTreeview({
|
||||
ID: "#treeview1",
|
||||
ShowCheckbox: false,
|
||||
ShowSelection: true,
|
||||
EnablePullUp: false
|
||||
});
|
||||
|
||||
break;
|
||||
case 4:
|
||||
window.treeview1 = new BBTreeview({
|
||||
ID: "#treeview1",
|
||||
ShowCheckbox: false,
|
||||
ShowSelection: true,
|
||||
EnablePullUp: false,
|
||||
ShowIcon: false
|
||||
});
|
||||
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
window.treeview1 = new LiteRyzJS.Treeview({
|
||||
ID: "#treeview1",
|
||||
ShowCheckbox: checkbox1,
|
||||
ShowSelection: checkbox2,
|
||||
ShowIcon: checkbox3,
|
||||
EnableGuardian: checkbox4,
|
||||
EnableCascade: checkbox5
|
||||
});
|
||||
|
||||
LoadTreeview();
|
||||
|
||||
window.treeview1.ExpandAll();
|
||||
}
|
||||
|
||||
function LoadTreeview(){
|
||||
|
||||
2343
package-lock.json
generated
Normal file
2343
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
12
package.json
Normal file
12
package.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "LiteRyzJS/Treeview",
|
||||
"version": "0.2.0.248",
|
||||
"devDependencies": {
|
||||
"webpack": "^5.93.0",
|
||||
"webpack-cli": "^5.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"watch": "webpack --watch"
|
||||
}
|
||||
}
|
||||
BIN
src/checkbox.png
BIN
src/checkbox.png
Binary file not shown.
|
Before Width: | Height: | Size: 337 B |
@ -1,64 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-divide-square"
|
||||
version="1.1"
|
||||
id="svg10"
|
||||
sodipodi:docname="checkbox.svg"
|
||||
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs14" />
|
||||
<sodipodi:namedview
|
||||
id="namedview12"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
showgrid="false"
|
||||
inkscape:zoom="12.256517"
|
||||
inkscape:cx="-2.9780075"
|
||||
inkscape:cy="2.814829"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="1912"
|
||||
inkscape:window-y="845"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg10" />
|
||||
<rect
|
||||
x="2.5662928"
|
||||
y="2.5662928"
|
||||
width="10.193273"
|
||||
height="10.193273"
|
||||
rx="1.132586"
|
||||
ry="1.132586"
|
||||
id="rect2"
|
||||
style="stroke:#333333;stroke-width:1.13259;stroke-opacity:1"
|
||||
inkscape:export-filename="L:\gitea-hiimray\bbtreeview\uncheckbox.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
<rect
|
||||
x="5.1146226"
|
||||
y="5.1146226"
|
||||
width="5.0966134"
|
||||
height="5.0966134"
|
||||
rx="0.56629044"
|
||||
ry="0.56629044"
|
||||
id="rect2-7"
|
||||
style="fill:#333333;fill-opacity:1;stroke:#333333;stroke-width:0.566292;stroke-opacity:1"
|
||||
inkscape:export-filename="L:\gitea-hiimray\bbtreeview\checkbox.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
BIN
src/collapse.png
BIN
src/collapse.png
Binary file not shown.
|
Before Width: | Height: | Size: 185 B |
BIN
src/expand.png
BIN
src/expand.png
Binary file not shown.
|
Before Width: | Height: | Size: 199 B |
BIN
src/folder.png
BIN
src/folder.png
Binary file not shown.
|
Before Width: | Height: | Size: 322 B |
@ -1,44 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-folder"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="folder.svg"
|
||||
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
id="namedview6"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
showgrid="false"
|
||||
inkscape:zoom="34.666667"
|
||||
inkscape:cx="11.985577"
|
||||
inkscape:cy="12.014423"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="1912"
|
||||
inkscape:window-y="845"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
|
||||
id="path2"
|
||||
style="stroke:#ebc848;stroke-opacity:1;fill:#ffe999;fill-opacity:1" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
62
src/icon.svg
62
src/icon.svg
@ -1,62 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-divide-square"
|
||||
version="1.1"
|
||||
id="svg10"
|
||||
sodipodi:docname="icon.svg"
|
||||
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs14" />
|
||||
<sodipodi:namedview
|
||||
id="namedview12"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
showgrid="false"
|
||||
inkscape:zoom="17.333333"
|
||||
inkscape:cx="-0.60576923"
|
||||
inkscape:cy="15.375"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="1912"
|
||||
inkscape:window-y="845"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg10" />
|
||||
<rect
|
||||
x="2.4663463"
|
||||
y="2.4663463"
|
||||
width="8.3942308"
|
||||
height="8.3942308"
|
||||
rx="0.93269229"
|
||||
ry="0.93269229"
|
||||
id="rect2"
|
||||
style="stroke:#a0a0a0;stroke-width:0.932692;stroke-opacity:1"
|
||||
inkscape:export-filename="L:\gitea-hiimray\New folder\collapse.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
<line
|
||||
x1="4.7980771"
|
||||
y1="6.6634617"
|
||||
x2="8.5288458"
|
||||
y2="6.6634617"
|
||||
id="line4"
|
||||
style="stroke:#000000;stroke-width:0.932692;stroke-opacity:1"
|
||||
inkscape:export-filename="L:\gitea-hiimray\New folder\collapse.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
5
src/index.js
Normal file
5
src/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
// src/index.js
|
||||
import Treeview from './treeview/treeview.js';
|
||||
|
||||
|
||||
export { Treeview };
|
||||
BIN
src/line.png
BIN
src/line.png
Binary file not shown.
|
Before Width: | Height: | Size: 125 B After Width: | Height: | Size: 128 B |
BIN
src/sprite.png
Normal file
BIN
src/sprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 720 B |
@ -1,6 +1,5 @@
|
||||
ul.bbtreeview {
|
||||
background-image: url("line.png");
|
||||
background-position: 4px 8px;
|
||||
background-repeat: repeat-y;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@ -8,54 +7,30 @@ ul.bbtreeview {
|
||||
}
|
||||
ul.bbtreeview ul {
|
||||
background-image: url("line.png");
|
||||
background-position: 4px 8px;
|
||||
background-repeat: repeat-y;
|
||||
list-style: none;
|
||||
margin: 0 0 0 8px;
|
||||
margin: 0 0 0 22px;
|
||||
padding: 0;
|
||||
}
|
||||
ul.bbtreeview li {
|
||||
background-position: 0px calc((1.2em - 9px)/2);
|
||||
background-repeat: no-repeat;
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding-left: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
ul.bbtreeview li.c {
|
||||
background-image: url("expand.png");
|
||||
ul.bbtreeview li div.icon.expand {
|
||||
margin-right: 2px;
|
||||
}
|
||||
ul.bbtreeview li.e {
|
||||
background-image: url("collapse.png");
|
||||
}
|
||||
ul.bbtreeview li.hidden {
|
||||
|
||||
ul.bbtreeview .c > ul {
|
||||
display: none;
|
||||
}
|
||||
ul.bbtreeview div.li {
|
||||
display: block;
|
||||
height: 1.2em;
|
||||
padding-left: 4px;
|
||||
}
|
||||
ul.bbtreeview div.li.highlighted {
|
||||
background-color: rgb(169, 201, 249, 0.7);
|
||||
}
|
||||
ul.bbtreeview div.li > div.icon {
|
||||
background-position: 0px center;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: calc(16px);
|
||||
}
|
||||
ul.bbtreeview div.li > div.folder {
|
||||
background-image: url("folder.png");
|
||||
}
|
||||
|
||||
ul.bbtreeview li > div.li > div.checkbox {
|
||||
background-image: url("uncheckbox.png");
|
||||
}
|
||||
ul.bbtreeview li.x > div.li > div.checkbox {
|
||||
background-image: url("checkbox.png");
|
||||
}
|
||||
|
||||
ul.bbtreeview div.li > span {
|
||||
-webkit-user-select: none;
|
||||
@ -73,4 +48,46 @@ ul.bbtreeview div.li > span {
|
||||
|
||||
ul.bbtreeview div.li > span.noicon {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
ul.bbtreeview div.icon {
|
||||
background-position-x: 0px;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
ul.bbtreeview .c > div > div.icon.expand {
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: -64px;
|
||||
}
|
||||
|
||||
ul.bbtreeview .e > div > div.icon.expand {
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: -48px;
|
||||
}
|
||||
|
||||
ul.bbtreeview .nc > div > div.icon.expand {
|
||||
/* background-image: none; */
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: -80px;
|
||||
}
|
||||
|
||||
ul.bbtreeview .o > div > div.icon.checkbox {
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: -16px;
|
||||
}
|
||||
|
||||
ul.bbtreeview .x > div > div.icon.checkbox {
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: 0px;
|
||||
}
|
||||
|
||||
ul.bbtreeview div.icon.folder {
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: -32px;
|
||||
}
|
||||
@ -1,30 +1,65 @@
|
||||
class BBTreeview {
|
||||
import TreeviewNode from './treeviewnode.js';
|
||||
|
||||
|
||||
class Treeview {
|
||||
constructor(options) {
|
||||
this.Options = {};
|
||||
|
||||
this.initialiseComponents(options);
|
||||
this.#initialiseComponents(options);
|
||||
}
|
||||
|
||||
initialiseComponents(options) {
|
||||
#initialiseComponents(options) {
|
||||
var a = this;
|
||||
|
||||
a.Options = Object.assign({
|
||||
ID: null,
|
||||
ShowCheckbox: false,
|
||||
ShowSelection: true,
|
||||
EnablePullUp: false,
|
||||
EnableGuardian: false,
|
||||
EnableCascade: true,
|
||||
ShowIcon: true
|
||||
}, options);
|
||||
|
||||
// Replace treeview
|
||||
a.createTreeview();
|
||||
|
||||
// a.Container = a.getTreeview();
|
||||
a.#createTreeview();
|
||||
}
|
||||
|
||||
|
||||
get Node() {
|
||||
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;
|
||||
}
|
||||
|
||||
get Container() {
|
||||
return this.getTreeview();
|
||||
const a = this;
|
||||
|
||||
let container = a.Node;
|
||||
if (container == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
container = container.querySelectorAll("ul.bbtreeview");
|
||||
if (container.length <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
container = container[0];
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
|
||||
@ -41,7 +76,7 @@ class BBTreeview {
|
||||
Tag: null
|
||||
}, options);
|
||||
|
||||
if (_options.ID == null) _options.ID = a.generateID();
|
||||
if (_options.ID == null) _options.ID = a.#generateID();
|
||||
if (_options.Tag == null) _options.Tag = "";
|
||||
|
||||
// Don't add duplicate
|
||||
@ -64,15 +99,15 @@ class BBTreeview {
|
||||
parentNode = parentNode.ChildNode;
|
||||
}
|
||||
|
||||
const nodeHtml = a.generateNodeHtml(_options);
|
||||
const nodeHtml = a.#generateNodeHtml(_options);
|
||||
|
||||
// Add node
|
||||
a.appendHtml(parentNode, nodeHtml);
|
||||
a.#appendHtml(parentNode, nodeHtml);
|
||||
|
||||
const node = a.Find(_options.ID);
|
||||
|
||||
// Setup events
|
||||
node.InvalidateEvents();
|
||||
node.InitialiseComponents();
|
||||
|
||||
return true;
|
||||
}
|
||||
@ -93,14 +128,14 @@ class BBTreeview {
|
||||
Clear() {
|
||||
const a = this;
|
||||
|
||||
a.initialiseComponents(a.Options);
|
||||
a.#initialiseComponents(a.Options);
|
||||
}
|
||||
|
||||
CollapseAll() {
|
||||
const a = this;
|
||||
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
e.Collapse();
|
||||
e.Expand(false);
|
||||
});
|
||||
}
|
||||
|
||||
@ -108,7 +143,7 @@ class BBTreeview {
|
||||
const a = this;
|
||||
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
e.Expand();
|
||||
e.Expand(true);
|
||||
});
|
||||
}
|
||||
|
||||
@ -128,7 +163,7 @@ class BBTreeview {
|
||||
const a = this;
|
||||
|
||||
if (a.Container == null){
|
||||
console.log("BBTreeview container not found");
|
||||
console.log("Treeview container not found");
|
||||
return;
|
||||
}
|
||||
|
||||
@ -137,7 +172,7 @@ class BBTreeview {
|
||||
return null;
|
||||
}
|
||||
|
||||
const treenode = new BBTreeviewNode(this, node[0]);
|
||||
const treenode = new TreeviewNode(this, node[0]);
|
||||
|
||||
return treenode;
|
||||
}
|
||||
@ -183,7 +218,7 @@ class BBTreeview {
|
||||
let response = [];
|
||||
node.forEach(function(e) {
|
||||
const id = e.getAttribute("data-bbtv-id");
|
||||
if (a.isNullOrWhitespace(id)) {
|
||||
if (a.#isNullOrWhitespace(id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -250,8 +285,27 @@ class BBTreeview {
|
||||
return response;
|
||||
}
|
||||
|
||||
GetTreeNode(el) {
|
||||
const a = this;
|
||||
|
||||
appendHtml(el, html) {
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
#appendHtml(el, html) {
|
||||
let node = document.createElement('template');
|
||||
node.innerHTML = html;
|
||||
|
||||
@ -260,30 +314,32 @@ class BBTreeview {
|
||||
el.appendChild(node);
|
||||
}
|
||||
|
||||
createTreeview() {
|
||||
#createTreeview() {
|
||||
const a = this;
|
||||
|
||||
let container = a.getContainer();
|
||||
let container = a.Node;
|
||||
if (container != null) {
|
||||
container.innerHTML = "<ul class=\"bbtreeview\"></ul>";
|
||||
}
|
||||
}
|
||||
|
||||
generateID() {
|
||||
#generateID() {
|
||||
return "treeviewItem" + (Math.floor(Math.random() * 1000001) + 100).toString();
|
||||
}
|
||||
|
||||
generateNodeHtml(options) {
|
||||
#generateNodeHtml(options) {
|
||||
const a = this;
|
||||
|
||||
let tag = "";
|
||||
if (!a.isNullOrWhitespace(options.Tag)) {
|
||||
if (!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 + '">';
|
||||
html += '<div class="li">'
|
||||
|
||||
html += '<div class="icon expand"></div>';
|
||||
|
||||
if (a.Options.ShowCheckbox) {
|
||||
html += '<div class="icon checkbox"></div>';
|
||||
}
|
||||
@ -302,68 +358,7 @@ 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;
|
||||
|
||||
let node = null;
|
||||
if (a.isTag(el, "li")) {
|
||||
node = el;
|
||||
} else {
|
||||
node = a.parentsUntilTagName(el, "li");
|
||||
}
|
||||
|
||||
const id = node.getAttribute("data-bbtv-id");
|
||||
|
||||
if (a.isNullOrWhitespace(id)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return a.Find(id);
|
||||
}
|
||||
|
||||
getTreeview() {
|
||||
const a = this;
|
||||
|
||||
let container = a.getContainer();
|
||||
if (container == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// if (container.querySelectorAll("ul.bbtreeview").length <= 0) {
|
||||
// container.innerHTML = "<ul class=\"bbtreeview\"></ul>";
|
||||
// }
|
||||
|
||||
container = container.querySelectorAll("ul.bbtreeview");
|
||||
if (container.length <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
container = container[0];
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
isNullOrWhitespace(value) {
|
||||
#isNullOrWhitespace(value) {
|
||||
if (typeof (value) == "undefined") {
|
||||
return true;
|
||||
}
|
||||
@ -375,11 +370,11 @@ class BBTreeview {
|
||||
return (value.toString().trim().length <= 0);
|
||||
}
|
||||
|
||||
isTag(el, tagName) {
|
||||
#isTag(el, tagName) {
|
||||
return (el.tagName.toLowerCase() == tagName);
|
||||
}
|
||||
|
||||
parentsUntilTagName(el, tagName) {
|
||||
#parentsUntilTagName(el, tagName) {
|
||||
const a = this;
|
||||
|
||||
let node = el;
|
||||
@ -395,13 +390,13 @@ class BBTreeview {
|
||||
break;
|
||||
}
|
||||
|
||||
if (a.isTag(node, "ul")) {
|
||||
if (a.#isTag(node, "ul")) {
|
||||
if (node.classList.contains("bbtreeview")) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (a.isTag(node, tagName)) {
|
||||
if (a.#isTag(node, tagName)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -409,4 +404,7 @@ class BBTreeview {
|
||||
return node;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Treeview;
|
||||
@ -1,16 +1,20 @@
|
||||
class BBTreeviewNode {
|
||||
class TreeviewNode {
|
||||
constructor(treeview, node) {
|
||||
this.Treeview = treeview;
|
||||
this.Node = node;
|
||||
|
||||
// this.initialiseComponents();
|
||||
}
|
||||
|
||||
// initialiseComponents() {
|
||||
// const a = this;
|
||||
|
||||
// }
|
||||
get Expandbox() {
|
||||
const a = this;
|
||||
|
||||
const result = a.Node.querySelectorAll("div.icon.expand");
|
||||
if (typeof(result) == "undefined") {
|
||||
return null;
|
||||
}
|
||||
|
||||
return result[0];
|
||||
}
|
||||
|
||||
get Checkbox() {
|
||||
const a = this;
|
||||
@ -19,12 +23,12 @@ class BBTreeviewNode {
|
||||
return null;
|
||||
}
|
||||
|
||||
const checkboxes = a.Node.querySelectorAll("div.icon.checkbox");
|
||||
if (typeof(checkboxes) == "undefined") {
|
||||
const result = a.Node.querySelectorAll("div.icon.checkbox");
|
||||
if (typeof(result) == "undefined") {
|
||||
return null;
|
||||
}
|
||||
|
||||
return checkboxes[0];
|
||||
return result[0];
|
||||
}
|
||||
|
||||
get ChildNode() {
|
||||
@ -67,16 +71,6 @@ class BBTreeviewNode {
|
||||
return result;
|
||||
}
|
||||
|
||||
get IsChecked() {
|
||||
const a = this;
|
||||
|
||||
if (!a.Treeview.Options.ShowCheckbox) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return a.Node.classList.contains("x");
|
||||
}
|
||||
|
||||
get Container() {
|
||||
return this.Node.querySelectorAll("div.li")[0];
|
||||
}
|
||||
@ -89,24 +83,23 @@ class BBTreeviewNode {
|
||||
return this.Node.getAttribute("data-bbtv-id");
|
||||
}
|
||||
|
||||
get IsExpanded() {
|
||||
|
||||
get IsChecked() {
|
||||
const a = this;
|
||||
|
||||
if (a.Node.classList.contains("e")) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (a.Node.classList.contains("c")) {
|
||||
if (!a.Treeview.Options.ShowCheckbox) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return null;
|
||||
return a.Node.classList.contains("x");
|
||||
}
|
||||
|
||||
get IsExpanded() {
|
||||
return this.Node.classList.contains("e");
|
||||
}
|
||||
|
||||
get IsHighlighted() {
|
||||
const a = this;
|
||||
|
||||
return a.Container.classList.contains("highlighted");
|
||||
return this.Container.classList.contains("highlighted");
|
||||
}
|
||||
|
||||
get Label() {
|
||||
@ -131,7 +124,7 @@ class BBTreeviewNode {
|
||||
get ParentNode() {
|
||||
const a = this;
|
||||
|
||||
return a.parentsUntilTagName(a.Node, "li");
|
||||
return a.#parentsUntilTagName(a.Node, "li");
|
||||
}
|
||||
|
||||
get Tag() {
|
||||
@ -153,34 +146,35 @@ class BBTreeviewNode {
|
||||
Check(value) {
|
||||
const a = this;
|
||||
|
||||
a.setCheckbox(a.Node, value);
|
||||
a.#setCheckbox(a.Node, value);
|
||||
|
||||
// Update children
|
||||
a.Node.querySelectorAll("li").forEach(function(e) {
|
||||
a.setCheckbox(e, value);
|
||||
a.#setCheckbox(e, value);
|
||||
});
|
||||
|
||||
// Update parent state
|
||||
let parentNode = a.ParentNode;
|
||||
if (parentNode == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle pull-ups
|
||||
if (a.Treeview.Options.EnablePullUp) {
|
||||
if (a.Treeview.Options.EnableGuardian) {
|
||||
while (true) {
|
||||
const parentChecked = (parentNode.querySelectorAll("li.x").length > 0);
|
||||
|
||||
a.setCheckbox(parentNode, parentChecked);
|
||||
a.#setCheckbox(parentNode, parentChecked);
|
||||
|
||||
parentNode = a.Treeview.getNode(parentNode);
|
||||
parentNode = a.Treeview.GetTreeNode(parentNode);
|
||||
parentNode = parentNode.ParentNode;
|
||||
|
||||
if (parentNode == null) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
}
|
||||
|
||||
if (a.Treeview.Options.EnableCascade) {
|
||||
let uncheckedCount = 0;
|
||||
|
||||
parentNode.querySelectorAll("li").forEach(function(e) {
|
||||
@ -191,34 +185,15 @@ class BBTreeviewNode {
|
||||
uncheckedCount++;
|
||||
});
|
||||
|
||||
a.setCheckbox(parentNode, (uncheckedCount <= 0));
|
||||
a.#setCheckbox(parentNode, (uncheckedCount <= 0));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Collapse() {
|
||||
Expand(value) {
|
||||
const a = this;
|
||||
|
||||
if (a.Node.classList.contains("e")) {
|
||||
a.Node.classList.remove("e");
|
||||
a.Node.classList.add("c");
|
||||
}
|
||||
|
||||
a.ChildNodes.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.ChildNodes.forEach(function(e) {
|
||||
e.classList.remove("hidden");
|
||||
});
|
||||
a.#setExpandbox(a.Node, value);
|
||||
}
|
||||
|
||||
Remove() {
|
||||
@ -237,31 +212,81 @@ class BBTreeviewNode {
|
||||
a.Node.parentNode.removeChild(a.Node);
|
||||
}
|
||||
|
||||
InvalidateEvents() {
|
||||
InitialiseComponents() {
|
||||
const a = this;
|
||||
|
||||
// collapsible icon behaviour
|
||||
a.Node.addEventListener("click", function(e){
|
||||
// fold
|
||||
a.#initialiseComponents_Expand();
|
||||
|
||||
// checkbox behaviour
|
||||
a.#initialiseComponents_Checkbox();
|
||||
|
||||
// highlighting + collapsible
|
||||
a.#initialiseComponents_Container();
|
||||
|
||||
a.Expand(a.IsExpanded);
|
||||
a.Check(a.IsChecked);
|
||||
}
|
||||
|
||||
|
||||
#initialiseComponents_Expand() {
|
||||
const a = this;
|
||||
|
||||
a.Expandbox.addEventListener("mousedown", 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();
|
||||
a.Expand(!a.IsExpanded);
|
||||
});
|
||||
|
||||
// collapsible label behaviour
|
||||
a.Expandbox.addEventListener("click", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// do nothing
|
||||
});
|
||||
|
||||
a.Expandbox.addEventListener("dblclick", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// do nothing
|
||||
});
|
||||
}
|
||||
|
||||
#initialiseComponents_Checkbox() {
|
||||
const a = this;
|
||||
|
||||
if (!a.Treeview.Options.ShowCheckbox) {
|
||||
return;
|
||||
}
|
||||
|
||||
a.Checkbox.addEventListener("mousedown", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
a.Check(!a.IsChecked);
|
||||
});
|
||||
|
||||
a.Checkbox.addEventListener("click", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// do nothing
|
||||
});
|
||||
|
||||
a.Checkbox.addEventListener("dblclick", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// do nothing
|
||||
});
|
||||
}
|
||||
|
||||
#initialiseComponents_Container() {
|
||||
const a = this;
|
||||
|
||||
// collapsible
|
||||
a.Container.addEventListener("dblclick", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
@ -271,33 +296,9 @@ class BBTreeviewNode {
|
||||
return;
|
||||
}
|
||||
|
||||
myNode.Toggle();
|
||||
a.Expand(!a.IsExpanded);
|
||||
});
|
||||
|
||||
// checkbox behaviour
|
||||
if (a.Treeview.Options.ShowCheckbox) {
|
||||
a.Checkbox.addEventListener("mousedown", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
a.Check(!a.IsChecked);
|
||||
});
|
||||
|
||||
a.Checkbox.addEventListener("click", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// do nothing
|
||||
});
|
||||
|
||||
a.Checkbox.addEventListener("dblclick", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// do nothing
|
||||
});
|
||||
}
|
||||
|
||||
// highlighting
|
||||
a.Container.addEventListener("mousedown", function(e){
|
||||
e.stopPropagation();
|
||||
@ -319,48 +320,13 @@ class BBTreeviewNode {
|
||||
|
||||
myNode.Container.classList.add("highlighted");
|
||||
});
|
||||
|
||||
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;
|
||||
|
||||
// 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(el, tagName) {
|
||||
#isTag(el, tagName) {
|
||||
return (el.tagName.toLowerCase() == tagName);
|
||||
}
|
||||
|
||||
parentsUntilTagName(el, tagName) {
|
||||
#parentsUntilTagName(el, tagName) {
|
||||
const a = this;
|
||||
|
||||
let node = el;
|
||||
@ -376,13 +342,13 @@ class BBTreeviewNode {
|
||||
break;
|
||||
}
|
||||
|
||||
if (a.isTag(node, "ul")) {
|
||||
if (a.#isTag(node, "ul")) {
|
||||
if (node.classList.contains("bbtreeview")) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (a.isTag(node, tagName)) {
|
||||
if (a.#isTag(node, tagName)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -390,16 +356,29 @@ class BBTreeviewNode {
|
||||
return node;
|
||||
}
|
||||
|
||||
setCheckbox(el, value) {
|
||||
#setCheckbox(el, value) {
|
||||
el.classList.remove("x");
|
||||
el.classList.remove("o");
|
||||
|
||||
el.classList.add((value ? "x" : "o"));
|
||||
}
|
||||
|
||||
#setExpandbox(el, value) {
|
||||
el.classList.remove("e");
|
||||
el.classList.remove("c");
|
||||
|
||||
if (value) {
|
||||
if (!el.classList.contains("x")) {
|
||||
el.classList.add("x");
|
||||
if (el.querySelectorAll("li").length > 0) {
|
||||
el.classList.add("e");
|
||||
} else {
|
||||
el.classList.add("nc");
|
||||
}
|
||||
} else {
|
||||
if (el.classList.contains("x")) {
|
||||
el.classList.remove("x");
|
||||
}
|
||||
el.classList.add("c");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default TreeviewNode;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 234 B |
@ -1,4 +0,0 @@
|
||||
/**
|
||||
* BBTreeview
|
||||
* @version v0.1.2.044 (2024/01/09 2118)
|
||||
*/
|
||||
48
webpack.config.js
Normal file
48
webpack.config.js
Normal file
@ -0,0 +1,48 @@
|
||||
const path = require('path');
|
||||
const { version } = require('./package.json');
|
||||
const webpack = require('webpack');
|
||||
|
||||
|
||||
class PrependVersionPlugin {
|
||||
apply(compiler) {
|
||||
compiler.hooks.emit.tapAsync('PrependVersionPlugin', (compilation, callback) => {
|
||||
Object.keys(compilation.assets).forEach((filename) => {
|
||||
if (filename.endsWith('.js')) {
|
||||
const asset = compilation.assets[filename];
|
||||
|
||||
const headerText = `/*!\n * LiteRyzJS/Treeview v${version}\n * Copyright 2023-2024 Ray Lam (https://www.hiimray.co.uk)\n *\n */\n`;
|
||||
|
||||
const newContent = headerText + asset.source();
|
||||
|
||||
compilation.assets[filename] = {
|
||||
source: () => newContent,
|
||||
size: () => newContent.length,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
callback();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
treeview: './src/index.js'
|
||||
},
|
||||
output: {
|
||||
filename: `[name].dist.js`,
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
library: 'LiteRyzJS',
|
||||
libraryTarget: 'umd',
|
||||
globalObject: 'this'
|
||||
},
|
||||
mode: 'production', // development|production
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.VERSION': JSON.stringify(version)
|
||||
}),
|
||||
new PrependVersionPlugin()
|
||||
]
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user