Merge pull request #10860 from owncloud/scrolltofix

Scroll to file on search or add

apps/files/js/app.js

@@ -24,6 +24,7 @@
 		initialize: function() {
 			this.navigation = new OCA.Files.Navigation($('#app-navigation'));
 
+			var urlParams = OC.Util.History.parseUrlQuery();
 			var fileActions = new OCA.Files.FileActions();
 			// default actions
 			fileActions.registerDefaultActions();
@@ -47,7 +48,8 @@
 					dragOptions: dragOptions,
 					folderDropOptions: folderDropOptions,
 					fileActions: fileActions,
-					allowLegacyActions: true
+					allowLegacyActions: true,
+					scrollTo: urlParams.scrollto
 				}
 			);
 			this.files.initialize();
@@ -58,7 +60,7 @@
 
 			this._setupEvents();
 			// trigger URL change event handlers
-			this._onPopState(OC.Util.History.parseUrlQuery());
+			this._onPopState(urlParams);
 		},
 
 		/**

apps/files/js/file-upload.js

@@ -629,7 +629,7 @@ OC.Upload = {
 								},
 								function(result) {
 									if (result.status === 'success') {
-										FileList.add(result.data, {hidden: hidden, animate: true});
+										FileList.add(result.data, {hidden: hidden, animate: true, scrollTo: true});
 									} else {
 										OC.dialogs.alert(result.data.message, t('core', 'Could not create file'));
 									}
@@ -645,7 +645,7 @@ OC.Upload = {
 								},
 								function(result) {
 									if (result.status === 'success') {
-										FileList.add(result.data, {hidden: hidden, animate: true});
+										FileList.add(result.data, {hidden: hidden, animate: true, scrollTo: true});
 									} else {
 										OC.dialogs.alert(result.data.message, t('core', 'Could not create folder'));
 									}

apps/files/js/filelist.js

@@ -110,9 +110,10 @@
 		 * @param $el container element with existing markup for the #controls
 		 * and a table
 		 * @param options map of options, see other parameters
-		 * @param scrollContainer scrollable container, defaults to $(window)
-		 * @param dragOptions drag options, disabled by default
-		 * @param folderDropOptions folder drop options, disabled by default
+		 * @param options.scrollContainer scrollable container, defaults to $(window)
+		 * @param options.dragOptions drag options, disabled by default
+		 * @param options.folderDropOptions folder drop options, disabled by default
+		 * @param options.scrollTo name of file to scroll to after the first load
 		 */
 		initialize: function($el, options) {
 			var self = this;
@@ -172,6 +173,12 @@
 			this.setupUploadEvents();
 
 			this.$container.on('scroll', _.bind(this._onScroll, this));
+
+			if (options.scrollTo) {
+				this.$fileList.one('updated', function() {
+					self.scrollTo(options.scrollTo);
+				});
+			}
 		},
 
 		/**
@@ -715,9 +722,10 @@
 		 *
 		 * @param fileData map of file attributes
 		 * @param options map of attributes:
-		 * - "updateSummary": true to update the summary after adding (default), false otherwise
-		 * - "silent": true to prevent firing events like "fileActionsReady"
-		 * - "animate": true to animate preview loading (defaults to true here)
+		 * @param options.updateSummary true to update the summary after adding (default), false otherwise
+		 * @param options.silent true to prevent firing events like "fileActionsReady"
+		 * @param options.animate true to animate preview loading (defaults to true here)
+		 * @param options.scrollTo true to automatically scroll to the file's location
 		 * @return new tr element (not appended to the table)
 		 */
 		add: function(fileData, options) {
@@ -766,6 +774,10 @@
 				});
 			}
 
+			if (options.scrollTo) {
+				this.scrollTo(fileData.name);
+			}
+
 			// defaults to true if not defined
 			if (typeof(options.updateSummary) === 'undefined' || !!options.updateSummary) {
 				this.fileSummary.add(fileData, true);
@@ -1523,16 +1535,15 @@
 			this.$table.removeClass('hidden');
 		},
 		scrollTo:function(file) {
-			//scroll to and highlight preselected file
-			var $scrollToRow = this.findFileEl(file);
-			if ($scrollToRow.exists()) {
-				$scrollToRow.addClass('searchresult');
-				$(window).scrollTop($scrollToRow.position().top);
-				//remove highlight when hovered over
-				$scrollToRow.one('hover', function() {
-					$scrollToRow.removeClass('searchresult');
-				});
+			if (!_.isArray(file)) {
+				file = [file];
 			}
+			this.highlightFiles(file, function($tr) {
+				$tr.addClass('searchresult');
+				$tr.one('hover', function() {
+					$tr.removeClass('searchresult');
+				});
+			});
 		},
 		filter:function(query) {
 			this.$fileList.find('tr').each(function(i,e) {
@@ -1880,9 +1891,11 @@
 		/**
 		 * Scroll to the last file of the given list
 		 * Highlight the list of files
-		 * @param files array of filenames
+		 * @param files array of filenames,
+		 * @param {Function} [highlightFunction] optional function
+		 * to be called after the scrolling is finished
 		 */
-		highlightFiles: function(files) {
+		highlightFiles: function(files, highlightFunction) {
 			// Detection of the uploaded element
 			var filename = files[files.length - 1];
 			var $fileRow = this.findFileEl(filename);
@@ -1907,12 +1920,16 @@
 				duration: 500,
 				complete: function() {
 					// Highlighting function
-					var highlightRow = function($fileRow) {
-						$fileRow.addClass("highlightUploaded");
-						setTimeout(function() {
-							$fileRow.removeClass("highlightUploaded");
-						}, 2500);
-					};
+					var highlightRow = highlightFunction;
+
+					if (!highlightRow) {
+						highlightRow = function($fileRow) {
+							$fileRow.addClass("highlightUploaded");
+							setTimeout(function() {
+								$fileRow.removeClass("highlightUploaded");
+							}, 2500);
+						};
+					}
 
 					// Loop over uploaded files
 					for(var i=0; i<files.length; i++) {

search/js/result.js

@@ -80,7 +80,7 @@ OC.search.showResults=function(results){
 							containerName = '/';
 						}
 						var containerLink = OC.linkTo('files', 'index.php')
-							+'?dir='+encodeURIComponent(parent)
+							+'/?dir='+encodeURIComponent(parent)
 							+'&scrollto='+encodeURIComponent(type[i].name);
 						row.find('td.result a')
 							.attr('href', containerLink)