node
*/
if(nodes && nodes.length){
// Get parent ul
var ul = $E('ul.tree-node', parent);
// Create it if it doesn't exist
if(!ul){
ul = new Element('ul').addClass('tree-node').adopt(
new Element('li').addClass('spacer')
).injectInside(parent);
}
// Iterate through nodes array
nodes.each(function(node){
if(!this.isNode(node.id, parent)){
// Set default
if(!node['class']){
node['class'] = 'folder';
}
// title and link html
t = node.name || node.id;
// decode
t = string.decode(t);
h = t;
l = this.options.charLength;
// shorten
if(l){
if(h.length > l){
h = h.substring(0, l) + '...';
}
}
ul.adopt(
new Element('li', {
'id': this._escape(encodeURI(node.id))
}).adopt(
new Element('div', {
'class': 'tree-row',
events: {
mouseover: function(){
this.addClass('hover');
},
mouseout: function(){
this.removeClass('hover');
}
}
}).adopt(
new Element('div', {
'class': node['class'].contains('folder') ? 'tree-image' : 'tree-noimage',
events: {
'click': function(e){
e = new Event(e);
p = this.findParent(e.target);
this.toggleNode(e, p);
}.bind(this)
}
})
).adopt(
new Element('span', {
'class': node['class']
}).adopt(
new Element('a', {
'href': !node.url ? 'javascript:;' : node.url,
'tabindex': '1',
'title': t,
events : {
'click': function(e){
e = new Event(e);
p = this.findParent(e.target);
this.fireEvent('onNodeClick', [e, p]);
e.stop();
}.bind(this)
}
}).setHTML(h)
)
)
)
)
this.toggleNodeState(parent, 1);
this.fireEvent('onNodeCreate');
}else{
// Node exists, set as open
this.toggleNodeState(parent, 1);
}
}.bind(this))
}else{
// No new nodes, set as open
this.toggleNodeState(parent, 1);
}
},
/**
* Find the parent node
* @param {String} The child node id
* @return {Element} The parent node.
*/
findParent : function(el){
if($type(el) == 'element'){
n = el.parentNode;
while (n) {
if(n.nodeName == 'LI'){
return n;
}
n = n.parentNode;
}
}else{
return $E('li[id='+ this._escape(encodeURI(el)) +']', this.container);
}
},
/**
* Find a node by id
* @param {String} The child node title
* @param {String / Element} The parent node
* @return {Element} The node.
*/
findNode : function(id, parent){
if(!parent || parent == '/'){
parent = this.container;
}
if($type(parent) == 'string'){
parent = this.findParent(parent);
}
return $E('li[id='+ this._escape(encodeURI(id)) +']', parent) || false;
},
/**
* Toggle the loader class on the node span element
* @param {Element} The target node
*/
toggleLoader : function(node){
var span = $E('span', node), cls = this.options.loaderClass;
if(!span.hasClass(cls)){
span.$tmp = span.className || '';
span.className = cls;
}else{
span.removeClass(cls).addClass(span.$tmp);
span.$tmp = null;
}
},
/**
* Collapse all tree nodes except one excluded
* @param {Element} The excluded node
*/
collapseNodes : function(ex){
if(!ex) this.resetNodes();
var parent = ex.getParent();
$ES('li', parent).each(function(el){
if(el != ex){
if(el.getParent() == parent){
this.toggleNodeState(el, 0);
var child = this.getNode(el);
if(child){
child.addClass('hide');
}
}
}
}.bind(this));
},
/**
* Toggle a node's state, open or closed
* @param {Element} The node
*/
toggleNodeState : function(node, state){
var span = $E('span', node);
var div = $E('div.tree-image', node);
[span, div].each(function(el){
if(el){
if(state == 1){
el.addClass('open');
}else if(state == 0){
el.removeClass('open');
}else{
el.toggleClass('open');
}
}
});
if (state == 1) {
if(node.id == '/'){
return;
}
var c = $E('ul.tree-node', node);
if (c) {
if (span.hasClass('open')) {
c.removeClass('hide');
}
else {
c.addClass('hide');
}
}
}
},
/**
* Toggle a node
* @param {Element} The node
*/
toggleNode : function(e, node){
e = new Event(e);
// Force reload
if(e.shift){
return this.fireEvent('onNodeLoad', node);
}
var child = this.getNode(node);
// No children load or close
if(!child){
if($E('div.tree-image', node).hasClass('open')){
this.toggleNodeState(node);
}else{
this.fireEvent('onNodeLoad', node);
}
// Hide children, toggle node
}else{
child.toggleClass('hide');
this.toggleNodeState(node);
}
// Collpase the all other tree nodes
if(this.options.collapseTree){
this.collapseNodes(node);
}
},
/**
* Private function
* Escape a string
* @param {String} The string
* @return {String} The escaped string
*/
_escape : function(s){
return s.replace(/'/, '%27');
}
});
Tree.implement(new Events, new Options);