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

Last change on this file was 926, checked in by dungnv, 10 years ago

Rename

File size: 9.8 KB
Line 
1if(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 id = $(node).attr('id');
205                                var idx = o.manager.searchItemByID(id, 'directory');
206                                var dir = o.data[idx];
207                                var name = dir.name;
208                                var newName = $(editor).val();
209
210                                var item = {
211                                                id:id,
212                                                name:name,
213                                                type:'directory',
214                                                parentID: dir.parentID,
215                                                newName:newName
216                                                };
217
218                                o.manager.rename(item);
219
220                                $(node).attr('rel', newName);
221                                $(node).text(newName);
222                                $(node).find('>INPUT').remove();
223                                /*treeNodes[id].name = newName;
224                                updateData(id, 'rename');*/
225                        }
226                        /******************
227                         * RENAME - END *
228                         ******************/
229
230                        /******************
231                         * DELTE - START *
232                         ******************/
233                        var destroyNode = function (node) {
234                                var dirID = $(node).attr('id');
235                                $(node).parent().remove();
236                                delete treeNodes[dirID];
237                        }
238                        /******************
239                         * DELTE - END    *
240                         ******************/
241                        var updateData = function (id, act) {
242                                for (var i = 0; i < o.data.length; i++) {
243                                        if (o.data[i].id == id) {
244                                                if(act == 'deletion') {
245                                                        delete o.data[i];
246                                                }
247                                                else {
248                                                        o.data[i].name = treeNodes[id].name
249                                                        o.data[i].parentID = treeNodes[id].parentID;
250                                                }
251                                                break;
252                                        }
253                                }
254
255                                o.manager.updateData({item:treeNodes[id], from:'tree', type:'directory', callback:act});
256                        }
257
258                        this.createNode = function (node) {
259                                createNode ({item: node});
260                                o.data.sort(function (a,b) {
261                                        return a.parentID - b.parentID;
262                                });
263                                if (node.parentID != 0) {
264                                        var parentNode = $(oContainer).find('UL LI > A#' + node.parentID);
265                                        expandNode(parentNode);
266                                }
267                        }
268
269                        this.activeNode = function (node) {
270                                var dirID = $(node).attr('id');
271                                selectedNode = highlightNode(node);
272                                o.manager.setTreeCurrentNode(dirID);
273                                expandNode(node);
274                                $(node).select();
275                        }
276
277                        this.refeshTree = function () {
278                                //for (var i = 0; i < o.data.length; i++) {
279                                for (var i in o.data) {
280                                        var node = nodeIsExisted(o.data[i].id);
281                                        var defaulState = isCollapsedNode(node) ? 0:1;
282                                        if (node == false)
283                                                createNode ({item: o.data[i],defaulState:defaulState});
284                                        else {
285                                                var node = $(oContainer).find('UL.vstree LI.directory > A#' + o.data[i].id);
286                                                $(node).text(o.data[i].name);
287                                        }
288                                }
289
290                                o.manager.setTreeCurrentNode($(selectedNode).attr('id'));
291                        }
292
293                        this.getSelectedNode = function () {
294                                return selectedNode;
295                        }
296
297                        this.deletion = function (id) {
298                                destroyNode($(oContainer).find('A#'+id));
299                        }
300
301                        this.findNodebyID = function (id) {
302
303                        }
304
305                        this.setData = function (data) {
306                                o.data = data;
307                        }
308
309                        this.getRoot = function () {
310                                return treeNodes[0];
311                        }
312
313                        this.createCopyNode = function (data) {
314                                for(var i in data) {
315                                        createNode ({item: data[i]});
316                                }
317                                self.refeshTree();
318                        }
319
320                        this.rename = function (key) {
321                                if (selectedNode == null) return false;
322                                if (key == 113) {
323                                        renameInit(selectedNode);
324                                }
325                                else if (key == 27) {
326                                        renameCancel(selectedNode);
327                                }
328
329                                return true;
330                        }
331
332                        this.getRootName = function () {
333                                return o.rootName;
334                        }
335
336                        this.initialize = function () {
337                                initTree();
338                                return this;
339                        };
340
341                        return this.initialize();
342                }
343        });
344})(jQuery);
Note: See TracBrowser for help on using the repository browser.