Context Navigation

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

Last change on this file since 794 was 780, checked in by dungnv, 10 years ago

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

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

Download in other formats: