mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new OC.Search, add search result formatters and handlers, use full content width for results

This commit is contained in:
Jörn Friedrich Dreyer 2014-12-06 00:53:06 +01:00
parent 0ba3093196
commit d3662722f6
6 changed files with 187 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/ajax/preview.php
View File

@ -40,9 +40,9 @@ try {
$preview->setMaxY($maxY); $preview->setMaxY($maxY);
$preview->setScalingUp($scalingUp); $preview->setScalingUp($scalingUp);
$preview->setKeepAspect($keepAspect); $preview->setKeepAspect($keepAspect);
$preview->showPreview();
} }
$preview->showPreview();
} catch (\Exception $e) { } catch (\Exception $e) {
\OC_Response::setStatus(500); \OC_Response::setStatus(500);
\OC_Log::write('core', $e->getmessage(), \OC_Log::DEBUG); \OC_Log::write('core', $e->getmessage(), \OC_Log::DEBUG);

77
core/js/js.js
View File

@ -319,8 +319,8 @@ var OC={
} }
} }
$.getJSON(OC.generateUrl('search/ajax/search.php'), {inApps:inApps, query:query}, function(results){ $.getJSON(OC.generateUrl('search/ajax/search.php'), {inApps:inApps, query:query}, function(results){
OC.search.lastResults=results; OC.Search.lastResults=results;
OC.search.showResults(results); OC.Search.showResults(results);
}); });
} }
}, 500), }, 500),
@ -608,10 +608,47 @@ OC.Plugins = {
/** /**
* @namespace OC.search * @namespace OC.search
*/ */
OC.search.customResults={}; OC.search.customResults = {};
OC.search.currentResult=-1; /**
OC.search.lastQuery=''; * @deprecated use get/setFormatter() instead
OC.search.lastResults={}; */
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.addStyle.loaded=[];
OC.addScript.loaded=[]; OC.addScript.loaded=[];
@ -1043,38 +1080,38 @@ function initCore() {
}); });
$('#searchbox').keyup(function(event){ $('#searchbox').keyup(function(event){
if(event.keyCode===13){//enter if(event.keyCode===13){//enter
if(OC.search.currentResult>-1){ if(OC.Search.currentResult>-1){
var result=$('#searchresults tr.result a')[OC.search.currentResult]; var result=$('#searchresults tr.result a')[OC.Search.currentResult];
window.location = $(result).attr('href'); window.location = $(result).attr('href');
} }
}else if(event.keyCode===38){//up }else if(event.keyCode===38){//up
if(OC.search.currentResult>0){ if(OC.Search.currentResult>0){
OC.search.currentResult--; OC.Search.currentResult--;
OC.search.renderCurrent(); OC.Search.renderCurrent();
} }
}else if(event.keyCode===40){//down }else if(event.keyCode===40){//down
if(OC.search.lastResults.length>OC.search.currentResult+1){ if(OC.Search.lastResults.length>OC.Search.currentResult+1){
OC.search.currentResult++; OC.Search.currentResult++;
OC.search.renderCurrent(); OC.Search.renderCurrent();
} }
}else if(event.keyCode===27){//esc }else if(event.keyCode===27){//esc
OC.search.hide(); OC.Search.hide();
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter(); FileList.unfilter();
} }
}else{ }else{
var query=$('#searchbox').val(); var query=$('#searchbox').val();
if(OC.search.lastQuery!==query){ if(OC.Search.lastQuery!==query){
OC.search.lastQuery=query; OC.Search.lastQuery=query;
OC.search.currentResult=-1; OC.Search.currentResult=-1;
if (FileList && typeof FileList.filter === 'function') { //TODO add hook system if (FileList && typeof FileList.filter === 'function') { //TODO add hook system
FileList.filter(query); FileList.filter(query);
} }
if(query.length>2){ if(query.length>2){
OC.search(query); OC.search(query);
}else{ }else{
if(OC.search.hide){ if(OC.Search.hide){
OC.search.hide(); OC.Search.hide();
} }
} }
} }

2
lib/private/search/result/file.php
View File

@ -83,7 +83,7 @@ class File extends \OCP\Search\Result {
$this->path = $path; $this->path = $path;
$this->size = $data->getSize(); $this->size = $data->getSize();
$this->modified = $data->getMtime(); $this->modified = $data->getMtime();
$this->mime_type = $data->getMimetype(); $this->mime = $data->getMimetype();
} }
/** /**

34
search/css/results.css
View File

@ -11,21 +11,10 @@
top:0; top:0;
padding-top: 45px; padding-top: 45px;
height: 100%; height: 100%;
box-sizing: border-box;
z-index:75; 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 { #searchresults table {
border-spacing:0; border-spacing:0;
table-layout:fixed; table-layout:fixed;
@ -64,26 +53,17 @@
opacity: 1; opacity: 1;
} }
#searchresults td.result * { #searchresults tr.result * {
cursor:pointer; cursor:pointer;
} }
#searchresults td.container { #searchresults td.icon {
width:20px;
}
#searchresults td.container img {
vertical-align: middle;
display:none;
}
#searchresults tr:hover td.container img {
display:inline;
}
#searchresults td.type {
font-weight:700; font-weight:700;
text-align:right; text-align:right;
width:3.5em; width:32px;
height: 40px;
background-position: 30px 4px;
background-repeat: no-repeat;
} }
#searchresults tr.current { #searchresults tr.current {

211
search/js/result.js
View File

@ -9,24 +9,13 @@
*/ */
//translations for result type ids, can be extended by apps //translations for result type ids, can be extended by apps
OC.search.resultTypes={ OC.Search.resultTypes={
file: t('core','File'), file: t('core','File'),
folder: t('core','Folder'), folder: t('core','Folder'),
image: t('core','Image'), image: t('core','Image'),
audio: t('core','Audio') audio: t('core','Audio')
}; };
OC.search.catagorizeResults=function(results){ OC.Search.hide=function(){
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(){
$('#searchresults').hide(); $('#searchresults').hide();
if($('#searchbox').val().length>2){ if($('#searchbox').val().length>2){
$('#searchbox').val(''); $('#searchbox').val('');
@ -40,117 +29,149 @@ OC.search.hide=function(){
} }
} }
}; };
OC.search.showResults=function(results){ OC.Search.showResults=function(results){
if(results.length === 0){ if(results.length === 0){
return; return;
} }
if(!OC.search.showResults.loaded){ if(!OC.Search.showResults.loaded){
var parent=$('<div class="searchresults-wrapper"/>'); var parent=$('<div class="searchresults-wrapper"/>');
$('#app-content').append(parent); $('#app-content').append(parent);
parent.load(OC.filePath('search','templates','part.results.php'),function(){ parent.load(OC.filePath('search','templates','part.results.php'),function(){
OC.search.showResults.loaded=true; OC.Search.showResults.loaded=true;
$('#searchresults').click(function(event){ $('#searchresults').click(function(event){
OC.search.hide(); OC.Search.hide();
event.stopPropagation(); event.stopPropagation();
}); });
$(document).click(function(event){ $(document).click(function(event){
OC.search.hide(); OC.Search.hide();
if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
FileList.unfilter(); FileList.unfilter();
} }
}); });
OC.search.lastResults=results; OC.Search.lastResults=results;
OC.search.showResults(results); OC.Search.showResults(results);
}); });
}else{ } else {
var types=OC.search.catagorizeResults(results);
$('#searchresults').show();
$('#searchresults tr.result').remove(); $('#searchresults tr.result').remove();
var index=0; $('#searchresults').show();
for(var typeid in types){ jQuery.each(results, function(i, result) {
var type=types[typeid]; var $row = $('#searchresults tr.template').clone();
if(type.length>0){ $row.removeClass('template');
for(var i=0;i<type.length;i++){ $row.addClass('result');
var row=$('#searchresults tr.template').clone();
row.removeClass('template');
row.addClass('result');
row.data('type', typeid); $row.data('result', result);
row.data('name', type[i].name);
row.data('path', type[i].path);
row.data('text', type[i].text);
row.data('index',index);
if (i === 0){ // generic results only have four attributes
var typeName = OC.search.resultTypes[typeid]; $row.find('td.info div.name').text(result.name);
row.children('td.type').text(t('lib', typeName)); $row.find('td.info a').attr('href', result.link);
}
if (type[i].path) { $row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'places/link') + ')');
OCA.Files.App.fileList.lazyLoadPreview({ /**
path: type[i].path, * Give plugins the ability to customize the search results. For example:
mime: type[i].mime_type, * OC.search.customResults.file = function (row, item){
callback: function (url) { * if(item.name.search('.json') >= 0) ...
row.find('td.type').css('background-image', 'url(' + url + ')'); * };
} */
}); if(OC.Search.hasFormatter(result.type)){
} OC.Search.getFormatter(result.type)($row, result);
} else
row.find('td.result div.name').text(type[i].name); {
row.find('td.result div.path').text(type[i].path); // for backward compatibility add text div
if (typeof type[i].highlights === 'object') { $row.find('td.info div.name').addClass('result')
var highlights = type[i].highlights.join(' … '); $row.find('td.result div.name').after('<div class="text"></div>');
row.find('td.result div.text').html(highlights); $row.find('td.result div.text').text(result.name);
} else { if(OC.search.customResults[result.type]){
row.find('td.result div.text').text(type[i].text); OC.search.customResults[result.type]($row, result);
}
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);
} }
} }
} $('#searchresults tbody').append($row);
$('#searchresults').on('click', 'result', function () { });
if ($(this).data('type') === 'Files') {
//FIXME use ajax to navigate to folder & highlight file $('#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]){ if($('#searchresults tr.result')[OC.search.currentResult]){
var result=$('#searchresults tr.result')[OC.search.currentResult]; var result=$('#searchresults tr.result')[OC.search.currentResult];
$('#searchresults tr.result').removeClass('current'); $('#searchresults tr.result').removeClass('current');
$(result).addClass('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;
}
});

11
search/templates/part.results.php
View File

@ -1,13 +1,12 @@
<div id="searchresults"> <div id="searchresults">
<!-- p>{message}</p -->
<table> <table>
<tbody> <tbody>
<tr class="template"> <tr class="template">
<td class="type"></td> <td class="icon"></td>
<td class="result"> <td class="info">
<a> <a class="link">
<div class="name"></div><div class="storage"></div> <div class="name"></div>
<div class="path"></div>
<div class="text"></div>
</a> </a>
</td> </td>
</tr> </tr>