Context Navigation

source: pro-violet-viettel/www/deploy/20150304/assets/js/tree.js @ 928

Last change on this file since 928 was 926, checked in by dungnv, 10 years ago
Rename
File size: 9.8 KB

Rev	Line
[780]	1	if(jQuery) (function($){
	2	$.extend($.fn, {
	3	violetTree : function (o) {
	4	if( !o ) var o = {};
	5	if( o.data == undefined ) o.data = null;
	6	if( o.rootName == undefined ) o.rootName = 'ThÆ° má»¥c gá»c';
[926]	7
[780]	8	if( o.draggable == undefined ) o.draggable = false;
[926]	9
[780]	10	if( o.expandSpeed == undefined ) o.expandSpeed= 500;
	11	if( o.collapseSpeed == undefined ) o.collapseSpeed= 500;
	12	if( o.expandEasing == undefined ) o.expandEasing = null;
	13	if( o.collapseEasing == undefined ) o.collapseEasing = null;
	14	if( o.manager == undefined) o.manager = null;
[926]	15
[780]	16	var treeNodes = [];
	17	var oContainer = this;
	18	var selectedNode = null;
	19	var documentBoundEvent = false;
	20	var self = this;
[926]	21
[780]	22	var createNode = function (node) {
[926]	23
[780]	24	if( !node ) var node = {};
	25	if( node.item == undefined ) node.item = null; //item.id, item.name, item.parentID
	26	if( node.isRoot == undefined ) node.isRoot = false;
	27	if( node.defaultStatus == undefined ) node.defaultStatus = 0; //0: collapsed; 1:expanded;
	28	if( node.showContextMenu == undefined ) node.showContextMenu = true; //0: collapsed; 1:expanded;
	29	if (node.callback == undefined ) node.callback = null;
[926]	30
[780]	31	var nodeClass = node.isRoot == true ? 'home':'directory';
	32	var hidden = (node.isRoot == true \|\| node.item.parentID == 0 ) ? null:'display:none';
	33	var defaulState = (node.isRoot == false && node.defaultStatus == 1 ) ? 'expanded' : 'collapsed';
[926]	34
[780]	35	var a = $('<a></a>',{id: node.item.id,href: '#',rel: node.item.name,text: node.item.name});
	36	var li = $('<li></li>',{'class': nodeClass,rel: 'folder'})
	37	.addClass(defaulState)
	38	.append(a);
	39	var ul = null;
	40	bindNodeEvents(a);
[926]	41
[780]	42	treeNodes[node.item.id] = {id:node.item.id, name:node.item.name, parentID:node.item.parentID, html:ul, status:defaulState, isRoot:node.isRoot};
	43	if (node.isRoot == true) {
	44	ul = $('<ul></ul>',{'class':'vstree',rel:'node-1',style:hidden}).append(li);
	45	$(oContainer).append(ul);
	46	}
	47	else {
	48	var preUL = $(oContainer).find('UL.vstree[rel^="node-1"]');
[926]	49
[780]	50	if (preUL != null) {
	51	if (node.item.parentID == 0) {
	52	var groupUL = $(oContainer).find('UL.vstree[rel^="node0"]');
	53	if ($(groupUL).length == 0) {
	54	ul = $('<ul></ul>',{'class':'vstree',rel:'node0',style:hidden}).append(li);
	55	$(preUL).find('> LI.home').append(ul);
	56	}
	57	else {
	58	$(groupUL).append(li);
	59	}
	60	}
	61	else {
	62	var liArray = $(oContainer).find('UL.vstree LI[rel="folder"]');
	63	for (var i = 0; i < $(liArray).length; i++) {
	64	var id = $(liArray[i]).find('A').attr('id');
[926]	65
[780]	66	if (id == node.item.parentID) {
	67	var groupUL = $(oContainer).find('UL.vstree[rel^="node' + id + '"]');
	68	if ($(groupUL).length == 0) {
	69	ul = $('<ul></ul>',{'class':'vstree',rel:'node'+node.item.parentID,style:hidden}).append(li);
	70	$(liArray[i]).append(ul);
	71	}
	72	else {
	73	$(groupUL).append(li);
	74	}
	75	}
	76	}
	77	}
	78	}
	79	}
[926]	80
[780]	81	if (node.callback != null) node.callback(this);
	82	//return (parentNode.length == 1);
	83	return true;
	84	};
[926]	85
[780]	86	var bindNodeEvents = function (node) {
	87	if (node == null) return false;
[926]	88
[780]	89	//click event
	90	$(node).bind("click", function (e){if(e.button == 0)nodeClick(this);return false;});
	91	};
[926]	92
[780]	93	var nodeClick = function (node) {
	94	var folderID = $(node).attr('id');
[848]	95	selectedNode = highlightNode(node);
[780]	96	o.manager.setTreeCurrentNode(folderID);
[926]	97
[780]	98	if (treeNodes[folderID].isRoot) {
	99	return;
	100	}
	101	if (treeNodes[folderID].status == 'collapsed') {
	102	expandNode(node);
	103	treeNodes[folderID].status = 'expanded';
	104	}
	105	else {
	106	collapseNode(node);
	107	treeNodes[folderID].status = 'collapsed';
	108	}
[926]	109
[849]	110	o.manager.refreshStatusBar();
[780]	111	};
[926]	112
[848]	113	var highlightNode = function (node) {
[780]	114	$(oContainer).find('.currentDir').removeClass('currentDir');
	115	$(node).addClass('currentDir');
	116	$(node).select();
	117	return node;
	118	}
[926]	119
[780]	120	var expandNode = function (node) {
	121	var li = $(node).parent();
	122	$(li).find('> UL:hidden').slideDown({ duration: o.expandSpeed, easing: o.expandEasing });
	123	$(li).removeClass('collapsed').addClass('expanded');
	124	};
[926]	125
[780]	126	var collapseNode = function (node) {
	127	var li = $(node).parent();
	128	$(li).find('> UL').slideUp({ duration: o.expandSpeed, easing: o.expandEasing });
	129	$(li).removeClass('expanded').addClass('collapsed');
	130	};
[926]	131
[780]	132	var isCollapsedNode = function (node) {
	133	return $(node).parent().hasClass('collapsed');
	134	}
[926]	135
[780]	136	var nodeIsExisted = function (nodeID) {
	137	var node = $(oContainer).find('UL.vstree LI.directory > A#' + nodeID);
	138	return ($(node).length > 0) ? node : false;
	139	}
[926]	140
[780]	141	var initTree = function () {
	142	$(oContainer).attr('unselectable','on')
	143	.css({'-moz-user-select':'-moz-none',
	144	'-moz-user-select':'none',
	145	'-o-user-select':'none',
	146	'-khtml-user-select':'none',
	147	'-webkit-user-select':'none',
	148	'-ms-user-select':'none',
	149	'user-select':'none'
	150	}).bind('selectstart', function(){ return false;});
	151
	152	if (o.data == null) {
	153	console.error(o.data, 'No directory to display!');
	154	return;
	155	}
[926]	156
[780]	157	o.data.sort(function (a,b) {
	158	return a.parentID - b.parentID;
	159	});
[926]	160
[780]	161	$(oContainer).find ('.vstree').remove();
	162	var homeNode = createNode({
	163	item: {id:0, name:o.rootName, parentID:-1},
	164	isRoot: true
	165	});
[926]	166
[780]	167	if (homeNode && o.data.length > 0) {
	168	for (var i = 0; i < o.data.length; i++) {
	169	createNode ({item: o.data[i]});
	170	}
	171	}
	172	o.manager.setTreeCurrentNode(0);
	173	};
[926]	174
[780]	175	/******************
	176	* RENAME - START *
	177	******************/
	178	var renameInit = function (node) {
	179	var editor = $('<input>',{class:'rename', type: 'text', value:$(node).text()});
	180	$(editor).bind('focusout', function(e){renameCancel(node)});
	181	$(editor).bind('keydown', function(e){
	182	var keycode = (e.keyCode ? e.keyCode : e.which);
	183	if (keycode == '27') {
	184	renameCancel(node);
	185	}else if(keycode == '13') renameComplete(node);
	186	e.stopPropagation();
	187	});
[926]	188
[780]	189	$(node).text('');
	190	$(node).append(editor);
	191	$(editor).focus();
	192	$(editor).select();
	193	}
[926]	194
[780]	195	var renameCancel = function (node) {
	196	var dirID = $(node).attr('id');
	197	$(node).find('>INPUT').remove();
	198	$(node).text(treeNodes[dirID].name);
	199	$(node).focus();
	200	}
[926]	201
[780]	202	var renameComplete = function (node) {
	203	var editor = $(node).find('>INPUT');
[926]	204	var id = $(node).attr('id');
	205	var idx = o.manager.searchItemByID(id, 'directory');
	206	var dir = o.data[idx];
	207	var name = dir.name;
[780]	208	var newName = $(editor).val();
[926]	209
	210	var item = {
	211	id:id,
	212	name:name,
	213	type:'directory',
	214	parentID: dir.parentID,
	215	newName:newName
	216	};
	217
	218	o.manager.rename(item);
	219
[780]	220	$(node).attr('rel', newName);
	221	$(node).text(newName);
	222	$(node).find('>INPUT').remove();
[926]	223	/*treeNodes[id].name = newName;
	224	updateData(id, 'rename');*/
[780]	225	}
	226	/******************
	227	* RENAME - END *
	228	******************/
[926]	229
[780]	230	/******************
	231	* DELTE - START *
	232	******************/
	233	var destroyNode = function (node) {
	234	var dirID = $(node).attr('id');
	235	$(node).parent().remove();
	236	delete treeNodes[dirID];
	237	}
	238	/******************
	239	* DELTE - END *
	240	******************/
	241	var updateData = function (id, act) {
	242	for (var i = 0; i < o.data.length; i++) {
	243	if (o.data[i].id == id) {
	244	if(act == 'deletion') {
	245	delete o.data[i];
	246	}
	247	else {
	248	o.data[i].name = treeNodes[id].name
	249	o.data[i].parentID = treeNodes[id].parentID;
	250	}
	251	break;
	252	}
	253	}
[926]	254
[780]	255	o.manager.updateData({item:treeNodes[id], from:'tree', type:'directory', callback:act});
	256	}
[926]	257
[780]	258	this.createNode = function (node) {
	259	createNode ({item: node});
	260	o.data.sort(function (a,b) {
	261	return a.parentID - b.parentID;
	262	});
	263	if (node.parentID != 0) {
[926]	264	var parentNode = $(oContainer).find('UL LI > A#' + node.parentID);
[780]	265	expandNode(parentNode);
	266	}
	267	}
[926]	268
[780]	269	this.activeNode = function (node) {
	270	var dirID = $(node).attr('id');
[848]	271	selectedNode = highlightNode(node);
[780]	272	o.manager.setTreeCurrentNode(dirID);
	273	expandNode(node);
	274	$(node).select();
	275	}
	276
	277	this.refeshTree = function () {
	278	//for (var i = 0; i < o.data.length; i++) {
	279	for (var i in o.data) {
	280	var node = nodeIsExisted(o.data[i].id);
	281	var defaulState = isCollapsedNode(node) ? 0:1;
[926]	282	if (node == false)
[780]	283	createNode ({item: o.data[i],defaulState:defaulState});
[926]	284	else {
	285	var node = $(oContainer).find('UL.vstree LI.directory > A#' + o.data[i].id);
	286	$(node).text(o.data[i].name);
	287	}
[780]	288	}
	289
	290	o.manager.setTreeCurrentNode($(selectedNode).attr('id'));
	291	}
[926]	292
[780]	293	this.getSelectedNode = function () {
	294	return selectedNode;
	295	}
[926]	296
[780]	297	this.deletion = function (id) {
	298	destroyNode($(oContainer).find('A#'+id));
	299	}
[926]	300
[780]	301	this.findNodebyID = function (id) {
[926]	302
[780]	303	}
[926]	304
[780]	305	this.setData = function (data) {
	306	o.data = data;
	307	}
[926]	308
[780]	309	this.getRoot = function () {
	310	return treeNodes[0];
	311	}
[926]	312
[780]	313	this.createCopyNode = function (data) {
	314	for(var i in data) {
	315	createNode ({item: data[i]});
	316	}
	317	self.refeshTree();
	318	}
	319
	320	this.rename = function (key) {
	321	if (selectedNode == null) return false;
	322	if (key == 113) {
	323	renameInit(selectedNode);
	324	}
	325	else if (key == 27) {
	326	renameCancel(selectedNode);
	327	}
	328
	329	return true;
	330	}
[926]	331
[875]	332	this.getRootName = function () {
	333	return o.rootName;
	334	}
[926]	335
[780]	336	this.initialize = function () {
	337	initTree();
	338	return this;
	339	};
[926]	340
[780]	341	return this.initialize();
	342	}
	343	});
	344	})(jQuery);

Note: See TracBrowser for help on using the repository browser.

Download in other formats: