|
JavaXT
|
|
Tree Class
if(!javaxt) var javaxt={};
if(!javaxt.dhtml) javaxt.dhtml={};
//******************************************************************************
//** Tree View
//******************************************************************************
/**
* Used to create a hierarchical tree control with nodes and leaves. The
* nodes and leaves are "left-justified". Root nodes appear on the left and
* nested elements appear below and to the right of the parent nodes.
*
******************************************************************************/
javaxt.dhtml.Tree = function (parent, config) {
this.className = "javaxt.dhtml.Tree";
var me = this;
var defaultConfig = {
/** Style for individual elements within the component. The nodes and
* leaves in the tree are constructed using "ul" and "li" elements.
* Note that unlike most of the other components, you should provide
* CSS class names nodes, leaves, and path.
*/
style:{
rowHeight: "20px",
colWidth: "21px",
backgroundColor: "white",
cursor: "default",
padding: 0,
li: "",
label: {
},
//The following style are for icons that appear in the tree
leaf: "leaf",
node: {
open: "node_open",
closed: "node"
},
root: {
open: "root",
closed: "root"
},
path: {
node: {
open: {
middle: "join_node_middle_open",
last: "join_node_bottom_open"
},
closed: {
middle: "join_node_middle",
last: "join_node_bottom"
}
},
leaf: {
middle: "join_leaf_middle",
last: "join_leaf_bottom"
},
line: "join_line"
}
}
};
/** The following sets up the "display" style for the li and ul elements.
* This was added in 2024, after the tree demo stopped working on chrome.
*/
var display = {
ul: "grid",
li: "inline-table"
};
//**************************************************************************
//** Constructor
//**************************************************************************
var init = function(){
if (typeof parent === "string"){
parent = document.getElementById(parent);
}
if (!parent) return;
//Clone the config so we don't modify the original config object
var clone = {};
merge(clone, config);
//Merge clone with default config
merge(clone, defaultConfig);
config = clone;
//Create main ul
var ul = createUL(parent);
ul.style.cursor = config.style.cursor;
ul.style.padding = config.style.padding;
ul.onselectstart = function () {return false;};
ul.onmousedown = function () {return false;};
ul.setAttribute("desc", me.className);
me.el = ul;
//Add nodes
if (config.nodes){
me.addNodes(config.nodes);
}
};
//**************************************************************************
//** clear
//**************************************************************************
/** Used to remove all the nodes in the tree
*/
this.clear = function(){
me.el.innerHTML = "";
};
//**************************************************************************
//** addNodes
//**************************************************************************
/** Used to add nodes to the tree.
* @param An array of nodes (string or json with name, children, and
* expand properties) Example:
<pre>
var nodes = [
{
name: "javaxt-core", //root node
nodes: [
{
name: "javaxt.io",
nodes: ["Directory", "File", "Image", "Jar", "Shell"]
},
{
name: "javaxt.sql",
nodes:["Column", "Connection", "Recordset"],
expand: false
}
]
},
{
name: "javaxt-server", //root node
nodes: [
]
}
];
</pre>
* @param expandAll If true, will render all the nodes and leaves. Default
* is false.
*/
this.addNodes = function(nodes, expandAll){
var hiddenNodes = [];
addNodes(nodes, me.el, hiddenNodes);
if (expandAll===true) return;
for (var i=0; i<hiddenNodes.length; i++){
hide(hiddenNodes[i], true);
}
};
//**************************************************************************
//** onClick
//**************************************************************************
/** Called whenever an item is clicked in the tree.
* @param item The item that was clicked. See getItem() for more
* information.
*/
this.onClick = function(item){};
//**************************************************************************
//** onExpand
//**************************************************************************
/** Called whenever a node is expanded in the tree.
* @param item The node that was expanded. See getItem() for more
* information.
*/
this.onExpand = function(item){};
//**************************************************************************
//** onCollapse
//**************************************************************************
/** Called whenever a node is collapsed in the tree.
* @param item The node that was collapsed. See getItem() for more
* information.
*/
this.onCollapse = function(item){};
//**************************************************************************
//** getItem
//**************************************************************************
/** Returns a simple json object used to represent an item in the tree for a
* given path.
* <ul>
* <li>type: Item type (e.g. "node" or "leaf")</li>
* <li>name: Text/Label associated with the item</li>
* <li>el: DOM element used to render the item(e.g. "li")</li>
* </ul>
* @param path Path to an element in the tree, Accepts either a string
* array or a "/" delimited string.
*/
this.getItem = function(path){
if (!isArray(path)){
if (typeof path === "string"){
path = path.split("/");
}
else{
return null;
}
}
var findNode = function(key, nodes){
if (nodes){
for (var i=0; i<nodes.length; i++){
if (isLI(nodes[i])){
var li = nodes[i];
if (!li.getText){
continue;
}
if (key===li.getText()){
return li;
}
}
}
}
return null;
};
var target;
var nodes = me.el.childNodes;
for (var i=0; i<path.length; i++){
var key = path[i];
var node = findNode(key, nodes);
if (node){
if (i==path.length-1) target = node;
else{
var nextSibling = node.nextSibling;
if (nextSibling){
nodes = [];
for (var j=0; j<nextSibling.childNodes.length; j++){
var ul = nextSibling.childNodes[j];
if (isUL(ul)){
for (var k=0; k<ul.childNodes.length; k++){
var li = ul.childNodes[k];
if (isLI(li)){
nodes.push(li);
}
}
}
}
}
}
}
else{
return null;
}
}
if (target){
return getItem(target);
}
else{
return null;
}
};
//**************************************************************************
//** show
//**************************************************************************
/** Used to expand a given item in the tree. If no item is specified, then
* the
*/
this.show = function(item){
if (item){
var li = item.el;
var ul = li.parentNode;
show(ul);
//If the item is a node, expand children
if (getNodeType(li)!="leaf"){
var nextNode = li.nextSibling;
if (isUL(nextNode)){
show(nextNode);
}
}
//Check if the node is visible
if (li.offsetParent===null && ul!==me.el){
//Move up the tree
while (li.offsetParent===null){
ul = ul.parentNode;
if (isLI(ul)) ul = ul.parentNode;
show(ul);
if (me.el === ul){
break;
}
}
}
}
else{
//Show the tree if it is hidden
me.el.style.visibility = "";
me.el.style.display = "";
}
};
//**************************************************************************
//** hide
//**************************************************************************
this.hide = function(item){
if (item){
}
else{
//Hide the tree
me.el.style.visibility = "hidden";
me.el.style.display = "node";
}
};
//**************************************************************************
//** getPath
//**************************************************************************
/** Returns an array of parent nodes that form a path to the given item.
*/
this.getPath = function(item){
var arr = [];
if (item){
arr.push(item);
var el = item.el;
while (el!==me.el){
el = el.parentNode;
if (!el || el===me.el) break;
if (isUL(el)){
el = el.parentNode.previousSibling;
}
if (!el || el===me.el) break;
if (isLI(el)) arr.push(getItem(el));
}
}
return arr;
};
//**************************************************************************
//** getItem
//**************************************************************************
/** Returns a simple json object used to represent an item in the tree.
*/
var getItem = function(li){
return {
type: getNodeType(li),
name: li.getText(),
node: li.node,
el: li
};
};
//**************************************************************************
//** addNodes
//**************************************************************************
/** Used to add nodes under a given node (ul) in the tree. Node that this
* method will be called recursively for any nodes that have children.
* @param An array of nodes (string or json with name, children, and
* expand properties).
* @param parent DOM element. Accepts either "ul" (preferred) or "li".
* @param hiddenNodes An array of "ul" nodes to hide.
*/
var addNodes = function(nodes, parent, hiddenNodes){
if (!nodes || nodes.length===0) return;
var lastNode;
for (var i=0; i<nodes.length; i++){
//Get node
var node = nodes[i];
if (isString(node)){
var name = node;
node = {
name: name,
expand: false,
children: false
};
}
//Get children
var children = node.nodes;
if (!children) children = node.leaves;
//Create new parent as needed
if (isLI(parent)) parent = createUL(parent);
//Create node
var li = createLI(parent);
li.node = node;
li.onclick = function(){
var li = this;
if (li.nextSibling){
var ul;
if (li.nextSibling){
for (var j=0; j<li.nextSibling.childNodes.length; j++){
if (isUL(li.nextSibling.childNodes[j])){
ul = li.nextSibling.childNodes[j];
break;
}
}
}
if (ul) {
if (ul.style.visibility === "hidden"){
show(ul);
}
else{
hide(ul);
}
}
}
me.onClick(getItem(this));
};
//Create container for child nodes as needed. Do this before calling
//the getNodeType() method.
var ul;
if (children){
ul = createUL(createLI(parent));
ul.style.width = "100%";
//Add "join_line" to previous ul
addLine(ul.parentNode);
}
//Determine nodeType (for style purposes)
var nodeType = getNodeType(li);
//Set join icon style
if (nodeType!=="root"){
var style = getJoinStyle(nodeType, true, (i===nodes.length-1));
if (style){
//Set className to display the join icon
li.className = style;
//Set padding to make the join icon visible
li.style.paddingLeft = config.style.colWidth;
}
}
else{
//Root nodes don't need a join icon
li.style.padding = 0;
li.style.background = "none";
}
//Select icon to use in the label
var icon;
if (nodeType=="leaf"){
icon = config.style.leaf;
}
else{
icon = config.style[nodeType].open;
}
//Add icon and label
createLabel(node.name, icon, li);
if (children){
if (nodeType!=="root"){
ul.style.paddingLeft = config.style.colWidth;
}
var expand = false;
if (node.expand===true) expand = true;
if (!expand) hiddenNodes.push(ul); //hide(ul);
addNodes(children, ul, hiddenNodes);
}
lastNode = li;
}
//Special case for leaves that fall alongside nodes. Add "join_line"
//to previous ul
if (lastNode){
var nodeType = getNodeType(lastNode);
if (nodeType==="leaf"){
addLine(lastNode);
}
}
};
//**************************************************************************
//** addLine
//**************************************************************************
/** Used to add "join_line" to previous ul.
*/
var addLine = function(li){
var previousSibling = li.previousSibling;
while (previousSibling){
for (var j=0; j<previousSibling.childNodes.length; j++){
if (isUL(previousSibling.childNodes[j])){
var _ul = previousSibling.childNodes[j];
addStyle(_ul, config.style.path.line);
_ul.style.height = "100%";
break;
}
}
previousSibling = previousSibling.previousSibling;
}
};
//**************************************************************************
//** showNode
//**************************************************************************
/** Used to expand a node and make its contents visible.
*/
var show = function(ul, silent){
if (ul===me.el) return;
ul.parentNode.style.visibility = "";
ul.parentNode.style.display = display.li;
ul.style.visibility = "";
ul.style.display = display.ul;
//Update icons
var li = ul.parentNode.previousSibling;
if (li){
var nodeType = getNodeType(li);
var style = getJoinStyle(nodeType, true, isLast(ul.parentNode));
if (style) li.className = style;
if (nodeType!=="leaf") li.setIcon(config.style[nodeType].open);
//Fire onExpand event
if (silent===true) return;
me.onExpand(getItem(li));
}
};
//**************************************************************************
//** hideNode
//**************************************************************************
/** Used to collapse a node and hide its contents.
*/
var hide = function(ul, silent){
if (ul===me.el) return;
ul.style.visibility = "hidden";
ul.style.display = "none";
ul.parentNode.style.visibility = "hidden";
ul.parentNode.style.display = "none";
//Update icons
var li = ul.parentNode.previousSibling;
if (li){
var nodeType = getNodeType(li);
var style = getJoinStyle(nodeType, false, isLast(ul.parentNode));
if (style) li.className = style;
if (nodeType!=="leaf") li.setIcon(config.style[nodeType].closed);
//Fire onCollapse event
if (silent===true) return;
me.onCollapse(getItem(li));
}
};
//**************************************************************************
//** createLabel
//**************************************************************************
var createLabel = function(label, icon, li){
var outerDiv = createElement("div", li);
outerDiv.style.width = "100%";
outerDiv.style.backgroundColor = config.style.backgroundColor;
outerDiv.style.position = "relative";
outerDiv.style.overflow = "hidden";
outerDiv.style.height = config.style.rowHeight;
var iconDiv;
if (icon){
iconDiv = createElement("div", outerDiv, icon);
iconDiv.style.display = "inline-block";
iconDiv.style.position = "absolute";
}
var labelDiv;
if (label){
var labelDiv = createElement("div", outerDiv, config.style.label);
labelDiv.style.display = "inline-block";
labelDiv.style.position = "absolute";
labelDiv.style.paddingLeft = config.style.colWidth;
labelDiv.style.lineHeight = config.style.rowHeight;
labelDiv.innerHTML = label.replace(/^\s*/, "").replace(/\s*$/, ""); //trim()
}
li.setIcon = function(icon){
if (iconDiv) iconDiv.className = icon;
};
li.getText = function(){
return labelDiv.innerText;
};
};
//**************************************************************************
//** getNodeType
//**************************************************************************
/** Returns the type of node represented by a given li (e.g. root, node, or
* leaf).
*/
var getNodeType = function(li){
if (li.parentNode===me.el){
return "root";
}
else{
var hasChildren = false;
if (li.nextSibling){
for (var i=0; i<li.nextSibling.childNodes.length; i++){
if (isUL(li.nextSibling.childNodes[i])){
hasChildren = true;
break;
}
}
}
if (hasChildren) return "node";
else return "leaf";
}
};
//**************************************************************************
//** isLast
//**************************************************************************
/** Used to determine if an li has any siblings below it.
*/
var isLast = function(li){
var siblings = li.parentNode.childNodes;
for (var i=0; i<siblings.length; i++){
if (siblings[i]===li){
var foundSibling = false;
for (var j=i+1; j<siblings.length; j++){
if (isLI(siblings[j])){
foundSibling = true;
break;
}
}
if (foundSibling) return false;
}
}
return true;
};
//**************************************************************************
//** getJoinStyle
//**************************************************************************
/** Returns the join icon style/class for a given nodeType.
*/
var getJoinStyle = function(nodeType, isOpen, isLast){
if (nodeType!=="root"){
var joinStyle = isLast ? "last" : "middle";
var style = config.style.path[nodeType];
if (nodeType!=="leaf"){
if (isOpen) style = style.open;
else style = style.closed;
}
style = style[joinStyle];
if (typeof style === "string"){
return style;
}
else{
//TODO: Create style? We cannot rely on setStyle b/c we need
//to update the style whenever we expand/collapse the node.
}
}
return null;
};
//**************************************************************************
//** createUL
//**************************************************************************
/** Used to create a "ul" element for the tree
*/
var createUL = function(parent){
if (parent.tagName.toLowerCase()==="ul"){
parent = createLI(parent);
}
return createElement("ul", parent, {
listStyleType: "none",
padding: 0,
margin: 0,
display: display.ul,
backgroundColor: config.style.backgroundColor
});
};
//**************************************************************************
//** createLI
//**************************************************************************
/** Used to create a "li" element for the tree
*/
var createLI = function(parent){
var li = createElement("li", parent, config.style.li);
li.style.width = "100%";
li.style.display = display.li;
li.setIcon = function(icon){};
li.getText = function(){};
return li;
};
var isLI = function(el){
return isTag(el, "li");
};
var isUL = function(el){
return isTag(el, "ul");
};
var isTag = function(el, tag){
return el.tagName.toLowerCase()===tag;
};
//**************************************************************************
//** Utils
//**************************************************************************
var merge = javaxt.dhtml.utils.merge;
var addStyle = javaxt.dhtml.utils.addStyle;
var isArray = javaxt.dhtml.utils.isArray;
var isString = javaxt.dhtml.utils.isString;
var createElement = javaxt.dhtml.utils.createElement;
init();
};
|
|