Reimplement filesummary in JS

Fix #993

4 files changed, 127 insertions, 40 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 7d5fe6445b7..a9b93dc2dee 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -170,7 +170,20 @@ a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; }
 }
 
 .summary {
-	opacity: .5;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+	filter: alpha(opacity=30);
+	opacity: .3;
+	height: 70px;
+}
+
+.summary:hover, .summary, table tr.summary td {
+	background-color: transparent;
+}
+
+.summary td {
+	padding-top: 8px;
+	padding-bottom: 8px;
+	border-bottom: none;
 }
 
 .summary .info {
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 10801af3ead..e11cc70802b 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -144,6 +144,7 @@ var FileList={
 	remove:function(name){
 		$('tr').filterAttr('data-file',name).find('td.filename').draggable('destroy');
 		$('tr').filterAttr('data-file',name).remove();
+		FileList.updateFileSummary();
 		if($('tr[data-file]').length==0){
 			$('#emptyfolder').show();
 		}
@@ -176,6 +177,7 @@ var FileList={
 			$('#fileList').append(element);
 		}
 		$('#emptyfolder').hide();
+		FileList.updateFileSummary();
 	},
 	loadingDone:function(name, id){
 		var mime, tr=$('tr').filterAttr('data-file',name);
@@ -391,6 +393,7 @@ var FileList={
 						});
 						procesSelection();
 						checkTrashStatus();
+						FileList.updateFileSummary();
 					} else {
 						$.each(files,function(index,file) {
 							var deleteAction = $('tr').filterAttr('data-file',files[i]).children("td.date").children(".action.delete");
@@ -398,6 +401,111 @@ var FileList={
 						});
 					}
 				});
+	},
+	createFileSummary: function() {
+		if( $('#fileList tr').length > 0 ) {
+			var totalDirs = 0;
+			var totalFiles = 0;
+			var totalSize = 0;
+
+			// Count types and filesize
+			$.each($('tr[data-file]'), function(index, value) {
+				if ($(value).data('type') === 'dir') {
+					totalDirs++;
+				} else if ($(value).data('type') === 'file') {
+					totalFiles++;
+				}
+				totalSize += parseInt($(value).data('size'));
+			});
+
+			// Get translations
+			var directoryInfo = n('files', '%n folder', '%n folders', totalDirs);
+			var fileInfo = n('files', '%n file', '%n files', totalFiles);
+
+			var infoVars = {
+				dirs: '<span class="dirinfo">'+directoryInfo+'</span><span class="connector">',
+				files: '</span><span class="fileinfo">'+fileInfo+'</span>'
+			}
+
+			var info = t('files', '{dirs} and {files}', infoVars);
+
+			// don't show the filesize column, if filesize is NaN (e.g. in trashbin)
+			if (isNaN(totalSize)) {
+				var fileSize = '';
+			} else {
+				var fileSize = '<td class="filesize">'+humanFileSize(totalSize)+'</td>';
+			}
+
+			$('#fileList').append('<tr class="summary"><td><span class="info">'+info+'</span></td>'+fileSize+'<td></td></tr>');
+
+			var $dirInfo = $('.summary .dirinfo');
+			var $fileInfo = $('.summary .fileinfo');
+			var $connector = $('.summary .connector');
+
+			// Show only what's necessary, e.g.: no files: don't show "0 files"
+			if ($dirInfo.html().charAt(0) === "0") {
+				$dirInfo.hide();
+				$connector.hide();
+			}
+			if ($fileInfo.html().charAt(0) === "0") {
+				$fileInfo.hide();
+				$connector.hide();
+			}
+		}
+	},
+	updateFileSummary: function() {
+		var $summary = $('.summary');
+
+		// Check if we should remove the summary to show "Upload something"
+		if ($('#fileList tr').length === 1 && $summary.length === 1) {
+			$summary.remove();
+		}
+		// If there's no summary create one (createFileSummary checks if there's data)
+		else if ($summary.length === 0) {
+			FileList.createFileSummary();
+		}
+		// There's a summary and data -> Update the summary
+		else if ($('#fileList tr').length > 1 && $summary.length === 1) {
+			var totalDirs = 0;
+			var totalFiles = 0;
+			var totalSize = 0;
+			$.each($('tr[data-file]'), function(index, value) {
+				if ($(value).data('type') === 'dir') {
+					totalDirs++;
+				} else if ($(value).data('type') === 'file') {
+					totalFiles++;
+				}
+				if ($(value).data('size') !== undefined) {
+					totalSize += parseInt($(value).data('size'));
+				}
+			});
+
+			var $dirInfo = $('.summary .dirinfo');
+			var $fileInfo = $('.summary .fileinfo');
+			var $connector = $('.summary .connector');
+
+			// Substitute old content with new translations
+			$dirInfo.html(n('files', '%n folder', '%n folders', totalDirs));
+			$fileInfo.html(n('files', '%n file', '%n files', totalFiles));
+			$('.summary .filesize').html(humanFileSize(totalSize));
+
+			// Show only what's necessary (may be hidden)
+			if ($dirInfo.html().charAt(0) === "0") {
+				$dirInfo.hide();
+				$connector.hide();
+			} else {
+				$dirInfo.show();
+			}
+			if ($fileInfo.html().charAt(0) === "0") {
+				$fileInfo.hide();
+				$connector.hide();
+			} else {
+				$fileInfo.show();
+			}
+			if ($dirInfo.html().charAt(0) !== "0" && $fileInfo.html().charAt(0) !== "0") {
+				$connector.show();
+			}
+		}
 	}
 };
 
