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.
This commit is contained in:
Vincent Petry 2014-09-04 12:20:11 +02:00
parent a8861c70c8
commit 9ae000676c
2 changed files with 36 additions and 22 deletions

View File

@ -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);
},
/**

View File

@ -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<files.length; i++) {