source: pro-bachkim-filespace/sourcecode/assets/js/vsgrid.js @ 281

Last change on this file since 281 was 66, checked in by dungnv, 11 years ago
  • Property svn:mime-type set to text/plain
File size: 12.8 KB
RevLine 
[15]1if(jQuery) (function($){
2       
3        $.extend($.fn, {
4                violetGrid: function (o) {
5                        if( !o ) var o = {};
6                        if( o.container == undefined ) o.container = $(this);
7                        if( o.defaultViewMode == undefined ) o.defaultViewMode = 'thumbnail';//or 'list'
8                        if( o.directoryTreeData == undefined ) o.directoryTreeData = null;
9                        if( o.dirIDprefix == undefined ) o.dirIDprefix = null;
[16]10                        if( o.host == undefined ) o.host = 'http://localhost/';
[42]11                        if( o.tree == undefined ) o.tree = null;
[15]12                       
[16]13                        if( o.sharemodal == undefined ) o.sharemodal = $("#box-shareto");
14                        if( o.copymodal == undefined ) o.copymodal = $("#box-copyto");
15                        if( o.movemodal == undefined ) o.movemodal = $("#box-moveto");
16                       
17                        var currentObj = {};
18                       
[15]19                        var createNode = function (d) {
20                                if( !d ) var d = {};
21                                if( d.id == undefined ) d.id = null;
22                                if( d.name == undefined ) d.name = null;
23                                if( d.minetype == undefined ) d.minetype = 'directory';
24                                if( d.parentID == undefined ) d.parentID = null;
25                                if( d.clickEvent == undefined ) d.clickEvent = null;
26                                if( d.customEvent == undefined ) d.customEvent = null;
27
[66]28                                var strHTML = '<div class="vscell '+ d.minetype +'" rel="id:' + d.id + '">';
[15]29                                        strHTML += '<div class="selector unselected">';
30                                        strHTML +=      '<div class="icon-' + d.minetype + '"></div>';
31                                        strHTML += '</div>';
32                                        strHTML += '<div class="file-name unselected">' + d.name + '</div>';
33                                        strHTML += '</div>';
34                               
35                                var disabledItemsList = null;
[66]36                                var enabledItemsList = null;
37                                var menuName = '';
[15]38                               
39                                if (d.minetype == 'directory') {
40                                        disabledItemsList = ['preview'];
[66]41                                        menuName = 'gridMenuDir';
[15]42                                }
[66]43                                else {
44                                        disabledItemsList = ['newfolder'];
45                                        menuName = 'gridMenuFile';
46                                }
[15]47                               
48                                $(o.container).append(strHTML);
49
[66]50                                $('div[rel="id:'+ d.id +'"].' + d.minetype).bind('click',function(e){itemClick(this)});
51                                $('div[rel="id:'+ d.id +'"].' + d.minetype).bind('dblclick',function(e){doubleClick(this)});
[16]52                               
[66]53                                $('div[rel="id:'+ d.id +'"].' + d.minetype).draggable({ containment: "parent",helper: "original" });
54                               
55                                $('div[rel="id:'+ d.id +'"].' + d.minetype).contextMenu({
56                                        menu: menuName,
57                                        disabledItems: disabledItemsList,
58                                        enabledItems: enabledItemsList
[15]59                                }, function(action, el, pos) {
[16]60                                        itemClick(el);
[15]61                                        switch(action) {
[42]62                                                case 'newfolder':
63                                                        openNewFolderModal(currentObj);
64                                                        break;
[15]65                                                case 'rename':
66                                                        rename(el);
67                                                        break;
[16]68                                                case 'share':
69                                                        showShareModal(currentObj);
70                                                        break;
71                                                case 'copy':
72                                                case 'cut':
[17]73                                                        showCopyModal(currentObj, action);
[16]74                                                        break;
[15]75                                                default:
76                                                        break;
77                                        }
78                                });
79                        }
80                       
[42]81                        var openNewFolderModal = function (c) {
82                                $('#box-newfolder').modal('show');
83                                $('#frm-newfolder').find('#f-parentid').val(c.id);
84                        }
85                       
86                        var bindCreateFolder = function () {
87                                $('#box-newfolder').find('#frm-newfolder').unbind('submit');
88                                $('#box-newfolder').find('#btn-submit-newfolder').unbind('click');
89                               
90                                $('#box-newfolder').find('#frm-newfolder').bind('submit',
91                                        function(e){
92                                                if ($('#frm-newfolder').find('#f-newfoldername').val() == '') {
93                                                        alert('Chưa nhập tên thư mục mới!');
94                                                }else {
95                                                        var postData = $('#box-newfolder').find('#frm-newfolder').serializeArray();
96                                                        var script = 'ajax/privatecontent/createdir';
97                                                        sendCommand({
98                                                                script: script,
99                                                                postdata:postData,
100                                                                callbackSuccess: function (parsedData) {
101                                                                                                        createNode({
102                                                                                                                id: parsedData.id,
103                                                                                                                name: parsedData.name,
104                                                                                                                curentNode: currentObj,
105                                                                                                                hidden: false,
106                                                                                                                addToJSONData:true});
107                                                                                                        o.tree.createDir(parsedData);
108                                                                                                }
109                                                        });
110                                                       
111                                                        $('#box-newfolder').modal('hide');
112                                                }
113                                               
114                                                e.preventDefault();
115                                });
116                               
117                                $('#box-newfolder').on('show.bs.modal', function () {
118                                        $('#box-newfolder').find('#frm-newfolder').get(0).reset();
119                                });
120                               
[45]121                                $('#box-newfolder').on('shown.bs.modal', function () {
122                                        $('#box-newfolder').find('#frm-newfolder').find('#f-newfoldername').focus();
123                                });
124                               
[42]125                                $('#box-newfolder').find('#btn-submit-newfolder').bind('click',
126                                        function (){
127                                                $('#box-newfolder').find('#frm-newfolder').submit();
128                                });
129                        }
130                       
[15]131                        var keyboardRename = function () {
[16]132                                $(document).bind('keydown','keypress', function(e) {
[15]133                                        var selectedItem = $('.selector.selected').parent();
[16]134                                       
[15]135                                        switch( e.keyCode ) {
136                                                case 113:
137                                                        rename(selectedItem);
138                                                        break;
[16]139                                                case 27:
[15]140                                                        cancelRename(selectedItem);
141                                                        break;
142                                                default:
143                                                        break;
144                                        }
145                                });
146                        }
[16]147                       
148                        var showShareModal = function (obj) {
149                                if (obj.type == undefined || obj.type == null) obj.type = 'directory';
150                                $(o.sharemodal).modal('show');
151                                $(o.sharemodal).find('INPUT#txtSelectedObj').val(obj.name);
[23]152                                $(o.sharemodal).find('.modal-header').text('Chia sẻ ' + (obj.type == 'directory'?'thư mục ':'file ') + obj.name);
[16]153                        }
154                       
[17]155                        var showCopyModal = function (obj, action) {
[23]156                                var modalTitle = action == 'copy' ? 'Sao chép ' + (obj.type == 'directory'?'thư mục ':'file ') + obj.name:'Di chuyển ' + (obj.type == 'directory'?'thư mục':'file') + ' ' + obj.name
[17]157                                var submitTitle = action == 'copy' ? 'Sao chép' : 'Di chuyển';
158                                var submitIcon = action == 'copy' ? '<i class="icon-copy"></i>' : '<i class="icon-cut"></i>';
159                                               
160                                //btn-primary
[16]161                                $(o.copymodal).modal('show');
[17]162                                $(o.copymodal).find('INPUT#txtSelectedObj').val(obj.name);
163                                $(o.copymodal).find('.modal-header').text(modalTitle);
164                                $(o.copymodal).find('.btn-primary').empty();
165                                $(o.copymodal).find('.btn-primary').append(submitIcon + "\n" + submitTitle);
166                               
167                                var selectTree = $(o.copymodal).find('#select-destination-tree').violetTree({
168                                        container: $('#select-destination-tree'),
169                                        expandEasing: 'easeOutBounce',
170                                        collapseEasing: 'easeOutBounce',
171                                        homeDirNameDisplay: "Thư mục gốc",
172                                        contextmenuON: false
173                                });
174                               
175                                $(o.copymodal).find('.btn-primary').button().click(function() {excuteCopy(obj, selectTree, action)})
176                               
177                                $(o.copymodal).on('hide.bs.modal', function () {
178                                        $(o.copymodal).find('.btn-primary').unbind('click');
179                                });
[16]180                        }
181                       
[17]182                        var excuteCopy = function (obj, tree, action) {
183                                var destObj = tree.getSelectedObj();
184                               
185                                //sendCommand
186                                var postdata = {sourceid:obj.id,
187                                                sourcetype:obj.type,
188                                                destid: destObj.id,
189                                                desttype: destObj.type,
190                                                flag:action}
191                               
192                                sendCommand({
193                                        script:'ajax/privatecontent/copy',
194                                        postdata:postdata,
195                                        callbackSuccess: function (parsedData) {
196                                                if (parsedData.RESULT == true) {
197                                                        //please add code here
198                                                }else return false;
199                                        }
200                                });
[16]201                        }
[15]202
203                        var itemClick = function (i) {
204                                $(i).parent().find('.selector').removeClass('selected');
205                                $(i).parent().find('.selector').addClass('unselected');
206                                $(i).parent().find('.file-name').removeClass('selected');
207                                $(i).parent().find('.file-name').addClass('unselected');
208
209                                $(i).find('.file-name').removeClass('unselected');
210                                $(i).find('.file-name').addClass('selected');
211                                $(i).find('.selector').removeClass('unselected');
212                                $(i).find('.selector').addClass('selected');
[16]213                               
214                                if ($(i).find('.file-name').text() != '')
215                                        currentObj.name = $(i).find('.file-name').text();
216                               
217                                currentObj.id = $(i).attr('rel').substring(3);
218                                currentObj.type = $(i).find('>div>div').hasClass('icon-directory') ? 'directory':'file';
[42]219                                var item = searchItemByID(currentObj.id, currentObj.type);
220                                currentObj.parentID = item.parentID;
[15]221                        }
[42]222                       
[66]223                        var doubleClick = function (i) {
224                                var rel = $(i).attr('rel');
225                                if ($(i).hasClass('directory')) {                               
226                                        var id = rel.substring(3, rel.length);
227                                        o.curentParent = o.dirIDprefix + id;
228                                        renderGrid(o);
229                                        o.tree.openTreeOffset(id);
230                                }
231                        }
232                       
[42]233                        var searchItemByID = function (itemID, type) {
234                                var source = (type == 'directory') ? o.directoryTreeData.DIRECTORIES : (type == 'file') ? o.directoryTreeData.FILES : null;
[45]235                                var item = {};
236                                if (itemID == 0) {
237                                        item.id = 0;
238                                        item.parentID = 0;
239                                        item.name = 'Home';
240                                }
241                                else {
242                                        for (var i = 0 ; i < source.length; i++) {
243                                                if (source[i].id == itemID) {
244                                                        item = source[i];
245                                                        break;
246                                                }
[42]247                                        }
248                                }
[45]249                               
250                                item.type = type;
[42]251                                return item;
252                        }
[15]253
254                        var renderGrid = function (o) {
255                                $(o.container).find ('.vscell').remove();
256                               
257                                var childDir = o.directoryTreeData.DIRECTORIES;
258                                var childFile = o.directoryTreeData.FILES;
[45]259                                var currentDirID = o.curentParent.substring(o.dirIDprefix.length, o.curentParent.length);
[15]260                               
[45]261                                var disabledItemsList = ['preview','rename','copy','cut','delete','open'];
262                                var item = searchItemByID(currentDirID,'directory');
[66]263                               
[45]264                                $(o.container).contextMenu({
265                                        menu: 'gridMenuParent',
266                                        disabledItems: disabledItemsList
267                                }, function(action, el, pos) {
268                                        switch(action) {
269                                                case 'newfolder':
270                                                        openNewFolderModal(item);
271                                                        break;
272                                                case 'share':
273                                                        showShareModal(item);
274                                                        break;
275                                                default:
276                                                        break;
277                                        }
278                                });
279                               
[15]280                                for (var i = 0 ; i < childDir.length; i++) {
[45]281                                        if (childDir[i].parentID != currentDirID) continue;
[15]282                                        createNode ({
283                                                id: childDir[i].id,
284                                                name: childDir[i].name,
[45]285                                                parentID: currentDirID,
[15]286                                        });
287                                }
[16]288                               
[15]289                                for (var i = 0 ; i < childFile.length; i++) {
[45]290                                        if (childFile[i].parentID != currentDirID) continue;
[15]291                                        createNode ({
292                                                id: childFile[i].id,
293                                                name: childFile[i].name,
[45]294                                                parentID: currentDirID,
[15]295                                                minetype: childFile[i].minetype,
296                                        });
297                                }
[16]298                               
299                                keyboardRename();
[42]300                                bindCreateFolder();
[15]301                        }
302                       
303                        var rename = function (e) {
304                                var nameObj = $(e).find('.file-name');
305                                var editor = document.createElement ('INPUT');
306                                editor.type = 'text';
307                                editor.className = 'rename';
308                               
309                                $(nameObj).text('');
310                                $(nameObj).append(editor);
[16]311                               
312                                $(editor).attr('value', currentObj.name); 
[15]313                                editor.focus();
314                                $(editor).select();
[16]315                                $(editor).bind('focusout',function (e) {
316                                        cancelRename($(this).parent().parent());
317                                });
318                               
319                                $(editor).bind('keypress',function (e) {
320                                var keycode = (e.keyCode ? e.keyCode : e.which);
321                                if(keycode == '13'){
322                                        completeRename($(this).parent());
323                                }
324                                else {
325                                       
326                                }
327                                e.stopPropagation();
328                                });
[15]329                        }
330                       
331                        var cancelRename = function (e) {
332                                $(e).find('INPUT.rename').remove();
[16]333                                $(e).find('.file-name').text(currentObj.name);
334                        }
335                       
336                        var completeRename = function (e) {
[15]337                               
[16]338                                var postdata = {id:currentObj.id,
339                                                                objtype:currentObj.type,
340                                                                newname:$(e).find('INPUT.rename').val()}
341                                sendCommand({
342                                        script:'ajax/privatecontent/rename',
343                                        postdata:postdata,
344                                        callbackSuccess: function (parsedData) {
345                                                if (parsedData.RESULT == true) {
346                                                        currentObj.name = parsedData.UPDATED.name;
347                                                        $(e).find('INPUT.rename').remove();
348                                                        $(e).text(currentObj.name);
349                                                }else return false;
350                                        }
351                                });
[15]352                        }
[16]353                       
354                        var sendCommand = function (p) {
355                                if( p.postdata == undefined ) p.postdata = null;
356                                if( p.script == undefined ) p.script = o.script;
357                                if( p.callbackSuccess == undefined ) p.callbackSuccess = null;
358                                if( p.callbackDone == undefined ) p.callbackDone = null;
359                                if( p.callbackFail == undefined ) p.callbackFail = null;
360                                if( p.callbackAlways == undefined ) p.callbackAlways = null;
[15]361
[16]362                                if (p.script != null) {
363                                        $.post(o.host + p.script, p.postdata, function (data){
364                                                if (data) {
365                                                        parseData = $.parseJSON(data);
366                                                }
367
368                                                if (p.callbackSuccess != null) {
369                                                        p.callbackSuccess(parseData);
370                                                }
371                                        }).done(function() {if (p.callbackDone != null)p.callbackDone(this);}).fail(function() {if (p.callbackFail != null)p.callbackFail(this);}).always(function() {if (p.callbackAlways != null)p.callbackAlways(this);});
372                                }
373                        }
374
[42]375                        this.setData = function (data) {
[15]376                                o.directoryTreeData = data.directoryTreeData;
377                                o.curentParent = data.curentParent;
[42]378                                o.dirIDprefix = data.dirIDprefix;
[15]379                                renderGrid(o);
380                        }
[16]381                       
[42]382                        this.setTree = function (treeObj) {
383                                o.tree = treeObj;
384                        }
385                       
[17]386                        this.showModal = function (obj, act) {
[16]387                                switch( act ) {
[42]388                                        case 'newfolder':
389                                                openNewFolderModal(obj);
390                                                break;
[16]391                                        case 'copy':
[17]392                                        case 'cut':
393                                                showCopyModal(obj, act);
[16]394                                                break;
395                                        case 'share':
396                                                showShareModal(obj);
397                                                break;
398                                        default:
399                                                break;
400                                }
401                        }
[66]402                       
403                        this.searchItem = function (id, type) {
404                                return searchItemByID (id, type);
405                        }
[15]406
407                        this.initialize = function() {
408                        return this;
409                };
410
411                        return this.initialize();
412                }
413        });
414
415})(jQuery);
Note: See TracBrowser for help on using the repository browser.