@@ -599,4 +707,6 @@ $(document).ready(function(){
 	$(window).unload(function (){
 		$(window).trigger('beforeunload');
 	});
+
+	FileList.createFileSummary();
 });
diff --git a/apps/files/templates/part.list.php b/apps/files/templates/part.list.php
index 0c7d6936697..3e6f619868d 100644
--- a/apps/files/templates/part.list.php
+++ b/apps/files/templates/part.list.php
@@ -1,14 +1,5 @@
 <input type="hidden" id="disableSharing" data-status="<?php p($_['disableSharing']); ?>">
-<?php $totalfiles = 0;
-$totaldirs = 0;
-$totalsize = 0; ?>
 <?php foreach($_['files'] as $file):
-	$totalsize += $file['size'];
-	if ($file['type'] === 'dir') {
-		$totaldirs++;
-	} else {
-		$totalfiles++;
-	}
 	// the bigger the file, the darker the shade of grey; megabytes*2
 	$simple_size_color = intval(160-$file['size']/(1024*1024)*2);
 	if($simple_size_color<0) $simple_size_color = 0;
@@ -64,33 +55,4 @@ $totalsize = 0; ?>
 			</span>
 		</td>
 	</tr>
-<?php endforeach; ?>
-	<?php if ($totaldirs !== 0 || $totalfiles !== 0): ?>
-	<tr class="summary">
-		<td><span class="info">
-			<?php if ($totaldirs !== 0) {
-				p($totaldirs.' ');
-				if ($totaldirs === 1) {
-					p($l->t('directory'));
-				} else {
-					p($l->t('directories'));
-				}
-			}
-			if ($totaldirs !== 0 && $totalfiles !== 0) {
-				p(' & ');
-			}
-			if ($totalfiles !== 0) {
-				p($totalfiles.' ');
-				if ($totalfiles === 1) {
-					p($l->t('file'));
-				} else {
-					p($l->t('files'));
-				}
-			} ?>
-		</span></td>
-		<td class="filesize">
-		<?php print_unescaped(OCP\human_file_size($totalsize)); ?>
-		</td>
-		<td></td>
-	</tr>
-	<?php endif;
+<?php endforeach;
diff --git a/apps/files_trashbin/js/trash.js b/apps/files_trashbin/js/trash.js
index b14a7240cbe..40c0bdb3829 100644
--- a/apps/files_trashbin/js/trash.js
+++ b/apps/files_trashbin/js/trash.js
@@ -20,6 +20,7 @@ $(document).ready(function() {
 						OC.dialogs.alert(result.data.message, t('core', 'Error'));
 					}
 					enableActions();
+					FileList.updateFileSummary();
 				});
 
 			});
@@ -48,6 +49,7 @@ $(document).ready(function() {
 						OC.dialogs.alert(result.data.message, t('core', 'Error'));
 					}
 					enableActions();
+					FileList.updateFileSummary();
 				});
 
 			});