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 |
|
---|
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 = highlightNode(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 | o.manager.refreshStatusBar();
|
---|
111 | };
|
---|
112 |
|
---|
113 | var highlightNode = function (node) {
|
---|
114 | $(oContainer).find('.currentDir').removeClass('currentDir');
|
---|
115 | $(node).addClass('currentDir');
|
---|
116 | $(node).select();
|
---|
117 | return node;
|
---|
118 | }
|
---|
119 |
|
---|
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 | };
|
---|
125 |
|
---|
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 | };
|
---|
131 |
|
---|
132 | var isCollapsedNode = function (node) {
|
---|
133 | return $(node).parent().hasClass('collapsed');
|
---|
134 | }
|
---|
135 |
|
---|
136 | var nodeIsExisted = function (nodeID) {
|
---|
137 | var node = $(oContainer).find('UL.vstree LI.directory > A#' + nodeID);
|
---|
138 | return ($(node).length > 0) ? node : false;
|
---|
139 | }
|
---|
140 |
|
---|
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 | }
|
---|
156 |
|
---|
157 | o.data.sort(function (a,b) {
|
---|
158 | return a.parentID - b.parentID;
|
---|
159 | });
|
---|
160 |
|
---|
161 | $(oContainer).find ('.vstree').remove();
|
---|
162 | var homeNode = createNode({
|
---|
163 | item: {id:0, name:o.rootName, parentID:-1},
|
---|
164 | isRoot: true
|
---|
165 | });
|
---|
166 |
|
---|
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 | };
|
---|
174 |
|
---|
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 | });
|
---|
188 |
|
---|
189 | $(node).text('');
|
---|
190 | $(node).append(editor);
|
---|
191 | $(editor).focus();
|
---|
192 | $(editor).select();
|
---|
193 | }
|
---|
194 |
|
---|
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 | }
|
---|
201 |
|
---|
202 | var renameComplete = function (node) {
|
---|
203 | var editor = $(node).find('>INPUT');
|
---|
204 | var dirID = $(node).attr('id');
|
---|
205 | var newName = $(editor).val();
|
---|
206 | $(node).attr('rel', newName);
|
---|
207 | $(node).text(newName);
|
---|
208 | $(node).find('>INPUT').remove();
|
---|
209 | treeNodes[dirID].name = newName;
|
---|
210 | updateData(dirID, 'rename');
|
---|
211 | }
|
---|
212 | /******************
|
---|
213 | * RENAME - END *
|
---|
214 | ******************/
|
---|
215 |
|
---|
216 | /******************
|
---|
217 | * DELTE - START *
|
---|
218 | ******************/
|
---|
219 | var destroyNode = function (node) {
|
---|
220 | var dirID = $(node).attr('id');
|
---|
221 | $(node).parent().remove();
|
---|
222 | delete treeNodes[dirID];
|
---|
223 | }
|
---|
224 | /******************
|
---|
225 | * DELTE - END *
|
---|
226 | ******************/
|
---|
227 | var updateData = function (id, act) {
|
---|
228 | for (var i = 0; i < o.data.length; i++) {
|
---|
229 | if (o.data[i].id == id) {
|
---|
230 | if(act == 'deletion') {
|
---|
231 | delete o.data[i];
|
---|
232 | }
|
---|
233 | else {
|
---|
234 | o.data[i].name = treeNodes[id].name
|
---|
235 | o.data[i].parentID = treeNodes[id].parentID;
|
---|
236 | }
|
---|
237 | break;
|
---|
238 | }
|
---|
239 | }
|
---|
240 |
|
---|
241 | o.manager.updateData({item:treeNodes[id], from:'tree', type:'directory', callback:act});
|
---|
242 | }
|
---|
243 |
|
---|
244 | this.createNode = function (node) {
|
---|
245 | createNode ({item: node});
|
---|
246 | o.data.sort(function (a,b) {
|
---|
247 | return a.parentID - b.parentID;
|
---|
248 | });
|
---|
249 | if (node.parentID != 0) {
|
---|
250 | var parentNode = $(oContainer).find('UL LI > A#' + node.parentID);
|
---|
251 | expandNode(parentNode);
|
---|
252 | }
|
---|
253 | }
|
---|
254 |
|
---|
255 | this.activeNode = function (node) {
|
---|
256 | var dirID = $(node).attr('id');
|
---|
257 | selectedNode = highlightNode(node);
|
---|
258 | o.manager.setTreeCurrentNode(dirID);
|
---|
259 | expandNode(node);
|
---|
260 | $(node).select();
|
---|
261 | }
|
---|
262 |
|
---|
263 | this.refeshTree = function () {
|
---|
264 | //for (var i = 0; i < o.data.length; i++) {
|
---|
265 | for (var i in o.data) {
|
---|
266 | var node = nodeIsExisted(o.data[i].id);
|
---|
267 | var defaulState = isCollapsedNode(node) ? 0:1;
|
---|
268 | if (node == false)
|
---|
269 | createNode ({item: o.data[i],defaulState:defaulState});
|
---|
270 | }
|
---|
271 |
|
---|
272 | o.manager.setTreeCurrentNode($(selectedNode).attr('id'));
|
---|
273 | }
|
---|
274 |
|
---|
275 | this.getSelectedNode = function () {
|
---|
276 | return selectedNode;
|
---|
277 | }
|
---|
278 |
|
---|
279 | this.deletion = function (id) {
|
---|
280 | destroyNode($(oContainer).find('A#'+id));
|
---|
281 | }
|
---|
282 |
|
---|
283 | this.findNodebyID = function (id) {
|
---|
284 |
|
---|
285 | }
|
---|
286 |
|
---|
287 | this.setData = function (data) {
|
---|
288 | o.data = data;
|
---|
289 | }
|
---|
290 |
|
---|
291 | this.getRoot = function () {
|
---|
292 | return treeNodes[0];
|
---|
293 | }
|
---|
294 |
|
---|
295 | this.createCopyNode = function (data) {
|
---|
296 | for(var i in data) {
|
---|
297 | createNode ({item: data[i]});
|
---|
298 | }
|
---|
299 | self.refeshTree();
|
---|
300 | }
|
---|
301 |
|
---|
302 | this.rename = function (key) {
|
---|
303 | if (selectedNode == null) return false;
|
---|
304 | if (key == 113) {
|
---|
305 | renameInit(selectedNode);
|
---|
306 | }
|
---|
307 | else if (key == 27) {
|
---|
308 | renameCancel(selectedNode);
|
---|
309 | }
|
---|
310 |
|
---|
311 | return true;
|
---|
312 | }
|
---|
313 |
|
---|
314 | this.getRootName = function () {
|
---|
315 | return o.rootName;
|
---|
316 | }
|
---|
317 |
|
---|
318 | this.initialize = function () {
|
---|
319 | initTree();
|
---|
320 | return this;
|
---|
321 | };
|
---|
322 |
|
---|
323 | return this.initialize();
|
---|
324 | }
|
---|
325 | });
|
---|
326 | })(jQuery); |
---|