From 9ae000676c812f5c7f583594ff61462fdcebb2eb Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Thu, 4 Sep 2014 12:20:11 +0200 Subject: [PATCH 1/3] Fixed scrollto for search results Now passing the "scrollto" URL argument to the file list class which will also automatically scroll and highlight the matching element. This code is triggered by the search box when in a different folder and also by the activity app. --- apps/files/js/app.js | 6 +++-- apps/files/js/filelist.js | 52 ++++++++++++++++++++++++--------------- 2 files changed, 36 insertions(+), 22 deletions(-) diff --git a/apps/files/js/app.js b/apps/files/js/app.js index 6f5206fcdb..89098e3a8a 100644 --- a/apps/files/js/app.js +++ b/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); }, /** diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 037e04db21..7b9811d50b 100644 --- a/apps/files/js/filelist.js +++ b/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); + }); + } }, /** @@ -1523,16 +1530,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) { @@ -1861,9 +1867,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); @@ -1888,12 +1896,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 Date: Thu, 4 Sep 2014 12:33:38 +0200 Subject: [PATCH 2/3] Scroll to new file/folder after adding When creating a new file from the menu, the list now scrolls to that file. --- apps/files/js/file-upload.js | 4 ++-- apps/files/js/filelist.js | 11 ++++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 310799b951..460c243564 100644 --- a/apps/files/js/file-upload.js +++ b/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')); } diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 7b9811d50b..44f035fed1 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -722,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) { @@ -773,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); From 331f9cb98df45e172f818d67eedfee51e5015568 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn=20Friedrich=20Dreyer?= Date: Thu, 4 Sep 2014 13:58:37 +0200 Subject: [PATCH 3/3] add / to url to match route --- search/js/result.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/search/js/result.js b/search/js/result.js index 857b4fe1f2..13be0b552b 100644 --- a/search/js/result.js +++ b/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)