ajax paging, some js cleanups

This commit is contained in:
Jörn Friedrich Dreyer 2014-12-11 16:23:39 +01:00
parent c738359a11
commit 0e9b05b701
6 changed files with 307 additions and 250 deletions

View File

@ -64,8 +64,10 @@ class Search implements ISearch {
$providerResults = $provider->search($query);
if ($size > 0) {
$slicedResults = array_slice($providerResults, $page * $size, $size);
$results = array_merge($results, $slicedResults);
} else {
$results = array_merge($results, $providerResults);
}
$results = array_merge($results, $slicedResults);
} else {
\OC::$server->getLogger()->warning('Ignoring Unknown search provider', array('provider' => $provider));
}

View File

@ -46,7 +46,7 @@ if (isset($_GET['page'])) {
if (isset($_GET['size'])) {
$size = (int)$_GET['size'];
} else {
$size = 0;
$size = 30;
}
if($query) {
$result = \OC::$server->getSearch()->search($query, $inApps, $page, $size);

View File

@ -14,6 +14,9 @@
box-sizing: border-box;
z-index:75;
}
#searchresults * {
box-sizing: content-box;
}
#searchresults table {
border-spacing:0;
@ -23,6 +26,9 @@
}
#searchresults td {
padding: 0 15px;
font-style: normal;
vertical-align: middle;
border-top: 20px solid white;
border-bottom: none;
}

View File

