Merge pull request #24434 from owncloud/permalinks

Permalinks

4 files changed, 97 insertions, 16 deletions

diff --git a/apps/files/js/app.js b/apps/files/js/app.js
index eac080a009d..7a3d78f9663 100644
--- a/apps/files/js/app.js
+++ b/apps/files/js/app.js
@@ -174,6 +174,7 @@
 
 			// detect when app changed their current directory
 			$('#app-content').delegate('>div', 'changeDirectory', _.bind(this._onDirectoryChanged, this));
+			$('#app-content').delegate('>div', 'afterChangeDirectory', _.bind(this._onAfterDirectoryChanged, this));
 			$('#app-content').delegate('>div', 'changeViewerMode', _.bind(this._onChangeViewerMode, this));
 
 			$('#app-navigation').on('itemChanged', _.bind(this._onNavigationChanged, this));
@@ -224,7 +225,16 @@
 		 */
 		_onDirectoryChanged: function(e) {
 			if (e.dir) {
-				this._changeUrl(this.navigation.getActiveItem(), e.dir);
+				this._changeUrl(this.navigation.getActiveItem(), e.dir, e.fileId);
+			}
+		},
+
+		/**
+		 * Event handler for when an app notified that its directory changed
+		 */
+		_onAfterDirectoryChanged: function(e) {
+			if (e.dir && e.fileId) {
+				this._changeUrl(this.navigation.getActiveItem(), e.dir, e.fileId);
 			}
 		},
 
@@ -261,14 +271,35 @@
 		},
 
 		/**
+		 * Encode URL params into a string, except for the "dir" attribute
+		 * that gets encoded as path where "/" is not encoded
+		 *
+		 * @param {Object.<string>} params
+		 * @return {string} encoded params
+		 */
+		_makeUrlParams: function(params) {
+			var dir = params.dir;
+			delete params.dir;
+			return 'dir=' + OC.encodePath(dir) + '&' + OC.buildQueryString(params);
+		},
+
+		/**
 		 * Change the URL to point to the given dir and view
 		 */
-		_changeUrl: function(view, dir) {
+		_changeUrl: function(view, dir, fileId) {
 			var params = {dir: dir};
 			if (view !== 'files') {
 				params.view = view;
+			} else if (fileId) {
+				params.fileid = fileId;
+			}
+			var currentParams = OC.Util.History.parseUrlQuery();
+			if (currentParams.dir === params.dir && currentParams.view === params.view && currentParams.fileid !== params.fileid) {
+				// if only fileid changed or was added, replace instead of push
+				OC.Util.History.replaceState(this._makeUrlParams(params));
+			} else {
+				OC.Util.History.pushState(this._makeUrlParams(params));
 			}
-			OC.Util.History.pushState(params);
 		}
 	};
 })();
diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js
index 69e32d500c4..c3d4fba9ef5 100644
--- a/apps/files/js/fileactions.js
+++ b/apps/files/js/fileactions.js
@@ -619,7 +619,7 @@
 
 			this.register('dir', 'Open', OC.PERMISSION_READ, '', function (filename, context) {
 				var dir = context.$file.attr('data-path') || context.fileList.getCurrentDirectory();
-				context.fileList.changeDirectory(OC.joinPaths(dir, filename));
+				context.fileList.changeDirectory(OC.joinPaths(dir, filename), true, false, parseInt(context.$file.attr('data-id'), 10));
 			});
 
 			this.registerAction({
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 16ca5e91ed2..9395112bce3 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -1362,19 +1362,20 @@
 			return parseInt(this.$el.find('#permissions').val(), 10);
 		},
 		/**
-		 * @brief Changes the current directory and reload the file list.
-		 * @param targetDir target directory (non URL encoded)
-		 * @param changeUrl false if the URL must not be changed (defaults to true)
-		 * @param {boolean} force set to true to force changing directory
+		 * Changes the current directory and reload the file list.
+		 * @param {string} targetDir target directory (non URL encoded)
+		 * @param {boolean} [changeUrl=true] if the URL must not be changed (defaults to true)
+		 * @param {boolean} [force=false] set to true to force changing directory
+		 * @param {string} [fileId] optional file id, if known, to be appended in the URL
 		 */
-		changeDirectory: function(targetDir, changeUrl, force) {
+		changeDirectory: function(targetDir, changeUrl, force, fileId) {
 			var self = this;
 			var currentDir = this.getCurrentDirectory();
 			targetDir = targetDir || '/';
 			if (!force && currentDir === targetDir) {
 				return;
 			}
-			this._setCurrentDir(targetDir, changeUrl);
+			this._setCurrentDir(targetDir, changeUrl, fileId);
 			this.reload().then(function(success){
 				if (!success) {
 					self.changeDirectory(currentDir, true);
@@ -1389,8 +1390,9 @@
 		 * Sets the current directory name and updates the breadcrumb.
 		 * @param targetDir directory to display
 		 * @param changeUrl true to also update the URL, false otherwise (default)
+		 * @param {string} [fileId] file id
 		 */
-		_setCurrentDir: function(targetDir, changeUrl) {
+		_setCurrentDir: function(targetDir, changeUrl, fileId) {
 			targetDir = targetDir.replace(/\\/g, '/');
 			var previousDir = this.getCurrentDirectory(),
 				baseDir = OC.basename(targetDir);
@@ -1408,10 +1410,14 @@
 			this.$el.find('#dir').val(targetDir);
 
 			if (changeUrl !== false) {
-				this.$el.trigger(jQuery.Event('changeDirectory', {
+				var params = {
 					dir: targetDir,
 					previousDir: previousDir
-				}));
+				};
+				if (fileId) {
+					params.fileId = fileId;
+				}
+				this.$el.trigger(jQuery.Event('changeDirectory', params));
 			}
 			this.breadcrumb.setDirectory(this.getCurrentDirectory());
 		},
@@ -1557,6 +1563,18 @@
 
 			result.sort(this._sortComparator);
 			this.setFiles(result);
+
+			if (this.dirInfo) {
+				var newFileId = this.dirInfo.id;
+				// update fileid in URL
+				var params = {
+					dir: this.getCurrentDirectory()
+				};
+				if (newFileId) {
+					params.fileId = newFileId;
+				}
+				this.$el.trigger(jQuery.Event('afterChangeDirectory', params));
+			}
 			return true;
 		},
 
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index 1bcb4873c53..c586135b9c7 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -12,7 +12,13 @@
 	var TEMPLATE =
 		'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"><div class="stretcher"/></a></div>' +
 		'<div class="file-details-container">' +
-		'<div class="fileName"><h3 title="{{name}}" class="ellipsis">{{name}}</h3></div>' +
+		'<div class="fileName">' +
+			'<h3 title="{{name}}" class="ellipsis">{{name}}</h3>' +
+			'<a class="permalink" href="{{permalink}}" title="{{permalinkTitle}}">' +
+				'<span class="icon icon-public"></span>' +
+				'<span class="hidden-visually">{{permalinkTitle}}</span>' +
+			'</a>' +
+		'</div>' +
 		'	<div class="file-details ellipsis">' +
 		'		<a href="#" ' +
 		'		class="action action-favorite favorite">' +
@@ -20,6 +26,9 @@
 		'		</a>' +
 		'		{{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date" title="{{altDate}}">{{date}}</span>' +
 		'	</div>' +
+		'</div>' +
+		'<div class="hidden permalink-field">' +
+			'<input type="text" value="{{permalink}}" placeholder="{{permalinkTitle}}" readonly="readonly"/>' +
 		'</div>';
 
 	/**
@@ -50,7 +59,9 @@
 
 		events: {
 			'click a.action-favorite': '_onClickFavorite',
-			'click a.action-default': '_onClickDefaultAction'
+			'click a.action-default': '_onClickDefaultAction',
+			'click a.permalink': '_onClickPermalink',
+			'focus .permalink-field>input': '_onFocusPermalink'
 		},
 
 		template: function(data) {
@@ -72,6 +83,20 @@
 			}
 		},
 
+		_onClickPermalink: function() {
+			var $row = this.$('.permalink-field');
+			$row.toggleClass('hidden');
+			if (!$row.hasClass('hidden')) {
+				$row.find('>input').focus();
+			}
+			// cancel click, user must right-click + copy or middle click
+			return false;
+		},
+
+		_onFocusPermalink: function() {
+			this.$('.permalink-field>input').select();
+		},
+
 		_onClickFavorite: function(event) {
 			event.preventDefault();
 			this._fileActions.triggerAction('Favorite', this.model, this._fileList);
@@ -87,6 +112,11 @@
 			this.render();
 		},
 
+		_makePermalink: function(fileId) {
+			var baseUrl = OC.getProtocol() + '://' + OC.getHost();
+			return baseUrl + OC.generateUrl('/f/{fileId}', {fileId: fileId});
+		},
+
 		setFileInfo: function(fileInfo) {
 			if (this.model) {
 				this.model.off('change', this._onModelChanged, this);
@@ -118,7 +148,9 @@
 					altDate: OC.Util.formatDate(this.model.get('mtime')),
 					date: OC.Util.relativeModifiedDate(this.model.get('mtime')),
 					starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
-					starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star')
+					starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star'),
+					permalink: this._makePermalink(this.model.get('id')),
+					permalinkTitle: t('files', 'Local link')
 				}));
 
 				// TODO: we really need OC.Previews