Context Navigation

source: pro-violet-viettel/www/deploy/20150304/assets/js/grid.js @ 830

Last change on this file since 830 was 825, checked in by dungnv, 10 years ago

File size: 10.0 KB

Rev	Line
[780]	1	if(jQuery) (function($){
	2	$.extend($.fn, {
	3	violetGrid : function (o) {
	4	if( !o ) var o = {};
	5	if( o.data == undefined ) o.data = null;
	6	if( o.draggable == undefined ) o.draggable = false;
	7	if( o.manager == undefined) o.manager = null;
	8
	9	var oContainer = this;
	10	var documentBoundEvent = false;
	11	var posTopArray = [];
	12	var posLeftArray = [];
	13	var self = this;
	14
	15	var createNode = function (node) {
	16	if( !node ) var node = {};
	17	if( node.item == undefined ) node.item = null; //item.id, item.name, item.parentID
	18	if( node.isDirectory == undefined ) node.isDirectory = false;
	19	if( node.showContextMenu == undefined ) node.showContextMenu = true;
	20
	21
	22	var icon = (node.item.minetype != undefined) ? 'icon-' + node.item.minetype: 'icon-directory';
	23	var type = (node.item.minetype != undefined) ? node.item.minetype: 'directory';
	24	var thumb = null;
[816]	25	console.log(node);
[813]	26	if (node.item.thumbnail != "")
	27	{
	28	thumb = $('<img>', {src:node.item.thumbnail,align:'middle'});
	29	}
	30	else
	31	{
	32	if($.inArray( type.toLowerCase(), [ "jpg", "jpeg", "png", "bmp"])>=0)
[780]	33	{
	34	thumb = $('<img>', {src:node.item.fileurl,align:'middle'});
	35	}
[813]	36	}
[780]	37	var div = $('<div></div>',{'class':icon});
	38	if (thumb != null) $(div).append(thumb);
	39
	40	var typeid = type == 'directory' ? 'directory':'file';
	41	var inputID = $('<input />',{'class':'id', type:'hidden',value:node.item.id});
	42	var inputName = $('<input />',{'class':'name',type:'hidden',value:node.item.name});
[813]	43	var inputFileUrl = $('<input />',{'class':'fileurl',type:'hidden',value:node.item.fileurl});
[780]	44	var inputParent = $('<input />',{'class':'parentID',type:'hidden',value:node.item.parentID});
	45	var inputType = $('<input />',{'class':'type',type:'hidden',value:typeid});
	46
	47	var a = $('<a></a>',{id: node.item.id,href: '#',rel: node.item.name,text: node.item.name});
[825]	48	//var nameplace = $('<div></div>',{id: node.item.id,rel: node.item.name,text: node.item.name});
[780]	49	var divLink = $('<div></div>',{'class':'file-name'}).append(a,inputID,inputName,inputParent,inputType,inputFileUrl);
	50	var li = $('<li></li>',{'class':'vscell',id:typeid+node.item.id}).append(div, divLink);
	51
	52	bindNodeEvents(li);
	53
	54	return li;
	55	}
	56
	57	var bindNodeEvents = function (node) {
	58
	59	var disabledItemsList = null;
	60	var menuName = '';
	61
	62	var type = $(node).find('> DIV[class^="file-name"] > INPUT[type="hidden"][class^="type"]').val();
	63
	64	$(node)
	65	.bind("click", function (e){nodeClick(this,e);return false;})
	66	.bind("dblclick", function (e){nodeDblClick(this,e);return false;})
	67	}
	68
[825]	69	var nodeClick = function (node, event) {
[780]	70	if (event.ctrlKey) {
	71	if (!isHightLight(node))
	72	hightlightNode(node);
	73	else
	74	clearHightLightNode(node);
	75	}
	76	else if (event.shiftKey) {
	77	var firstItem = $(oContainer).find('LI.selected');
	78	var aryNode = $(oContainer).find('> UL > LI');
	79	var start = aryNode.index(firstItem);
	80	var finish = aryNode.index(node);
	81	aryNode.slice(Math.min(start, finish), Math.max(start, finish) + 1).each( function (i,o){hightlightNode(o);});
	82	}
	83	else {
	84	clearAllHightLightNode(node);
[825]	85	hightlightNode(node);
[780]	86	}
	87	}
	88
	89
	90	var nodeDblClick = function (node) {
	91
	92	var nodeObj = {id:$(node).find('> DIV[class^="file-name"] > INPUT[type="hidden"][class^="id"]').val(),
	93	fileurl: $(node).find('> DIV[class^="file-name"] > INPUT[type="hidden"][class^="fileurl"]').val(),
	94	name: $(node).find('> DIV[class^="file-name"] > INPUT[type="hidden"][class^="name"]').val(),
	95	parentID: $(node).find('> DIV[class^="file-name"] > INPUT[type="hidden"][class^="parentID"]').val(),
	96	minetype: $(node).find('> DIV[class^="file-name"] > INPUT[type="hidden"][class^="type"]').val()};
	97
[825]	98	o.manager.gridNodeDblClick(nodeObj);
[780]	99	}
	100
	101	var hightlightNode = function (node) {
	102	$(node).addClass('selected');
	103	}
	104
	105	var isHightLight = function (node) {
	106	return $(node).hasClass('selected');
	107	}
	108
	109	var clearAllHightLightNode = function () {
	110	$(oContainer).find('> UL > LI').removeClass('selected');
	111	}
	112
	113	var clearHightLightNode = function (node) {
	114	$(node).removeClass('selected');
	115	}
	116
	117	var hightLightAllNode = function () {
	118	clearAllHightLightNode();
	119	$(oContainer).find('> UL > LI').addClass('selected');
	120	}
	121
	122	var getAllHightLightNode = function () {
	123	return $(oContainer).find('> UL > LI.selected');
	124	}
	125
	126	var initGrid = function () {
	127	$(oContainer).attr('unselectable','on')
	128	.css({'-moz-user-select':'-moz-none',
	129	'-moz-user-select':'none',
	130	'-o-user-select':'none',
	131	'-khtml-user-select':'none',
	132	'-webkit-user-select':'none',
	133	'-ms-user-select':'none',
	134	'user-select':'none'
	135	}).bind('selectstart', function(){ return false;
	136	}).bind('click', function(e){clearAllHightLightNode(); return false; });
	137
	138	var ul = $('<ul></ul>',{'class':'vsgrid'});
	139
	140	var parentDirID = o.manager.getTreeCurrentNode();
	141	if (o.data.DIRECTORIES.length > 0) {
	142	for (var d in o.data.DIRECTORIES) {
	143	if (o.data.DIRECTORIES[d].parentID == parentDirID) {
	144	var li = createNode ({item: o.data.DIRECTORIES[d]});
	145	$(ul).append(li);
	146	}
	147	}
	148	}
	149
	150	if (o.data.FILES.length > 0) {
	151	for (var f in o.data.FILES) {
	152	if (o.data.FILES[f].parentID == parentDirID) {
	153	var li = createNode ({item: o.data.FILES[f]});
	154	$(ul).append(li);
	155	}
	156	}
	157	}
	158
	159	$(oContainer).find ('UL').remove();
	160	$(oContainer).append(ul);
	161	}
	162
	163	var destroyNode = function (node) {
	164	var nodeID = $(node).find('> DIV[class^="file-name"] > INPUT[type="hidden"][class^="id"]').val();
	165	var nodeType = $(node).find('> DIV[class^="file-name"] > INPUT[type="hidden"][class^="type"]').val();
	166	$(node).remove();
	167	}
	168
	169	/******************
	170	* RENAME - START *
	171	******************/
	172	var renameInit = function (node) {
	173	var editor = $('<input />',{'class':'rename', type: 'text', value:$(node).text()});
	174	$(editor).bind('focusout', function(e){renameCancel(node)});
	175	$(editor).bind('keydown', function(e){
	176	var keycode = (e.keyCode ? e.keyCode : e.which);
	177	if (keycode == '27') {
	178	renameCancel(node);
	179	}else if(keycode == '13') renameComplete(node);
	180	e.stopPropagation();
	181	});
	182
	183	$(node).text('');
	184	$(node).append(editor);
	185	$(editor).focus();
[825]	186	//$(editor).select();
[780]	187	}
	188
	189	var renameCancel = function (node) {
	190	var nodeID = $(node).parent().find('> INPUT[type="hidden"][class^="id"]').val();
	191	var nodeType = $(node).parent().find('> INPUT[type="hidden"][class^="type"]').val();
	192	var nodeName = $(node).parent().find('> INPUT[type="hidden"][class^="name"]').val();
	193	var nodeParent = $(node).parent().find('> INPUT[type="hidden"][class^="parentID"]').val();
	194	var itemIndex = o.manager.searchItemByID(nodeID, nodeType == 'directory' ? nodeType:'file');
	195
	196	$(node).find('>INPUT').remove();
	197	$(node).text(nodeName);
	198	$(node).select();
	199	}
	200
	201	var renameComplete = function (node) {
	202	var editor = $(node).find('>INPUT');
	203	var dirID = $(node).attr('id');
	204	var newName = $(editor).val();
	205	$(node).attr('rel', newName);
	206	$(node).text(newName);
	207	$(node).find('>INPUT').remove();
	208
	209	/*treeNodes[dirID].name = newName;
	210	updateData(dirID, 'rename');*/
	211	}
	212	/******************
	213	* RENAME - END *
	214	******************/
	215
	216	this.reloadGrid = function () {
	217	initGrid();
	218	}
	219
	220	this.setData = function (data) {
	221	o.data = data;
	222	}
	223
	224	this.rename = function (item) {
	225	/*console.log('rename');
	226	console.log(item);*/
	227	}
	228
	229	this.createNode = function (node) {
	230	var node = createNode ({item: node});
	231	$(oContainer).find ('UL').append(node);
	232	}
	233
	234	this.deletion = function (id, type) {
	235	destroyNode($(oContainer).find('LI#'+type+id));
	236	}
	237
	238	this.rename = function (key) {
	239	var hightlightedNodes = self.getHightLightItem();
	240	if ($(hightlightedNodes).length == 0 \|\| $(hightlightedNodes).length > 1) return false;
	241
	242	var nodeID = $(hightlightedNodes).get(0).id;
	243	var nodeType = $(hightlightedNodes).get(0).type;
	244
	245	var selectedNode = $(oContainer).find('LI#' + nodeType + nodeID + '.vscell > DIV.file-name > A#' + nodeID);
	246	if (key == 113) {
	247	renameInit(selectedNode);
	248	}
	249	else if (key == 27) {
	250	renameCancel(selectedNode);
	251	}
	252
	253	return true;
	254	}
	255
	256	this.getHightLightItem = function () {
	257	var nodeSelected = $(oContainer).find('LI.vscell.selected');
	258	var items = [];
	259
	260	if ($(nodeSelected).length > 0) {
	261	$(nodeSelected).each (function(i,o) {
	262	var item = {
	263	id: $(this).find('> DIV.file-name > INPUT[type="hidden"][class^="id"]').val(),
	264	fileurl: $(this).find('> DIV.file-name > INPUT[type="hidden"][class^="fileurl"]').val(),
	265	name: $(this).find('> DIV.file-name > INPUT[type="hidden"][class^="name"]').val(),
	266	parentID: $(this).find('> DIV.file-name > INPUT[type="hidden"][class^="parentID"]').val(),
	267	type: $(this).find('> DIV.file-name > INPUT[type="hidden"][class^="type"]').val()
	268	};
	269	items.push(item);
	270	});
	271	}
	272
	273	return items;
	274	}
	275
	276	this.selectAllNode = function () {
	277	hightLightAllNode();
	278	}
	279
	280	this.initialize = function () {
	281	initGrid();
	282	return this;
	283	};
	284
	285	return this.initialize();
	286	}
	287	});
	288	})(jQuery);

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

Download in other formats: