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

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

Rename

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