You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
454 lines
17 KiB
454 lines
17 KiB
/*----------------------------------------\ |
|
| Cross Browser Tree Widget 1.1 | |
|
|-----------------------------------------| |
|
| Created by Emil A. Eklund (eae@eae.net) | |
|
| For WebFX (http://webfx.eae.net/) | |
|
|-----------------------------------------| |
|
| This script is provided as is without | |
|
| any warranty whatsoever. It may be used | |
|
| free of charge for non commerical sites | |
|
| For commerical use contact the author | |
|
| of this script for further details. | |
|
|-----------------------------------------| |
|
| Created 2000-12-11 | Updated 2001-09-06 | |
|
\----------------------------------------*/ |
|
|
|
var webFXTreeConfig = { |
|
rootIcon : 'media/images/empty.png', |
|
openRootIcon : 'media/images/empty.png', |
|
folderIcon : 'media/images/empty.png', |
|
openFolderIcon : 'media/images/empty.png', |
|
fileIcon : 'media/images/empty.png', |
|
iIcon : 'media/images/I.png', |
|
lIcon : 'media/images/L.png', |
|
lMinusIcon : 'media/images/Lminus.png', |
|
lPlusIcon : 'media/images/Lplus.png', |
|
tIcon : 'media/images/T.png', |
|
tMinusIcon : 'media/images/Tminus.png', |
|
tPlusIcon : 'media/images/Tplus.png', |
|
blankIcon : 'media/images/blank.png', |
|
defaultText : 'Tree Item', |
|
defaultAction : 'javascript:void(0);', |
|
defaultTarget : 'right', |
|
defaultBehavior : 'classic' |
|
}; |
|
|
|
var webFXTreeHandler = { |
|
idCounter : 0, |
|
idPrefix : "webfx-tree-object-", |
|
all : {}, |
|
behavior : null, |
|
selected : null, |
|
getId : function() { return this.idPrefix + this.idCounter++; }, |
|
toggle : function (oItem) { this.all[oItem.id.replace('-plus','')].toggle(); }, |
|
select : function (oItem) { this.all[oItem.id.replace('-icon','')].select(); }, |
|
focus : function (oItem) { this.all[oItem.id.replace('-anchor','')].focus(); }, |
|
blur : function (oItem) { this.all[oItem.id.replace('-anchor','')].blur(); }, |
|
keydown : function (oItem) { return this.all[oItem.id].keydown(window.event.keyCode); }, |
|
cookies : new WebFXCookie() |
|
}; |
|
|
|
/* |
|
* WebFXCookie class |
|
*/ |
|
|
|
function WebFXCookie() { |
|
if (document.cookie.length) { this.cookies = ' ' + document.cookie; } |
|
} |
|
|
|
WebFXCookie.prototype.setCookie = function (key, value) { |
|
document.cookie = key + "=" + escape(value); |
|
} |
|
|
|
WebFXCookie.prototype.getCookie = function (key) { |
|
if (this.cookies) { |
|
var start = this.cookies.indexOf(' ' + key + '='); |
|
if (start == -1) { return null; } |
|
var end = this.cookies.indexOf(";", start); |
|
if (end == -1) { end = this.cookies.length; } |
|
end -= start; |
|
var cookie = this.cookies.substr(start,end); |
|
return unescape(cookie.substr(cookie.indexOf('=') + 1, cookie.length - cookie.indexOf('=') + 1)); |
|
} |
|
else { return null; } |
|
} |
|
|
|
/* |
|
* WebFXTreeAbstractNode class |
|
*/ |
|
|
|
function WebFXTreeAbstractNode(sText, sAction, sTarget) { |
|
this.childNodes = []; |
|
this.id = webFXTreeHandler.getId(); |
|
this.text = sText || webFXTreeConfig.defaultText; |
|
this.action = sAction || webFXTreeConfig.defaultAction; |
|
this.targetWindow = sTarget || webFXTreeConfig.defaultTarget; |
|
this._last = false; |
|
webFXTreeHandler.all[this.id] = this; |
|
} |
|
|
|
WebFXTreeAbstractNode.prototype.add = function (node) { |
|
node.parentNode = this; |
|
this.childNodes[this.childNodes.length] = node; |
|
var root = this; |
|
if (this.childNodes.length >=2) { |
|
this.childNodes[this.childNodes.length -2]._last = false; |
|
} |
|
while (root.parentNode) { root = root.parentNode; } |
|
if (root.rendered) { |
|
if (this.childNodes.length >= 2) { |
|
document.getElementById(this.childNodes[this.childNodes.length -2].id + '-plus').src = ((this.childNodes[this.childNodes.length -2].folder)?webFXTreeConfig.tMinusIcon:webFXTreeConfig.tIcon); |
|
if (this.childNodes[this.childNodes.length -2].folder) { |
|
this.childNodes[this.childNodes.length -2].plusIcon = webFXTreeConfig.tPlusIcon; |
|
this.childNodes[this.childNodes.length -2].minusIcon = webFXTreeConfig.tMinusIcon; |
|
} |
|
this.childNodes[this.childNodes.length -2]._last = false; |
|
} |
|
this._last = true; |
|
var foo = this; |
|
while (foo.parentNode) { |
|
for (var i = 0; i < foo.parentNode.childNodes.length; i++) { |
|
if (foo.id == foo.parentNode.childNodes[i].id) { break; } |
|
} |
|
if (++i == foo.parentNode.childNodes.length) { foo.parentNode._last = true; } |
|
else { foo.parentNode._last = false; } |
|
foo = foo.parentNode; |
|
} |
|
document.getElementById(this.id + '-cont').insertAdjacentHTML("beforeEnd", node.toString()); |
|
if ((!this.folder) && (!this.openIcon)) { |
|
this.icon = webFXTreeConfig.folderIcon; |
|
this.openIcon = webFXTreeConfig.openFolderIcon; |
|
} |
|
this.folder = true; |
|
this.indent(); |
|
this.expand(); |
|
} |
|
return node; |
|
} |
|
|
|
WebFXTreeAbstractNode.prototype.toggle = function() { |
|
if (this.folder) { |
|
if (this.open) { this.collapse(); } |
|
else { this.expand(); } |
|
} |
|
} |
|
|
|
WebFXTreeAbstractNode.prototype.select = function() { |
|
document.getElementById(this.id + '-anchor').focus(); |
|
} |
|
|
|
WebFXTreeAbstractNode.prototype.focus = function() { |
|
webFXTreeHandler.selected = this; |
|
if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) { document.getElementById(this.id + '-icon').src = this.openIcon; } |
|
document.getElementById(this.id + '-anchor').style.backgroundColor = 'highlight'; |
|
document.getElementById(this.id + '-anchor').style.color = 'highlighttext'; |
|
document.getElementById(this.id + '-anchor').focus(); |
|
} |
|
|
|
WebFXTreeAbstractNode.prototype.blur = function() { |
|
if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) { document.getElementById(this.id + '-icon').src = this.icon; } |
|
document.getElementById(this.id + '-anchor').style.backgroundColor = 'transparent'; |
|
document.getElementById(this.id + '-anchor').style.color = 'menutext'; |
|
} |
|
|
|
WebFXTreeAbstractNode.prototype.doExpand = function() { |
|
if (webFXTreeHandler.behavior == 'classic') { document.getElementById(this.id + '-icon').src = this.openIcon; } |
|
if (this.childNodes.length) { document.getElementById(this.id + '-cont').style.display = 'block'; } |
|
this.open = true; |
|
webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.length - 18), '1'); |
|
} |
|
|
|
WebFXTreeAbstractNode.prototype.doCollapse = function() { |
|
if (webFXTreeHandler.behavior == 'classic') { document.getElementById(this.id + '-icon').src = this.icon; } |
|
if (this.childNodes.length) { document.getElementById(this.id + '-cont').style.display = 'none'; } |
|
this.open = false; |
|
webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.length - 18), '0'); |
|
} |
|
|
|
WebFXTreeAbstractNode.prototype.expandAll = function() { |
|
this.expandChildren(); |
|
if ((this.folder) && (!this.open)) { this.expand(); } |
|
} |
|
|
|
WebFXTreeAbstractNode.prototype.expandChildren = function() { |
|
for (var i = 0; i < this.childNodes.length; i++) { |
|
this.childNodes[i].expandAll(); |
|
} } |
|
|
|
WebFXTreeAbstractNode.prototype.collapseAll = function() { |
|
if ((this.folder) && (this.open)) { this.collapse(); } |
|
this.collapseChildren(); |
|
} |
|
|
|
WebFXTreeAbstractNode.prototype.collapseChildren = function() { |
|
for (var i = 0; i < this.childNodes.length; i++) { |
|
this.childNodes[i].collapseAll(); |
|
} } |
|
|
|
WebFXTreeAbstractNode.prototype.indent = function(lvl, del, last, level) { |
|
/* |
|
* Since we only want to modify items one level below ourself, |
|
* and since the rightmost indentation position is occupied by |
|
* the plus icon we set this to -2 |
|
*/ |
|
if (lvl == null) { lvl = -2; } |
|
var state = 0; |
|
for (var i = this.childNodes.length - 1; i >= 0 ; i--) { |
|
state = this.childNodes[i].indent(lvl + 1, del, last, level); |
|
if (state) { return; } |
|
} |
|
if (del) { |
|
if (level >= this._level) { |
|
if (this.folder) { |
|
document.getElementById(this.id + '-plus').src = (this.open)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.lPlusIcon; |
|
this.plusIcon = webFXTreeConfig.lPlusIcon; |
|
this.minusIcon = webFXTreeConfig.lMinusIcon; |
|
} |
|
else { document.getElementById(this.id + '-plus').src = webFXTreeConfig.lIcon; } |
|
return 1; |
|
} |
|
} |
|
var foo = document.getElementById(this.id + '-indent-' + lvl); |
|
if (foo) { |
|
if ((del) && (last)) { foo._last = true; } |
|
if (foo._last) { foo.src = webFXTreeConfig.blankIcon; } |
|
else { foo.src = webFXTreeConfig.iIcon; } |
|
} |
|
return 0; |
|
} |
|
|
|
/* |
|
* WebFXTree class |
|
*/ |
|
|
|
function WebFXTree(sText, sAction, sBehavior, sIcon, sOpenIcon) { |
|
this.base = WebFXTreeAbstractNode; |
|
this.base(sText, sAction); |
|
this.icon = sIcon || webFXTreeConfig.rootIcon; |
|
this.openIcon = sOpenIcon || webFXTreeConfig.openRootIcon; |
|
/* Defaults to open */ |
|
this.open = (webFXTreeHandler.cookies.getCookie(this.id.substr(18,this.id.length - 18)) == '0')?false:true; |
|
this.folder = true; |
|
this.rendered = false; |
|
if (!webFXTreeHandler.behavior) { webFXTreeHandler.behavior = sBehavior || webFXTreeConfig.defaultBehavior; } |
|
this.targetWindow = 'right'; |
|
} |
|
|
|
WebFXTree.prototype = new WebFXTreeAbstractNode; |
|
|
|
WebFXTree.prototype.setBehavior = function (sBehavior) { |
|
webFXTreeHandler.behavior = sBehavior; |
|
}; |
|
|
|
WebFXTree.prototype.getBehavior = function (sBehavior) { |
|
return webFXTreeHandler.behavior; |
|
}; |
|
|
|
WebFXTree.prototype.getSelected = function() { |
|
if (webFXTreeHandler.selected) { return webFXTreeHandler.selected; } |
|
else { return null; } |
|
} |
|
|
|
WebFXTree.prototype.remove = function() { } |
|
|
|
WebFXTree.prototype.expand = function() { |
|
this.doExpand(); |
|
} |
|
|
|
WebFXTree.prototype.collapse = function() { |
|
this.focus(); |
|
this.doCollapse(); |
|
} |
|
|
|
WebFXTree.prototype.getFirst = function() { |
|
return null; |
|
} |
|
|
|
WebFXTree.prototype.getLast = function() { |
|
return null; |
|
} |
|
|
|
WebFXTree.prototype.getNextSibling = function() { |
|
return null; |
|
} |
|
|
|
WebFXTree.prototype.getPreviousSibling = function() { |
|
return null; |
|
} |
|
|
|
WebFXTree.prototype.keydown = function(key) { |
|
if (key == 39) { this.expand(); return false; } |
|
if (key == 37) { this.collapse(); return false; } |
|
if ((key == 40) && (this.open)) { this.childNodes[0].select(); return false; } |
|
return true; |
|
} |
|
|
|
WebFXTree.prototype.toString = function() { |
|
var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this)\">"; |
|
str += "<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\"><a href=\"" + this.action + "\" id=\"" + this.id + "-anchor\" target=\"" + this.targetWindow + "\" onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.blur(this);\">" + this.text + "</a></div>"; |
|
str += "<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">"; |
|
for (var i = 0; i < this.childNodes.length; i++) { |
|
str += this.childNodes[i].toString(i, this.childNodes.length); |
|
} |
|
str += "</div>"; |
|
this.rendered = true; |
|
return str; |
|
}; |
|
|
|
/* |
|
* WebFXTreeItem class |
|
*/ |
|
|
|
function WebFXTreeItem(sText, sAction, eParent, sIcon, sOpenIcon) { |
|
this.base = WebFXTreeAbstractNode; |
|
this.base(sText, sAction); |
|
/* Defaults to close */ |
|
this.open = (webFXTreeHandler.cookies.getCookie(this.id.substr(18,this.id.length - 18)) == '1')?true:false; |
|
if (eParent) { eParent.add(this); } |
|
if (sIcon) { this.icon = sIcon; } |
|
if (sOpenIcon) { this.openIcon = sOpenIcon; } |
|
} |
|
|
|
WebFXTreeItem.prototype = new WebFXTreeAbstractNode; |
|
|
|
WebFXTreeItem.prototype.remove = function() { |
|
var parentNode = this.parentNode; |
|
var prevSibling = this.getPreviousSibling(true); |
|
var nextSibling = this.getNextSibling(true); |
|
var folder = this.parentNode.folder; |
|
var last = ((nextSibling) && (nextSibling.parentNode) && (nextSibling.parentNode.id == parentNode.id))?false:true; |
|
this.getPreviousSibling().focus(); |
|
this._remove(); |
|
if (parentNode.childNodes.length == 0) { |
|
parentNode.folder = false; |
|
parentNode.open = false; |
|
} |
|
if (last) { |
|
if (parentNode.id == prevSibling.id) { |
|
document.getElementById(parentNode.id + '-icon').src = webFXTreeConfig.fileIcon; |
|
} |
|
else { } |
|
} |
|
if ((!prevSibling.parentNode) || (prevSibling.parentNode != parentNode)) { |
|
parentNode.indent(null, true, last, this._level); |
|
} |
|
if (document.getElementById(prevSibling.id + '-plus')) { |
|
if (nextSibling) { |
|
if ((parentNode == prevSibling) && (parentNode.getNextSibling)) { document.getElementById(prevSibling.id + '-plus').src = webFXTreeConfig.tIcon; } |
|
else if (nextSibling.parentNode != prevSibling) { document.getElementById(prevSibling.id + '-plus').src = webFXTreeConfig.lIcon; } |
|
} |
|
else { document.getElementById(prevSibling.id + '-plus').src = webFXTreeConfig.lIcon; } |
|
} |
|
} |
|
|
|
WebFXTreeItem.prototype._remove = function() { |
|
for (var i = this.childNodes.length - 1; i >= 0; i--) { |
|
this.childNodes[i]._remove(); |
|
} |
|
for (var i = 0; i < this.parentNode.childNodes.length; i++) { |
|
if (this.id == this.parentNode.childNodes[i].id) { |
|
for (var j = i; j < this.parentNode.childNodes.length; j++) { |
|
this.parentNode.childNodes[i] = this.parentNode.childNodes[i+1] |
|
} |
|
this.parentNode.childNodes.length = this.parentNode.childNodes.length - 1; |
|
if (i + 1 == this.parentNode.childNodes.length) { this.parentNode._last = true; } |
|
} |
|
} |
|
webFXTreeHandler.all[this.id] = null; |
|
if (document.getElementById(this.id)) { |
|
document.getElementById(this.id).innerHTML = ""; |
|
document.getElementById(this.id).removeNode(); |
|
} |
|
} |
|
|
|
WebFXTreeItem.prototype.expand = function() { |
|
this.doExpand(); |
|
document.getElementById(this.id + '-plus').src = this.minusIcon; |
|
} |
|
|
|
WebFXTreeItem.prototype.collapse = function() { |
|
this.focus(); |
|
this.doCollapse(); |
|
document.getElementById(this.id + '-plus').src = this.plusIcon; |
|
} |
|
|
|
WebFXTreeItem.prototype.getFirst = function() { |
|
return this.childNodes[0]; |
|
} |
|
|
|
WebFXTreeItem.prototype.getLast = function() { |
|
if (this.childNodes[this.childNodes.length - 1].open) { return this.childNodes[this.childNodes.length - 1].getLast(); } |
|
else { return this.childNodes[this.childNodes.length - 1]; } |
|
} |
|
|
|
WebFXTreeItem.prototype.getNextSibling = function() { |
|
for (var i = 0; i < this.parentNode.childNodes.length; i++) { |
|
if (this == this.parentNode.childNodes[i]) { break; } |
|
} |
|
if (++i == this.parentNode.childNodes.length) { return this.parentNode.getNextSibling(); } |
|
else { return this.parentNode.childNodes[i]; } |
|
} |
|
|
|
WebFXTreeItem.prototype.getPreviousSibling = function(b) { |
|
for (var i = 0; i < this.parentNode.childNodes.length; i++) { |
|
if (this == this.parentNode.childNodes[i]) { break; } |
|
} |
|
if (i == 0) { return this.parentNode; } |
|
else { |
|
if ((this.parentNode.childNodes[--i].open) || (b && this.parentNode.childNodes[i].folder)) { return this.parentNode.childNodes[i].getLast(); } |
|
else { return this.parentNode.childNodes[i]; } |
|
} } |
|
|
|
WebFXTreeItem.prototype.keydown = function(key) { |
|
if ((key == 39) && (this.folder)) { |
|
if (!this.open) { this.expand(); return false; } |
|
else { this.getFirst().select(); return false; } |
|
} |
|
else if (key == 37) { |
|
if (this.open) { this.collapse(); return false; } |
|
else { this.parentNode.select(); return false; } |
|
} |
|
else if (key == 40) { |
|
if (this.open) { this.getFirst().select(); return false; } |
|
else { |
|
var sib = this.getNextSibling(); |
|
if (sib) { sib.select(); return false; } |
|
} } |
|
else if (key == 38) { this.getPreviousSibling().select(); return false; } |
|
return true; |
|
} |
|
|
|
WebFXTreeItem.prototype.toString = function (nItem, nItemCount) { |
|
var foo = this.parentNode; |
|
var indent = ''; |
|
if (nItem + 1 == nItemCount) { this.parentNode._last = true; } |
|
var i = 0; |
|
while (foo.parentNode) { |
|
foo = foo.parentNode; |
|
indent = "<img id=\"" + this.id + "-indent-" + i + "\" src=\"" + ((foo._last)?webFXTreeConfig.blankIcon:webFXTreeConfig.iIcon) + "\">" + indent; |
|
i++; |
|
} |
|
this._level = i; |
|
if (this.childNodes.length) { this.folder = 1; } |
|
else { this.open = false; } |
|
if ((this.folder) || (webFXTreeHandler.behavior != 'classic')) { |
|
if (!this.icon) { this.icon = webFXTreeConfig.folderIcon; } |
|
if (!this.openIcon) { this.openIcon = webFXTreeConfig.openFolderIcon; } |
|
} |
|
else if (!this.icon) { this.icon = webFXTreeConfig.fileIcon; } |
|
var label = this.text; |
|
label = label.replace('<', '<'); |
|
label = label.replace('>', '>'); |
|
var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this)\">"; |
|
str += indent; |
|
str += "<img id=\"" + this.id + "-plus\" src=\"" + ((this.folder)?((this.open)?((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon):((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon)):((this.parentNode._last)?webFXTreeConfig.lIcon:webFXTreeConfig.tIcon)) + "\" onclick=\"webFXTreeHandler.toggle(this);\">" |
|
str += "<img id=\"" + this.id + "-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\"><a href=\"" + this.action + "\" id=\"" + this.id + "-anchor\" target=\"" + this.targetWindow + "\" onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.blur(this);\">" + label + "</a></div>"; |
|
str += "<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">"; |
|
for (var i = 0; i < this.childNodes.length; i++) { |
|
str += this.childNodes[i].toString(i,this.childNodes.length); |
|
} |
|
str += "</div>"; |
|
this.plusIcon = ((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon); |
|
this.minusIcon = ((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon); |
|
return str; |
|
} |