source: pro-bachkim-filespace/sourcecode/assets/js/tree.js @ 69

Last change on this file since 69 was 66, checked in by dungnv, 11 years ago
  • Property svn:mime-type set to text/plain
File size: 8.5 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                       
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);
Note: See TracBrowser for help on using the repository browser.