Renamed to bbtreeview
Added checkboxes
This commit is contained in:
parent
7ee7cf4a1d
commit
14a7394b01
@ -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 {
|
||||
|
152
bbtreeview.js
152
bbtreeview.js
@ -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
BIN
checkbox.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 337 B |
BIN
src/UCkji.png
Normal file
BIN
src/UCkji.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 13 KiB |
64
src/checkbox.svg
Normal file
64
src/checkbox.svg
Normal 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 |
BIN
src/treeview-check-boxes12231.png
Normal file
BIN
src/treeview-check-boxes12231.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 7.3 KiB |
BIN
uncheckbox.png
Normal file
BIN
uncheckbox.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 234 B |
Loading…
Reference in New Issue
Block a user