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

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