classTree.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  1. /*----------------------------------------\
  2. | Cross Browser Tree Widget 1.1 |
  3. |-----------------------------------------|
  4. | Created by Emil A. Eklund (eae@eae.net) |
  5. | For WebFX (http://webfx.eae.net/) |
  6. |-----------------------------------------|
  7. | This script is provided as is without |
  8. | any warranty whatsoever. It may be used |
  9. | free of charge for non commerical sites |
  10. | For commerical use contact the author |
  11. | of this script for further details. |
  12. |-----------------------------------------|
  13. | Created 2000-12-11 | Updated 2001-09-06 |
  14. \----------------------------------------*/
  15. var webFXTreeConfig = {
  16. rootIcon : 'media/images/empty.png',
  17. openRootIcon : 'media/images/empty.png',
  18. folderIcon : 'media/images/empty.png',
  19. openFolderIcon : 'media/images/empty.png',
  20. fileIcon : 'media/images/empty.png',
  21. iIcon : 'media/images/I.png',
  22. lIcon : 'media/images/L.png',
  23. lMinusIcon : 'media/images/Lminus.png',
  24. lPlusIcon : 'media/images/Lplus.png',
  25. tIcon : 'media/images/T.png',
  26. tMinusIcon : 'media/images/Tminus.png',
  27. tPlusIcon : 'media/images/Tplus.png',
  28. blankIcon : 'media/images/blank.png',
  29. defaultText : 'Tree Item',
  30. defaultAction : 'javascript:void(0);',
  31. defaultTarget : 'right',
  32. defaultBehavior : 'classic'
  33. };
  34. var webFXTreeHandler = {
  35. idCounter : 0,
  36. idPrefix : "webfx-tree-object-",
  37. all : {},
  38. behavior : null,
  39. selected : null,
  40. getId : function() { return this.idPrefix + this.idCounter++; },
  41. toggle : function (oItem) { this.all[oItem.id.replace('-plus','')].toggle(); },
  42. select : function (oItem) { this.all[oItem.id.replace('-icon','')].select(); },
  43. focus : function (oItem) { this.all[oItem.id.replace('-anchor','')].focus(); },
  44. blur : function (oItem) { this.all[oItem.id.replace('-anchor','')].blur(); },
  45. keydown : function (oItem) { return this.all[oItem.id].keydown(window.event.keyCode); },
  46. cookies : new WebFXCookie()
  47. };
  48. /*
  49. * WebFXCookie class
  50. */
  51. function WebFXCookie() {
  52. if (document.cookie.length) { this.cookies = ' ' + document.cookie; }
  53. }
  54. WebFXCookie.prototype.setCookie = function (key, value) {
  55. document.cookie = key + "=" + escape(value);
  56. }
  57. WebFXCookie.prototype.getCookie = function (key) {
  58. if (this.cookies) {
  59. var start = this.cookies.indexOf(' ' + key + '=');
  60. if (start == -1) { return null; }
  61. var end = this.cookies.indexOf(";", start);
  62. if (end == -1) { end = this.cookies.length; }
  63. end -= start;
  64. var cookie = this.cookies.substr(start,end);
  65. return unescape(cookie.substr(cookie.indexOf('=') + 1, cookie.length - cookie.indexOf('=') + 1));
  66. }
  67. else { return null; }
  68. }
  69. /*
  70. * WebFXTreeAbstractNode class
  71. */
  72. function WebFXTreeAbstractNode(sText, sAction, sTarget) {
  73. this.childNodes = [];
  74. this.id = webFXTreeHandler.getId();
  75. this.text = sText || webFXTreeConfig.defaultText;
  76. this.action = sAction || webFXTreeConfig.defaultAction;
  77. this.targetWindow = sTarget || webFXTreeConfig.defaultTarget;
  78. this._last = false;
  79. webFXTreeHandler.all[this.id] = this;
  80. }
  81. WebFXTreeAbstractNode.prototype.add = function (node) {
  82. node.parentNode = this;
  83. this.childNodes[this.childNodes.length] = node;
  84. var root = this;
  85. if (this.childNodes.length >=2) {
  86. this.childNodes[this.childNodes.length -2]._last = false;
  87. }
  88. while (root.parentNode) { root = root.parentNode; }
  89. if (root.rendered) {
  90. if (this.childNodes.length >= 2) {
  91. document.getElementById(this.childNodes[this.childNodes.length -2].id + '-plus').src = ((this.childNodes[this.childNodes.length -2].folder)?webFXTreeConfig.tMinusIcon:webFXTreeConfig.tIcon);
  92. if (this.childNodes[this.childNodes.length -2].folder) {
  93. this.childNodes[this.childNodes.length -2].plusIcon = webFXTreeConfig.tPlusIcon;
  94. this.childNodes[this.childNodes.length -2].minusIcon = webFXTreeConfig.tMinusIcon;
  95. }
  96. this.childNodes[this.childNodes.length -2]._last = false;
  97. }
  98. this._last = true;
  99. var foo = this;
  100. while (foo.parentNode) {
  101. for (var i = 0; i < foo.parentNode.childNodes.length; i++) {
  102. if (foo.id == foo.parentNode.childNodes[i].id) { break; }
  103. }
  104. if (++i == foo.parentNode.childNodes.length) { foo.parentNode._last = true; }
  105. else { foo.parentNode._last = false; }
  106. foo = foo.parentNode;
  107. }
  108. document.getElementById(this.id + '-cont').insertAdjacentHTML("beforeEnd", node.toString());
  109. if ((!this.folder) && (!this.openIcon)) {
  110. this.icon = webFXTreeConfig.folderIcon;
  111. this.openIcon = webFXTreeConfig.openFolderIcon;
  112. }
  113. this.folder = true;
  114. this.indent();
  115. this.expand();
  116. }
  117. return node;
  118. }
  119. WebFXTreeAbstractNode.prototype.toggle = function() {
  120. if (this.folder) {
  121. if (this.open) { this.collapse(); }
  122. else { this.expand(); }
  123. }
  124. }
  125. WebFXTreeAbstractNode.prototype.select = function() {
  126. document.getElementById(this.id + '-anchor').focus();
  127. }
  128. WebFXTreeAbstractNode.prototype.focus = function() {
  129. webFXTreeHandler.selected = this;
  130. if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) { document.getElementById(this.id + '-icon').src = this.openIcon; }
  131. document.getElementById(this.id + '-anchor').style.backgroundColor = 'highlight';
  132. document.getElementById(this.id + '-anchor').style.color = 'highlighttext';
  133. document.getElementById(this.id + '-anchor').focus();
  134. }
  135. WebFXTreeAbstractNode.prototype.blur = function() {
  136. if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) { document.getElementById(this.id + '-icon').src = this.icon; }
  137. document.getElementById(this.id + '-anchor').style.backgroundColor = 'transparent';
  138. document.getElementById(this.id + '-anchor').style.color = 'menutext';
  139. }
  140. WebFXTreeAbstractNode.prototype.doExpand = function() {
  141. if (webFXTreeHandler.behavior == 'classic') { document.getElementById(this.id + '-icon').src = this.openIcon; }
  142. if (this.childNodes.length) { document.getElementById(this.id + '-cont').style.display = 'block'; }
  143. this.open = true;
  144. webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.length - 18), '1');
  145. }
  146. WebFXTreeAbstractNode.prototype.doCollapse = function() {
  147. if (webFXTreeHandler.behavior == 'classic') { document.getElementById(this.id + '-icon').src = this.icon; }
  148. if (this.childNodes.length) { document.getElementById(this.id + '-cont').style.display = 'none'; }
  149. this.open = false;
  150. webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.length - 18), '0');
  151. }
  152. WebFXTreeAbstractNode.prototype.expandAll = function() {
  153. this.expandChildren();
  154. if ((this.folder) && (!this.open)) { this.expand(); }
  155. }
  156. WebFXTreeAbstractNode.prototype.expandChildren = function() {
  157. for (var i = 0; i < this.childNodes.length; i++) {
  158. this.childNodes[i].expandAll();
  159. } }
  160. WebFXTreeAbstractNode.prototype.collapseAll = function() {
  161. if ((this.folder) && (this.open)) { this.collapse(); }
  162. this.collapseChildren();
  163. }
  164. WebFXTreeAbstractNode.prototype.collapseChildren = function() {
  165. for (var i = 0; i < this.childNodes.length; i++) {
  166. this.childNodes[i].collapseAll();
  167. } }
  168. WebFXTreeAbstractNode.prototype.indent = function(lvl, del, last, level) {
  169. /*
  170. * Since we only want to modify items one level below ourself,
  171. * and since the rightmost indentation position is occupied by
  172. * the plus icon we set this to -2
  173. */
  174. if (lvl == null) { lvl = -2; }
  175. var state = 0;
  176. for (var i = this.childNodes.length - 1; i >= 0 ; i--) {
  177. state = this.childNodes[i].indent(lvl + 1, del, last, level);
  178. if (state) { return; }
  179. }
  180. if (del) {
  181. if (level >= this._level) {
  182. if (this.folder) {
  183. document.getElementById(this.id + '-plus').src = (this.open)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.lPlusIcon;
  184. this.plusIcon = webFXTreeConfig.lPlusIcon;
  185. this.minusIcon = webFXTreeConfig.lMinusIcon;
  186. }
  187. else { document.getElementById(this.id + '-plus').src = webFXTreeConfig.lIcon; }
  188. return 1;
  189. }
  190. }
  191. var foo = document.getElementById(this.id + '-indent-' + lvl);
  192. if (foo) {
  193. if ((del) && (last)) { foo._last = true; }
  194. if (foo._last) { foo.src = webFXTreeConfig.blankIcon; }
  195. else { foo.src = webFXTreeConfig.iIcon; }
  196. }
  197. return 0;
  198. }
  199. /*
  200. * WebFXTree class
  201. */
  202. function WebFXTree(sText, sAction, sBehavior, sIcon, sOpenIcon) {
  203. this.base = WebFXTreeAbstractNode;
  204. this.base(sText, sAction);
  205. this.icon = sIcon || webFXTreeConfig.rootIcon;
  206. this.openIcon = sOpenIcon || webFXTreeConfig.openRootIcon;
  207. /* Defaults to open */
  208. this.open = (webFXTreeHandler.cookies.getCookie(this.id.substr(18,this.id.length - 18)) == '0')?false:true;
  209. this.folder = true;
  210. this.rendered = false;
  211. if (!webFXTreeHandler.behavior) { webFXTreeHandler.behavior = sBehavior || webFXTreeConfig.defaultBehavior; }
  212. this.targetWindow = 'right';
  213. }
  214. WebFXTree.prototype = new WebFXTreeAbstractNode;
  215. WebFXTree.prototype.setBehavior = function (sBehavior) {
  216. webFXTreeHandler.behavior = sBehavior;
  217. };
  218. WebFXTree.prototype.getBehavior = function (sBehavior) {
  219. return webFXTreeHandler.behavior;
  220. };
  221. WebFXTree.prototype.getSelected = function() {
  222. if (webFXTreeHandler.selected) { return webFXTreeHandler.selected; }
  223. else { return null; }
  224. }
  225. WebFXTree.prototype.remove = function() { }
  226. WebFXTree.prototype.expand = function() {
  227. this.doExpand();
  228. }
  229. WebFXTree.prototype.collapse = function() {
  230. this.focus();
  231. this.doCollapse();
  232. }
  233. WebFXTree.prototype.getFirst = function() {
  234. return null;
  235. }
  236. WebFXTree.prototype.getLast = function() {
  237. return null;
  238. }
  239. WebFXTree.prototype.getNextSibling = function() {
  240. return null;
  241. }
  242. WebFXTree.prototype.getPreviousSibling = function() {
  243. return null;
  244. }
  245. WebFXTree.prototype.keydown = function(key) {
  246. if (key == 39) { this.expand(); return false; }
  247. if (key == 37) { this.collapse(); return false; }
  248. if ((key == 40) && (this.open)) { this.childNodes[0].select(); return false; }
  249. return true;
  250. }
  251. WebFXTree.prototype.toString = function() {
  252. var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this)\">";
  253. 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>";
  254. str += "<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
  255. for (var i = 0; i < this.childNodes.length; i++) {
  256. str += this.childNodes[i].toString(i, this.childNodes.length);
  257. }
  258. str += "</div>";
  259. this.rendered = true;
  260. return str;
  261. };
  262. /*
  263. * WebFXTreeItem class
  264. */
  265. function WebFXTreeItem(sText, sAction, eParent, sIcon, sOpenIcon) {
  266. this.base = WebFXTreeAbstractNode;
  267. this.base(sText, sAction);
  268. /* Defaults to close */
  269. this.open = (webFXTreeHandler.cookies.getCookie(this.id.substr(18,this.id.length - 18)) == '1')?true:false;
  270. if (eParent) { eParent.add(this); }
  271. if (sIcon) { this.icon = sIcon; }
  272. if (sOpenIcon) { this.openIcon = sOpenIcon; }
  273. }
  274. WebFXTreeItem.prototype = new WebFXTreeAbstractNode;
  275. WebFXTreeItem.prototype.remove = function() {
  276. var parentNode = this.parentNode;
  277. var prevSibling = this.getPreviousSibling(true);
  278. var nextSibling = this.getNextSibling(true);
  279. var folder = this.parentNode.folder;
  280. var last = ((nextSibling) && (nextSibling.parentNode) && (nextSibling.parentNode.id == parentNode.id))?false:true;
  281. this.getPreviousSibling().focus();
  282. this._remove();
  283. if (parentNode.childNodes.length == 0) {
  284. parentNode.folder = false;
  285. parentNode.open = false;
  286. }
  287. if (last) {
  288. if (parentNode.id == prevSibling.id) {
  289. document.getElementById(parentNode.id + '-icon').src = webFXTreeConfig.fileIcon;
  290. }
  291. else { }
  292. }
  293. if ((!prevSibling.parentNode) || (prevSibling.parentNode != parentNode)) {
  294. parentNode.indent(null, true, last, this._level);
  295. }
  296. if (document.getElementById(prevSibling.id + '-plus')) {
  297. if (nextSibling) {
  298. if ((parentNode == prevSibling) && (parentNode.getNextSibling)) { document.getElementById(prevSibling.id + '-plus').src = webFXTreeConfig.tIcon; }
  299. else if (nextSibling.parentNode != prevSibling) { document.getElementById(prevSibling.id + '-plus').src = webFXTreeConfig.lIcon; }
  300. }
  301. else { document.getElementById(prevSibling.id + '-plus').src = webFXTreeConfig.lIcon; }
  302. }
  303. }
  304. WebFXTreeItem.prototype._remove = function() {
  305. for (var i = this.childNodes.length - 1; i >= 0; i--) {
  306. this.childNodes[i]._remove();
  307. }
  308. for (var i = 0; i < this.parentNode.childNodes.length; i++) {
  309. if (this.id == this.parentNode.childNodes[i].id) {
  310. for (var j = i; j < this.parentNode.childNodes.length; j++) {
  311. this.parentNode.childNodes[i] = this.parentNode.childNodes[i+1]
  312. }
  313. this.parentNode.childNodes.length = this.parentNode.childNodes.length - 1;
  314. if (i + 1 == this.parentNode.childNodes.length) { this.parentNode._last = true; }
  315. }
  316. }
  317. webFXTreeHandler.all[this.id] = null;
  318. if (document.getElementById(this.id)) {
  319. document.getElementById(this.id).innerHTML = "";
  320. document.getElementById(this.id).removeNode();
  321. }
  322. }
  323. WebFXTreeItem.prototype.expand = function() {
  324. this.doExpand();
  325. document.getElementById(this.id + '-plus').src = this.minusIcon;
  326. }
  327. WebFXTreeItem.prototype.collapse = function() {
  328. this.focus();
  329. this.doCollapse();
  330. document.getElementById(this.id + '-plus').src = this.plusIcon;
  331. }
  332. WebFXTreeItem.prototype.getFirst = function() {
  333. return this.childNodes[0];
  334. }
  335. WebFXTreeItem.prototype.getLast = function() {
  336. if (this.childNodes[this.childNodes.length - 1].open) { return this.childNodes[this.childNodes.length - 1].getLast(); }
  337. else { return this.childNodes[this.childNodes.length - 1]; }
  338. }
  339. WebFXTreeItem.prototype.getNextSibling = function() {
  340. for (var i = 0; i < this.parentNode.childNodes.length; i++) {
  341. if (this == this.parentNode.childNodes[i]) { break; }
  342. }
  343. if (++i == this.parentNode.childNodes.length) { return this.parentNode.getNextSibling(); }
  344. else { return this.parentNode.childNodes[i]; }
  345. }
  346. WebFXTreeItem.prototype.getPreviousSibling = function(b) {
  347. for (var i = 0; i < this.parentNode.childNodes.length; i++) {
  348. if (this == this.parentNode.childNodes[i]) { break; }
  349. }
  350. if (i == 0) { return this.parentNode; }
  351. else {
  352. if ((this.parentNode.childNodes[--i].open) || (b && this.parentNode.childNodes[i].folder)) { return this.parentNode.childNodes[i].getLast(); }
  353. else { return this.parentNode.childNodes[i]; }
  354. } }
  355. WebFXTreeItem.prototype.keydown = function(key) {
  356. if ((key == 39) && (this.folder)) {
  357. if (!this.open) { this.expand(); return false; }
  358. else { this.getFirst().select(); return false; }
  359. }
  360. else if (key == 37) {
  361. if (this.open) { this.collapse(); return false; }
  362. else { this.parentNode.select(); return false; }
  363. }
  364. else if (key == 40) {
  365. if (this.open) { this.getFirst().select(); return false; }
  366. else {
  367. var sib = this.getNextSibling();
  368. if (sib) { sib.select(); return false; }
  369. } }
  370. else if (key == 38) { this.getPreviousSibling().select(); return false; }
  371. return true;
  372. }
  373. WebFXTreeItem.prototype.toString = function (nItem, nItemCount) {
  374. var foo = this.parentNode;
  375. var indent = '';
  376. if (nItem + 1 == nItemCount) { this.parentNode._last = true; }
  377. var i = 0;
  378. while (foo.parentNode) {
  379. foo = foo.parentNode;
  380. indent = "<img id=\"" + this.id + "-indent-" + i + "\" src=\"" + ((foo._last)?webFXTreeConfig.blankIcon:webFXTreeConfig.iIcon) + "\">" + indent;
  381. i++;
  382. }
  383. this._level = i;
  384. if (this.childNodes.length) { this.folder = 1; }
  385. else { this.open = false; }
  386. if ((this.folder) || (webFXTreeHandler.behavior != 'classic')) {
  387. if (!this.icon) { this.icon = webFXTreeConfig.folderIcon; }
  388. if (!this.openIcon) { this.openIcon = webFXTreeConfig.openFolderIcon; }
  389. }
  390. else if (!this.icon) { this.icon = webFXTreeConfig.fileIcon; }
  391. var label = this.text;
  392. label = label.replace('<', '<');
  393. label = label.replace('>', '>');
  394. var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this)\">";
  395. str += indent;
  396. 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);\">"
  397. 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>";
  398. str += "<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
  399. for (var i = 0; i < this.childNodes.length; i++) {
  400. str += this.childNodes[i].toString(i,this.childNodes.length);
  401. }
  402. str += "</div>";
  403. this.plusIcon = ((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon);
  404. this.minusIcon = ((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon);
  405. return str;
  406. }