Context Navigation

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

Last change on this file since 813 was 813, checked in by quyenla, 10 years ago
thumbnail
File size: 9.5 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) {
[813]	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;
	30
	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';
	34
	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);
	41
	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"]');
	49
	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');
	65
	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	}
	80
	81	if (node.callback != null) node.callback(this);
	82	//return (parentNode.length == 1);
	83	return true;
	84	};
	85
	86	var bindNodeEvents = function (node) {
	87	if (node == null) return false;
	88
	89	//click event
	90	$(node).bind("click", function (e){if(e.button == 0)nodeClick(this);return false;});
	91	};
	92
	93	var nodeClick = function (node) {
	94	var folderID = $(node).attr('id');
	95	selectedNode = hightlightNode(node);
	96	o.manager.setTreeCurrentNode(folderID);
	97
	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	}
	109	};
	110
	111	var hightlightNode = function (node) {
	112	$(oContainer).find('.currentDir').removeClass('currentDir');
	113	$(node).addClass('currentDir');
	114	$(node).select();
	115	return node;
	116	}
	117
	118	var expandNode = function (node) {
	119	var li = $(node).parent();
	120	$(li).find('> UL:hidden').slideDown({ duration: o.expandSpeed, easing: o.expandEasing });
	121	$(li).removeClass('collapsed').addClass('expanded');
	122	};
	123
	124	var collapseNode = function (node) {
	125	var li = $(node).parent();
	126	$(li).find('> UL').slideUp({ duration: o.expandSpeed, easing: o.expandEasing });
	127	$(li).removeClass('expanded').addClass('collapsed');
	128	};
	129
	130	var isCollapsedNode = function (node) {
	131	return $(node).parent().hasClass('collapsed');
	132	}
	133
	134	var nodeIsExisted = function (nodeID) {
	135	var node = $(oContainer).find('UL.vstree LI.directory > A#' + nodeID);
	136	return ($(node).length > 0) ? node : false;
	137	}
	138
	139	var initTree = function () {
	140	$(oContainer).attr('unselectable','on')
	141	.css({'-moz-user-select':'-moz-none',
	142	'-moz-user-select':'none',
	143	'-o-user-select':'none',
	144	'-khtml-user-select':'none',
	145	'-webkit-user-select':'none',
	146	'-ms-user-select':'none',
	147	'user-select':'none'
	148	}).bind('selectstart', function(){ return false;});
	149
	150	if (o.data == null) {
	151	console.error(o.data, 'No directory to display!');
	152	return;
	153	}
	154
	155	o.data.sort(function (a,b) {
	156	return a.parentID - b.parentID;
	157	});
	158
	159	$(oContainer).find ('.vstree').remove();
	160	var homeNode = createNode({
	161	item: {id:0, name:o.rootName, parentID:-1},
	162	isRoot: true
	163	});
	164	if (homeNode && o.data.length > 0) {
	165	for (var i = 0; i < o.data.length; i++) {
	166	createNode ({item: o.data[i]});
	167	}
	168	}
	169	o.manager.setTreeCurrentNode(0);
	170	};
	171
	172	/******************
	173	* RENAME - START *
	174	******************/
	175	var renameInit = function (node) {
	176	var editor = $('<input>',{class:'rename', type: 'text', value:$(node).text()});
	177	$(editor).bind('focusout', function(e){renameCancel(node)});
	178	$(editor).bind('keydown', function(e){
	179	var keycode = (e.keyCode ? e.keyCode : e.which);
	180	if (keycode == '27') {
	181	renameCancel(node);
	182	}else if(keycode == '13') renameComplete(node);
	183	e.stopPropagation();
	184	});
	185
	186	$(node).text('');
	187	$(node).append(editor);
	188	$(editor).focus();
	189	$(editor).select();
	190	}
	191
	192	var renameCancel = function (node) {
	193	var dirID = $(node).attr('id');
	194	$(node).find('>INPUT').remove();
	195	$(node).text(treeNodes[dirID].name);
	196	$(node).focus();
	197	}
	198
	199	var renameComplete = function (node) {
	200	var editor = $(node).find('>INPUT');
	201	var dirID = $(node).attr('id');
	202	var newName = $(editor).val();
	203	$(node).attr('rel', newName);
	204	$(node).text(newName);
	205	$(node).find('>INPUT').remove();
	206	treeNodes[dirID].name = newName;
	207	updateData(dirID, 'rename');
	208	}
	209	/******************
	210	* RENAME - END *
	211	******************/
	212
	213	/******************
	214	* DELTE - START *
	215	******************/
	216	var destroyNode = function (node) {
	217	var dirID = $(node).attr('id');
	218	$(node).parent().remove();
	219	delete treeNodes[dirID];
	220	}
	221	/******************
	222	* DELTE - END *
	223	******************/
	224	var updateData = function (id, act) {
	225	for (var i = 0; i < o.data.length; i++) {
	226	if (o.data[i].id == id) {
	227	if(act == 'deletion') {
	228	delete o.data[i];
	229	}
	230	else {
	231	o.data[i].name = treeNodes[id].name
	232	o.data[i].parentID = treeNodes[id].parentID;
	233	}
	234	break;
	235	}
	236	}
	237
	238	o.manager.updateData({item:treeNodes[id], from:'tree', type:'directory', callback:act});
	239	}
	240
	241	this.createNode = function (node) {
	242	createNode ({item: node});
	243	o.data.sort(function (a,b) {
	244	return a.parentID - b.parentID;
	245	});
	246	if (node.parentID != 0) {
	247	var parentNode = $(oContainer).find('UL LI > A#' + node.parentID);
	248	expandNode(parentNode);
	249	}
	250	}
	251
	252	this.activeNode = function (node) {
	253	var dirID = $(node).attr('id');
	254	selectedNode = hightlightNode(node);
	255	o.manager.setTreeCurrentNode(dirID);
	256	expandNode(node);
	257	$(node).select();
	258	}
	259
	260	this.refeshTree = function () {
	261	//for (var i = 0; i < o.data.length; i++) {
	262	for (var i in o.data) {
	263	var node = nodeIsExisted(o.data[i].id);
	264	var defaulState = isCollapsedNode(node) ? 0:1;
	265	if (node == false)
	266	createNode ({item: o.data[i],defaulState:defaulState});
	267	}
	268
	269	o.manager.setTreeCurrentNode($(selectedNode).attr('id'));
	270	}
	271
	272	this.getSelectedNode = function () {
	273	return selectedNode;
	274	}
	275
	276	this.deletion = function (id) {
	277	destroyNode($(oContainer).find('A#'+id));
	278	}
	279
	280	this.findNodebyID = function (id) {
	281
	282	}
	283
	284	this.setData = function (data) {
	285	o.data = data;
	286	}
	287
	288	this.getRoot = function () {
	289	return treeNodes[0];
	290	}
	291
	292	this.createCopyNode = function (data) {
	293	for(var i in data) {
	294	createNode ({item: data[i]});
	295	}
	296	self.refeshTree();
	297	}
	298
	299	this.rename = function (key) {
	300	if (selectedNode == null) return false;
	301	if (key == 113) {
	302	renameInit(selectedNode);
	303	}
	304	else if (key == 27) {
	305	renameCancel(selectedNode);
	306	}
	307
	308	return true;
	309	}
	310
	311	this.initialize = function () {
	312	initTree();
	313	return this;
	314	};
	315
	316	return this.initialize();
	317	}
	318	});
	319	})(jQuery);

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

Download in other formats: