some refactoring of the filebrowsers javascript code

diff --git a/files/index.php b/files/index.php
index 7ac3bce6051431cd82bd15117fcffac399f4e732..79f8b677018310188199d8c374b8292387e6f40a 100644 (file)
--- a/files/index.php
+++ b/files/index.php
@@ -35,6 +35,7 @@ if( !OC_USER::isLoggedIn()){
 // Load the files we need
 OC_UTIL::addStyle( "files", "files" );
 OC_UTIL::addScript( "files", "files" );
+OC_UTIL::addScript( 'files', 'filelist' );
 OC_APP::setActiveNavigationEntry( "files_index" );
 // Load the files
 $dir = isset( $_GET['dir'] ) ? $_GET['dir'] : '';

diff --git a/files/js/filelist.js b/files/js/filelist.js
new file mode 100644 (file)
index 0000000..14cce8a
--- /dev/null
+++ b/files/js/filelist.js
@@ -0,0 +1,54 @@
+FileList={
+       update:function(fileListHtml) {
+               $('#fileList').empty().html(fileListHtml);
+       },
+       addFile:function(name,size,lastModified){
+               var html='<tr data-file="'+name+'" data-type="file">';
+               html+='<td class="selection"><input type="checkbox" /></td>';
+               html+='<td class="filename"><a style="background-image:url(img/file.png)" href="download.php?file='+$('#dir').val()+'/'+name+'">'+name+'</a></td>';
+               html+='<td class="filesize">'+size+'</td>';
+               html+='<td class="date">'+lastModified+'</td>';
+               html+='<td class="fileaction"><a href="" title="+" class="dropArrow"></a></td>';
+               html+='</tr>';
+               FileList.insertElement(name,'file',$(html));
+       },
+       addDir:function(name,size,lastModified){
+               var html='<tr data-file="'+name+'" data-type="dir">';
+               html+='<td class="selection"><input type="checkbox" /></td>';
+               html+='<td class="filename"><a style="background-image:url(img/folder.png)" href="index.php?dir='+$('#dir').val()+'/'+name+'">'+name+'</a></td>';
+               html+='<td class="filesize">'+size+'</td>';
+               html+='<td class="date">'+lastModified+'</td>';
+               html+='<td class="fileaction"><a href="" title="+" class="dropArrow"></a></td>';
+               html+='</tr>';
+               
+               FileList.insertElement(name,'dir',$(html));
+       },
+       refresh:function(data) {
+               result = jQuery.parseJSON(data.responseText);
+               if(typeof(result.data.breadcrumb) != 'undefined'){
+                       updateBreadcrumb(result.data.breadcrumb);
+               }
+               FileList.update(result.data.files);
+               resetFileActionPanel();
+       },
+       remove:function(name){
+               $('tr[data-file="'+name+'"]').remove();
+       },
+       insertElement:function(name,type,element){
+               //find the correct spot to insert the file or folder
+               var fileElements=$('tr[data-file][data-type="'+type+'"]');
+               var pos;
+               if(name.localeCompare($(fileElements[0]).attr('data-file'))<0){
+                       pos=0;
+               }else if(name.localeCompare($(fileElements[fileElements.length-1]).attr('data-file'))>0){
+                       pos=fileElements.length-1;
+               }else{
+                       for(var pos=1;pos<fileElements.length-1;pos++){
+                               if(name.localeCompare($(fileElements[pos]).attr('data-file'))>0 && name.localeCompare($(fileElements[pos+1]).attr('data-file'))<0){
+                                       break;
+                               }
+                       }
+               }
+               $(fileElements[pos]).after(element);
+       }
+}
\ No newline at end of file

diff --git a/files/js/files.js b/files/js/files.js
index b8bfb02b2bcccea926fbbf3eeed1f3d27b7a71c0..2c595ee4457bce0160aa548cb1a73f78d9b5ea3d 100644 (file)
--- a/files/js/files.js
+++ b/files/js/files.js
@@ -3,35 +3,34 @@ $(document).ready(function() {
        $('#file_newfolder_name').css('width', '14em');
        $('#file_newfolder_submit').css('width', '3em');
        
-    // Sets browser table behaviour :
-    $('.browser tr').hover(
-        function() {
-            $(this).addClass('mouseOver');
-        },
-        function() {
-            $(this).removeClass('mouseOver');
-        }
-    );
-
-    // Sets the file-action buttons behaviour :
-    $('td.fileaction a').click(function() {
-        $(this).parent().append($('#file_menu'));
-        $('#file_menu').slideToggle(250);
-        return false;
-    });
+       // Sets browser table behaviour :
+       $('.browser tr').hover(
+               function() {
+                       $(this).addClass('mouseOver');
+               },
+               function() {
+                       $(this).removeClass('mouseOver');
+               }
+       );
 
-    // Sets the select_all checkbox behaviour :
-    $('#select_all').click(function() {
+       // Sets the file-action buttons behaviour :
+       $('td.fileaction a').live('click',function() {
+               $(this).parent().append($('#file_menu'));
+               $('#file_menu').slideToggle(250);
+               return false;
+       });
 
-        if($(this).attr('checked'))
-            // Check all
-            $('td.selection input:checkbox').attr('checked', true);
-        else
-            // Uncheck all
-            $('td.selection input:checkbox').attr('checked', false);
-    });
+       // Sets the select_all checkbox behaviour :
+       $('#select_all').click(function() {
+               if($(this).attr('checked'))
+                       // Check all
+                       $('td.selection input:checkbox').attr('checked', true);
+               else
+                       // Uncheck all
+                       $('td.selection input:checkbox').attr('checked', false);
+       });
        
-       $('td.selection input:checkbox').click(function() {
+       $('td.selection input:checkbox').live('click',function() {
                if(!$(this).attr('checked')){
                        $('#select_all').attr('checked',false);
                }else{
@@ -51,23 +50,29 @@ $(document).ready(function() {
        
        // Delete current file 
        $('#delete_single_file').click(function() {
-               filename = $('#file_menu').parents('tr:first').find('.filename:first').children('a:first').text();
+               filename = $('#file_menu').parents('tr:first').attr('data-file');
                $.ajax({
                        url: 'ajax/delete.php',
                        data: "dir="+$('#dir').val()+"&file="+filename,
                        complete: function(data){
-                               boolOperationFinished(data, true, $('#file_menu').parents('tr:first'));
+                               boolOperationFinished(data, function(){
+                                       FileList.remove(filename);
+                               });
                        }
                });
                return false;
        });
        
-       $('#file_new_dir_submit').click(function() {
+       $('#file_newfolder_submit').click(function() {
                $.ajax({
                        url: 'ajax/newfolder.php',
-                       data: "dir="+$('#dir').val()+"&foldername="+$('#file_new_dir_name').val(),
-                       complete: function(data){boolOperationFinished(data, false);}
+                data: "dir="+$('#dir').val()+"&foldername="+$('#file_newfolder_name').val(),
+                       complete: function(data){boolOperationFinished(data, function(){
+                               var date=formatDate(new Date());
+                               FileList.addDir($('#file_newfolder_name').val(),'0 B',date)
+                       });}
                });
+               $('#file_newfolder_submit').fadeOut(250).trigger('vanish');
        });
        
        $('#file_newfolder_name').click(function(){
@@ -90,24 +95,10 @@ $(document).ready(function() {
                }
        });
        
-       $('#file_newfolder_submit').click(function() {
-               if($('#file_newfolder_name').val() != '') {
-                       $.ajax({
-                               url: 'ajax/newfolder.php',
-                               data: "dir="+$('#dir').val()+"&foldername="+$('#file_newfolder_name').val(),
-                               complete: function(data){
-                                       boolOperationFinished(data, false);
-                                       $('#file_newfolder_form')[0].reset();
-                               }
-                       });
-               }
-               $('#file_newfolder_submit').fadeOut(250).trigger('vanish');
-       });
-       
-       $('.download').click(function(event) {
+       $('.download').live('click',function(event) {
                var files='';
-               $('td.selection input:checkbox:checked').parent().parent().children('.filename').each(function(i,element){
-                       files+=';'+$(element).text();
+               $('td.selection input:checkbox:checked').parent().parent().each(function(i,element){
+                       files+=';'+$(element).attr('data-file');
                });
                files=files.substr(1);//remove leading ;
                
@@ -118,10 +109,10 @@ $(document).ready(function() {
                return false;
        });
        
-       $('.delete').click(function(event) {
+       $('.delete').live('click',function(event) {
                var files='';
-               $('td.selection input:checkbox:checked').parent().parent().children('.filename').each(function(i,element){
-                       files+=';'+$(element).text();
+               $('td.selection input:checkbox:checked').parent().parent().each(function(i,element){
+                       files+=';'+$(element).attr('data-file');
                });
                files=files.substr(1);//remove leading ;
                
@@ -129,7 +120,11 @@ $(document).ready(function() {
                        url: 'ajax/delete.php',
                        data: "dir="+$('#dir').val()+"&files="+files,
                        complete: function(data){
-                               boolOperationFinished(data, false);
+                               boolOperationFinished(data, function(){
+                                       $('td.selection input:checkbox:checked').parent().parent().each(function(i,element){
+                                               FileList.remove($(element).attr('data-file'));
+                                       });
+                               });
                        }
                });
                
@@ -152,17 +147,8 @@ $(document).ready(function() {
                        var size='Pending';
                }
                var date=new Date();
-               var monthNames = [ "January", "February", "March", "April", "May", "June",
-               "July", "August", "September", "October", "November", "December" ];
-               var uploadTime=monthNames[date.getMonth()]+' '+date.getDate()+', '+date.getFullYear()+', '+((date.getHours()<10)?'0':'')+date.getHours()+':'+date.getMinutes();
-               var html='<tr>';
-               html+='<td class="selection"><input type="checkbox" /></td>';
-               html+='<td class="filename"><a style="background-image:url(img/file.png)" href="download.php?file='+$('#dir').val()+'/'+name+'">'+name+'</a></td>';
-               html+='<td class="filesize">'+size+'</td>';
-               html+='<td class="date">'+uploadTime+'</td>';
-               html+='<td class="fileaction"><a href="" title="+" class="dropArrow"></a></td>';
-               html+='</tr>';
-               $('#fileList').append($(html));
+               var uploadTime=formatDate(date);
+               FileList.addFile(name,size,uploadTime);
                $('#file_upload_filename').val($('#file_upload_filename').data('upload_text'));
        });
        //save the original upload button text
@@ -193,47 +179,19 @@ function resetFileActionPanel() {
        $('#file_action_panel').attr('activeAction', false);
 }
 
-function boolOperationFinished(data, single, el) {
-       result = eval("("+data.responseText+");");
+function boolOperationFinished(data, callback) {
+       result = jQuery.parseJSON(data.responseText);
        if(result.status == 'success'){
-               if(single) {
-                       $('#file_menu').slideToggle(0);
-                       $('body').append($('#file_menu'));
-                       $(el).remove();
-               } else {
-                       $.ajax({
-                               url: 'ajax/list.php',
-                               data: "dir="+$('#dir').val(),
-                               complete: refreshContents
-                       });
-               }
+               callback.call();
        } else {
                alert(result.data.message);
        }
 }
 
-function refreshContents(data) {
-       result = eval("("+data.responseText+");");
-       if(typeof(result.data.breadcrumb) != 'undefined'){
-               updateBreadcrumb(result.data.breadcrumb);
-       }
-       updateFileList(result.data.files);
-       $('td.fileaction a').click(function() {
-        $(this).parent().append($('#file_menu'));
-        $('#file_menu').slideToggle(250);
-        return false;
-    });
-       resetFileActionPanel();
-}
-
 function updateBreadcrumb(breadcrumbHtml) {
        $('p.nav').empty().html(breadcrumbHtml);
 }
 
-function updateFileList(fileListHtml) {
-       $('#fileList').empty().html(fileListHtml);
-}
-
 function humanFileSize(bytes){
        if( bytes < 1024 ){
                return bytes+' B';
@@ -250,4 +208,10 @@ function humanFileSize(bytes){
        // Wow, heavy duty for owncloud
        bytes = Math.round( bytes / 1024, 1 );
        return bytes+' GB';
+}
+
+function formatDate(date){
+       var monthNames = [ "January", "February", "March", "April", "May", "June",
+       "July", "August", "September", "October", "November", "December" ];
+       return monthNames[date.getMonth()]+' '+date.getDate()+', '+date.getFullYear()+', '+((date.getHours()<10)?'0':'')+date.getHours()+':'+date.getMinutes();
 }
\ No newline at end of file

diff --git a/files/templates/part.list.php b/files/templates/part.list.php
index 0d3355678c3ec80a86dcb63712979fad754a13ed..f99cd87be24945187551f819485c4b971eb67e0a 100644 (file)
--- a/files/templates/part.list.php
+++ b/files/templates/part.list.php
@@ -1,5 +1,5 @@
                <?php foreach($_["files"] as $file): ?>
-                       <tr>
+                       <tr data-file='<?php echo $file['name'];?>' data-type='<?php echo ($file["type"] == "dir")?'dir':'file'?>'>
                                <td class="selection"><input type="checkbox" /></td>
                                <td class="filename"><a style="background-image:url(<?php if($file["type"] == "dir") echo mimetype_icon("dir"); else echo mimetype_icon($file["mime"]); ?>)" href="<?php if($file["type"] == "dir") echo link_to("files", "index.php?dir=".$file["directory"]."/".$file["name"]); else echo link_to("files", "download.php?file=".$file["directory"]."/".$file["name"]); ?>" title=""><?php echo htmlspecialchars($file["name"]); ?></a></td>
                                <td class="filesize"><?php echo human_file_size($file["size"]); ?></td>