wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move search results below filelist, show hint when results are off screen, use js plugin mechanism

Browse source
This commit is contained in:
Jörn Friedrich Dreyer 2014-12-17 18:49:39 +01:00
parent 0e9b05b701
commit 606f802b7b
13 changed files with 232 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/files/css/files.css
View file

@ -540,7 +540,7 @@ a.action>img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: .3;
height: 70px;
height: 60px;
}
.summary:hover,
@ -551,8 +551,6 @@ table tr.summary td {
}
.summary td {
padding-top: 20px;
padding-bottom: 150px;
border-bottom: none;
}
.summary .info {

1
apps/files/index.php
View file

@ -38,6 +38,7 @@ OCP\Util::addscript('files', 'jquery-visibility');
OCP\Util::addscript('files', 'filesummary');
OCP\Util::addscript('files', 'breadcrumb');
OCP\Util::addscript('files', 'filelist');
OCP\Util::addscript('files', 'search');
\OCP\Util::addScript('files', 'favoritesfilelist');
\OCP\Util::addScript('files', 'tagsplugin');

15
apps/files/js/filelist.js
View file

@ -1640,21 +1640,14 @@
},
filter:function(query) {
this.$fileList.find('tr').each(function(i,e) {
if ($(e).data('file').toString().toLowerCase().indexOf(query.toLowerCase()) !== -1) {
$(e).addClass("searchresult");
} else {
$(e).removeClass("searchresult");
if ($(e).data('file').toString().toLowerCase().indexOf(query.toLowerCase()) === -1) {
$(e).hide();
}
});
//do not use scrollto to prevent removing searchresult css class
var first = this.$fileList.find('tr.searchresult').first();
if (first.exists()) {
$(window).scrollTop(first.position().top);
}
},
unfilter:function() {
this.$fileList.find('tr.searchresult').each(function(i,e) {
$(e).removeClass("searchresult");
this.$fileList.find('tr:hidden').each(function(i,e) {
$(e).show();
});
},
/**

103
search/js/result.js → apps/files/js/search.js
View file

@ -7,13 +7,51 @@
* See the COPYING-README file.
*
*/
(function() {
if (!OCA.Files) {
OCA.Files = {};
}
OCA.Files.Search = {
attach: function(search) {
search.setFilter('files', function (query) {
if (query) {
if (OCA.Files) {
OCA.Files.App.fileList.filter(query);
}
} else {
if (OCA.Files) {
OCA.Files.App.fileList.unfilter();
}
}
});
//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) {
search.setRenderer('folder', OCA.Files.Search.renderFolderResult);
search.setRenderer('file', OCA.Files.Search.renderFileResult);
search.setRenderer('audio', OCA.Files.Search.renderAudioResult);
search.setRenderer('image', OCA.Files.Search.renderImageResult);
search.setHandler('folder', OCA.Files.Search.handleFolderClick);
search.setHandler(['file', 'audio', 'image'], OCA.Files.Search.handleFileClick);
},
renderFolderResult: function($row, result) {
/*render folder icon, show path beneath filename,
show size and last modified date on the right */
// 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);
$row.find('td.result a').attr('href', result.link);
$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/folder') + ')');
},
renderFileResult: function($row, result) {
/*render preview icon, show path beneath filename,
show size and last modified date on the right */
// backward compatibility:
if (typeof result.mime !== 'undefined') {
result.mime_type = result.mime;
@ -46,8 +84,27 @@ $(document).ready(function() {
OC.generateUrl('/apps/files/?dir={dir}&scrollto={scrollto}', {dir: dir, scrollto: result.name})
);
}
});
OC.Search.setHandler('file', function ($row, result, event) {
},
renderAudioResult: function($row, result) {
/*render preview icon, show path beneath filename,
show size and last modified date on the right
show Artist and Album */
},
renderImageResult: function($row, result) {
/*render preview icon, show path beneath filename,
show size and last modified date on the right
show width and height */
},
handleFolderClick: function($row, result, event) {
// open folder
if (OCA.Files) {
OCA.Files.App.fileList.changeDirectory(result.path);
return false;
} else {
return true;
}
},
handleFileClick: function($row, result, event) {
if (OCA.Files) {
OCA.Files.App.fileList.changeDirectory(OC.dirname(result.path));
OCA.Files.App.fileList.scrollTo(result.name);
@ -55,29 +112,7 @@ $(document).ready(function() {
} 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;
}
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;
}
});
});
});
}
};
})();
OC.Plugins.register('OCA.Search', OCA.Files.Search);

37
core/js/js.js
View file

