Add versions tab to files sidebar

- move versions to a tab in the files sidebar
- added mechanism to auto-update the row in the FileList whenever values
  are set to the FileInfoModel given to the sidebar
- updated tags/favorite action to make use of that new mechanism

5 files changed, 400 insertions, 193 deletions

diff --git a/apps/files_versions/js/filesplugin.js b/apps/files_versions/js/filesplugin.js
new file mode 100644
index 00000000000..42075ce6462
--- /dev/null
+++ b/apps/files_versions/js/filesplugin.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+	OCA.Versions = OCA.Versions || {};
+
+	/**
+	 * @namespace
+	 */
+	OCA.Versions.Util = {
+		/**
+		 * Initialize the versions plugin.
+		 *
+		 * @param {OCA.Files.FileList} fileList file list to be extended
+		 */
+		attach: function(fileList) {
+			if (fileList.id === 'trashbin' || fileList.id === 'files.public') {
+				return;
+			}
+
+			fileList.registerTabView(new OCA.Versions.VersionsTabView('versionsTabView'));
+		}
+	};
+})();
+
+OC.Plugins.register('OCA.Files.FileList', OCA.Versions.Util);
+
diff --git a/apps/files_versions/js/versioncollection.js b/apps/files_versions/js/versioncollection.js
new file mode 100644
index 00000000000..3f8214cde8c
--- /dev/null
+++ b/apps/files_versions/js/versioncollection.js
@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+	/**
+	 * @memberof OCA.Versions
+	 */
+	var VersionCollection = OC.Backbone.Collection.extend({
+		model: OCA.Versions.VersionModel,
+
+		/**
+		 * @var OCA.Files.FileInfoModel
+		 */
+		_fileInfo: null,
+
+		_endReached: false,
+		_currentIndex: 0,
+
+		url: function() {
+			var url = OC.generateUrl('/apps/files_versions/ajax/getVersions.php');
+			var query = {
+				source: this._fileInfo.getFullPath(),
+				start: this._currentIndex
+			};
+			return url + '?' + OC.buildQueryString(query);
+		},
+
+		setFileInfo: function(fileInfo) {
+			this._fileInfo = fileInfo;
+			// reset
+			this._endReached = false;
+			this._currentIndex = 0;
+		},
+
+		getFileInfo: function() {
+			return this._fileInfo;
+		},
+
+		hasMoreResults: function() {
+			return !this._endReached;
+		},
+
+		fetch: function(options) {
+			if (!options || options.remove) {
+				this._currentIndex = 0;
+			}
+			return OC.Backbone.Collection.prototype.fetch.apply(this, arguments);
+		},
+
+		/**
+		 * Fetch the next set of results
+		 */
+		fetchNext: function() {
+			if (!this.hasMoreResults()) {
+				return null;
+			}
+			if (this._currentIndex === 0) {
+				return this.fetch();
+			}
+			return this.fetch({remove: false});
+		},
+
+		parse: function(result) {
+			var results = _.map(result.data.versions, function(version) {
+				var revision = parseInt(version.version, 10);
+				return {
+					id: revision,
+					name: version.name,
+					fullPath: version.path,
+					timestamp: revision,
+					size: version.size
+				};
+			});
+			this._endReached = result.data.endReached;
+			this._currentIndex += results.length;
+			return results;
+		}
+	});
+
+	OCA.Versions = OCA.Versions || {};
+
+	OCA.Versions.VersionCollection = VersionCollection;
+})();
+
diff --git a/apps/files_versions/js/versionmodel.js b/apps/files_versions/js/versionmodel.js
new file mode 100644
index 00000000000..dc610fc2144
--- /dev/null
+++ b/apps/files_versions/js/versionmodel.js
@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+	/**
+	 * @memberof OCA.Versions
+	 */
+	var VersionModel = OC.Backbone.Model.extend({
+
+		/**
+		 * Restores the original file to this revision
+		 */
+		revert: function(options) {
+			options = options ? _.clone(options) : {};
+			var model = this;
+			var file = this.getFullPath();
+			var revision = this.get('timestamp');
+
+			$.ajax({
+				type: 'GET',
+				url: OC.generateUrl('/apps/files_versions/ajax/rollbackVersion.php'),
+				dataType: 'json',
+				data: {
+					file: file,
+					revision: revision
+				},
+				success: function(response) {
+					if (response.status === 'error') {
+						if (options.error) {
+							options.error.call(options.context, model, response, options);
+						}
+						model.trigger('error', model, response, options);
+					} else {
+						if (options.success) {
+							options.success.call(options.context, model, response, options);
+						}
+						model.trigger('revert', model, response, options);
+					}
+				}
+			});
+		},
+
+		getFullPath: function() {
+			return this.get('fullPath');
+		},
+
+		getPreviewUrl: function() {
+			var url = OC.generateUrl('/apps/files_versions/preview');
+			var params = {
+				file: this.get('fullPath'),
+				version: this.get('timestamp')
+			};
+			return url + '?' + OC.buildQueryString(params);
+		},
+
+		getDownloadUrl: function() {
+			var url = OC.generateUrl('/apps/files_versions/download.php');
+			var params = {
+				file: this.get('fullPath'),
+				revision: this.get('timestamp')
+			};
+			return url + '?' + OC.buildQueryString(params);
+		}
+	});
+
+	OCA.Versions = OCA.Versions || {};
+
+	OCA.Versions.VersionModel = VersionModel;
+})();
+
diff --git a/apps/files_versions/js/versions.js b/apps/files_versions/js/versions.js
deleted file mode 100644
index e86bb4c3307..00000000000
--- a/apps/files_versions/js/versions.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/*
- * Copyright (c) 2014
- *
- * This file is licensed under the Affero General Public License version 3
- * or later.
- *
- * See the COPYING-README file.
- *
- */
-
-/* global scanFiles, escapeHTML, formatDate */
-$(document).ready(function(){
-
-	// TODO: namespace all this as OCA.FileVersions
-
-	if ($('#isPublic').val()){
-		// no versions actions in public mode
-		// beware of https://github.com/owncloud/core/issues/4545
-		// as enabling this might hang Chrome
-		return;
-	}
-
-	if (OCA.Files) {
-		// Add versions button to 'files/index.php'
-		OCA.Files.fileActions.register(
-			'file',
-			'Versions',
-			OC.PERMISSION_UPDATE,
-			function() {
-				// Specify icon for hitory button
-				return OC.imagePath('core','actions/history');
-			}, function(filename, context){
-				// Action to perform when clicked
-				if (scanFiles.scanning){return;}//workaround to prevent additional http request block scanning feedback
-
-				var file = context.dir.replace(/(?!<=\/)$|\/$/, '/' + filename);
-				var createDropDown = true;
-				// Check if drop down is already visible for a different file
-				if (($('#dropdown').length > 0) ) {
-					if ( $('#dropdown').hasClass('drop-versions') && file == $('#dropdown').data('file')) {
-						createDropDown = false;
-					}
-					$('#dropdown').slideUp(OC.menuSpeed);
-					$('#dropdown').remove();
-					$('tr').removeClass('mouseOver');
-				}
-
-				if(createDropDown === true) {
-					createVersionsDropdown(filename, file, context.fileList);
-				}
-			}, t('files_versions', 'Versions')
-		);
-	}
-
-	$(document).on("click", 'span[class="revertVersion"]', function() {
-		var revision = $(this).attr('id');
-		var file = $(this).attr('value');
-		revertFile(file, revision);
-	});
-
-});
-
-function revertFile(file, revision) {
-
-	$.ajax({
-		type: 'GET',
-		url: OC.linkTo('files_versions', 'ajax/rollbackVersion.php'),
-		dataType: 'json',
-		data: {file: file, revision: revision},
-		async: false,
-		success: function(response) {
-			if (response.status === 'error') {
-				OC.Notification.show( t('files_version', 'Failed to revert {file} to revision {timestamp}.', {file:file, timestamp:formatDate(revision * 1000)}) );
-			} else {
-				$('#dropdown').slideUp(OC.menuSpeed, function() {
-					$('#dropdown').closest('tr').find('.modified:first').html(relative_modified_date(revision));
-					$('#dropdown').remove();
-					$('tr').removeClass('mouseOver');
-				});
-			}
-		}
-	});
-
-}
-
-function goToVersionPage(url){
-	window.location.assign(url);
-}
-
-function createVersionsDropdown(filename, files, fileList) {
-
-	var start = 0;
-	var fileEl;
-
-	var html = '<div id="dropdown" class="drop drop-versions" data-file="'+escapeHTML(files)+'">';
-	html += '<div id="private">';
-	html += '<ul id="found_versions">';
-	html += '</ul>';
-	html += '</div>';
-	html += '<input type="button" value="'+ t('files_versions', 'More versions...') + '" name="show-more-versions" id="show-more-versions" style="display: none;" />';
-
-	if (filename) {
-		fileEl = fileList.findFileEl(filename);
-		fileEl.addClass('mouseOver');
-		$(html).appendTo(fileEl.find('td.filename'));
-	} else {
-		$(html).appendTo($('thead .share'));
-	}
-
-	getVersions(start);
-	start = start + 5;
-
-	$("#show-more-versions").click(function() {
-		//get more versions
-		getVersions(start);
-		start = start + 5;
-	});
-
-	function getVersions(start) {
-		$.ajax({
-			type: 'GET',
-			url: OC.filePath('files_versions', 'ajax', 'getVersions.php'),
-			dataType: 'json',
-			data: {source: files, start: start},
-			async: false,
-			success: function(result) {
-				var versions = result.data.versions;
-				if (result.data.endReached === true) {
-					$("#show-more-versions").css("display", "none");
-				} else {
-					$("#show-more-versions").css("display", "block");
-				}
-				if (versions) {
-					$.each(versions, function(index, row) {
-						addVersion(row);
-					});
-				} else {
-					$('<div style="text-align:center;">'+ t('files_versions', 'No other versions available') + '</div>').appendTo('#dropdown');
-				}
-				$('#found_versions').change(function() {
-					var revision = parseInt($(this).val());
-					revertFile(files, revision);
-				});
-			}
-		});
-	}
-
-	function addVersion( revision ) {
-		var title = formatDate(revision.version*1000);
-		var name ='<span class="versionDate" title="' + title + '">' + revision.humanReadableTimestamp + '</span>';
-
-		var path = OC.filePath('files_versions', '', 'download.php');
-
-		var preview = '<img class="preview" src="'+revision.preview+'"/>';
-
-		var download ='<a href="' + path + "?file=" + encodeURIComponent(files) + '&revision=' + revision.version + '">';
-		download+='<img';
-		download+=' src="' + OC.imagePath('core', 'actions/download') + '"';
-		download+=' name="downloadVersion" />';
-		download+=name;
-		download+='</a>';
-
-		var revert='<span class="revertVersion"';
-		revert+=' id="' + revision.version + '">';
-		revert+='<img';
-		revert+=' src="' + OC.imagePath('core', 'actions/history') + '"';
-		revert+=' name="revertVersion"';
-		revert+='/>'+t('files_versions', 'Restore')+'</span>';
-
-		var version=$('<li/>');
-		version.attr('value', revision.version);
-		version.html(preview + download + revert);
-		// add file here for proper name escaping
-		version.find('span.revertVersion').attr('value', files);
-
-		version.appendTo('#found_versions');
-	}
-
-	$('#dropdown').slideDown(1000);
-}
-
-$(this).click(
-	function(event) {
-	if ($('#dropdown').has(event.target).length === 0 && $('#dropdown').hasClass('drop-versions')) {
-		$('#dropdown').slideUp(OC.menuSpeed, function() {
-			$('#dropdown').remove();
-			$('tr').removeClass('mouseOver');
-		});
-	}
-
-
-	}
-);
diff --git a/apps/files_versions/js/versionstabview.js b/apps/files_versions/js/versionstabview.js
new file mode 100644
index 00000000000..1f84428e616
--- /dev/null
+++ b/apps/files_versions/js/versionstabview.js
@@ -0,0 +1,198 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+	var TEMPLATE_ITEM =
+		'<li data-revision="{{timestamp}}">' +
+		'<img class="preview" src="{{previewUrl}}"/>' +
+		'<a href="{{downloadUrl}}" class="downloadVersion"><img src="{{downloadIconUrl}}" />' +
+		'<span class="versiondate has-tooltip" title="{{formattedTimestamp}}">{{relativeTimestamp}}</span>' +
+		'</a>' +
+		'<a href="#" class="revertVersion"><img src="{{revertIconUrl}}" />{{revertLabel}}</a>' +
+		'</li>';
+
+	var TEMPLATE =
+		'<ul class="versions"></ul>' +
+		'<div class="clear-float"></div>' +
+		'<div class="empty hidden">{{emptyResultLabel}}</div>' +
+		'<input type="button" class="showMoreVersions hidden" value="{{moreVersionsLabel}}"' +
+		' name="show-more-versions" id="show-more-versions" />' +
+		'<div class="loading hidden" style="height: 50px"></div>';
+
+	/**
+	 * @memberof OCA.Versions
+	 */
+	var VersionsTabView = OCA.Files.DetailTabView.extend(
+		/** @lends OCA.Versions.VersionsTabView.prototype */ {
+		id: 'versionsTabView',
+		className: 'tab versionsTabView',
+
+		_template: null,
+
+		$versionsContainer: null,
+
+		events: {
+			'click .revertVersion': '_onClickRevertVersion',
+			'click .showMoreVersions': '_onClickShowMoreVersions'
+		},
+
+		initialize: function() {
+			this.collection = new OCA.Versions.VersionCollection();
+			this.collection.on('request', this._onRequest, this);
+			this.collection.on('sync', this._onEndRequest, this);
+			this.collection.on('update', this._onUpdate, this);
+			this.collection.on('error', this._onError, this);
+			this.collection.on('add', this._onAddModel, this);
+		},
+
+		getLabel: function() {
+			return t('files_versions', 'Versions');
+		},
+
+		nextPage: function() {
+			if (this._loading || !this.collection.hasMoreResults()) {
+				return;
+			}
+
+			if (this.collection.getFileInfo() && this.collection.getFileInfo().isDirectory()) {
+				return;
+			}
+			this.collection.fetchNext();
+		},
+
+		_onClickShowMoreVersions: function(ev) {
+			ev.preventDefault();
+			this.nextPage();
+		},
+
+		_onClickRevertVersion: function(ev) {
+			var self = this;
+			var $target = $(ev.target);
+			var fileInfoModel = this.collection.getFileInfo();
+			var revision;
+			if (!$target.is('li')) {
+				$target = $target.closest('li');
+			}
+
+			ev.preventDefault();
+			revision = $target.attr('data-revision');
+
+			var versionModel = this.collection.get(revision);
+			versionModel.revert({
+				success: function() {
+					// reset and re-fetch the updated collection
+					self.collection.setFileInfo(fileInfoModel);
+					self.collection.fetch();
+
+					// update original model
+					fileInfoModel.trigger('busy', fileInfoModel, false);
+					fileInfoModel.set({
+						size: versionModel.get('size'),
+						mtime: versionModel.get('timestamp') * 1000,
+						// temp dummy, until we can do a PROPFIND
+						etag: versionModel.get('id') + versionModel.get('timestamp')
+					});
+				},
+
+				error: function() {
+					OC.Notification.showTemporary(
+						t('files_version', 'Failed to revert {file} to revision {timestamp}.', {
+							file: versionModel.getFullPath(),
+							timestamp: OC.Util.formatDate(versionModel.get('timestamp') * 1000)
+						})
+					);
+				}
+			});
+
+			// spinner
+			this._toggleLoading(true);
+			fileInfoModel.trigger('busy', fileInfoModel, true);
+		},
+
+		_toggleLoading: function(state) {
+			this._loading = state;
+			this.$el.find('.loading').toggleClass('hidden', !state);
+		},
+
+		_onRequest: function() {
+			this._toggleLoading(true);
+			this.$el.find('.showMoreVersions').addClass('hidden');
+		},
+
+		_onEndRequest: function() {
+			this._toggleLoading(false);
+			this.$el.find('.empty').toggleClass('hidden', !!this.collection.length);
+			this.$el.find('.showMoreVersions').toggleClass('hidden', !this.collection.hasMoreResults());
+		},
+
+		_onAddModel: function(model) {
+			this.$versionsContainer.append(this.itemTemplate(this._formatItem(model)));
+		},
+
+		template: function(data) {
+			if (!this._template) {
+				this._template = Handlebars.compile(TEMPLATE);
+			}
+
+			return this._template(data);
+		},
+
+		itemTemplate: function(data) {
+			if (!this._itemTemplate) {
+				this._itemTemplate = Handlebars.compile(TEMPLATE_ITEM);
+			}
+
+			return this._itemTemplate(data);
+		},
+
+		setFileInfo: function(fileInfo) {
+			if (fileInfo) {
+				this.render();
+				this.collection.setFileInfo(fileInfo);
+				this.collection.reset({silent: true});
+				this.nextPage();
+			} else {
+				this.render();
+				this.collection.reset();
+			}
+		},
+
+		_formatItem: function(version) {
+			var timestamp = version.get('timestamp') * 1000;
+			return _.extend({
+				formattedTimestamp: OC.Util.formatDate(timestamp),
+				relativeTimestamp: OC.Util.relativeModifiedDate(timestamp),
+				downloadUrl: version.getDownloadUrl(),
+				downloadIconUrl: OC.imagePath('core', 'actions/download'),
+				revertIconUrl: OC.imagePath('core', 'actions/history'),
+				previewUrl: version.getPreviewUrl(),
+				revertLabel: t('files_versions', 'Restore'),
+			}, version.attributes);
+		},
+
+		/**
+		 * Renders this details view
+		 */
+		render: function() {
+			this.$el.html(this.template({
+				emptyResultLabel: t('files_versions', 'No other versions available'),
+				moreVersionsLabel: t('files_versions', 'More versions...')
+			}));
+			this.$el.find('.has-tooltip').tooltip();
+			this.$versionsContainer = this.$el.find('ul.versions');
+			this.delegateEvents();
+		}
+	});
+
+	OCA.Versions = OCA.Versions || {};
+
+	OCA.Versions.VersionsTabView = VersionsTabView;
+})();
+