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. 7
      apps/files/js/search.js
  2. 10
      search/css/results.css
  3. 187
      search/js/search.js
  4. 28
      search/templates/part.results.html

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

@ -34,13 +34,13 @@
function inFileList($row, result) { function inFileList($row, result) {
return self.fileAppLoaded() && OCA.Files.App.fileList.inList(result.name); return self.fileAppLoaded() && OCA.Files.App.fileList.inList(result.name);
} }
function updateLegacyMimetype(result){ function updateLegacyMimetype(result) {
// backward compatibility: // backward compatibility:
if (!result.mime && result.mime_type) { if (!result.mime && result.mime_type) {
result.mime = result.mime_type; result.mime = result.mime_type;
} }
} }
function hideNoFilterResults (){ function hideNoFilterResults() {
var $nofilterresults = $('#nofilterresults'); var $nofilterresults = $('#nofilterresults');
if ( ! $nofilterresults.hasClass('hidden') ) { if ( ! $nofilterresults.hasClass('hidden') ) {
$nofilterresults.addClass('hidden'); $nofilterresults.addClass('hidden');
@ -158,6 +158,9 @@
search.setFilter('files', function (query) { search.setFilter('files', function (query) {
if (self.fileAppLoaded()) { if (self.fileAppLoaded()) {
OCA.Files.App.fileList.setFilter(query); 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; padding: 28px 0 28px 56px;
font-size: 18px; font-size: 18px;
} }
.has-favorites:not(.hidden) ~ .searchresults-wrapper #searchresults #status { .has-favorites:not(.hidden) ~ #searchresults #status {
padding-left: 102px; padding-left: 102px;
} }
#searchresults #status.fixed { #searchresults #status.fixed {
@ -32,6 +32,12 @@
z-index: 10; z-index: 10;
} }
#searchresults #status .spinner {
height: 16px;
width: 16px;
vertical-align: middle;
margin-left: 10px;
}
#searchresults table { #searchresults table {
border-spacing:0; border-spacing:0;
table-layout:fixed; table-layout:fixed;
@ -53,7 +59,7 @@
background-position: right center; background-position: right center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.has-favorites:not(.hidden) ~ .searchresults-wrapper #searchresults td.icon { .has-favorites:not(.hidden) ~ #searchresults td.icon {
width: 86px; width: 86px;
} }

187
search/js/search.js
Unescape View File

@ -16,9 +16,10 @@
* The Search class manages a search queries and their results * The Search class manages a search queries and their results
* *
* @param $searchBox container element with existing markup for the #searchbox form * @param $searchBox container element with existing markup for the #searchbox form
* @param $searchResults container element for results und status message
*/ */
var Search = function($searchBox) { var Search = function($searchBox, $searchResults) {
this.initialize($searchBox); this.initialize($searchBox, $searchResults);
}; };
/** /**
* @memberof OC * @memberof OC
@ -31,7 +32,7 @@
* @param $searchBox container element with existing markup for the #searchbox form * @param $searchBox container element with existing markup for the #searchbox form
* @private * @private
*/ */
initialize: function($searchBox) { initialize: function($searchBox, $searchResults) {
var self = this; var self = this;
@ -115,6 +116,10 @@
lastQuery = query; lastQuery = query;
lastPage = page; lastPage = page;
lastSize = size; 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) { $.getJSON(OC.generateUrl('search/ajax/search.php'), {query:query, inApps:inApps, page:page, size:size }, function(results) {
lastResults = results; lastResults = results;
if (page === 1) { if (page === 1) {
@ -126,23 +131,25 @@
} }
}, 500); }, 500);
//TODO should be a core method, see https://github.com/owncloud/core/issues/12557
function getCurrentApp() { function getCurrentApp() {
var classList = document.getElementById('content').className.split(/\s+/); var content = document.getElementById('content');
for (var i = 0; i < classList.length; i++) { if (content) {
if (classList[i].indexOf('app-') === 0) { var classList = document.getElementById('content').className.split(/\s+/);
return classList[i].substr(4); for (var i = 0; i < classList.length; i++) {
if (classList[i].indexOf('app-') === 0) {
return classList[i].substr(4);
}
} }
} }
return false; return false;
} }
var $searchResults = false; var $status = $searchResults.find('#status');
var $wrapper = false;
var $status = false;
const summaryAndStatusHeight = 118; const summaryAndStatusHeight = 118;
function isStatusOffScreen() { function isStatusOffScreen() {
return $searchResults.position().top + summaryAndStatusHeight > window.innerHeight; return $searchResults.position() && ($searchResults.position().top + summaryAndStatusHeight > window.innerHeight);
} }
function placeStatus() { function placeStatus() {
@ -153,49 +160,10 @@
} }
} }
function showResults(results) { function showResults(results) {
if (!$searchResults) { lastResults = results;
$wrapper = $('<div class="searchresults-wrapper"/>'); $searchResults.find('tr.result').remove();
$('#app-content') $searchResults.show();
.append($wrapper) addResults(results);
.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) { function addResults(results) {
var $template = $searchResults.find('tr.template'); var $template = $searchResults.find('tr.template');
@ -248,14 +216,49 @@
} }
} }
this.hideResults = function() { this.hideResults = function() {
$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.hide(); //if ( $searchResults && $searchResults.scrollTop() + $searchResults.height() > $searchResults.find('table').height() - 300 ) {
$wrapper.remove(); // self.search(lastQuery, lastPage + 1);
$searchResults = false; //}
$wrapper = false; placeStatus();
lastQuery = false;
} }
}; }
$('#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) { $searchBox.keyup(function(event) {
if (event.keyCode === 13) { //enter if (event.keyCode === 13) { //enter
@ -295,42 +298,32 @@
} }
}); });
/** $searchResults.on('click', 'tr.result', function (event) {
* Event handler for when scrolling the list container. var $row = $(this);
* This appends/renders the next page of entries when reaching the bottom. var item = $row.data('result');
*/ if(self.hasHandler(item.type)){
function onScroll(e) { var result = self.getHandler(item.type)($row, result, event);
if ($searchResults) { $searchBox.val('');
//if ( $searchResults && $searchResults.scrollTop() + $searchResults.height() > $searchResults.find('table').height() - 300 ) { if(self.hasFilter(getCurrentApp())) {
// self.search(lastQuery, lastPage + 1); self.getFilter(getCurrentApp())('');
//}
placeStatus();
}
}
/**
* 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); self.hideResults();
} return result;
}
$('form.searchbox').submit(function(event) { });
$searchResults.on('click', '#status', function (event) {
event.preventDefault(); 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); OC.Plugins.attach('OCA.Search', this);
} }
@ -339,7 +332,13 @@
})(); })();
$(document).ready(function() { $(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'));
});
}); });
/** /**

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

@ -1,15 +1,13 @@
<div id="searchresults"> <div id="status"></div>
<div id="status">{message}</div> <table>
<table> <tbody>
<tbody> <tr class="template">
<tr class="template"> <td class="icon"></td>
<td class="icon"></td> <td class="info">
<td class="info"> <a class="link">
<a class="link"> <div class="name"></div>
<div class="name"></div> </a>
</a> </td>
</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>

Write Preview
Loading…
Cancel
Save