PageRenderTime 75ms CodeModel.GetById 31ms app.highlight 28ms RepoModel.GetById 12ms app.codeStats 0ms

/IZWebFileManager/resources/FolderTree.js

http://izwebfilemanager.googlecode.com/
JavaScript | 314 lines | 272 code | 42 blank | 0 comment | 74 complexity | 34febdf9c6f60508b8462205c32b48a6 MD5 | raw file
  1FolderTree = function (controllerId, clientId, uniqueId, expandImage, collapseImage, noExpandImage) {
  2	this._clientId = clientId;
  3	this._uniqueId = uniqueId;
  4	this._expandImage = expandImage;
  5	this._collapseImage = collapseImage;
  6	this._noExpandImage = noExpandImage;
  7	this._selectedNode = null;
  8    this._controller = eval('WFM_' + controllerId);
  9}
 10
 11FolderTree.prototype = {
 12	getController : function() {return this._controller;},
 13	
 14	ToggleExpand : function (nodeId) {
 15		this._ToggleExpand(nodeId, this.PopulateCallback, null, this.PopulateError);
 16	},
 17	
 18	_ToggleExpand : function (nodeId, eventCallback, externalContext, errorCallback) {
 19		var node = this._getNode (nodeId);
 20		if(!node) return true;
 21
 22		var nodeSpan = this._getChildNodesSpan (nodeId);
 23		var expand = node._expand || node._refresh || nodeSpan.style.display == "none";
 24
 25		if(expand && node._populating) return false;
 26		
 27		if (node._refresh || (nodeSpan.style.display == "none" && nodeSpan.innerHTML.length == 0)) {
 28			node._populating = true;
 29			var nodePath = node.attributes["nodepath"].value;
 30			this.PopulateNode (nodePath, eventCallback, {'folderTree':this,'node':node,'nodeSpan':nodeSpan,'nodeId':nodeId,'nodePath':nodePath,'externalContext':externalContext}, errorCallback);
 31			return false;
 32		}
 33		
 34		node._expand = false;
 35		
 36		var image = this._getNodeImg (nodeId);
 37		if(nodeSpan.innerHTML == "*") {
 38			image.src = this._noExpandImage;
 39			nodeSpan.style.display = "none";
 40		} else {
 41			nodeSpan.style.display = expand ? "block" : "none";
 42			image.src = expand ? this._collapseImage : this._expandImage;
 43		}
 44		return true;
 45	},
 46
 47	PopulateError : function (data, ctx){
 48		ctx.folderTree.PopulateCallback (data, ctx);
 49	},
 50
 51	PopulateCallback : function (data, ctx)
 52	{
 53		ctx.node._refresh = false;
 54		ctx.node._populating = false;
 55		if(data == "*")
 56			ctx.nodeSpan.style.display = "none";
 57		ctx.nodeSpan.innerHTML = data;
 58		ctx.folderTree._ToggleExpand (ctx.nodeId, null, null, null);
 59	},
 60	
 61	Navigate : function (nodes, n) {
 62		for(var i=n; i<nodes.length-1; i++) {
 63			var node = this._getNode (nodes[i]);
 64			if (!node) return;
 65			if(!node._refresh) {
 66				var nodeSpan = this._getChildNodesSpan (nodes[i]);
 67				if (nodeSpan.style.display == "block") continue;
 68				if (nodeSpan.innerHTML == "*") return;
 69			}
 70			if(!this._ToggleExpand(nodes[i], this.NavigateCallback, {'nodes':nodes,'index':i}, this.PopulateError)) return;
 71		}
 72		var nodeId = nodes[nodes.length-1];
 73		var node = this._getNode (nodeId);
 74		if(!node) return;
 75		this.SelectNode (nodeId);
 76		if(node._refresh)
 77			this.Refresh (nodeId);
 78	},
 79
 80	NavigateCallback : function (data, ctx)
 81	{
 82		ctx.folderTree.PopulateCallback (data, ctx);
 83		var interval = window.setInterval(function() {
 84			window.clearInterval(interval);
 85			ctx.folderTree.Navigate (ctx.externalContext.nodes, ctx.externalContext.index);
 86		}, 0);
 87	},
 88	
 89	Refresh : function (nodeId) {
 90		var node = this._getNode (nodeId);
 91		if(!node) return;
 92		var nodeSpan = this._getChildNodesSpan (nodeId);
 93		var expand = nodeSpan.style.display == "block" || nodeSpan.innerHTML == "*";
 94		
 95		if(expand) {
 96			node._expand = true;
 97			node._refresh = true;
 98			this.ToggleExpand (nodeId);
 99		} else {
100			nodeSpan.innerHTML = "";
101			nodeSpan.style.display = "none"
102		}
103	},
104	
105	RequireRefresh : function (nodes) {
106		for(var i=0; i<nodes.length; i++) {
107			var node = this._getNode (nodes[i]);
108			if(!node) continue;
109			node._expand = true;
110			node._refresh = true;
111		}
112	},
113	
114	_getNode : function (nodeId) {
115		var id = this._clientId + "_" + nodeId + "_node";
116		return WebForm_GetElementById (id);
117	},
118	
119	_getNodeImg : function (nodeId) {
120		var imgId = this._clientId + "_" + nodeId + "_img";
121		return WebForm_GetElementById (imgId);
122	},
123	
124	_getChildNodesSpan : function (nodeId) {
125		var spanId = this._clientId + "_" + nodeId + "_span";
126		return WebForm_GetElementById (spanId);
127	},
128	
129	_getNodeLink : function (node) { return node.childNodes[node.childNodes.length - 1]; },
130	
131	_getImageLink : function (node) { return node.previousSibling.childNodes[node.childNodes.length - 1]; },
132
133	SelectNode : function (nodeId) {
134		var node = this._getNode (nodeId);
135		if(!node) return;
136		if(node === this._selectedNode)
137			return;
138		
139		if(this._selectedNode !== null)
140			this._restoreStyle (this._selectedNode);
141		
142		this._selectedNode = node;
143		this._appendStyle (node, this._selectedClass, this._selectedLinkClass);	
144	},
145	
146	HoverNode : function (div, e) {
147		var e = e || window.event;
148		var node = WebForm_GetElementById (div.id+"_node");
149		if(this.getController().isDragging()) {
150			var ftNode = this._getFolderTreeNode (div);
151			ftNode.onDragInTarget(e);
152		}
153		else {
154			if(node === this._selectedNode)
155				return;
156			this._appendStyle (node, this._hoverClass, this._hoverLinkClass);
157		}
158	},
159
160	UnhoverNode : function (div) {
161		var node = WebForm_GetElementById (div.id+"_node");
162		if(this.getController().isDragging()) {
163			var ftNode = this._getFolderTreeNode (div);
164			ftNode.onDragLeaveTarget();
165		}
166		else {
167			if(node === this._selectedNode)
168				return;
169			this._restoreStyle (node);
170		}
171	},
172	
173	_getFolderTreeNode : function(div) {
174		if(!div._folderTreeNode) {
175			div._folderTreeNode = new FolderTreeNode (this, div);
176		}
177		return div._folderTreeNode;
178	},
179	
180	_appendStyle : function (node, nodeClass, nodeLinkClass) {
181		if (nodeClass) {
182			if (!node._normalClass)
183				node._normalClass = node.className;
184			node.className = node._normalClass + " " + nodeClass;
185		}
186		if (nodeLinkClass) {
187			var nodeLink = this._getNodeLink(node);
188			if(!nodeLink) return;
189			if (!nodeLink._normalClass)
190				nodeLink._normalClass = nodeLink.className;
191			nodeLink.className = nodeLink._normalClass + " " + nodeLinkClass;
192		}
193	},
194
195	_restoreStyle : function (node) {
196		if (node._normalClass)
197			node.className = node._normalClass;
198		var nodeLink = this._getNodeLink(node);
199		if (nodeLink && nodeLink._normalClass)
200			nodeLink.className = nodeLink._normalClass;
201	}
202}
203
204FolderTreeNode = function(owner, div) {
205	this._owner = owner;
206	this._div = div;
207	this._node = WebForm_GetElementById (div.id+"_node");
208	
209	var mouseUp = this._mouseUp;
210	var mouseMove = this._mouseMove;
211	var instance = this;
212	div.onmouseup = function(e) {
213		e = e || window.event;
214		mouseUp.call(instance, e); 
215	}
216	div.onmousemove = function(e) {
217		e = e || window.event;
218		mouseMove.call(instance, e);
219	}
220}
221
222FolderTreeNode.prototype._owner = null;
223FolderTreeNode.prototype._div = null;
224FolderTreeNode.prototype._dropMove = true;
225FolderTreeNode.prototype._node = null;
226FolderTreeNode.prototype._highlight = false;
227FolderTreeNode.prototype._cursor = null;
228
229FolderTreeNode.prototype.getFullPath = function() {
230	var nodePath = "" + this._node.attributes["nodepath"].value;
231	var index = nodePath.indexOf("|");
232	return nodePath.substring(index+1, nodePath.length);
233}
234
235FolderTreeNode.prototype.isSelected = function() {
236	return this._node === this._owner._selectedNode;
237}
238
239FolderTreeNode.prototype.canDrop = function() {
240	return !this.isSelected();
241}
242
243FolderTreeNode.prototype.getController = function() {return this._owner.getController();}
244
245FolderTreeNode.prototype.highlight = function (bool) {
246	if(this._highlight == bool) return;
247	this._highlight = bool;
248	if(bool) this._owner._appendStyle (this._node, this._owner._selectedClass, this._owner._selectedLinkClass);	
249	else this._owner._restoreStyle (this._node);
250}
251
252FolderTreeNode.prototype.setCursor = function (cursor) {
253	if(this._cursor == cursor) return;
254	this._cursor = cursor;
255	this._div.style.cursor = cursor;
256	var nodeLink = this._owner._getNodeLink(this._node);
257	if(nodeLink){
258		nodeLink.style.cursor = cursor;
259	}
260	var imgLink = this._owner._getImageLink(this._node);
261	if(imgLink){
262		imgLink.style.cursor = cursor;
263	}
264}
265	
266FolderTreeNode.prototype._mouseUp = function(ev) {
267	if(ev.preventDefault) ev.preventDefault();
268	ev.returnValue = false;
269	if(this.getController().isDragging())
270		this.onDrop();
271	return false;
272}
273
274FolderTreeNode.prototype._mouseMove = function(ev) {
275	if(ev.preventDefault) ev.preventDefault();
276	ev.returnValue = false;
277	if(this.getController().isDragging())
278		this.onDragInTarget(ev);
279	return false;
280}
281
282FolderTreeNode.prototype.onDragInTarget = function (ev){
283	if(this.canDrop()){
284		this._dropMove = !ev.ctrlKey && !ev.shiftKey;
285		this.getController()._dropTarget = this;
286		this.highlight(true);
287		if(this._dropMove)
288			this.setCursor(this.getController()._dropMoveCursor);
289		else
290			this.setCursor(this.getController()._dropCopyCursor);
291	}
292	else {
293		this.setCursor(this.getController()._dropNotAllowedCursor);
294	}
295}
296
297FolderTreeNode.prototype.onDragLeaveTarget = function (){
298	this.getController()._dropTarget = null;
299	if(this.canDrop()){
300		this.highlight(false);
301	}
302	this.setCursor("");
303}
304
305FolderTreeNode.prototype.onDrop = function (){
306	if(this.canDrop()) {
307		this.getController().drop(this, this._dropMove);
308		this.highlight(false);
309	}
310	else {
311		this.getController().stopDragDrop(this);
312	}
313	this.setCursor("");
314}