correctly update search results when query is changed, show spinner when searching

This commit is contained in:
Jörn Friedrich Dreyer 2015-01-02 14:22:48 +01:00
parent 0cca9e26c4
commit 2eec8dc156
4 changed files with 121 additions and 115 deletions

View File

@ -34,13 +34,13 @@
function inFileList($row, result) {
return self.fileAppLoaded() && OCA.Files.App.fileList.inList(result.name);
}
function updateLegacyMimetype(result){
function updateLegacyMimetype(result) {
// backward compatibility:
if (!result.mime && result.mime_type) {
result.mime = result.mime_type;
}
}
function hideNoFilterResults (){
function hideNoFilterResults() {
var $nofilterresults = $('#nofilterresults');
if ( ! $nofilterresults.hasClass('hidden') ) {
$nofilterresults.addClass('hidden');
@ -158,6 +158,9 @@
search.setFilter('files', function (query) {
if (self.fileAppLoaded()) {
OCA.Files.App.fileList.setFilter(query);
if (query.length > 2) {
$('#nofilterresults').addClass('hidden');
}
}
});

View File

@ -22,7 +22,7 @@
padding: 28px 0 28px 56px;
font-size: 18px;
}
.has-favorites:not(.hidden) ~ .searchresults-wrapper #searchresults #status {
.has-favorites:not(.hidden) ~ #searchresults #status {
padding-left: 102px;
}
#searchresults #status.fixed {
@ -32,6 +32,12 @@
z-index: 10;
}
#searchresults #status .spinner {
height: 16px;
width: 16px;
vertical-align: middle;
margin-left: 10px;
}
#searchresults table {
border-spacing:0;
table-layout:fixed;
@ -53,7 +59,7 @@
background-position: right center;
background-repeat: no-repeat;
}
.has-favorites:not(.hidden) ~ .searchresults-wrapper #searchresults td.icon {
.has-favorites:not(.hidden) ~ #searchresults td.icon {
width: 86px;
}

View File

