Merge pull request #4766 from owncloud/fix_3728_with_file_exists_dialog

file upload conflicts dialog

2 files changed, 258 insertions, 0 deletions

diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js
index f1836fd4727..02cd6ac1466 100644
--- a/core/js/jquery.ocdialog.js
+++ b/core/js/jquery.ocdialog.js
@@ -103,6 +103,9 @@
 					}
 					$.each(value, function(idx, val) {
 						var $button = $('<button>').text(val.text);
+						if (val.classes) {
+							$button.addClass(val.classes);
+						}
 						if(val.defaultButton) {
 							$button.addClass('primary');
 							self.$defaultButton = $button;
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 8e8a477772b..ac37b109e76 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -220,6 +220,245 @@ var OCdialogs = {
 			}
 		});
 	},
+	_fileexistsshown: false,
+	/**
+	 * Displays file exists dialog
+	 * @param {object} data upload object
+	 * @param {object} original file with name, size and mtime
+	 * @param {object} replacement file with name, size and mtime
+	 * @param {object} controller with onCancel, onSkip, onReplace and onRename methods
+	*/
+	fileexists:function(data, original, replacement, controller) {
+		var self = this;
+
+		var getCroppedPreview = function(file) {
+			var deferred = new $.Deferred();
+			// Only process image files.
+			var type = file.type.split('/').shift();
+			if (window.FileReader && type === 'image') {
+				var reader = new FileReader();
+				reader.onload = function (e) {
+					var blob = new Blob([e.target.result]);
+					window.URL = window.URL || window.webkitURL;
+					var originalUrl = window.URL.createObjectURL(blob);
+					var image = new Image();
+					image.src = originalUrl;
+					image.onload = function () {
+						var url = crop(image);
+						deferred.resolve(url);
+					}
+				};
+				reader.readAsArrayBuffer(file);
+			} else {
+				deferred.reject();
+			}
+			return deferred;
+		};
+
+		var crop = function(img) {
+			var canvas = document.createElement('canvas'),
+				width = img.width,
+				height = img.height,
+				x, y, size;
+
+			// calculate the width and height, constraining the proportions
+			if (width > height) {
+				y = 0;
+				x = (width - height) / 2;
+			} else {
+				y = (height - width) / 2;
+				x = 0;
+			}
+			size = Math.min(width, height);
+
+			// resize the canvas and draw the image data into it
+			canvas.width = 64;
+			canvas.height = 64;
+			var ctx = canvas.getContext("2d");
+			ctx.drawImage(img, x, y, size, size, 0, 0, 64, 64);
+			return canvas.toDataURL("image/png", 0.7);
+		};
+
+		var addConflict = function(conflicts, original, replacement) {
+
+			var conflict = conflicts.find('.template').clone().removeClass('template').addClass('conflict');
+
+			conflict.data('data',data);
+
+			conflict.find('.filename').text(original.name);
+			conflict.find('.original .size').text(humanFileSize(original.size));
+			conflict.find('.original .mtime').text(formatDate(original.mtime*1000));
+			// ie sucks
+			if (replacement.size && replacement.lastModifiedDate) {
+				conflict.find('.replacement .size').text(humanFileSize(replacement.size));
+				conflict.find('.replacement .mtime').text(formatDate(replacement.lastModifiedDate));
+			}
+			var path = getPathForPreview(original.name);
+			lazyLoadPreview(path, original.type, function(previewpath){
+				conflict.find('.original .icon').css('background-image','url('+previewpath+')');
+			}, 96, 96);
+			getCroppedPreview(replacement).then(
+				function(path){
+					conflict.find('.replacement .icon').css('background-image','url(' + path + ')');
+				}, function(){
+					getMimeIcon(replacement.type,function(path){
+						conflict.find('.replacement .icon').css('background-image','url(' + path + ')');
+					});
+				}
+			);
+			conflicts.append(conflict);
+
+			//set more recent mtime bold
+			// ie sucks
+			if (replacement.lastModifiedDate && replacement.lastModifiedDate.getTime() > original.mtime*1000) {
+				conflict.find('.replacement .mtime').css('font-weight', 'bold');
+			} else if (replacement.lastModifiedDate && replacement.lastModifiedDate.getTime() < original.mtime*1000) {
+				conflict.find('.original .mtime').css('font-weight', 'bold');
+			} else {
+				//TODO add to same mtime collection?
+			}
+
+			// set bigger size bold
+			if (replacement.size && replacement.size > original.size) {
+				conflict.find('.replacement .size').css('font-weight', 'bold');
+			} else if (replacement.size && replacement.size < original.size) {
+				conflict.find('.original .size').css('font-weight', 'bold');
+			} else {
+				//TODO add to same size collection?
+			}
+
+			//TODO show skip action for files with same size and mtime in bottom row
+
+		};
+		//var selection = controller.getSelection(data.originalFiles);
+		//if (selection.defaultAction) {
+		//	controller[selection.defaultAction](data);
+		//} else {
+			var dialog_name = 'oc-dialog-fileexists-content';
+			var dialog_id = '#' + dialog_name;
+			if (this._fileexistsshown) {
+				// add conflict
+
+				var conflicts = $(dialog_id+ ' .conflicts');
+				addConflict(conflicts, original, replacement);
+
+				var count = $(dialog_id+ ' .conflict').length;
+				var title = n('files',
+								'{count} file conflict',
+								'{count} file conflicts',
+								count,
+								{count:count}
+							);
+				$(dialog_id).parent().children('.oc-dialog-title').text(title);
+
+				//recalculate dimensions
+				$(window).trigger('resize');
+
+			} else {
+				//create dialog
+				this._fileexistsshown = true;
+				$.when(this._getFileExistsTemplate()).then(function($tmpl) {
+					var title = t('files','One file conflict');
+					var $dlg = $tmpl.octemplate({
+						dialog_name: dialog_name,
+						title: title,
+						type: 'fileexists',
+
+						why: t('files','Which files do you want to keep?'),
+						what: t('files','If you select both versions, the copied file will have a number added to its name.')
+					});
+					$('body').append($dlg);
+
+					var conflicts = $($dlg).find('.conflicts');
+					addConflict(conflicts, original, replacement);
+
+					buttonlist = [{
+							text: t('core', 'Cancel'),
+							classes: 'cancel',
+							click: function(){
+								if ( typeof controller.onCancel !== 'undefined') {
+									controller.onCancel(data);
+								}
+								$(dialog_id).ocdialog('close');
+							}
+						},
+						{
+							text: t('core', 'Continue'),
+							classes: 'continue',
+							click: function(){
+								if ( typeof controller.onContinue !== 'undefined') {
+									controller.onContinue($(dialog_id + ' .conflict'));
+								}
+								$(dialog_id).ocdialog('close');
+							}
+						}];
+
+					$(dialog_id).ocdialog({
+						width: 500,
+						closeOnEscape: true,
+						modal: true,
+						buttons: buttonlist,
+						closeButton: null,
+						close: function(event, ui) {
+								self._fileexistsshown = false;
+							$(this).ocdialog('destroy').remove();
+						}
+					});
+
+					$(dialog_id).css('height','auto');
+
+					//add checkbox toggling actions
+					$(dialog_id).find('.allnewfiles').on('click', function() {
+						var checkboxes = $(dialog_id).find('.conflict .replacement input[type="checkbox"]');
+						checkboxes.prop('checked', $(this).prop('checked'));
+					});
+					$(dialog_id).find('.allexistingfiles').on('click', function() {
+						var checkboxes = $(dialog_id).find('.conflict .original input[type="checkbox"]');
+						checkboxes.prop('checked', $(this).prop('checked'));
+					});
+					$(dialog_id).find('.conflicts').on('click', '.replacement,.original', function() {
+						var checkbox = $(this).find('input[type="checkbox"]');
+						checkbox.prop('checked', !checkbox.prop('checked'));
+					});
+					$(dialog_id).find('.conflicts').on('click', 'input[type="checkbox"]', function() {
+						var checkbox = $(this);
+						checkbox.prop('checked', !checkbox.prop('checked'));
+					});
+
+					//update counters
+					$(dialog_id).on('click', '.replacement,.allnewfiles', function() {
+						var count = $(dialog_id).find('.conflict .replacement input[type="checkbox"]:checked').length;
+						if (count === $(dialog_id+ ' .conflict').length) {
+							$(dialog_id).find('.allnewfiles').prop('checked', true);
+							$(dialog_id).find('.allnewfiles + .count').text(t('files','(all selected)'));
+						} else if (count > 0) {
+							$(dialog_id).find('.allnewfiles').prop('checked', false);
+							$(dialog_id).find('.allnewfiles + .count').text(t('files','({count} selected)',{count:count}));
+						} else {
+							$(dialog_id).find('.allnewfiles').prop('checked', false);
+							$(dialog_id).find('.allnewfiles + .count').text('');
+						}
+					});
+					$(dialog_id).on('click', '.original,.allexistingfiles', function(){
+						var count = $(dialog_id).find('.conflict .original input[type="checkbox"]:checked').length;
+						if (count === $(dialog_id+ ' .conflict').length) {
+							$(dialog_id).find('.allexistingfiles').prop('checked', true);
+							$(dialog_id).find('.allexistingfiles + .count').text(t('files','(all selected)'));
+						} else if (count > 0) {
+							$(dialog_id).find('.allexistingfiles').prop('checked', false);
+							$(dialog_id).find('.allexistingfiles + .count').text(t('files','({count} selected)',{count:count}));
+						} else {
+							$(dialog_id).find('.allexistingfiles').prop('checked', false);
+							$(dialog_id).find('.allexistingfiles + .count').text('');
+						}
+					});
+				})
+				.fail(function() {
+					alert(t('core', 'Error loading file exists template'));
+				});
+			}
+		//}
+	},
 	_getFilePickerTemplate: function() {
 		var defer = $.Deferred();
 		if(!this.$filePickerTemplate) {
@@ -253,6 +492,22 @@ var OCdialogs = {
 		}
 		return defer.promise();
 	},
+	_getFileExistsTemplate: function () {
+		var defer = $.Deferred();
+		if (!this.$fileexistsTemplate) {
+			var self = this;
+			$.get(OC.filePath('files', 'templates', 'fileexists.html'), function (tmpl) {
+				self.$fileexistsTemplate = $(tmpl);
+				defer.resolve(self.$fileexistsTemplate);
+			})
+			.fail(function () {
+				defer.reject();
+			});
+		} else {
+			defer.resolve(this.$fileexistsTemplate);
+		}
+		return defer.promise();
+	},
 	_getFileList: function(dir, mimeType) {
 		if (typeof(mimeType) === "string") {
 			mimeType = [mimeType];