@ -309,7 +309,7 @@ var OC={
* @param {string} query the search query
*/
search: function (query) {
OC.Search.search(query, 0, 30);
OC.Search.search(query, null, 0, 30);
},
/**
* Dialog helper for jquery dialogs.
@ -601,41 +601,6 @@ OC.search.customResults = {};
*/
OC.search.resultTypes = {};
/**
* @namespace OC.Search
*/
OC.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:{}
};
OC.addStyle.loaded=[];
OC.addScript.loaded=[];

1
lib/base.php
View file

@ -363,7 +363,6 @@ class OC {
OC_Util::addScript("config");
//OC_Util::addScript( "multiselect" );
OC_Util::addScript('search', 'search');
OC_Util::addScript('search', 'result');
OC_Util::addScript("oc-requesttoken");
OC_Util::addScript("apps");
OC_Util::addVendorScript('snapjs/dist/latest/snap');

10
lib/private/search.php
View file

@ -40,17 +40,19 @@ class Search implements ISearch {
* @return array An array of OC\Search\Result's
*/
public function search($query, array $inApps = array()) {
return $this->searchPaged($query, $inApps, 0, 0);
// old apps might assume they get all results, so we set size 0
return $this->searchPaged($query, $inApps, 1, 0);
}
/**
* Search all providers for $query
* @param string $query
* @param int $page
* @param string[] $inApps optionally limit results to the given apps
* @param int $page pages start at page 1
* @param int $size, 0 = all
* @return array An array of OC\Search\Result's
*/
public function searchPaged($query, $page = 0, $size = 30) {
public function searchPaged($query, array $inApps = array(), $page = 1, $size = 30) {
$this->initProviders();
$results = array();
foreach($this->providers as $provider) {
@ -63,7 +65,7 @@ class Search implements ISearch {
} else if ($provider instanceof Provider) {
$providerResults = $provider->search($query);
if ($size > 0) {
$slicedResults = array_slice($providerResults, $page * $size, $size);
$slicedResults = array_slice($providerResults, ($page - 1) * $size, $size);
$results = array_merge($results, $slicedResults);
} else {
$results = array_merge($results, $providerResults);

5
lib/public/isearch.php
View file

@ -41,11 +41,12 @@ interface ISearch {
/**
* Search all providers for $query
* @param string $query
* @param int $page
* @param string[] $inApps optionally limit results to the given apps
* @param int $page pages start at page 1
* @param int $size
* @return array An array of OCP\Search\Result's
*/
public function searchPaged($query, $page = 0, $size = 30);
public function searchPaged($query, array $inApps = array(), $page = 1, $size = 30);
/**
* Register a new search provider to search with

9
lib/public/search/pagedprovider.php
View file

@ -44,15 +44,16 @@ abstract class PagedProvider extends Provider {
* @return array An array of OCP\Search\Result's
*/
public function search($query) {
$this->searchPaged($query, 0, 0);
// old apps might assume they get all results, so we set size 0
$this->searchPaged($query, 1, 0);
}
/**
* Search for $query
* @param string $query
* @param int $limit, 0 = unlimited
* @param int $offset
* @param int $page pages start at page 1
* @param int $size, 0 = all
* @return array An array of OCP\Search\Result's
*/
abstract public function searchPaged($query, $limit, $offset);
abstract public function searchPaged($query, $page, $size);
}

4
search/ajax/search.php
View file

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

14
search/css/results.css
View file

@ -6,9 +6,7 @@
background-color:#fff;
overflow-x:hidden;
overflow-y: auto;
position:fixed;
text-overflow:ellipsis;
top:0;
padding-top: 45px;
height: 100%;
box-sizing: border-box;
@ -18,6 +16,18 @@
box-sizing: content-box;
}
#searchresults #status {
background-color:#ccc;
height: 24px;
padding: 17px 15px;
}
#searchresults #status.fixed {
position: fixed;
bottom: 0;
width: 100%;
z-index: 10;
}
#searchresults table {
border-spacing:0;
table-layout:fixed;

177
search/js/search.js
View file

@ -36,17 +36,31 @@
var that = this;
/**
* contains closures that are called to format search results
* contains closures that are called to filter the current content
*/
var formatters = {};
this.setFormatter = function(type, formatter) {
formatters[type] = formatter;
var filters = {};
this.setFilter = function(type, filter) {
filters[type] = filter;
};
this.hasFormatter = function(type) {
return typeof formatters[type] !== 'undefined';
this.hasFilter = function(type) {
return typeof filters[type] !== 'undefined';
};
this.getFormatter = function(type) {
return formatters[type];
this.getFilter = function(type) {
return filters[type];
};
/**
* contains closures that are called to render search results
*/
var renderers = {};
this.setRenderer = function(type, renderer) {
renderers[type] = renderer;
};
this.hasRenderer = function(type) {
return typeof renderers[type] !== 'undefined';
};
this.getRenderer = function(type) {
return renderers[type];
};
/**
@ -73,25 +87,33 @@
* Do a search query and display the results
* @param {string} query the search query
*/
this.search = _.debounce(function(query, page, size) {
this.search = _.debounce(function(query, inApps, page, size) {
if(query) {
OC.addStyle('search','results');
if (typeof page !== 'number') {
page = 0;
page = 1;
}
if (typeof size !== 'number') {
size = 30;
}
if (typeof inApps !== 'object') {
var currentApp = getCurrentApp();
if(currentApp) {
inApps = [currentApp];
} else {
inApps = [];
}
}
// prevent double pages
if (query === lastPage && page === lastPage && currentResult !== -1) {
if ($searchResults && query === lastQuery && page === lastPage&& size === lastSize) {
return;
}
$.getJSON(OC.generateUrl('search/ajax/search.php'), {query:query, page:page, size:size }, function(results) {
lastQuery = query;
lastPage = page;
lastSize = size;
lastQuery = query;
lastPage = page;
lastSize = size;
$.getJSON(OC.generateUrl('search/ajax/search.php'), {query:query, inApps:inApps, page:page, size:size }, function(results) {
lastResults = results;
if (page === 0) {
if (page === 1) {
showResults(results);
} else {
addResults(results);
@ -99,29 +121,69 @@
});
}
}, 500);
var $searchResults = false;
function getCurrentApp() {
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;
const summaryAndStatusHeight = 118;
function isStatusOffScreen() {
return $searchResults.position().top + summaryAndStatusHeight > window.innerHeight;
}
function placeStatus() {
if (isStatusOffScreen()) {
$status.addClass('fixed');
} else {
$status.removeClass('fixed');
}
}
function showResults(results) {
if (results.length === 0) {
return;
}
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();
$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(that.hasHandler(item.type)){
var result = that.getHandler(item.type)($row, result, event);
that.hideResults();
return result;
}
});
$searchResults.on('click', '#status', function (event) {
event.preventDefault();
scrollToResults();
return false;
});
$(document).click(function (event) {
that.hideResults();
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter();
if(that.hasFilter(getCurrentApp())) {
that.getFilter(getCurrentApp())('');
}
});
$searchResults.on('scroll', _.bind(onScroll, this));
$('#app-content').on('scroll', _.bind(onScroll, this));
lastResults = results;
$status = $searchResults.find('#status')
.text(t('search', '{count} Search results', {count:results.length}, results.length));
placeStatus();
showResults(results);
});
} else {
@ -147,8 +209,8 @@
/**
* 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);
if (that.hasRenderer(result.type)) {
that.getRenderer(result.type)($row, result);
} else {
// for backward compatibility add text div
$row.find('td.info div.name').addClass('result');
@ -166,7 +228,7 @@
if (result) {
var $result = $(result);
var currentOffset = $searchResults.scrollTop();
$searchResults.animate({
$('#app-content').animate({
// Scrolling to the top of the new result
scrollTop: currentOffset + $result.offset().top - $result.height() * 2
}, {
@ -179,17 +241,10 @@
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 ($searchBox.val().length === 0) {
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter();
}
}
$searchBox.val('');
$wrapper.remove();
$searchResults = false;
$wrapper = false;
}
};
@ -212,16 +267,13 @@
}
} 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(that.hasFilter(getCurrentApp())) {
that.getFilter(getCurrentApp())(query);
}
if (query.length > 2) {
that.search(query);
@ -239,14 +291,39 @@
* 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);
if ($searchResults) {
//if ( $searchResults && $searchResults.scrollTop() + $searchResults.height() > $searchResults.find('table').height() - 300 ) {
// that.search(lastQuery, lastPage + 1);
//}
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);
}
$('form.searchbox').submit(function(event) {
event.preventDefault();
});
OC.Plugins.attach('OCA.Search', this);
}
};
OCA.Search = Search;
@ -257,10 +334,10 @@ $(document).ready(function() {
});
/**
* @deprecated use get/setFormatter() instead
* @deprecated use get/setRenderer() instead
*/
OC.search.customResults = {};
/**
* @deprecated use get/setFormatter() instead
* @deprecated use get/setRenderer() instead
*/
OC.search.resultTypes = {};

2
search/templates/part.results.html
View file

@ -1,5 +1,5 @@
<div id="searchresults">
<!-- p>{message}</p -->
<div id="status">{message}</div>
<table>
<tbody>
<tr class="template">