@ -16,9 +16,10 @@
* The Search class manages a search queries and their results
*
* @param $searchBox container element with existing markup for the #searchbox form
* @param $searchResults container element for results und status message
*/
var Search = function($searchBox) {
this.initialize($searchBox);
var Search = function($searchBox, $searchResults) {
this.initialize($searchBox, $searchResults);
};
/**
* @memberof OC
@ -31,7 +32,7 @@
* @param $searchBox container element with existing markup for the #searchbox form
* @private
*/
initialize: function($searchBox) {
initialize: function($searchBox, $searchResults) {
var self = this;
@ -115,6 +116,10 @@
lastQuery = query;
lastPage = page;
lastSize = size;
$searchResults.removeClass('hidden');
$status.html(t('core', 'Searching other places')+'<img class="spinner" alt="search in progress" src="'+OC.webroot+'/core/img/loading-dark.gif" />');
// do the actual search query
$.getJSON(OC.generateUrl('search/ajax/search.php'), {query:query, inApps:inApps, page:page, size:size }, function(results) {
lastResults = results;
if (page === 1) {
@ -126,23 +131,25 @@
}
}, 500);
//TODO should be a core method, see https://github.com/owncloud/core/issues/12557
function getCurrentApp() {
var content = document.getElementById('content');
if (content) {
var classList = document.getElementById('content').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
if (classList[i].indexOf('app-') === 0) {
return classList[i].substr(4);
}
}
}
return false;
}
var $searchResults = false;
var $wrapper = false;
var $status = false;
var $status = $searchResults.find('#status');
const summaryAndStatusHeight = 118;
function isStatusOffScreen() {
return $searchResults.position().top + summaryAndStatusHeight > window.innerHeight;
return $searchResults.position() && ($searchResults.position().top + summaryAndStatusHeight > window.innerHeight);
}
function placeStatus() {
@ -153,50 +160,11 @@
}
}
function showResults(results) {
if (!$searchResults) {
$wrapper = $('<div class="searchresults-wrapper"/>');
$('#app-content')
.append($wrapper)
.find('.viewcontainer').css('min-height', 'initial');
$wrapper.load(OC.webroot + '/search/templates/part.results.html', function () {
$searchResults = $wrapper.find('#searchresults');
$searchResults.on('click', 'tr.result', function (event) {
var $row = $(this);
var item = $row.data('result');
if(self.hasHandler(item.type)){
var result = self.getHandler(item.type)($row, result, event);
$searchBox.val('');
if(self.hasFilter(getCurrentApp())) {
self.getFilter(getCurrentApp())('');
}
self.hideResults();
return result;
}
});
$searchResults.on('click', '#status', function (event) {
event.preventDefault();
scrollToResults();
return false;
});
$(document).click(function (event) {
$searchBox.val('');
if(self.hasFilter(getCurrentApp())) {
self.getFilter(getCurrentApp())('');
}
self.hideResults();
});
$('#app-content').on('scroll', _.bind(onScroll, this));
lastResults = results;
$status = $searchResults.find('#status');
placeStatus();
showResults(results);
});
} else {
$searchResults.find('tr.result').remove();
$searchResults.show();
addResults(results);
}
}
function addResults(results) {
var $template = $searchResults.find('tr.template');
jQuery.each(results, function (i, result) {
@ -248,15 +216,50 @@
}
}
this.hideResults = function() {
if ($searchResults) {
$searchResults.hide();
$wrapper.remove();
$searchResults = false;
$wrapper = false;
$searchResults.addClass('hidden');
$searchResults.find('tr.result').remove();
lastQuery = false;
}
};
/**
* Event handler for when scrolling the list container.
* This appends/renders the next page of entries when reaching the bottom.
*/
function onScroll(e) {
if ($searchResults) {
//if ( $searchResults && $searchResults.scrollTop() + $searchResults.height() > $searchResults.find('table').height() - 300 ) {
// self.search(lastQuery, lastPage + 1);
//}
placeStatus();
}
}
$('#app-content').on('scroll', _.bind(onScroll, this));
/**
* scrolls the search results to the top
*/
function scrollToResults() {
setTimeout(function() {
if (isStatusOffScreen()) {
var newScrollTop = $('#app-content').prop('scrollHeight') - $searchResults.height();
console.log('scrolling to ' + newScrollTop);
$('#app-content').animate({
scrollTop: newScrollTop
}, {
duration: 100,
complete: function () {
scrollToResults();
}
});
}
}, 150);
}
$('form.searchbox').submit(function(event) {
event.preventDefault();
});
$searchBox.keyup(function(event) {
if (event.keyCode === 13) { //enter
if(currentResult > -1) {
@ -295,42 +298,32 @@
}
});
/**
* Event handler for when scrolling the list container.
* This appends/renders the next page of entries when reaching the bottom.
*/
function onScroll(e) {
if ($searchResults) {
//if ( $searchResults && $searchResults.scrollTop() + $searchResults.height() > $searchResults.find('table').height() - 300 ) {
// self.search(lastQuery, lastPage + 1);
//}
placeStatus();
$searchResults.on('click', 'tr.result', function (event) {
var $row = $(this);
var item = $row.data('result');
if(self.hasHandler(item.type)){
var result = self.getHandler(item.type)($row, result, event);
$searchBox.val('');
if(self.hasFilter(getCurrentApp())) {
self.getFilter(getCurrentApp())('');
}
}
/**
* scrolls the search results to the top
*/
function scrollToResults() {
setTimeout(function() {
if (isStatusOffScreen()) {
var newScrollTop = $('#app-content').prop('scrollHeight') - $searchResults.height();
console.log('scrolling to ' + newScrollTop);
$('#app-content').animate({
scrollTop: newScrollTop
}, {
duration: 100,
complete: function () {
scrollToResults();
self.hideResults();
return result;
}
});
}
}, 150);
}
$('form.searchbox').submit(function(event) {
$searchResults.on('click', '#status', function (event) {
event.preventDefault();
scrollToResults();
return false;
});
$(document).click(function (event) {
$searchBox.val('');
if(self.hasFilter(getCurrentApp())) {
self.getFilter(getCurrentApp())('');
}
self.hideResults();
});
placeStatus();
OC.Plugins.attach('OCA.Search', this);
}
@ -339,7 +332,13 @@
})();
$(document).ready(function() {
OC.Search = new OCA.Search($('#searchbox'));
var $searchResults = $('<div id="searchresults" class="hidden"/>');
$('#app-content')
.append($searchResults)
.find('.viewcontainer').css('min-height', 'initial');
$searchResults.load(OC.webroot + '/search/templates/part.results.html', function () {
OC.Search = new OCA.Search($('#searchbox'), $('#searchresults'));
});
});
/**

View File

@ -1,6 +1,5 @@
<div id="searchresults">
<div id="status">{message}</div>
<table>
<div id="status"></div>
<table>
<tbody>
<tr class="template">
<td class="icon"></td>
@ -11,5 +10,4 @@
</td>
</tr>
</tbody>
</table>
</div>
</table>