some refactoring of the filebrowsers javascript code

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'] : '';

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);
+	}
+}

files/js/files.js

@@ -14,7 +14,7 @@ $(document).ready(function() {
 	);
 
 	// Sets the file-action buttons behaviour :
-    $('td.fileaction a').click(function() {
+	$('td.fileaction a').live('click',function() {
 		$(this).parent().append($('#file_menu'));
 		$('#file_menu').slideToggle(250);
 		return false;
@@ -22,7 +22,6 @@ $(document).ready(function() {
 
 	// Sets the select_all checkbox behaviour :
 	$('#select_all').click(function() {
-
 		if($(this).attr('checked'))
 			// Check all
 			$('td.selection input:checkbox').attr('checked', true);
@@ -31,7 +30,7 @@ $(document).ready(function() {
 			$('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(),
+		 data: "dir="+$('#dir').val()+"&foldername="+$('#file_newfolder_name').val(),
-			complete: function(data){boolOperationFinished(data, false);}
+			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() {
+	$('.download').live('click',function(event) {
-		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) {
 		var files='';
-		$('td.selection input:checkbox:checked').parent().parent().children('.filename').each(function(i,element){
+		$('td.selection input:checkbox:checked').parent().parent().each(function(i,element){
-			files+=';'+$(element).text();
+			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){
+		$('td.selection input:checkbox:checked').parent().parent().each(function(i,element){
-			files+=';'+$(element).text();
+			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",
+		var uploadTime=formatDate(date);
-		"July", "August", "September", "October", "November", "December" ];
+		FileList.addFile(name,size,uploadTime);
-		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));
 		$('#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) {
+function boolOperationFinished(data, callback) {
-	result = eval("("+data.responseText+");");
+	result = jQuery.parseJSON(data.responseText);
 	if(result.status == 'success'){
-		if(single) {
+		callback.call();
-			$('#file_menu').slideToggle(0);
-			$('body').append($('#file_menu'));
-			$(el).remove();
-		} else {
-			$.ajax({
-				url: 'ajax/list.php',
-				data: "dir="+$('#dir').val(),
-				complete: refreshContents
-			});
-		}
 	} 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';
@@ -251,3 +209,9 @@ function humanFileSize(bytes){
 	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();
+}

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>