Renamed to bbtreeview

Added checkboxes
This commit is contained in:
Ray 2023-09-10 12:21:20 +01:00
parent 7ee7cf4a1d
commit 14a7394b01
7 changed files with 178 additions and 42 deletions

View File

@ -51,10 +51,10 @@ ul.bbtreeview div.li > div.folder {
}
ul.bbtreeview li > div.li > div.checkbox {
background-image: url("folder.png");
background-image: url("uncheckbox.png");
}
ul.bbtreeview li.x > div.li > div.checkbox {
background-image: url("folder.png");
background-image: url("checkbox.png");
}
ul.bbtreeview div.li > span {

View File

@ -61,6 +61,32 @@ BBTreeview.prototype.AddItem = function(options) {
a.Toggle(myNode);
});
// Setup checkbox events
if (a.Options.ShowCheckbox) {
node.Checkbox.addEventListener("mousedown", function(e){
e.stopPropagation();
e.preventDefault();
node.Checked = !node.Checked;
a.CheckNode(node, node.Checked);
});
node.Checkbox.addEventListener("click", function(e){
e.stopPropagation();
e.preventDefault();
// do nothing
});
node.Checkbox.addEventListener("dblclick", function(e){
e.stopPropagation();
e.preventDefault();
// do nothing
});
}
// node.Label.addEventListener("click", function(e){
// e.stopPropagation();
// e.preventDefault();
@ -147,6 +173,7 @@ BBTreeview.prototype.Default = function() {
ParentID: null,
Name: "",
Hint: "",
Value: "hello",
Icon: "folder",
Checked: false
}
@ -154,13 +181,41 @@ BBTreeview.prototype.Default = function() {
};
BBTreeview.prototype.CheckNode = function(node, value) {
const a = this;
a.setNodeCheckbox(node.Node, value);
// Update children
node.Node.querySelectorAll("li").forEach(function(e) {
a.setNodeCheckbox(e, value);
});
// Invalidate ParentNode
node.ParentNode = a.GetParentNode(node.Node);
// Update parent state
if (node.ParentNode != null) {
let uncheckedCount = 0;
node.ParentNode.querySelectorAll("li").forEach(function(e) {
if (e.classList.contains("x")) {
return;
}
uncheckedCount++;
});
a.setNodeCheckbox(node.ParentNode, (uncheckedCount <= 0));
}
};
BBTreeview.prototype.CollapseNode = function(node) {
const a = this;
node.Node.classList.remove("e");
node.Node.classList.add("c");
node.Items.forEach(function(e) {
a.GetChildNodes(node.Node).forEach(function(e) {
e.classList.add("hidden");
});
};
@ -171,7 +226,7 @@ BBTreeview.prototype.ExpandNode = function(node) {
node.Node.classList.remove("c");
node.Node.classList.add("e");
node.Items.forEach(function(e) {
a.GetChildNodes(node.Node).forEach(function(e) {
e.classList.remove("hidden");
});
};
@ -188,17 +243,55 @@ BBTreeview.prototype.Find = function(id) {
let response = {
ID: id,
Node: node[0],
ParentNode: a.getParentNode(node[0]),
ParentNode: a.GetParentNode(node[0]),
ChildNode: a.getChildNode(node[0]),
Container: node[0].querySelectorAll("div.li")[0],
Label: node[0].querySelectorAll("span")[0],
Items: a.getChildren(node[0])
Checked: node[0].classList.contains("x"),
Checkbox: (a.Options.ShowCheckbox ? node[0].querySelectorAll("div.icon.checkbox")[0] : null),
Value: node[0].getAttribute("data-bbtv-value")
};
// console.log(response);
return response;
};
BBTreeview.prototype.GetChildNodes = function(node) {
const a = this;
const childNode = a.getChildNode(node);
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;
};
BBTreeview.prototype.GetParentNode = function(node) {
const a = this;
return a.parentsUntilTagName(node, "li");
};
BBTreeview.prototype.Toggle = function(node) {
const a = this;
@ -251,7 +344,7 @@ BBTreeview.prototype.generateID = function() {
BBTreeview.prototype.generateNodeHtml = function(options) {
const a = this;
let html = '<li data-bbtv-id="' + options.ID + '">';
let html = '<li data-bbtv-id="' + options.ID + '" data-bbtv-value="' + options.Value + '">';
html += '<div class="li">'
if (a.Options.ShowCheckbox) {
@ -278,35 +371,6 @@ BBTreeview.prototype.getChildNode = function(node) {
return result[0];
};
BBTreeview.prototype.getChildren = function(node) {
const a = this;
const childNode = a.getChildNode(node);
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;
};
BBTreeview.prototype.getNode = function(el) {
const a = this;
@ -337,12 +401,6 @@ BBTreeview.prototype.getOptions = function(options) {
return _options;
};
BBTreeview.prototype.getParentNode = function(node) {
const a = this;
return a.parentsUntilTagName(node, "li");
};
BBTreeview.prototype.isNullOrWhitespace = function(value) {
if (typeof (value) == "undefined") {
return true;
@ -383,4 +441,18 @@ BBTreeview.prototype.parentsUntilTagName = function(el, tagName) {
}
return node;
};
BBTreeview.prototype.setNodeCheckbox = function(el, value) {
const a = this;
if (value) {
if (!el.classList.contains("x")) {
el.classList.add("x");
}
} else {
if (el.classList.contains("x")) {
el.classList.remove("x");
}
}
};

BIN
checkbox.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 337 B

BIN
src/UCkji.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

64
src/checkbox.svg Normal file
View File

@ -0,0 +1,64 @@
<?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>

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
uncheckbox.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 B