https://www.kvoku.org/dalbum3/dtree.js

1/*--------------------------------------------------|
2| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
3|---------------------------------------------------|
4| Copyright (c) 2002-2003 Geir Landr:o              |
5|                                                   |
6| This script can be used freely as long as all     |
7| copyright messages are intact.                    |
8|                                                   |
9| Updated: 17.04.2003                               |
10|--------------------------------------------------*/
11
12/*	This is a specially modified for DAlbum version of dTree*/
13
14var _treeAlwaysOpen=true;
15if (document.getElementById && document.createElement)
16{
17
18 	var agt=navigator.userAgent.toLowerCase();
19
20 	var is_opera6 = (agt.indexOf("opera 6") != -1 || agt.indexOf("opera/6") != -1);
21 	if (!is_opera6)
22 		_treeAlwaysOpen=false;
23}
24
25
26
27// Node object
28function Node(id, pid, name, url, title, target, icon, iconOpen, open, dynload) {
29	this.dynload = dynload;
30	this.id = id;
31	this.pid = pid;
32	this.name = name;
33	this.url = url;
34	this.title = title;
35	this.target = target;
36	this.icon = icon;
37	this.iconOpen = iconOpen;
38	this._io = open || _treeAlwaysOpen;
39	this._is = false;
40	this._ls = false;
41	this._hc = false;
42	this._ai = 0;
43	this._p;
44};
45
46// Tree object
47function dTree(objName) {
48	this.config = {
49		target					: null,
50		folderLinks			: true,
51		useSelection		: true,
52		useCookies			: true,
53		useLines				: true,
54		useIcons				: true,
55		useStatusText		: false,
56		closeSameLevel	: false,
57		inOrder					: false
58	}
59	this.icondir= 'images/';
60	this.icon = {
61		root				: 'imgfolder.gif',
62		folder			: 'folder.gif',
63		folderOpen	: 'folderopen.gif',
64		node				: 'page.gif',
65		empty				: 'empty.gif',
66		line				: 'line.gif',
67	    join				: 'join.gif',
68        joinBottom	: 'joinbottom.gif',
69        plus				: 'plus.gif',
70        plusBottom	: 'plusbottom.gif',
71        minus				: 'minus.gif',
72		minusBottom	: 'minusbottom.gif',
73		nlPlus			: 'nolines_plus.gif',
74		nlMinus			: 'nolines_minus.gif'
75	};
76	this.obj = objName;
77	this.aNodes = [];
78	this.aIndent = [];
79	this.root = new Node(-1);
80	this.selectedNode = null;
81	this.selectedFound = false;
82	this.completed = false;
83};
84
85// Adds a new node to the node array
86dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open, dynload) {
87	this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open, dynload);
88};
89
90// Open/close all nodes
91dTree.prototype.openAll = function() {
92	this.oAll(true);
93};
94dTree.prototype.closeAll = function() {
95	this.oAll(false);
96};
97
98// Outputs the tree to the page
99dTree.prototype.toString = function() {
100
101	//
102	this.icon.root = this.icondir + this.icon.root;
103	this.icon.folder	= this.icondir + this.icon.folder;
104	this.icon.folderOpen	= this.icondir + this.icon.folderOpen;
105	this.icon.node	= this.icondir + this.icon.node	;
106	this.icon.empty	= this.icondir + this.icon.empty	;
107	this.icon.line	= this.icondir + this.icon.line	;
108	this.icon.join	= this.icondir + this.icon.join	;
109	this.icon.joinBottom	= this.icondir + this.icon.joinBottom;
110	this.icon.plus	= this.icondir + this.icon.plus	;
111	this.icon.plusBottom	= this.icondir + this.icon.plusBottom;
112	this.icon.minus	= this.icondir + this.icon.minus	;
113	this.icon.minusBottom	= this.icondir + this.icon.minusBottom;
114	this.icon.nlPlus	= this.icondir + this.icon.nlPlus;
115	this.icon.nlMinus	= this.icondir + this.icon.nlMinus;
116
117
118	var str = '<div class="dtree">\n';
119	//if (document.getElementById) {
120		if (this.config.useCookies) this.selectedNode = this.getSelected();
121		str += this.addNode(this.root);
122	//} else str += 'Browser not supported.';
123	str += '</div>';
124	if (!this.selectedFound) this.selectedNode = null;
125	this.completed = true;
126	return str;
127
128
129};
130
131// Creates the tree structure
132dTree.prototype.addNode = function(pNode) {
133	var str = '';
134	var n=0;
135	if (this.config.inOrder) n = pNode._ai;
136	for (n; n<this.aNodes.length; n++) {
137		if (this.aNodes[n].pid == pNode.id) {
138			var cn = this.aNodes[n];
139			cn._p = pNode;
140			cn._ai = n;
141			this.setCS(cn);
142			if (!cn.target && this.config.target) cn.target = this.config.target;
143			if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);
144
145
146			if (!this.config.folderLinks && cn._hc) cn.url = null;
147
148			if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) {
149					cn._is = true;
150					this.selectedNode = n;
151					this.selectedFound = true;
152			}
153			str += this.node(cn, n);
154			if (cn._ls) break;
155		}
156	}
157	return str;
158};
159
160// Creates the node icon, url and text
161dTree.prototype.node = function(node, nodeId) {
162	var str='<div class="dTreeNode">';
163	str += '<table border="0" cellspacing="0" cellpadding="0"><tr><td style="white-space:nowrap;">';
164
165	str += this.indent(node, nodeId);
166
167	str += '</td><td style="white-space:nowrap;">';
168
169	if (this.config.useIcons) {
170		if (!node.iconOpen && node.icon && !node._hc)
171			node.iconOpen = node.icon;
172
173		if (!node.icon)
174			node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);
175
176		if (!node.iconOpen)
177			node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;
178
179		str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
180	}	str += '</td><td style="white-space:normal;">';
181	if (node.url) {
182		str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';
183		if (node.title) str += ' title="' + node.title + '"';
184		if (node.target) str += ' target="' + node.target + '"';
185		if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" ';
186		if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc) && !_treeAlwaysOpen)
187			str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';
188		str += '>';
189	}
190	else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id && !_treeAlwaysOpen)
191
192		str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';
193	str += node.name;
194	if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
195	str += '</td></tr></table></div>';
196
197	if (node._hc) {
198
199		str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';
200
201		str += this.addNode(node);
202		str += '</div>';
203	}
204	this.aIndent.pop();
205
206	return str;
207};
208
209// Adds the empty and line icons
210dTree.prototype.indent = function(node, nodeId) {
211	var str = '';
212	if (this.root.id != node.pid) {		for (var n=0; n<this.aIndent.length; n++)
213
214			str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />';
215		(node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);
216		if (node._hc) {			if (!_treeAlwaysOpen)
217		{
218				str += '<a tabindex="-1" href="';
219				str +='javascript: ' + this.obj + '.o(' + nodeId + ');';
220				str +='"><img style="border:0px;" id="j' + this.obj + nodeId + '" src="';
221
222				if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus;
223				else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) );
224				str += '" alt="" /></a>';			}
225		} else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />';
226	}	str+='';
227	return str;
228};
229
230// Checks if a node has any children and if it is the last sibling
231dTree.prototype.setCS = function(node) {
232	var lastId;
233	if (node.dynload)
234		node._hc = true;
235	for (var n=0; n<this.aNodes.length; n++) {
236		if (this.aNodes[n].pid == node.id) node._hc = true;
237		if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;
238	}
239	if (lastId==node.id) node._ls = true;
240};
241
242// Returns the selected node
243dTree.prototype.getSelected = function() {

244	var sn = this.getCookie('cs' + this.obj);
245	return (sn) ? sn : null;
246};
247
248// Highlights the selected node
249dTree.prototype.s = function(id) {
250	if (!this.config.useSelection) return;
251	var cn = this.aNodes[id];
252	if (cn._hc && !this.config.folderLinks) return;
253	if (this.selectedNode != id) {
254		if (this.selectedNode || this.selectedNode==0) {
255			eOld = document.getElementById("s" + this.obj + this.selectedNode);
256			eOld.className = "node";
257		}
258		eNew = document.getElementById("s" + this.obj + id);
259		eNew.className = "nodeSel";
260		this.selectedNode = id;
261		if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id);//		this.o(id);
262	}
263};
264
265// Toggle Open or close
266dTree.prototype.o = function(id) {
267	var cn = this.aNodes[id];
268	this.nodeStatus(!cn._io, id, cn._ls);
269	cn._io = !cn._io;
270	if (cn.dynload && cn._io)
271	{
272		if (this.selectedNode != id)
273		{
274			if (this.selectedNode || this.selectedNode==0) {
275				eOld = document.getElementById("s" + this.obj + this.selectedNode);
276				eOld.className = "node";
277			}
278			eNew = document.getElementById("s" + this.obj + id);
279			eNew.className = "nodeSel";
280			this.selectedNode = id;
281		}
282
283		window.location.replace(cn.url);
284	}
285	else
286		if (this.config.closeSameLevel) this.closeLevel(cn);
287
288	if (this.config.useCookies) this.updateCookie();
289
290};
291
292// Open or close all nodes
293dTree.prototype.oAll = function(status) {
294	for (var n=0; n<this.aNodes.length; n++) {
295		if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {
296			this.nodeStatus(status, n, this.aNodes[n]._ls)
297			this.aNodes[n]._io = status;
298		}
299	}
300	if (this.config.useCookies) this.updateCookie();
301};
302
303// Opens the tree to a specific node
304dTree.prototype.openTo = function(nId, bSelect, bFirst) {
305	if (!bFirst) {
306		for (var n=0; n<this.aNodes.length; n++) {
307			if (this.aNodes[n].id == nId) {
308				nId=n;
309				break;
310			}
311		}
312	}
313	var cn=this.aNodes[nId];
314	if (cn.pid==this.root.id || !cn._p) return;
315	cn._io = true;
316	cn._is = bSelect;
317	if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);
318	if (this.completed && bSelect) this.s(cn._ai);
319	else if (bSelect) this._sn=cn._ai;
320	this.openTo(cn._p._ai, false, true);
321};
322
323// Closes all nodes on the same level as certain node
324dTree.prototype.closeLevel = function(node) {
325	for (var n=0; n<this.aNodes.length; n++) {
326		if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) {
327			this.nodeStatus(false, n, this.aNodes[n]._ls);
328			this.aNodes[n]._io = false;
329			this.closeAllChildren(this.aNodes[n]);
330		}
331	}
332}
333
334// Closes all children of a node
335dTree.prototype.closeAllChildren = function(node) {
336	for (var n=0; n<this.aNodes.length; n++) {
337		if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {
338			if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);
339			this.aNodes[n]._io = false;
340			this.closeAllChildren(this.aNodes[n]);
341		}
342	}
343}
344
345// Change the status of a node(open or closed)
346dTree.prototype.nodeStatus = function(status, id, bottom) {
347	if (_treeAlwaysOpen)
348		return;
349	eDiv	= document.getElementById('d' + this.obj + id);
350	eJoin	= document.getElementById('j' + this.obj + id);
351	if (this.config.useIcons)
352	{
353		eIcon	= document.getElementById('i' + this.obj + id);
354		eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;
355	}
356	eJoin.src = (this.config.useLines)?
357	((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):
358	((status)?this.icon.nlMinus:this.icon.nlPlus);
359	eDiv.style.display = (status) ? 'block': 'none';
360
361};
362
363
364// [Cookie] Clears a cookie
365dTree.prototype.clearCookie = function() {
366	var now = new Date();
367	var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);
368	this.setCookie('co'+this.obj, 'cookieValue', yesterday);
369	this.setCookie('cs'+this.obj, 'cookieValue', yesterday);
370};
371
372// [Cookie] Sets value in a cookie
373dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) {
374	document.cookie =
375		escape(cookieName) + '=' + escape(cookieValue)
376		+ (expires ? '; expires=' + expires.toGMTString() : '')
377		+ (path ? '; path=' + path : '')
378		+ (domain ? '; domain=' + domain : '')
379		+ (secure ? '; secure' : '');
380};
381
382// [Cookie] Gets a value from a cookie
383dTree.prototype.getCookie = function(cookieName) {
384	var cookieValue = '';
385	var posName = document.cookie.indexOf(escape(cookieName) + '=');
386	if (posName != -1) {
387		var posValue = posName + (escape(cookieName) + '=').length;
388		var endPos = document.cookie.indexOf(';', posValue);
389		if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));
390		else cookieValue = unescape(document.cookie.substring(posValue));
391	}
392	return (cookieValue);
393};
394

395// [Cookie] Returns ids of open nodes as a string
396dTree.prototype.updateCookie = function() {
397	var str = '';
398	for (var n=0; n<this.aNodes.length; n++) {
399		if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {
400			if (str) str += '.';
401			str += this.aNodes[n].id;
402		}
403	}
404	this.setCookie('co' + this.obj, str);
405};
406
407// [Cookie] Checks if a node id is in a cookie
408dTree.prototype.isOpen = function(id) {	var aOpen = this.getCookie('co' + this.obj).split('.');
409
410	for (var n=0; n<aOpen.length; n++)
411		if (aOpen[n] == id) return true;
412	return false;
413};
414
415// If Push and pop is not implemented by the browser
416if (!Array.prototype.push) {
417	Array.prototype.push = function array_push() {
418		for(var i=0;i<arguments.length;i++)
419			this[this.length]=arguments[i];
420		return this.length;
421	}
422};
423if (!Array.prototype.pop) {
424	Array.prototype.pop = function array_pop() {
425		lastElement = this[this.length-1];
426		this.length = Math.max(this.length-1,0);
427		return lastElement;
428	}
429};