new OC.Search, add search result formatters and handlers, use full content width for results
This commit is contained in:
Jörn Friedrich Dreyer
parent
0ba3093196
commit
d3662722f6
|
|
@ -40,9 +40,9 @@ try {
|
|||
$preview->setMaxY($maxY);
|
||||
$preview->setScalingUp($scalingUp);
|
||||
$preview->setKeepAspect($keepAspect);
|
||||
$preview->showPreview();
|
||||
}
|
||||
|
||||
$preview->showPreview();
|
||||
} catch (\Exception $e) {
|
||||
\OC_Response::setStatus(500);
|
||||
\OC_Log::write('core', $e->getmessage(), \OC_Log::DEBUG);
|
||||
|
|
|
|||
|
|
@ -319,8 +319,8 @@ var OC={
|
|||
}
|
||||
}
|
||||
$.getJSON(OC.generateUrl('search/ajax/search.php'), {inApps:inApps, query:query}, function(results){
|
||||
OC.search.lastResults=results;
|
||||
OC.search.showResults(results);
|
||||
OC.Search.lastResults=results;
|
||||
OC.Search.showResults(results);
|
||||
});
|
||||
}
|
||||
}, 500),
|
||||
|
|
@ -608,10 +608,47 @@ OC.Plugins = {
|
|||
/**
|
||||
* @namespace OC.search
|
||||
*/
|
||||
OC.search.customResults={};
|
||||
OC.search.currentResult=-1;
|
||||
OC.search.lastQuery='';
|
||||
OC.search.lastResults={};
|
||||
OC.search.customResults = {};
|
||||
/**
|
||||
* @deprecated use get/setFormatter() instead
|
||||
*/
|
||||
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=[];
|
||||
|
||||
|
|
@ -1043,38 +1080,38 @@ function initCore() {
|
|||
});
|
||||
$('#searchbox').keyup(function(event){
|
||||
if(event.keyCode===13){//enter
|
||||
if(OC.search.currentResult>-1){
|
||||
var result=$('#searchresults tr.result a')[OC.search.currentResult];
|
||||
if(OC.Search.currentResult>-1){
|
||||
var result=$('#searchresults tr.result a')[OC.Search.currentResult];
|
||||
window.location = $(result).attr('href');
|
||||
}
|
||||
}else if(event.keyCode===38){//up
|
||||
if(OC.search.currentResult>0){
|
||||
OC.search.currentResult--;
|
||||
OC.search.renderCurrent();
|
||||
if(OC.Search.currentResult>0){
|
||||
OC.Search.currentResult--;
|
||||
OC.Search.renderCurrent();
|
||||
}
|
||||
}else if(event.keyCode===40){//down
|
||||
if(OC.search.lastResults.length>OC.search.currentResult+1){
|
||||
OC.search.currentResult++;
|
||||
OC.search.renderCurrent();
|
||||
if(OC.Search.lastResults.length>OC.Search.currentResult+1){
|
||||
OC.Search.currentResult++;
|
||||
OC.Search.renderCurrent();
|
||||
}
|
||||
}else if(event.keyCode===27){//esc
|
||||
OC.search.hide();
|
||||
OC.Search.hide();
|
||||
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
|
||||
FileList.unfilter();
|
||||
}
|
||||
}else{
|
||||
var query=$('#searchbox').val();
|
||||
if(OC.search.lastQuery!==query){
|
||||
OC.search.lastQuery=query;
|
||||
OC.search.currentResult=-1;
|
||||
if(OC.Search.lastQuery!==query){
|
||||
OC.Search.lastQuery=query;
|
||||
OC.Search.currentResult=-1;
|
||||
if (FileList && typeof FileList.filter === 'function') { //TODO add hook system
|
||||
FileList.filter(query);
|
||||
}
|
||||
if(query.length>2){
|
||||
OC.search(query);
|
||||
}else{
|
||||
if(OC.search.hide){
|
||||
OC.search.hide();
|
||||
if(OC.Search.hide){
|
||||
OC.Search.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ class File extends \OCP\Search\Result {
|
|||
$this->path = $path;
|
||||
$this->size = $data->getSize();
|
||||
$this->modified = $data->getMtime();
|
||||
$this->mime_type = $data->getMimetype();
|
||||
$this->mime = $data->getMimetype();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -11,21 +11,10 @@
|
|||
top:0;
|
||||
padding-top: 45px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index:75;
|
||||
}
|
||||
|
||||
#searchresults li.resultHeader {
|
||||
background-color:#eee;
|
||||
border-bottom:solid 1px #CCC;
|
||||
font-size:1.2em;
|
||||
font-weight:700;
|
||||
padding:.2em;
|
||||
}
|
||||
|
||||
#searchresults li.result {
|
||||
margin-left:2em;
|
||||
}
|
||||
|
||||
#searchresults table {
|
||||
border-spacing:0;
|
||||
table-layout:fixed;
|
||||
|
|
@ -64,26 +53,17 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
#searchresults td.result * {
|
||||
#searchresults tr.result * {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#searchresults td.container {
|
||||
width:20px;
|
||||
}
|
||||
|
||||
#searchresults td.container img {
|
||||
vertical-align: middle;
|
||||
display:none;
|
||||
}
|
||||
#searchresults tr:hover td.container img {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
#searchresults td.type {
|
||||
#searchresults td.icon {
|
||||
font-weight:700;
|
||||
text-align:right;
|
||||
width:3.5em;
|
||||
width:32px;
|
||||
height: 40px;
|
||||
background-position: 30px 4px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#searchresults tr.current {
|
||||
|
|
|
|||
|
|
@ -9,24 +9,13 @@
|
|||
*/
|
||||
|
||||
//translations for result type ids, can be extended by apps
|
||||
OC.search.resultTypes={
|
||||
OC.Search.resultTypes={
|
||||
file: t('core','File'),
|
||||
folder: t('core','Folder'),
|
||||
image: t('core','Image'),
|
||||
audio: t('core','Audio')
|
||||
};
|
||||
OC.search.catagorizeResults=function(results){
|
||||
var types={};
|
||||
for(var i=0;i<results.length;i++){
|
||||
var type=results[i].type;
|
||||
if(!types[type]){
|
||||
types[type]=[];
|
||||
}
|
||||
types[type].push(results[i]);
|
||||
}
|
||||
return types;
|
||||
};
|
||||
OC.search.hide=function(){
|
||||
OC.Search.hide=function(){
|
||||
$('#searchresults').hide();
|
||||
if($('#searchbox').val().length>2){
|
||||
$('#searchbox').val('');
|
||||
|
|
@ -40,117 +29,149 @@ OC.search.hide=function(){
|
|||
}
|
||||
}
|
||||
};
|
||||
OC.search.showResults=function(results){
|
||||
OC.Search.showResults=function(results){
|
||||
if(results.length === 0){
|
||||
return;
|
||||
}
|
||||
if(!OC.search.showResults.loaded){
|
||||
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;
|
||||
OC.Search.showResults.loaded=true;
|
||||
$('#searchresults').click(function(event){
|
||||
OC.search.hide();
|
||||
OC.Search.hide();
|
||||
event.stopPropagation();
|
||||
});
|
||||
$(document).click(function(event){
|
||||
OC.search.hide();
|
||||
OC.Search.hide();
|
||||
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
|
||||
FileList.unfilter();
|
||||
}
|
||||
});
|
||||
OC.search.lastResults=results;
|
||||
OC.search.showResults(results);
|
||||
OC.Search.lastResults=results;
|
||||
OC.Search.showResults(results);
|
||||
});
|
||||
}else{
|
||||
var types=OC.search.catagorizeResults(results);
|
||||
$('#searchresults').show();
|
||||
} else {
|
||||
$('#searchresults tr.result').remove();
|
||||
var index=0;
|
||||
for(var typeid in types){
|
||||
var type=types[typeid];
|
||||
if(type.length>0){
|
||||
for(var i=0;i<type.length;i++){
|
||||
var row=$('#searchresults tr.template').clone();
|
||||
row.removeClass('template');
|
||||
row.addClass('result');
|
||||
$('#searchresults').show();
|
||||
jQuery.each(results, function(i, result) {
|
||||
var $row = $('#searchresults tr.template').clone();
|
||||
$row.removeClass('template');
|
||||
$row.addClass('result');
|
||||
|
||||
row.data('type', typeid);
|
||||
row.data('name', type[i].name);
|
||||
row.data('path', type[i].path);
|
||||
row.data('text', type[i].text);
|
||||
row.data('index',index);
|
||||
$row.data('result', result);
|
||||
|
||||
if (i === 0){
|
||||
var typeName = OC.search.resultTypes[typeid];
|
||||
row.children('td.type').text(t('lib', typeName));
|
||||
}
|
||||
// generic results only have four attributes
|
||||
$row.find('td.info div.name').text(result.name);
|
||||
$row.find('td.info a').attr('href', result.link);
|
||||
|
||||
if (type[i].path) {
|
||||
OCA.Files.App.fileList.lazyLoadPreview({
|
||||
path: type[i].path,
|
||||
mime: type[i].mime_type,
|
||||
callback: function (url) {
|
||||
row.find('td.type').css('background-image', 'url(' + url + ')');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
row.find('td.result div.name').text(type[i].name);
|
||||
row.find('td.result div.path').text(type[i].path);
|
||||
if (typeof type[i].highlights === 'object') {
|
||||
var highlights = type[i].highlights.join(' … ');
|
||||
row.find('td.result div.text').html(highlights);
|
||||
} else {
|
||||
row.find('td.result div.text').text(type[i].text);
|
||||
}
|
||||
|
||||
if (type[i].path) {
|
||||
var parent = OC.dirname(type[i].path);
|
||||
if (parent === '') {
|
||||
parent = '/';
|
||||
}
|
||||
var containerName = OC.basename(parent);
|
||||
if (containerName === '') {
|
||||
containerName = '/';
|
||||
}
|
||||
var containerLink = OC.linkTo('files', 'index.php')
|
||||
+'/?dir='+encodeURIComponent(parent)
|
||||
+'&scrollto='+encodeURIComponent(type[i].name);
|
||||
row.find('td.result a')
|
||||
.attr('href', containerLink)
|
||||
.attr('title', t('core', 'Show in {folder}', {folder: containerName}));
|
||||
} else {
|
||||
row.find('td.result a').attr('href', type[i].link);
|
||||
}
|
||||
|
||||
index++;
|
||||
/**
|
||||
* Give plugins the ability to customize the search results. For example:
|
||||
* OC.search.customResults.file = function (row, item){
|
||||
* if(item.name.search('.json') >= 0) ...
|
||||
* };
|
||||
*/
|
||||
if(OC.search.customResults[typeid]){
|
||||
OC.search.customResults[typeid](row, type[i]);
|
||||
}
|
||||
$('#searchresults tbody').append(row);
|
||||
$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){
|
||||
* if(item.name.search('.json') >= 0) ...
|
||||
* };
|
||||
*/
|
||||
if(OC.Search.hasFormatter(result.type)){
|
||||
OC.Search.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[result.type]){
|
||||
OC.search.customResults[result.type]($row, result);
|
||||
}
|
||||
}
|
||||
}
|
||||
$('#searchresults').on('click', 'result', function () {
|
||||
if ($(this).data('type') === 'Files') {
|
||||
//FIXME use ajax to navigate to folder & highlight file
|
||||
$('#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;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
OC.search.showResults.loaded=false;
|
||||
OC.Search.showResults.loaded=false;
|
||||
|
||||
OC.search.renderCurrent=function(){
|
||||
OC.Search.renderCurrent=function(){
|
||||
if($('#searchresults tr.result')[OC.search.currentResult]){
|
||||
var result=$('#searchresults tr.result')[OC.search.currentResult];
|
||||
$('#searchresults tr.result').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 + ')');
|
||||
}
|
||||
});
|
||||
} 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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<div id="searchresults">
|
||||
<!-- p>{message}</p -->
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="template">
|
||||
<td class="type"></td>
|
||||
<td class="result">
|
||||
<a>
|
||||
<div class="name"></div><div class="storage"></div>
|
||||
<div class="path"></div>
|
||||
<div class="text"></div>
|
||||
<td class="icon"></td>
|
||||
<td class="info">
|
||||
<a class="link">
|
||||
<div class="name"></div>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Reference in New Issue