Merge pull request #4263 from owncloud/search_scrollto
initial scrollto implementation
This commit is contained in:
commit
9f9eb1b08f
|
@ -76,6 +76,9 @@
|
||||||
#filestable tbody tr.selected {
|
#filestable tbody tr.selected {
|
||||||
background-color: rgb(230,230,230);
|
background-color: rgb(230,230,230);
|
||||||
}
|
}
|
||||||
|
#filestable tbody tr.searchresult {
|
||||||
|
background-color: rgb(240,240,240);
|
||||||
|
}
|
||||||
tbody a { color:#000; }
|
tbody a { color:#000; }
|
||||||
span.extension, span.uploading, td.date { color:#999; }
|
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; }
|
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; }
|
||||||
|
|
|
@ -643,6 +643,37 @@ var FileList={
|
||||||
if (FileList._maskTimeout){
|
if (FileList._maskTimeout){
|
||||||
window.clearTimeout(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.replaceIsNewFile = null;
|
||||||
}
|
}
|
||||||
FileList.lastAction = null;
|
FileList.lastAction = null;
|
||||||
OC.Notification.hide();
|
OC.Notification.hide();
|
||||||
});
|
});
|
||||||
$('#notification:first-child').on('click', '.replace', function() {
|
$('#notification:first-child').on('click', '.replace', function() {
|
||||||
OC.Notification.hide(function() {
|
OC.Notification.hide(function() {
|
||||||
FileList.replace($('#notification > span').attr('data-oldName'), $('#notification > span').attr('data-newName'), $('#notification > span').attr('data-isNewFile'));
|
FileList.replace($('#notification > span').attr('data-oldName'), $('#notification > span').attr('data-newName'), $('#notification > span').attr('data-isNewFile'));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
$('#notification:first-child').on('click', '.suggest', function() {
|
$('#notification:first-child').on('click', '.suggest', function() {
|
||||||
$('tr').filterAttr('data-file', $('#notification > span').attr('data-oldName')).show();
|
$('tr').filterAttr('data-file', $('#notification > span').attr('data-oldName')).show();
|
||||||
OC.Notification.hide();
|
OC.Notification.hide();
|
||||||
});
|
});
|
||||||
$('#notification:first-child').on('click', '.cancel', function() {
|
$('#notification:first-child').on('click', '.cancel', function() {
|
||||||
if ($('#notification > span').attr('data-isNewFile')) {
|
if ($('#notification > span').attr('data-isNewFile')) {
|
||||||
|
|
|
@ -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){
|
function scanFiles(force, dir, users){
|
||||||
|
|
|
@ -723,11 +723,17 @@ $(document).ready(function(){
|
||||||
}
|
}
|
||||||
}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
|
||||||
|
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
|
||||||
|
FileList.filter(query);
|
||||||
|
}
|
||||||
if(query.length>2){
|
if(query.length>2){
|
||||||
OC.search(query);
|
OC.search(query);
|
||||||
}else{
|
}else{
|
||||||
|
@ -840,6 +846,13 @@ function formatDate(date){
|
||||||
return $.datepicker.formatDate(datepickerFormatDate, date)+' '+date.getHours()+':'+((date.getMinutes()<10)?'0':'')+date.getMinutes();
|
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
|
* takes an absolute timestamp and return a string with a human-friendly relative date
|
||||||
* @param int a Unix timestamp
|
* @param int a Unix timestamp
|
||||||
|
|
|
@ -10,6 +10,7 @@ class OC_Search_Provider_File extends OC_Search_Provider{
|
||||||
$mime = $fileData['mimetype'];
|
$mime = $fileData['mimetype'];
|
||||||
|
|
||||||
$name = basename($path);
|
$name = basename($path);
|
||||||
|
$container = dirname($path);
|
||||||
$text = '';
|
$text = '';
|
||||||
$skip = false;
|
$skip = false;
|
||||||
if($mime=='httpd/unix-directory') {
|
if($mime=='httpd/unix-directory') {
|
||||||
|
@ -37,7 +38,7 @@ class OC_Search_Provider_File extends OC_Search_Provider{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(!$skip) {
|
if(!$skip) {
|
||||||
$results[] = new OC_Search_Result($name, $text, $link, $type);
|
$results[] = new OC_Search_Result($name, $text, $link, $type, $container);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return $results;
|
return $results;
|
||||||
|
|
|
@ -7,6 +7,7 @@ class OC_Search_Result{
|
||||||
public $text;
|
public $text;
|
||||||
public $link;
|
public $link;
|
||||||
public $type;
|
public $type;
|
||||||
|
public $container;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* create a new search result
|
* create a new search result
|
||||||
|
@ -15,10 +16,11 @@ class OC_Search_Result{
|
||||||
* @param string $link link for the result
|
* @param string $link link for the result
|
||||||
* @param string $type the type of result as human readable string ('File', 'Music', etc)
|
* @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->name=$name;
|
||||||
$this->text=$text;
|
$this->text=$text;
|
||||||
$this->link=$link;
|
$this->link=$link;
|
||||||
$this->type=$type;
|
$this->type=$type;
|
||||||
|
$this->container=$container;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
position:fixed;
|
position:fixed;
|
||||||
right:0;
|
right:0;
|
||||||
text-overflow:ellipsis;
|
text-overflow:ellipsis;
|
||||||
top:20px;
|
top:45px;
|
||||||
width:380px;
|
width:380px;
|
||||||
z-index:75;
|
z-index:75;
|
||||||
}
|
}
|
||||||
|
@ -43,10 +43,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#searchresults td {
|
#searchresults td {
|
||||||
vertical-align:top;
|
|
||||||
padding:0 .3em;
|
padding:0 .3em;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
#searchresults tr.template {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#searchresults td.result {
|
||||||
|
width:250px;
|
||||||
|
}
|
||||||
#searchresults td.result div.text {
|
#searchresults td.result div.text {
|
||||||
padding-left:1em;
|
padding-left:1em;
|
||||||
white-space:nowrap;
|
white-space:nowrap;
|
||||||
|
@ -56,6 +62,18 @@
|
||||||
cursor:pointer;
|
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.type {
|
||||||
border-bottom:none;
|
border-bottom:none;
|
||||||
border-right:1px solid #aaa;
|
border-right:1px solid #aaa;
|
||||||
|
|
|
@ -8,15 +8,23 @@ OC.search.catagorizeResults=function(results){
|
||||||
types[type].push(results[i]);
|
types[type].push(results[i]);
|
||||||
}
|
}
|
||||||
return types;
|
return types;
|
||||||
}
|
};
|
||||||
OC.search.hide=function(){
|
OC.search.hide=function(){
|
||||||
$('#searchresults').hide();
|
$('#searchresults').hide();
|
||||||
if($('#searchbox').val().length>2){
|
if($('#searchbox').val().length>2){
|
||||||
$('#searchbox').val('');
|
$('#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){
|
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){
|
||||||
|
@ -30,6 +38,9 @@ OC.search.showResults=function(results){
|
||||||
});
|
});
|
||||||
$(document).click(function(event){
|
$(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.lastResults=results;
|
||||||
OC.search.showResults(results);
|
OC.search.showResults(results);
|
||||||
|
@ -39,30 +50,52 @@ OC.search.showResults=function(results){
|
||||||
$('#searchresults').show();
|
$('#searchresults').show();
|
||||||
$('#searchresults tr.result').remove();
|
$('#searchresults tr.result').remove();
|
||||||
var index=0;
|
var index=0;
|
||||||
for(var name in types){
|
for(var typeid in types){
|
||||||
var type=types[name];
|
var type=types[typeid];
|
||||||
if(type.length>0){
|
if(type.length>0){
|
||||||
for(var i=0;i<type.length;i++){
|
for(var i=0;i<type.length;i++){
|
||||||
var row=$('#searchresults tr.template').clone();
|
var row=$('#searchresults tr.template').clone();
|
||||||
row.removeClass('template');
|
row.removeClass('template');
|
||||||
row.addClass('result');
|
row.addClass('result');
|
||||||
if (i == 0){
|
row.data('type', typeid);
|
||||||
row.children('td.type').text(name);
|
row.data('name', type[i].name);
|
||||||
|
row.data('text', type[i].text);
|
||||||
|
row.data('container', type[i].container);
|
||||||
|
if (i === 0){
|
||||||
|
row.children('td.type').text(typeid);
|
||||||
}
|
}
|
||||||
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.name').text(type[i].name);
|
||||||
row.find('td.result div.text').text(type[i].text);
|
row.find('td.result div.text').text(type[i].text);
|
||||||
|
if (type[i].container) {
|
||||||
|
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.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);
|
||||||
|
}
|
||||||
row.data('index',index);
|
row.data('index',index);
|
||||||
index++;
|
index++;
|
||||||
if(OC.search.customResults[name]){//give plugins the ability to customize the entries in here
|
if(OC.search.customResults[typeid]){//give plugins the ability to customize the entries in here
|
||||||
OC.search.customResults[name](row,type[i]);
|
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
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
OC.search.showResults.loaded=false;
|
OC.search.showResults.loaded=false;
|
||||||
|
|
||||||
OC.search.renderCurrent=function(){
|
OC.search.renderCurrent=function(){
|
||||||
|
@ -71,4 +104,4 @@ OC.search.renderCurrent=function(){
|
||||||
$('#searchresults tr.result').removeClass('current');
|
$('#searchresults tr.result').removeClass('current');
|
||||||
$(result).addClass('current');
|
$(result).addClass('current');
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<div id='searchresults'>
|
<div id="searchresults">
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr class='template '>
|
<tr class="template">
|
||||||
<td class='type'></td>
|
<td class="type"></td>
|
||||||
<td class='result'>
|
<td class="result">
|
||||||
<a>
|
<a>
|
||||||
<div class='name'></div>
|
<div class="name"></div>
|
||||||
<div class='text'></div>
|
<div class="text"></div>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
Loading…
Reference in New Issue