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