@ -8,171 +8,76 @@
*
*/
OC.Search.hide = function(){
$('#searchresults').hide();
if($('#searchbox').val().length>2){
$('#searchbox').val('');
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter();
}
};
if ($('#searchbox').val().length === 0) {
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter();
}
}
};
OC.Search.showResults = function(results){
if(results.length === 0){
return;
}
if (!OC.Search.showResults.loaded){
var parent = $('<div class="searchresults-wrapper"/>');
$('#app-content').append(parent);
parent.load(OC.filePath('search','templates','part.results.php'),function(){
OC.Search.showResults.loaded = true;
$('#searchresults').click(function(event){
OC.Search.hide();
event.stopPropagation();
});
$(document).click(function(event){
OC.Search.hide();
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter();
}
});
OC.Search.lastResults=results;
OC.Search.showResults(results);
});
} else {
$('#searchresults tr.result').remove();
$('#searchresults').show();
jQuery.each(results, function(i, result) {
var $row = $('#searchresults tr.template').clone();
$row.removeClass('template');
$row.addClass('result');
//FIXME move to files?
$(document).ready(function() {
// wait for other apps/extensions to register their event handlers and file actions
// in the "ready" clause
_.defer(function() {
OC.Search.setFormatter('file', function ($row, result) {
// backward compatibility:
if (typeof result.mime !== 'undefined') {
result.mime_type = result.mime;
} else if (typeof result.mime_type !== 'undefined') {
result.mime = result.mime_type;
}
$row.data('result', result);
$pathDiv = $('<div class="path"></div>').text(result.path);
$row.find('td.info div.name').after($pathDiv).text(result.name);
// generic results only have four attributes
$row.find('td.info div.name').text(result.name);
$row.find('td.info a').attr('href', result.link);
$row.find('td.result a').attr('href', result.link);
$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'places/link') + ')');
/**
* Give plugins the ability to customize the search results. For example:
* OC.search.customResults.file = function (row, item){ FIXME
* if(item.name.search('.json') >= 0) ...
* };
*/
if (OC.Search.hasFormatter(result.type)) {
OC.Search.getFormatter(result.type)($row, result);
if (OCA.Files) {
OCA.Files.App.fileList.lazyLoadPreview({
path: result.path,
mime: result.mime,
callback: function (url) {
$row.find('td.icon').css('background-image', 'url(' + url + ')');
}
});
} else {
// for backward compatibility add text div
$row.find('td.info div.name').addClass('result')
$row.find('td.result div.name').after('<div class="text"></div>');
$row.find('td.result div.text').text(result.name);
if(OC.search.customResults && OC.search.customResults[result.type]) {
OC.search.customResults[result.type]($row, result);
// FIXME how to get mime icon if not in files app
var mimeicon = result.mime.replace('/', '-');
$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/' + mimeicon) + ')');
var dir = OC.dirname(result.path);
if (dir === '') {
dir = '/';
}
}
$('#searchresults tbody').append($row);
});
$('#searchresults').on('click', 'tr.result', function (event) {
var $row = $(this);
var result = $row.data('result');
if(OC.Search.hasHandler(result.type)){
var result = OC.Search.getHandler(result.type)($row, result, event);
OC.Search.hide();
event.stopPropagation();
return result;
$row.find('td.info a').attr('href',
OC.generateUrl('/apps/files/?dir={dir}&scrollto={scrollto}', {dir: dir, scrollto: result.name})
);
}
});
}
};
OC.Search.showResults.loaded = false;
OC.Search.renderCurrent = function(){
var $resultsContainer = $('#searchresults');
var result = $resultsContainer.find('tr.result')[OC.Search.currentResult]
if (result) {
var $result = $(result);
var currentOffset = $resultsContainer.scrollTop();
$resultsContainer.animate({
// Scrolling to the top of the new result
scrollTop: currentOffset + $result.offset().top - $result.height() * 2
}, {
duration: 100
});
$resultsContainer.find('tr.result.current').removeClass('current');
$result.addClass('current');
}
};
OC.Search.setFormatter('file', function ($row, result) {
// backward compatibility:
if (typeof result.mime !== 'undefined') {
result.mime_type = result.mime;
} else if (typeof result.mime_type !== 'undefined') {
result.mime = result.mime_type;
}
$pathDiv = $('<div class="path"></div>').text(result.path);
$row.find('td.info div.name').after($pathDiv).text(result.name);
$row.find('td.result a').attr('href', result.link);
if (OCA.Files) {
OCA.Files.App.fileList.lazyLoadPreview({
path: result.path,
mime: result.mime,
callback: function (url) {
$row.find('td.icon').css('background-image', 'url(' + url + ')');
OC.Search.setHandler('file', function ($row, result, event) {
if (OCA.Files) {
OCA.Files.App.fileList.changeDirectory(OC.dirname(result.path));
OCA.Files.App.fileList.scrollTo(result.name);
return false;
} else {
return true;
}
});
} else {
// FIXME how to get mime icon if not in files app
var mimeicon = result.mime.replace('/','-');
$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/'+mimeicon) + ')');
var dir = OC.dirname(result.path);
if (dir === '') {
dir = '/';
}
$row.find('td.info a').attr('href',
OC.generateUrl('/apps/files/?dir={dir}&scrollto={scrollto}', {dir:dir, scrollto:result.name})
);
}
});
OC.Search.setHandler('file', function ($row, result, event) {
if (OCA.Files) {
OCA.Files.App.fileList.changeDirectory(OC.dirname(result.path));
OCA.Files.App.fileList.scrollTo(result.name);
return false;
} else {
return true;
}
});
OC.Search.setFormatter('folder', function ($row, result) {
// backward compatibility:
if (typeof result.mime !== 'undefined') {
result.mime_type = result.mime;
} else if (typeof result.mime_type !== 'undefined') {
result.mime = result.mime_type;
}
OC.Search.setFormatter('folder', function ($row, result) {
// backward compatibility:
if (typeof result.mime !== 'undefined') {
result.mime_type = result.mime;
} else if (typeof result.mime_type !== 'undefined') {
result.mime = result.mime_type;
}
var $pathDiv = $('<div class="path"></div>').text(result.path)
$row.find('td.info div.name').after($pathDiv).text(result.name);
var $pathDiv = $('<div class="path"></div>').text(result.path)
$row.find('td.info div.name').after($pathDiv).text(result.name);
$row.find('td.result a').attr('href', result.link);
$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/folder') + ')');
});
OC.Search.setHandler('folder', function ($row, result, event) {
if (OCA.Files) {
OCA.Files.App.fileList.changeDirectory(result.path);
return false;
} else {
return true;
}
$row.find('td.result a').attr('href', result.link);
$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/folder') + ')');
});
OC.Search.setHandler('folder', function ($row, result, event) {
if (OCA.Files) {
OCA.Files.App.fileList.changeDirectory(result.path);
return false;
} else {
return true;
}
});
});
});

View File

@ -4,113 +4,257 @@
* This file is licensed under the Affero General Public License version 3 or
* later. See the COPYING file.
*
* @author Bernhard Posselt <dev@bernhard-posselt.com>
* @copyright Bernhard Posselt 2014
* @author Jörn Friedrich Dreyer <jfd@owncloud.com>
* @copyright Jörn Friedrich Dreyer 2014
*/
(function (exports) {
(function () {
/**
* @class OCA.Search
* @classdesc
*
* The Search class manages a search queries and their results
*
* @param $searchBox container element with existing markup for the #searchbox form
*/
var Search = function($searchBox) {
this.initialize($searchBox);
};
/**
* @memberof OC
*/
Search.prototype = {
'use strict';
/**
* Initialize the search box and results
*
* @param $searchBox container element with existing markup for the #searchbox form
* @private
*/
initialize: function($searchBox) {
exports.Search = {
/**
* contains closures that are called to format search results
*/
formatter:{},
setFormatter: function(type, formatter) {
this.formatter[type] = formatter;
},
hasFormatter: function(type) {
return typeof this.formatter[type] !== 'undefined';
},
getFormatter: function(type) {
return this.formatter[type];
},
/**
* contains closures that are called when a search result has been clicked
*/
handler:{},
setHandler: function(type, handler) {
this.handler[type] = handler;
},
hasHandler: function(type) {
return typeof this.handler[type] !== 'undefined';
},
getHandler: function(type) {
return this.handler[type];
},
currentResult:-1,
lastQuery:'',
lastResults:{},
/**
* Do a search query and display the results
* @param {string} query the search query
*/
search: _.debounce(function(query, page, size) {
if(query) {
exports.addStyle('search','results');
if (typeof page !== 'number') {
page = 0;
var that = this;
/**
* contains closures that are called to format search results
*/
var formatters = {};
this.setFormatter = function(type, formatter) {
formatters[type] = formatter;
};
this.hasFormatter = function(type) {
return typeof formatters[type] !== 'undefined';
};
this.getFormatter = function(type) {
return formatters[type];
};
/**
* contains closures that are called when a search result has been clicked
*/
var handlers = {};
this.setHandler = function(type, handler) {
handlers[type] = handler;
};
this.hasHandler = function(type) {
return typeof handlers[type] !== 'undefined';
};
this.getHandler = function(type) {
return handlers[type];
};
var currentResult = -1;
var lastQuery = '';
var lastPage = 0;
var lastSize = 30;
var lastResults = {};
/**
* Do a search query and display the results
* @param {string} query the search query
*/
this.search = _.debounce(function(query, page, size) {
if(query) {
OC.addStyle('search','results');
if (typeof page !== 'number') {
page = 0;
}
if (typeof size !== 'number') {
size = 30;
}
// prevent double pages
if (query === lastPage && page === lastPage && currentResult !== -1) {
return;
}
$.getJSON(OC.generateUrl('search/ajax/search.php'), {query:query, page:page, size:size }, function(results) {
lastQuery = query;
lastPage = page;
lastSize = size;
lastResults = results;
if (page === 0) {
showResults(results);
} else {
addResults(results);
}
});
}
if (typeof size !== 'number') {
size = 30;
}, 500);
var $searchResults = false;
function showResults(results) {
if (results.length === 0) {
return;
}
$.getJSON(OC.generateUrl('search/ajax/search.php'), {query:query, page:page, size:size }, function(results) {
exports.Search.lastResults = results;
exports.Search.showResults(results);
if (!$searchResults) {
var $parent = $('<div class="searchresults-wrapper"/>');
$('#app-content').append($parent);
$parent.load(OC.webroot + '/search/templates/part.results.html', function () {
$searchResults = $parent.find('#searchresults');
$searchResults.click(function (event) {
that.hideResults();
event.stopPropagation();
});
$(document).click(function (event) {
that.hideResults();
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter();
}
});
$searchResults.on('scroll', _.bind(onScroll, this));
lastResults = results;
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) {
var $row = $template.clone();
$row.removeClass('template');
$row.addClass('result');
$row.data('result', result);
// generic results only have four attributes
$row.find('td.info div.name').text(result.name);
$row.find('td.info a').attr('href', result.link);
$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'places/link') + ')');
/**
* Give plugins the ability to customize the search results. see result.js for examples
*/
if (that.hasFormatter(result.type)) {
that.getFormatter(result.type)($row, result);
} else {
// for backward compatibility add text div
$row.find('td.info div.name').addClass('result');
$row.find('td.result div.name').after('<div class="text"></div>');
$row.find('td.result div.text').text(result.name);
if (OC.search.customResults && OC.search.customResults[result.type]) {
OC.search.customResults[result.type]($row, result);
}
}
$searchResults.find('tbody').append($row);
});
}
}, 500)
};
$(document).ready(function () {
$('form.searchbox').submit(function(event) {
event.preventDefault();
});
$('#searchbox').keyup(function(event) {
if (event.keyCode === 13) { //enter
if(exports.Search.currentResult > -1) {
var result = $('#searchresults tr.result a')[exports.Search.currentResult];
window.location = $(result).attr('href');
function renderCurrent() {
var result = $searchResults.find('tr.result')[currentResult];
if (result) {
var $result = $(result);
var currentOffset = $searchResults.scrollTop();
$searchResults.animate({
// Scrolling to the top of the new result
scrollTop: currentOffset + $result.offset().top - $result.height() * 2
}, {
duration: 100
});
$searchResults.find('tr.result.current').removeClass('current');
$result.addClass('current');
}
} else if(event.keyCode === 38) { //up
if(exports.Search.currentResult > 0) {
exports.Search.currentResult--;
exports.Search.renderCurrent();
}
} else if(event.keyCode === 40) { //down
if(exports.Search.lastResults.length > exports.Search.currentResult + 1){
exports.Search.currentResult++;
exports.Search.renderCurrent();
}
} else if(event.keyCode === 27) { //esc
exports.Search.hide();
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter();
}
} else {
var query = $('#searchbox').val();
if (exports.Search.lastQuery !== query) {
exports.Search.lastQuery = query;
exports.Search.currentResult = -1;
if (FileList && typeof FileList.filter === 'function') { //TODO add hook system
FileList.filter(query);
}
this.hideResults = function() {
if ($searchResults) {
$searchResults.hide();
if ($searchBox.val().length > 2) {
$searchBox.val('');
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter();
}
}
if (query.length > 2) {
exports.Search.search(query);
} else {
if (exports.Search.hide) {
exports.Search.hide();
if ($searchBox.val().length === 0) {
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter();
}
}
}
}
});
});
};
}(OC));
$searchBox.keyup(function(event) {
if (event.keyCode === 13) { //enter
if(currentResult > -1) {
var result = $searchResults.find('tr.result a')[currentResult];
window.location = $(result).attr('href');
}
} else if(event.keyCode === 38) { //up
if(currentResult > 0) {
currentResult--;
renderCurrent();
}
} else if(event.keyCode === 40) { //down
if(lastResults.length > currentResult + 1){
currentResult++;
renderCurrent();
}
} else if(event.keyCode === 27) { //esc
that.hideResults();
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter();
}
} else {
var query = $searchBox.val();
if (lastQuery !== query) {
lastQuery = query;
currentResult = -1;
if (FileList && typeof FileList.filter === 'function') { //TODO add hook system
FileList.filter(query);
}
if (query.length > 2) {
that.search(query);
} else {
if (that.hideResults) {
that.hideResults();
}
}
}
}
});
/**
* 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.scrollTop() + $searchResults.height() > $searchResults.find('table').height() - 300 ) {
that.search(lastQuery, lastPage + 1);
}
}
$('form.searchbox').submit(function(event) {
event.preventDefault();
});
}
};
OCA.Search = Search;
})();
$(document).ready(function() {
OC.Search = new OCA.Search($('#searchbox'));
});
/**
* @deprecated use get/setFormatter() instead