literyzjs-treeview/bbtreeview.js

702 lines
14 KiB
JavaScript

/**
* BBTreeview
* @version v0.1.0.223 (2023/09/08 2027)
*/
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);
// Events
node.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.getNode(e.target);
if (myNode == null) {
return;
}
a.Toggle(myNode);
});
// Setup checkbox events
if (a.Options.ShowCheckbox) {
node.GetCheckbox().addEventListener("mousedown", function(e){
e.stopPropagation();
e.preventDefault();
// node.Checked = !node.Checked;
// a.CheckNode(node, node.Checked);
node.Check(!node.IsChecked());
});
node.GetCheckbox().addEventListener("click", function(e){
e.stopPropagation();
e.preventDefault();
// do nothing
});
node.GetCheckbox().addEventListener("dblclick", function(e){
e.stopPropagation();
e.preventDefault();
// do nothing
});
}
// node.Label.addEventListener("click", function(e){
// e.stopPropagation();
// e.preventDefault();
// });
// Highlighting
node.Container.addEventListener("mousedown", function(e){
e.stopPropagation();
e.preventDefault();
const myNode = a.getNode(e.target);
if (myNode == null) {
return;
}
a.Container.querySelectorAll("div.highlighted").forEach(function(e) {
e.classList.remove("highlighted");
});
// Don't show selection
if (!a.Options.ShowSelection) {
return;
}
myNode.Container.classList.add("highlighted");
});
// Toggle
node.Container.addEventListener("dblclick", function(e){
e.stopPropagation();
e.preventDefault();
const myNode = a.getNode(e.target);
if (myNode == null) {
return;
}
a.Toggle(myNode);
});
// Invalidate state
if (node.GetParentNode() != null) {
if (node.GetParentNode().classList.contains("c")) {
node.Node.classList.add("hidden");
} else if (node.GetParentNode().classList.contains("e")) {
node.Node.classList.remove("hidden");
} else {
node.GetParentNode().classList.add("e");
node.Node.classList.remove("hidden");
}
}
return true;
};
BBTreeview.prototype.Remove = function(id) {
const a = this;
const node = a.Find(id);
if (node == null) {
return false;
}
node.Remove();
// node.Node.parentNode.removeChild(node.Node);
// if (node.GetParentNode() != null) {
// if (node.GetParentNode().classList.contains("e")) {
// node.GetParentNode().classList.remove("e");
// }
// if (node.GetParentNode().classList.contains("c")) {
// node.GetParentNode().classList.remove("c");
// }
// }
return true;
};
BBTreeview.prototype.Default = function() {
return {
TreeviewOptions: {
ID: null,
ShowCheckbox: false,
ShowSelection: true
},
TreeNodeOptions: {
ID: null,
ParentID: null,
Name: "",
Hint: "",
Value: "hello",
Icon: "folder",
Checked: false
}
};
};
// 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.GetParentNode() != null) {
// let uncheckedCount = 0;
// node.GetParentNode().querySelectorAll("li").forEach(function(e) {
// if (e.classList.contains("x")) {
// return;
// }
// uncheckedCount++;
// });
// a.setNodeCheckbox(node.GetParentNode(), (uncheckedCount <= 0));
// }
// };
BBTreeview.prototype.Clear = function() {
const a = this;
a.initialise(a.Options);
};
// BBTreeview.prototype.CollapseNode = function(node) {
// const a = this;
// node.Node.classList.remove("e");
// node.Node.classList.add("c");
// a.GetChildNodes(node.Node).forEach(function(e) {
// e.classList.add("hidden");
// });
// };
// BBTreeview.prototype.ExpandNode = function(node) {
// const a = this;
// node.Node.classList.remove("c");
// node.Node.classList.add("e");
// a.GetChildNodes(node.Node).forEach(function(e) {
// e.classList.remove("hidden");
// });
// };
BBTreeview.prototype.Find = function(id) {
const a = this;
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;
// let response = {
// ID: id,
// Node: 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],
// 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;
if (node.Node.classList.contains("c")) {
// a.ExpandNode(node);
node.Expand();
} else if (node.Node.classList.contains("e")) {
// a.CollapseNode(node);
node.Collapse();
} else {
// do nothing
}
};
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 html = '<li data-bbtv-id="' + options.ID + '" data-bbtv-value="' + options.Value + '">';
html += '<div class="li">'
if (a.Options.ShowCheckbox) {
html += '<div class="icon checkbox"></div>';
}
html += '<div class="icon ' + options.Icon + '"></div>';
html += '<span title="' + options.Hint + '">' + options.Name + '</span>';
html += '</div>';
html += '<ul></ul>';
html += '</li>';
return html;
};
// BBTreeview.prototype.getChildNode = function(node) {
// const a = this;
// let result = node.querySelectorAll("ul");
// if (result.length <= 0) {
// return null;
// }
// return result[0];
// };
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();
}
return _options;
};
BBTreeview.prototype.isNullOrWhitespace = function(value) {
if (typeof (value) == "undefined") {
return true;
}
if (value == null) {
return true;
}
return (value.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) {
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;
};
// 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");
// }
// }
// };
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.ParentNode: a.GetParentNode(node[0]);
// a.ChildNode: a.getChildNode(node[0]);
a.Container = node.querySelectorAll("div.li")[0];
a.Label = node.querySelectorAll("span")[0];
// a.Checked = a.IsChecked();
// a.Checkbox = a.GetCheckbox();
a.Value = node.getAttribute("data-bbtv-value");
};
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
if (a.GetParentNode() != null) {
let uncheckedCount = 0;
a.GetParentNode().querySelectorAll("li").forEach(function(e) {
if (e.classList.contains("x")) {
return;
}
uncheckedCount++;
});
a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0));
}
};
BBTreeviewNode.prototype.Collapse = function() {
const a = this;
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;
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.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.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.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.isTag = function(el, tagName) {
return (el.tagName.toLowerCase() == tagName);
};
BBTreeviewNode.prototype.parentsUntilTagName = function(el, tagName) {
const a = this;
let node = el;
while (true) {
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");
}
}
};