Changed to using class
This commit is contained in:
Ray
parent
a84bee3ae3
commit
43edb319d4
392
bbtreeview.js
392
bbtreeview.js
|
|
@ -1,392 +0,0 @@
|
|||
/**
|
||||
* BBTreeview
|
||||
* @version v0.1.1.006 (2023/09/27 2218)
|
||||
*/
|
||||
function BBTreeview(options)
|
||||
{
|
||||
const a = this;
|
||||
|
||||
a.initialise(options);
|
||||
};
|
||||
|
||||
BBTreeview.prototype.AddItem = function(options) {
|
||||
const a = this;
|
||||
const _options = a.getOptions(options);
|
||||
|
||||
// Don't add duplicate
|
||||
if (a.Find(_options.ID) != null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check parent exists
|
||||
let parentNode = null;
|
||||
if (_options.ParentID != null) {
|
||||
parentNode = a.Find(_options.ParentID);
|
||||
if (parentNode == null) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (parentNode == null) {
|
||||
parentNode = a.Container;
|
||||
} else {
|
||||
parentNode = parentNode.GetChildNode();
|
||||
}
|
||||
|
||||
const nodeHtml = a.generateNodeHtml(_options);
|
||||
|
||||
// Add node
|
||||
a.appendHtml(parentNode, nodeHtml);
|
||||
|
||||
const node = a.Find(_options.ID);
|
||||
|
||||
// Setup events
|
||||
node.SetupEvents();
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
BBTreeview.prototype.Remove = function(id) {
|
||||
const a = this;
|
||||
|
||||
const node = a.Find(id);
|
||||
if (node == null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
node.Remove();
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
BBTreeview.prototype.Default = function() {
|
||||
return {
|
||||
TreeviewOptions: {
|
||||
ID: null,
|
||||
ShowCheckbox: false,
|
||||
ShowSelection: true,
|
||||
EnablePullUp: false,
|
||||
ShowIcon: true
|
||||
},
|
||||
TreeNodeOptions: {
|
||||
ID: null,
|
||||
ParentID: null,
|
||||
Name: "",
|
||||
Hint: "",
|
||||
Value: "",
|
||||
Icon: "folder",
|
||||
Checked: false,
|
||||
Tag: null
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
BBTreeview.prototype.Clear = function() {
|
||||
const a = this;
|
||||
|
||||
a.initialise(a.Options);
|
||||
};
|
||||
|
||||
BBTreeview.prototype.CollapseAll = function() {
|
||||
const a = this;
|
||||
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
e.Collapse();
|
||||
});
|
||||
};
|
||||
|
||||
BBTreeview.prototype.ExpandAll = function() {
|
||||
const a = this;
|
||||
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
e.Expand();
|
||||
});
|
||||
};
|
||||
|
||||
BBTreeview.prototype.CheckAll = function(value) {
|
||||
const a = this;
|
||||
|
||||
if (!a.Options.ShowCheckbox) {
|
||||
return;
|
||||
}
|
||||
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
e.Check(value);
|
||||
});
|
||||
};
|
||||
|
||||
BBTreeview.prototype.Find = function(id) {
|
||||
const a = this;
|
||||
|
||||
if (a.Container == null){
|
||||
console.log("BBTreeview container not found");
|
||||
return;
|
||||
}
|
||||
|
||||
const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']");
|
||||
if (node.length <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let treenode = new BBTreeviewNode(this);
|
||||
treenode.Load(node[0]);
|
||||
|
||||
// console.log(treenode);
|
||||
|
||||
return treenode;
|
||||
};
|
||||
|
||||
BBTreeview.prototype.FindByName = function(value) {
|
||||
const a = this;
|
||||
|
||||
let response = [];
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
if (e.Name != value) {
|
||||
return;
|
||||
}
|
||||
|
||||
response.push(e);
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
BBTreeview.prototype.FindByValue = function(value) {
|
||||
const a = this;
|
||||
|
||||
let response = [];
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
if (e.Value != value) {
|
||||
return;
|
||||
}
|
||||
|
||||
response.push(e);
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
BBTreeview.prototype.GetAllNodes = function() {
|
||||
const a = this;
|
||||
|
||||
const node = a.Container.querySelectorAll("li");
|
||||
if (node.length <= 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
let response = [];
|
||||
node.forEach(function(e) {
|
||||
const id = e.getAttribute("data-bbtv-id");
|
||||
if (a.isNullOrWhitespace(id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const myNode = a.Find(id);
|
||||
if (myNode == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
response.push(myNode);
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
BBTreeview.prototype.GetCheckedNodes = function() {
|
||||
const a = this;
|
||||
|
||||
let response = [];
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
if (!e.Checked) {
|
||||
return;
|
||||
}
|
||||
|
||||
response.push(e);
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
BBTreeview.prototype.GetCheckedValues = function() {
|
||||
const a = this;
|
||||
|
||||
let response = [];
|
||||
a.GetCheckedNodes().map(function(e) {
|
||||
response.push(e.Value);
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
|
||||
BBTreeview.prototype.GetCheckedTags = function() {
|
||||
const a = this;
|
||||
|
||||
let response = [];
|
||||
a.GetCheckedNodes().map(function(e) {
|
||||
response.push(e.Tag);
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
BBTreeview.prototype.GetSelectedNode = function() {
|
||||
const a = this;
|
||||
|
||||
let response = null;
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
if (e.Highlighted) {
|
||||
response = e;
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
return 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);
|
||||
if (treeview.length <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (treeview[0] == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
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(Math.random() * 1000001) + 100).toString();
|
||||
};
|
||||
|
||||
BBTreeview.prototype.generateNodeHtml = function(options) {
|
||||
const a = this;
|
||||
|
||||
let 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">'
|
||||
|
||||
if (a.Options.ShowCheckbox) {
|
||||
html += '<div class="icon checkbox"></div>';
|
||||
}
|
||||
|
||||
if (a.Options.ShowIcon) {
|
||||
html += '<div class="icon ' + options.Icon + '"></div>';
|
||||
html += '<span title="' + options.Hint + '">' + options.Name + '</span>';
|
||||
} else {
|
||||
html += '<span class="noicon" title="' + options.Hint + '">' + options.Name + '</span>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
html += '<ul></ul>';
|
||||
html += '</li>';
|
||||
|
||||
return html;
|
||||
};
|
||||
|
||||
BBTreeview.prototype.getNode = function(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);
|
||||
};
|
||||
|
||||
BBTreeview.prototype.getOptions = function(options) {
|
||||
const a = this;
|
||||
|
||||
let _options = Object.assign(a.Default().TreeNodeOptions, options);
|
||||
|
||||
if (_options.ID == null) {
|
||||
_options.ID = a.generateID();
|
||||
}
|
||||
|
||||
if (_options.Tag == null) {
|
||||
_options.Tag = "";
|
||||
}
|
||||
|
||||
return _options;
|
||||
};
|
||||
|
||||
BBTreeview.prototype.isNullOrWhitespace = function(value) {
|
||||
if (typeof (value) == "undefined") {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (value == null) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (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;
|
||||
|
||||
while (true) {
|
||||
if (typeof(node.parentNode) == "undefined") {
|
||||
break;
|
||||
}
|
||||
|
||||
node = node.parentNode;
|
||||
|
||||
if (typeof(node) == "undefined") {
|
||||
break;
|
||||
}
|
||||
|
||||
if (a.isTag(node, "ul")) {
|
||||
if (node.classList.contains("bbtreeview")) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (a.isTag(node, tagName)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,408 +0,0 @@
|
|||
/**
|
||||
* BBTreeview
|
||||
* @version v0.1.0.244 (2023/09/11 2327)
|
||||
*/
|
||||
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);
|
||||
|
||||
// Update children
|
||||
a.Node.querySelectorAll("li").forEach(function(e) {
|
||||
a.setCheckbox(e, value);
|
||||
});
|
||||
|
||||
// Update parent state
|
||||
let parentNode = a.GetParentNode();
|
||||
if (parentNode == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle pull-ups
|
||||
if (a.Treeview.Options.EnablePullUp) {
|
||||
while (true) {
|
||||
const parentChecked = (parentNode.querySelectorAll("li.x").length > 0);
|
||||
|
||||
a.setCheckbox(parentNode, parentChecked);
|
||||
|
||||
parentNode = a.Treeview.getNode(parentNode);
|
||||
parentNode = parentNode.GetParentNode();
|
||||
|
||||
if (parentNode == null) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let uncheckedCount = 0;
|
||||
|
||||
parentNode.querySelectorAll("li").forEach(function(e) {
|
||||
if (e.classList.contains("x")) {
|
||||
return;
|
||||
}
|
||||
|
||||
uncheckedCount++;
|
||||
});
|
||||
|
||||
a.setCheckbox(parentNode, (uncheckedCount <= 0));
|
||||
}
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.Collapse = function() {
|
||||
const a = this;
|
||||
|
||||
if (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;
|
||||
|
||||
if (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");
|
||||
if (typeof(checkboxes) == "undefined") {
|
||||
return null;
|
||||
}
|
||||
|
||||
return checkboxes[0];
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.GetChildNode = function() {
|
||||
const a = this;
|
||||
|
||||
let result = a.Node.querySelectorAll("ul");
|
||||
if (result.length <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return result[0];
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.GetChildNodes = function() {
|
||||
const a = this;
|
||||
|
||||
const childNode = a.GetChildNode();
|
||||
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;
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.GetTag = function() {
|
||||
const a = this;
|
||||
|
||||
let tag = a.Node.getAttribute("data-bbtv-tag");
|
||||
if (a.Treeview.isNullOrWhitespace(tag)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return JSON.parse(decodeURIComponent(tag));
|
||||
};
|
||||
BBTreeviewNode.prototype.GetParentID = function() {
|
||||
const a = this;
|
||||
|
||||
const parentNode = a.GetParentNode();
|
||||
if (parentNode == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return 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;
|
||||
|
||||
if (!a.Treeview.Options.ShowCheckbox) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return a.Node.classList.contains("x");
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.IsExpanded = function() {
|
||||
const a = this;
|
||||
|
||||
if (a.Node.classList.contains("e")) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (a.Node.classList.contains("c")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.IsHighlighted = function() {
|
||||
const a = this;
|
||||
|
||||
return (a.Container.classList.contains("highlighted"));
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.Remove = function() {
|
||||
const a = this;
|
||||
|
||||
if (a.GetParentNode() != null) {
|
||||
if (a.GetParentNode().classList.contains("e")) {
|
||||
a.GetParentNode().classList.remove("e");
|
||||
}
|
||||
|
||||
if (a.GetParentNode().classList.contains("c")) {
|
||||
a.GetParentNode().classList.remove("c");
|
||||
}
|
||||
}
|
||||
|
||||
a.Node.parentNode.removeChild(a.Node);
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.SetupEvents = function() {
|
||||
const a = this;
|
||||
|
||||
// collapsible icon behaviour
|
||||
a.Node.addEventListener("click", 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();
|
||||
});
|
||||
|
||||
// collapsible label behaviour
|
||||
a.Container.addEventListener("dblclick", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
const myNode = a.Treeview.getNode(e.target);
|
||||
if (myNode == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
myNode.Toggle();
|
||||
});
|
||||
|
||||
// checkbox behaviour
|
||||
if (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();
|
||||
|
||||
// do nothing
|
||||
});
|
||||
|
||||
a.GetCheckbox().addEventListener("dblclick", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// do nothing
|
||||
});
|
||||
}
|
||||
|
||||
// highlighting
|
||||
a.Container.addEventListener("mousedown", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
const myNode = a.Treeview.getNode(e.target);
|
||||
if (myNode == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
a.Treeview.Container.querySelectorAll("div.highlighted").forEach(function(e) {
|
||||
e.classList.remove("highlighted");
|
||||
});
|
||||
|
||||
// Don't show selection
|
||||
if (!a.Treeview.Options.ShowSelection) {
|
||||
return;
|
||||
}
|
||||
|
||||
myNode.Container.classList.add("highlighted");
|
||||
});
|
||||
|
||||
a.invalidateCollapsible();
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.Toggle = function() {
|
||||
const a = this;
|
||||
|
||||
switch (a.IsExpanded()) {
|
||||
case true:
|
||||
a.Collapse();
|
||||
break;
|
||||
case false:
|
||||
a.Expand();
|
||||
break;
|
||||
default: break;
|
||||
}
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.initialise = function() {
|
||||
const a = this;
|
||||
|
||||
// a.ID = null;
|
||||
// a.ParentID = null;
|
||||
// a.Name = "";
|
||||
// a.Hint = "";
|
||||
// a.Value = "";
|
||||
// a.Icon = "folder";
|
||||
// a.Checked = false;
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.invalidateCollapsible = function() {
|
||||
const a = this;
|
||||
|
||||
// Invalidate state
|
||||
if (a.GetParentNode() == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (a.GetParentNode().classList.contains("c")) {
|
||||
a.Node.classList.add("hidden");
|
||||
} else if (a.GetParentNode().classList.contains("e")) {
|
||||
a.Node.classList.remove("hidden");
|
||||
} else {
|
||||
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;
|
||||
|
||||
while (true) {
|
||||
if (typeof(node.parentNode) == "undefined") {
|
||||
break;
|
||||
}
|
||||
|
||||
node = node.parentNode;
|
||||
|
||||
if (typeof(node) == "undefined") {
|
||||
break;
|
||||
}
|
||||
|
||||
if (a.isTag(node, "ul")) {
|
||||
if (node.classList.contains("bbtreeview")) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (a.isTag(node, tagName)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
};
|
||||
|
||||
BBTreeviewNode.prototype.setCheckbox = function(el, value) {
|
||||
if (value) {
|
||||
if (!el.classList.contains("x")) {
|
||||
el.classList.add("x");
|
||||
}
|
||||
} else {
|
||||
if (el.classList.contains("x")) {
|
||||
el.classList.remove("x");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
del bbtreeview.min.js
|
||||
del bbtreeview.min.tmp
|
||||
del build/bbtreeview.min.js
|
||||
|
||||
cd src
|
||||
|
||||
type version.txt >> ../bbtreeview.min.js
|
||||
|
||||
"C:\B\Portable Files (dev)\Google Closure Compiler\closure-compiler-v20231112.jar" --js *.js --js_output_file ../bbtreeview.min.tmp
|
||||
|
||||
cd..
|
||||
|
||||
type bbtreeview.min.tmp >> bbtreeview.min.js
|
||||
|
||||
move bbtreeview.min.js build/bbtreeview.min.js
|
||||
|
||||
del bbtreeview.min.tmp
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
/**
|
||||
* BBTreeview
|
||||
* @version v0.1.2.011 (2024/01/07 0208)
|
||||
*/
|
||||
class BBTreeview{constructor(e){this.initialiseComponents(e)}initialiseComponents(e){this.Options=Object.assign(this.DefaultOptions.Treeview,e)}get Container(){let e=document.getElementsByTagName("body");return e.length<=0?null:(e=e[0].querySelectorAll(this.Options.ID),e.length<=0||(e[0].innerHTML='<ul class="bbtreeview"></ul>',e[0].querySelectorAll("ul.bbtreeview"),e.length<=0)?void 0:e[0])}get DefaultOptions(){return{Treeview:{ID:null,ShowCheckbox:!1,ShowSelection:!0,EnablePullUp:!1,ShowIcon:!0},TreeNode:{ID:null,ParentID:null,Name:"",Hint:"",Value:"",Icon:"folder",Checked:!1,Tag:null}}}AddItem(e){const t=this,n=t.getOptions(e);if(null!=t.Find(n.ID))return!1;let l=null;if(null!=n.ParentID&&(l=t.Find(n.ParentID),null==l))return!1;if(l=null==l?t.Container:l.GetChildNode(),null==l)return!1;const i=t.generateNodeHtml(n);t.appendHtml(l,i);t.Find(n.ID);return!0}Remove(e){const t=this.Find(e);return null!=t&&(t.Remove(),!0)}Clear(){this.initialiseComponents(this.Options)}CollapseAll(){this.GetAllNodes().forEach((function(e){e.Collapse()}))}ExpandAll(){this.GetAllNodes().forEach((function(e){e.Expand()}))}CheckAll(e){this.Options.ShowCheckbox&&this.GetAllNodes().forEach((function(t){t.IsChecked=e}))}Find(e){if(null==this.Container)return void console.log("BBTreeview container not found");const t=this.Container.querySelectorAll("li[data-bbtv-id='"+e+"']");if(t.length<=0)return null;let n=new BBTreeviewNode(this);return n.Load(t[0]),n}FindByName(e){let t=[];return this.GetAllNodes().forEach((function(n){n.Name==e&&t.push(n)})),t}FindByValue(e){let t=[];return this.GetAllNodes().forEach((function(n){n.Value==e&&t.push(n)})),t}GetAllNodes(){const e=this,t=e.Container.querySelectorAll("li");if(t.length<=0)return[];let n=[];return t.forEach((function(t){const l=t.getAttribute("data-bbtv-id");if(e.isNullOrWhitespace(l))return;const i=e.Find(l);null!=i&&n.push(i)})),n}GetCheckedNodes(){let e=[];return this.GetAllNodes().forEach((function(t){t.Checked&&e.push(t)})),e}GetCheckedValues(){let e=[];return this.GetCheckedNodes().map((function(t){e.push(t.Value)})),e}GetCheckedTags(){let e=[];return this.GetCheckedNodes().map((function(t){e.push(t.Tag)})),e}GetSelectedNode(){let e=null;return this.GetAllNodes().forEach((function(t){if(t.Highlighted)return e=t,!1})),e}appendHtml(e,t){let n=document.createElement("template");n.innerHTML=t,n=n.content.firstChild,e.appendChild(n)}generateID(){return"treeviewItem"+(Math.floor(1000001*Math.random())+100).toString()}generateNodeHtml(e){const t=this;let n="";t.isNullOrWhitespace(e.Tag)||(n=encodeURIComponent(JSON.stringify(e.Tag)));let l='<li data-bbtv-id="'+e.ID+'" data-bbtv-value="'+e.Value+'" data-bbtv-tag="'+n+'">';return l+='<div class="li">',t.Options.ShowCheckbox&&(l+='<div class="icon checkbox"></div>'),t.Options.ShowIcon?(l+='<div class="icon '+e.Icon+'"></div>',l+='<span title="'+e.Hint+'">'+e.Name+"</span>"):l+='<span class="noicon" title="'+e.Hint+'">'+e.Name+"</span>",l+="</div>",l+="<ul></ul>",l+="</li>",l}getNode(e){const t=this;let n=null;n=t.isTag(e,"li")?e:t.parentsUntilTagName(e,"li");const l=n.getAttribute("data-bbtv-id");return t.isNullOrWhitespace(l)?null:t.Find(l)}getOptions(e){const t=this;let n=Object.assign(t.DefaultOptions.TreeNode,e);return null==n.ID&&(n.ID=t.generateID()),null==n.Tag&&(n.Tag=""),n}isNullOrWhitespace(e){return void 0===e||(null==e||e.toString().trim().length<=0)}isTag(e,t){return e.tagName.toLowerCase()==t}parentsUntilTagName(e,t){const n=this;let l=e;for(;void 0!==l.parentNode&&(l=l.parentNode,void 0!==l);){if(n.isTag(l,"ul")&&l.classList.contains("bbtreeview"))return null;if(n.isTag(l,t))break}return l}}
|
||||
|
||||
class BBTreeviewNode{constructor(e){const t=this;t.Treeview=e,t.ID=null,t.Node=null,t.Container=null,t.Label=null,t.Value=null,t.Name="",t.Hint="",t.ParentID=null,t.IsChecked=!1,t.Highlighted=!1,t.Tag=null,t.initialiseComponents()}initialiseComponents(){}get IsChecked(){return!!this.Treeview.Options.ShowCheckbox&&this.Node.classList.contains("x")}set IsChecked(e){const t=this;t.setCheckbox(t.Node,e),t.Node.querySelectorAll("li").forEach((function(n){t.setCheckbox(n,e)}));let n=t.ParentNode;if(null!=n)if(t.Treeview.Options.EnablePullUp)for(;;){const e=n.querySelectorAll("li.x").length>0;if(t.setCheckbox(n,e),n=t.Treeview.getNode(n),n=n.GetParentNode(),null==n)break}else{let e=0;n.querySelectorAll("li").forEach((function(t){t.classList.contains("x")||e++})),t.setCheckbox(n,e<=0)}}get IsExpanded(){return!!this.Node.classList.contains("e")||!this.Node.classList.contains("c")&&null}get IsHighlighted(){return this.Container.classList.contains("highlighted")}get Tag(){let e=this.Node.getAttribute("data-bbtv-tag");return this.Treeview.isNullOrWhitespace(e)?null:JSON.parse(decodeURIComponent(e))}get ParentNodeID(){const e=this.ParentNode;return null==e?null:e.getAttribute("data-bbtv-id")}get ParentNode(){return this.parentsUntilTagName(this.Node,"li")}Load(e){const t=this;t.ID=e.getAttribute("data-bbtv-id"),t.Node=e,t.Container=e.querySelectorAll("div.li")[0],t.Label=e.querySelectorAll("span")[0],t.Value=e.getAttribute("data-bbtv-value"),t.Name=t.Label.textContent,t.Hint=t.Label.getAttribute("title"),t.ParentID=t.ParentNodeID,t.IsChecked=t.IsChecked,t.Highlighted=t.IsHighlighted,t.Tag=t.Tag,t.initialiseComponents_Events()}Collapse(){const e=this;e.Node.classList.contains("e")&&(e.Node.classList.remove("e"),e.Node.classList.add("c")),e.GetChildNodes().forEach((function(e){e.classList.add("hidden")}))}Expand(){const e=this;e.Node.classList.contains("c")&&(e.Node.classList.remove("c"),e.Node.classList.add("e")),e.GetChildNodes().forEach((function(e){e.classList.remove("hidden")}))}GetCheckbox(){if(!this.Treeview.Options.ShowCheckbox)return null;const e=this.Node.querySelectorAll("div.icon.checkbox");return void 0===e?null:e[0]}GetChildNode(){let e=this.Node.querySelectorAll("ul");return e.length<=0?null:e[0]}GetChildNodes(){const e=this.GetChildNode();if(null==e)return[];let t=e.querySelectorAll("li");if(t.length<=0)return[];let n=[];return t.forEach((function(t){void 0!==t.parentNode&&t.parentNode==e&&n.push(t)})),n}Remove(){const e=this;null!=e.ParentNode&&(e.ParentNode.classList.contains("e")&&e.ParentNode.classList.remove("e"),e.ParentNode.classList.contains("c")&&e.ParentNode.classList.remove("c")),e.Node.parentNode.removeChild(e.Node)}Toggle(){const e=this;switch(e.IsExpanded){case!0:e.Collapse();break;case!1:e.Expand()}}initialiseComponents_Events(){const e=this;e.Node.addEventListener("click",(function(t){if(t.stopPropagation(),t.preventDefault(),!e.isTag(t.target,"li"))return;if(t.offsetX<0||t.offsetX>16||t.offsetY<0||t.offsetY>16)return;const n=e.Treeview.getNode(t.target);null!=n&&n.Toggle()})),e.Container.addEventListener("dblclick",(function(t){t.stopPropagation(),t.preventDefault();const n=e.Treeview.getNode(t.target);null!=n&&n.Toggle()})),e.Treeview.Options.ShowCheckbox&&(e.GetCheckbox().addEventListener("mousedown",(function(t){t.stopPropagation(),t.preventDefault(),e.IsChecked=!e.IsChecked})),e.GetCheckbox().addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault()})),e.GetCheckbox().addEventListener("dblclick",(function(e){e.stopPropagation(),e.preventDefault()}))),e.Container.addEventListener("mousedown",(function(t){t.stopPropagation(),t.preventDefault();const n=e.Treeview.getNode(t.target);null!=n&&(e.Treeview.Container.querySelectorAll("div.highlighted").forEach((function(e){e.classList.remove("highlighted")})),e.Treeview.Options.ShowSelection&&n.Container.classList.add("highlighted"))})),e.invalidateCollapsible()}invalidateCollapsible(){const e=this;null!=e.ParentNode&&(e.ParentNode.classList.contains("c")?e.Node.classList.add("hidden"):(e.ParentNode.classList.contains("e")||e.ParentNode.classList.add("e"),e.Node.classList.remove("hidden")))}isTag=function(e,t){return e.tagName.toLowerCase()==t};parentsUntilTagName(e,t){const n=this;let s=e;for(;void 0!==s.parentNode&&(s=s.parentNode,void 0!==s);){if(n.isTag(s,"ul")&&s.classList.contains("bbtreeview"))return null;if(n.isTag(s,t))break}return s}setCheckbox(e,t){t?e.classList.contains("x")||e.classList.add("x"):e.classList.contains("x")&&e.classList.remove("x")}}
|
||||
|
|
@ -0,0 +1,397 @@
|
|||
class BBTreeview {
|
||||
constructor(options) {
|
||||
const a = this;
|
||||
|
||||
a.initialiseComponents(options);
|
||||
}
|
||||
|
||||
|
||||
initialiseComponents(options) {
|
||||
var a = this;
|
||||
|
||||
a.Options = Object.assign(a.DefaultOptions.Treeview, options);
|
||||
}
|
||||
|
||||
|
||||
get Container() {
|
||||
const a = this;
|
||||
|
||||
let result = document.getElementsByTagName("body");
|
||||
if (result.length <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
result = result[0].querySelectorAll(a.Options.ID);
|
||||
if (result.length <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
result[0].innerHTML = "<ul class=\"bbtreeview\"></ul>";
|
||||
|
||||
result[0].querySelectorAll("ul.bbtreeview");
|
||||
if (result.length <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
return result[0];
|
||||
}
|
||||
|
||||
get DefaultOptions() {
|
||||
return {
|
||||
Treeview: {
|
||||
ID: null,
|
||||
ShowCheckbox: false,
|
||||
ShowSelection: true,
|
||||
EnablePullUp: false,
|
||||
ShowIcon: true
|
||||
},
|
||||
TreeNode: {
|
||||
ID: null,
|
||||
ParentID: null,
|
||||
Name: "",
|
||||
Hint: "",
|
||||
Value: "",
|
||||
Icon: "folder",
|
||||
Checked: false,
|
||||
Tag: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
AddItem(options) {
|
||||
const a = this;
|
||||
const _options = a.getOptions(options);
|
||||
|
||||
// Don't add duplicate
|
||||
if (a.Find(_options.ID) != null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check parent exists
|
||||
let parentNode = null;
|
||||
if (_options.ParentID != null) {
|
||||
parentNode = a.Find(_options.ParentID);
|
||||
if (parentNode == null) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (parentNode == null) {
|
||||
parentNode = a.Container;
|
||||
} else {
|
||||
parentNode = parentNode.GetChildNode();
|
||||
}
|
||||
|
||||
if (parentNode == null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const nodeHtml = a.generateNodeHtml(_options);
|
||||
|
||||
// Add node
|
||||
a.appendHtml(parentNode, nodeHtml);
|
||||
|
||||
const node = a.Find(_options.ID);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
Remove(id) {
|
||||
const a = this;
|
||||
|
||||
const node = a.Find(id);
|
||||
if (node == null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
node.Remove();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
Clear() {
|
||||
const a = this;
|
||||
|
||||
a.initialiseComponents(a.Options);
|
||||
}
|
||||
|
||||
CollapseAll() {
|
||||
const a = this;
|
||||
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
e.Collapse();
|
||||
});
|
||||
}
|
||||
|
||||
ExpandAll() {
|
||||
const a = this;
|
||||
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
e.Expand();
|
||||
});
|
||||
}
|
||||
|
||||
CheckAll(value) {
|
||||
const a = this;
|
||||
|
||||
if (!a.Options.ShowCheckbox) {
|
||||
return;
|
||||
}
|
||||
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
e.IsChecked = value;
|
||||
});
|
||||
}
|
||||
|
||||
Find(id) {
|
||||
const a = this;
|
||||
|
||||
if (a.Container == null){
|
||||
console.log("BBTreeview container not found");
|
||||
return;
|
||||
}
|
||||
|
||||
const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']");
|
||||
if (node.length <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let treenode = new BBTreeviewNode(this);
|
||||
treenode.Load(node[0]);
|
||||
|
||||
return treenode;
|
||||
}
|
||||
|
||||
FindByName(value) {
|
||||
const a = this;
|
||||
|
||||
let response = [];
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
if (e.Name != value) {
|
||||
return;
|
||||
}
|
||||
|
||||
response.push(e);
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
FindByValue(value) {
|
||||
const a = this;
|
||||
|
||||
let response = [];
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
if (e.Value != value) {
|
||||
return;
|
||||
}
|
||||
|
||||
response.push(e);
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
GetAllNodes() {
|
||||
const a = this;
|
||||
|
||||
const node = a.Container.querySelectorAll("li");
|
||||
if (node.length <= 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
let response = [];
|
||||
node.forEach(function(e) {
|
||||
const id = e.getAttribute("data-bbtv-id");
|
||||
if (a.isNullOrWhitespace(id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const myNode = a.Find(id);
|
||||
if (myNode == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
response.push(myNode);
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
GetCheckedNodes() {
|
||||
const a = this;
|
||||
|
||||
let response = [];
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
if (!e.Checked) {
|
||||
return;
|
||||
}
|
||||
|
||||
response.push(e);
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
GetCheckedValues() {
|
||||
const a = this;
|
||||
|
||||
let response = [];
|
||||
a.GetCheckedNodes().map(function(e) {
|
||||
response.push(e.Value);
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
|
||||
GetCheckedTags() {
|
||||
const a = this;
|
||||
|
||||
let response = [];
|
||||
a.GetCheckedNodes().map(function(e) {
|
||||
response.push(e.Tag);
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
GetSelectedNode() {
|
||||
const a = this;
|
||||
|
||||
let response = null;
|
||||
a.GetAllNodes().forEach(function(e) {
|
||||
if (e.Highlighted) {
|
||||
response = e;
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
appendHtml(el, html) {
|
||||
let node = document.createElement('template');
|
||||
node.innerHTML = html;
|
||||
|
||||
node = node.content.firstChild;
|
||||
|
||||
el.appendChild(node);
|
||||
}
|
||||
|
||||
generateID() {
|
||||
return "treeviewItem" + (Math.floor(Math.random() * 1000001) + 100).toString();
|
||||
}
|
||||
|
||||
generateNodeHtml(options) {
|
||||
const a = this;
|
||||
|
||||
let 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">'
|
||||
|
||||
if (a.Options.ShowCheckbox) {
|
||||
html += '<div class="icon checkbox"></div>';
|
||||
}
|
||||
|
||||
if (a.Options.ShowIcon) {
|
||||
html += '<div class="icon ' + options.Icon + '"></div>';
|
||||
html += '<span title="' + options.Hint + '">' + options.Name + '</span>';
|
||||
} else {
|
||||
html += '<span class="noicon" title="' + options.Hint + '">' + options.Name + '</span>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
html += '<ul></ul>';
|
||||
html += '</li>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
getOptions(options) {
|
||||
const a = this;
|
||||
|
||||
let _options = Object.assign(a.DefaultOptions.TreeNode, options);
|
||||
|
||||
if (_options.ID == null) {
|
||||
_options.ID = a.generateID();
|
||||
}
|
||||
|
||||
if (_options.Tag == null) {
|
||||
_options.Tag = "";
|
||||
}
|
||||
|
||||
return _options;
|
||||
}
|
||||
|
||||
isNullOrWhitespace(value) {
|
||||
if (typeof (value) == "undefined") {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (value == null) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (value.toString().trim().length <= 0);
|
||||
}
|
||||
|
||||
isTag(el, tagName) {
|
||||
return (el.tagName.toLowerCase() == tagName);
|
||||
}
|
||||
|
||||
parentsUntilTagName(el, tagName) {
|
||||
const a = this;
|
||||
|
||||
let node = el;
|
||||
|
||||
while (true) {
|
||||
if (typeof(node.parentNode) == "undefined") {
|
||||
break;
|
||||
}
|
||||
|
||||
node = node.parentNode;
|
||||
|
||||
if (typeof(node) == "undefined") {
|
||||
break;
|
||||
}
|
||||
|
||||
if (a.isTag(node, "ul")) {
|
||||
if (node.classList.contains("bbtreeview")) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (a.isTag(node, tagName)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,418 @@
|
|||
class BBTreeviewNode {
|
||||
constructor(treeview) {
|
||||
const a = this;
|
||||
|
||||
a.Treeview = treeview;
|
||||
|
||||
a.ID = null;
|
||||
a.Node = null;
|
||||
|
||||
a.Container = null;
|
||||
a.Label = null;
|
||||
a.Value = null;
|
||||
|
||||
a.Name = "";
|
||||
a.Hint = "";
|
||||
|
||||
a.ParentID = null;
|
||||
a.IsChecked = false;
|
||||
a.Highlighted = false;
|
||||
a.Tag = null;
|
||||
|
||||
a.initialiseComponents();
|
||||
}
|
||||
|
||||
|
||||
initialiseComponents() {
|
||||
const a = this;
|
||||
}
|
||||
|
||||
|
||||
get IsChecked() {
|
||||
const a = this;
|
||||
|
||||
if (!a.Treeview.Options.ShowCheckbox) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return a.Node.classList.contains("x");
|
||||
}
|
||||
|
||||
set IsChecked(value) {
|
||||
const a = this;
|
||||
|
||||
a.setCheckbox(a.Node, value);
|
||||
|
||||
// Update children
|
||||
a.Node.querySelectorAll("li").forEach(function(e) {
|
||||
a.setCheckbox(e, value);
|
||||
});
|
||||
|
||||
// Update parent state
|
||||
let parentNode = a.ParentNode;
|
||||
if (parentNode == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle pull-ups
|
||||
if (a.Treeview.Options.EnablePullUp) {
|
||||
while (true) {
|
||||
const parentChecked = (parentNode.querySelectorAll("li.x").length > 0);
|
||||
|
||||
a.setCheckbox(parentNode, parentChecked);
|
||||
|
||||
parentNode = a.Treeview.getNode(parentNode);
|
||||
parentNode = parentNode.GetParentNode();
|
||||
|
||||
if (parentNode == null) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let uncheckedCount = 0;
|
||||
|
||||
parentNode.querySelectorAll("li").forEach(function(e) {
|
||||
if (e.classList.contains("x")) {
|
||||
return;
|
||||
}
|
||||
|
||||
uncheckedCount++;
|
||||
});
|
||||
|
||||
a.setCheckbox(parentNode, (uncheckedCount <= 0));
|
||||
}
|
||||
}
|
||||
|
||||
get IsExpanded() {
|
||||
const a = this;
|
||||
|
||||
if (a.Node.classList.contains("e")) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (a.Node.classList.contains("c")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
get IsHighlighted() {
|
||||
const a = this;
|
||||
|
||||
return (a.Container.classList.contains("highlighted"));
|
||||
}
|
||||
|
||||
get Tag() {
|
||||
const a = this;
|
||||
|
||||
let tag = a.Node.getAttribute("data-bbtv-tag");
|
||||
if (a.Treeview.isNullOrWhitespace(tag)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return JSON.parse(decodeURIComponent(tag));
|
||||
}
|
||||
|
||||
get ParentNodeID() {
|
||||
const a = this;
|
||||
|
||||
const parentNode = a.ParentNode;
|
||||
if (parentNode == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return parentNode.getAttribute("data-bbtv-id");
|
||||
}
|
||||
|
||||
get ParentNode() {
|
||||
const a = this;
|
||||
|
||||
return a.parentsUntilTagName(a.Node, "li");
|
||||
}
|
||||
|
||||
|
||||
Load(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.ParentNodeID;
|
||||
a.IsChecked = a.IsChecked;
|
||||
a.Highlighted = a.IsHighlighted;
|
||||
a.Tag = a.Tag;
|
||||
|
||||
a.initialiseComponents_Events();
|
||||
}
|
||||
|
||||
Collapse() {
|
||||
const a = this;
|
||||
|
||||
if (a.Node.classList.contains("e")) {
|
||||
a.Node.classList.remove("e");
|
||||
a.Node.classList.add("c");
|
||||
}
|
||||
|
||||
a.GetChildNodes().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.GetChildNodes().forEach(function(e) {
|
||||
e.classList.remove("hidden");
|
||||
});
|
||||
}
|
||||
|
||||
GetCheckbox() {
|
||||
const a = this;
|
||||
|
||||
if (!a.Treeview.Options.ShowCheckbox) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const checkboxes = a.Node.querySelectorAll("div.icon.checkbox");
|
||||
if (typeof(checkboxes) == "undefined") {
|
||||
return null;
|
||||
}
|
||||
|
||||
return checkboxes[0];
|
||||
}
|
||||
|
||||
GetChildNode() {
|
||||
const a = this;
|
||||
|
||||
let result = a.Node.querySelectorAll("ul");
|
||||
if (result.length <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return result[0];
|
||||
}
|
||||
|
||||
GetChildNodes() {
|
||||
const a = this;
|
||||
|
||||
const childNode = a.GetChildNode();
|
||||
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;
|
||||
}
|
||||
|
||||
Remove() {
|
||||
const a = this;
|
||||
|
||||
if (a.ParentNode != null) {
|
||||
if (a.ParentNode.classList.contains("e")) {
|
||||
a.ParentNode.classList.remove("e");
|
||||
}
|
||||
|
||||
if (a.ParentNode.classList.contains("c")) {
|
||||
a.ParentNode.classList.remove("c");
|
||||
}
|
||||
}
|
||||
|
||||
a.Node.parentNode.removeChild(a.Node);
|
||||
}
|
||||
|
||||
Toggle() {
|
||||
const a = this;
|
||||
|
||||
switch (a.IsExpanded) {
|
||||
case true:
|
||||
a.Collapse();
|
||||
break;
|
||||
case false:
|
||||
a.Expand();
|
||||
break;
|
||||
default: break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
initialiseComponents_Events() {
|
||||
const a = this;
|
||||
|
||||
// collapsible icon behaviour
|
||||
a.Node.addEventListener("click", 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();
|
||||
});
|
||||
|
||||
// collapsible label behaviour
|
||||
a.Container.addEventListener("dblclick", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
const myNode = a.Treeview.getNode(e.target);
|
||||
if (myNode == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
myNode.Toggle();
|
||||
});
|
||||
|
||||
// checkbox behaviour
|
||||
if (a.Treeview.Options.ShowCheckbox) {
|
||||
a.GetCheckbox().addEventListener("mousedown", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
a.IsChecked = !a.IsChecked;
|
||||
});
|
||||
|
||||
a.GetCheckbox().addEventListener("click", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// do nothing
|
||||
});
|
||||
|
||||
a.GetCheckbox().addEventListener("dblclick", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// do nothing
|
||||
});
|
||||
}
|
||||
|
||||
// highlighting
|
||||
a.Container.addEventListener("mousedown", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
const myNode = a.Treeview.getNode(e.target);
|
||||
if (myNode == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
a.Treeview.Container.querySelectorAll("div.highlighted").forEach(function(e) {
|
||||
e.classList.remove("highlighted");
|
||||
});
|
||||
|
||||
// Don't show selection
|
||||
if (!a.Treeview.Options.ShowSelection) {
|
||||
return;
|
||||
}
|
||||
|
||||
myNode.Container.classList.add("highlighted");
|
||||
});
|
||||
|
||||
a.invalidateCollapsible();
|
||||
}
|
||||
|
||||
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 = function(el, tagName) {
|
||||
return (el.tagName.toLowerCase() == tagName);
|
||||
}
|
||||
|
||||
parentsUntilTagName(el, tagName) {
|
||||
const a = this;
|
||||
|
||||
let node = el;
|
||||
|
||||
while (true) {
|
||||
if (typeof(node.parentNode) == "undefined") {
|
||||
break;
|
||||
}
|
||||
|
||||
node = node.parentNode;
|
||||
|
||||
if (typeof(node) == "undefined") {
|
||||
break;
|
||||
}
|
||||
|
||||
if (a.isTag(node, "ul")) {
|
||||
if (node.classList.contains("bbtreeview")) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (a.isTag(node, tagName)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
setCheckbox(el, value) {
|
||||
if (value) {
|
||||
if (!el.classList.contains("x")) {
|
||||
el.classList.add("x");
|
||||
}
|
||||
} else {
|
||||
if (el.classList.contains("x")) {
|
||||
el.classList.remove("x");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/**
|
||||
* BBTreeview
|
||||
* @version v0.1.2.011 (2024/01/07 0208)
|
||||
*/
|
||||
Loading…
Reference in New Issue