open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
remotes/origin/fix-10825
Jörn Friedrich Dreyer 12 years ago
parent 0cca9e26c4
commit 2eec8dc156
4 changed files with 119 additions and 113 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      apps/files/js/search.js
  2. 10
      search/css/results.css
  3. 165
      search/js/search.js
  4. 4
      search/templates/part.results.html

3
apps/files/js/search.js
Unescape View File

@ -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');
}
}
});

10
search/css/results.css
Unescape 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;
}

165
search/js/search.js
Unescape 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())('');
}
self.hideResults();
return result;
}
/**
* 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 () {
});
$searchResults.on('click', '#status', function (event) {
event.preventDefault();
scrollToResults();
}
return false;
});
$(document).click(function (event) {
$searchBox.val('');
if(self.hasFilter(getCurrentApp())) {
self.getFilter(getCurrentApp())('');
}
}, 150);
}
$('form.searchbox').submit(function(event) {
event.preventDefault();
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'));
});
});
/**

4
search/templates/part.results.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save