initial scrollto implementation:

use places/folder icon,
move link construction to JS,
only show icon on hover,
use 'searchresult' as css class name,
add filter/unfilter methods,
highlight searched files in current filelist
only filter when correct FileList is present
This commit is contained in:
Jörn Friedrich Dreyer 2013-07-31 22:24:52 +02:00
parent 9d18e16c77
commit b40925ae17
9 changed files with 116 additions and 16 deletions

View File

@ -76,6 +76,9 @@
#filestable tbody tr.selected {
background-color: rgb(230,230,230);
}
#filestable tbody tr.searchresult {
background-color: rgb(240,240,240);
}
tbody a { color:#000; }
span.extension, span.uploading, td.date { color:#999; }
span.extension { text-transform:lowercase; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; }

View File

@ -643,6 +643,37 @@ var FileList={
if (FileList._maskTimeout){
window.clearTimeout(FileList._maskTimeout);
}
},
scrollTo:function(file) {
//scroll to and highlight preselected file
var scrolltorow = $('tr[data-file="'+file+'"]');
if (scrolltorow.length > 0) {
scrolltorow.addClass('searchresult');
$(window).scrollTop(scrolltorow.position().top);
//remove highlight when hovered over
scrolltorow.one('hover', function(){
scrolltorow.removeClass('searchresult');
});
}
},
filter:function(query){
$('#fileList tr:not(.summary)').each(function(i,e){
if ($(e).data('file').toLowerCase().indexOf(query.toLowerCase()) !== -1) {
$(e).addClass("searchresult");
} else {
$(e).removeClass("searchresult");
}
});
//do not use scrollto to prevent removing searchresult css class
var first = $('#fileList tr.searchresult').first();
if (first.length !== 0) {
$(window).scrollTop(first.position().top);
}
},
unfilter:function(){
$('#fileList tr.searchresult').each(function(i,e){
$(e).removeClass("searchresult");
});
}
};
@ -818,16 +849,16 @@ $(document).ready(function(){
FileList.replaceIsNewFile = null;
}
FileList.lastAction = null;
OC.Notification.hide();
OC.Notification.hide();
});
$('#notification:first-child').on('click', '.replace', function() {
OC.Notification.hide(function() {
FileList.replace($('#notification > span').attr('data-oldName'), $('#notification > span').attr('data-newName'), $('#notification > span').attr('data-isNewFile'));
});
OC.Notification.hide(function() {
FileList.replace($('#notification > span').attr('data-oldName'), $('#notification > span').attr('data-newName'), $('#notification > span').attr('data-isNewFile'));
});
});
$('#notification:first-child').on('click', '.suggest', function() {
$('tr').filterAttr('data-file', $('#notification > span').attr('data-oldName')).show();
OC.Notification.hide();
OC.Notification.hide();
});
$('#notification:first-child').on('click', '.cancel', function() {
if ($('#notification > span').attr('data-isNewFile')) {

View File

@ -384,6 +384,11 @@ $(document).ready(function() {
}
});
}
//scroll to and highlight preselected file
if (getURLParameter('scrollto')) {
FileList.scrollTo(getURLParameter('scrollto'));
}
});
function scanFiles(force, dir, users){

View File

@ -723,11 +723,17 @@ $(document).ready(function(){
}
}else if(event.keyCode===27){//esc
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 (FileList && typeof FileList.filter === 'function') { //TODO add hook system
FileList.filter(query);
}
if(query.length>2){
OC.search(query);
}else{
@ -840,6 +846,13 @@ function formatDate(date){
return $.datepicker.formatDate(datepickerFormatDate, date)+' '+date.getHours()+':'+((date.getMinutes()<10)?'0':'')+date.getMinutes();
}
// taken from http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1]
);
}
/**
* takes an absolute timestamp and return a string with a human-friendly relative date
* @param int a Unix timestamp

View File

@ -10,6 +10,7 @@ class OC_Search_Provider_File extends OC_Search_Provider{
$mime = $fileData['mimetype'];
$name = basename($path);
$container = dirname($path);
$text = '';
$skip = false;
if($mime=='httpd/unix-directory') {
@ -37,7 +38,7 @@ class OC_Search_Provider_File extends OC_Search_Provider{
}
}
if(!$skip) {
$results[] = new OC_Search_Result($name, $text, $link, $type);
$results[] = new OC_Search_Result($name, $text, $link, $type, $container);
}
}
return $results;

View File

@ -7,6 +7,7 @@ class OC_Search_Result{
public $text;
public $link;
public $type;
public $container;
/**
* create a new search result
@ -15,10 +16,11 @@ class OC_Search_Result{
* @param string $link link for the result
* @param string $type the type of result as human readable string ('File', 'Music', etc)
*/
public function __construct($name, $text, $link, $type) {
public function __construct($name, $text, $link, $type, $container) {
$this->name=$name;
$this->text=$text;
$this->link=$link;
$this->type=$type;
$this->container=$container;
}
}

View File

@ -14,7 +14,7 @@
position:fixed;
right:0;
text-overflow:ellipsis;
top:20px;
top:45px;
width:380px;
z-index:75;
}
@ -43,10 +43,16 @@
}
#searchresults td {
vertical-align:top;
padding:0 .3em;
height: 32px;
}
#searchresults tr.template {
display: none;
}
#searchresults td.result {
width:250px;
}
#searchresults td.result div.text {
padding-left:1em;
white-space:nowrap;
@ -56,6 +62,18 @@
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 {
border-bottom:none;
border-right:1px solid #aaa;

View File

@ -8,15 +8,23 @@ OC.search.catagorizeResults=function(results){
types[type].push(results[i]);
}
return types;
}
};
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){
if(results.length === 0){
return;
}
if(!OC.search.showResults.loaded){
@ -30,6 +38,9 @@ OC.search.showResults=function(results){
});
$(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);
@ -46,12 +57,27 @@ OC.search.showResults=function(results){
var row=$('#searchresults tr.template').clone();
row.removeClass('template');
row.addClass('result');
if (i == 0){
if (i === 0){
row.children('td.type').text(name);
}
row.find('td.result a').attr('href',type[i].link);
row.find('td.result div.name').text(type[i].name);
row.find('td.result div.text').text(type[i].text);
if (type[i].container) {
var td = row.find('td.container');
td.append('<a><img></img></a>');
td.find('img').attr('src',OC.imagePath('core','places/folder'));
var containerName = OC.basename(type[i].container);
if (containerName === '') {
containerName = '/';
}
var containerLink = OC.linkTo('files','index.php')
+'?dir='+encodeURIComponent(type[i].container)
+'&scrollto='+encodeURIComponent(type[i].name);
row.find('td.container a')
.attr('href',containerLink)
.attr('title',t('core','Show in {folder}',{folder: containerName}));
}
row.data('index',index);
index++;
if(OC.search.customResults[name]){//give plugins the ability to customize the entries in here
@ -62,7 +88,7 @@ OC.search.showResults=function(results){
}
}
}
}
};
OC.search.showResults.loaded=false;
OC.search.renderCurrent=function(){
@ -71,4 +97,4 @@ OC.search.renderCurrent=function(){
$('#searchresults tr.result').removeClass('current');
$(result).addClass('current');
}
}
};

View File

@ -1,7 +1,7 @@
<div id='searchresults'>
<table>
<tbody>
<tr class='template '>
<tr class='template'>
<td class='type'></td>
<td class='result'>
<a>
@ -9,6 +9,7 @@
<div class='text'></div>
</a>
</td>
<td class='container'></td>
</tr>
</tbody>
</table>