Merge pull request #4263 from owncloud/search_scrollto

initial scrollto implementation

9 files changed, 133 insertions, 27 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 41d9808c56b..0acb3c5d829 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -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; }
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index b50d46c98d3..9a2d39c3652 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -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')) {
diff --git a/apps/files/js/files.js b/apps/files/js/files.js
index c2418cfa751..a4fdf383339 100644
--- a/apps/files/js/files.js
+++ b/apps/files/js/files.js
@@ -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){
diff --git a/core/js/js.js b/core/js/js.js
index cb7287c02ae..b7f7ff1ac15 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -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
diff --git a/lib/search/provider/file.php b/lib/search/provider/file.php
index 4d88c2a87f1..9bd50931517 100644
--- a/lib/search/provider/file.php
+++ b/lib/search/provider/file.php
@@ -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;
diff --git a/lib/search/result.php b/lib/search/result.php
index 08beaea151c..42275c2df11 100644
--- a/lib/search/result.php
+++ b/lib/search/result.php
@@ -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;
 	}
 }
diff --git a/search/css/results.css b/search/css/results.css
index 4ae7d67afb3..8a32b0b995d 100644
--- a/search/css/results.css
+++ b/search/css/results.css
@@ -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;
diff --git a/search/js/result.js b/search/js/result.js
index 78fa8efc8e9..780f513edcf 100644
--- a/search/js/result.js
+++ b/search/js/result.js
@@ -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);
@@ -39,30 +50,52 @@ OC.search.showResults=function(results){
 		$('#searchresults').show();
 		$('#searchresults tr.result').remove();
 		var index=0;
-		for(var name in types){
-			var type=types[name];
+		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');
-					if (i == 0){
-						row.children('td.type').text(name);
+					row.data('type', typeid);
+					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.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);
 					index++;
-					if(OC.search.customResults[name]){//give plugins the ability to customize the entries in here
-						OC.search.customResults[name](row,type[i]);
+					if(OC.search.customResults[typeid]){//give plugins the ability to customize the entries in here
+						OC.search.customResults[typeid](row,type[i]);
 					}
 					$('#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.renderCurrent=function(){
@@ -71,4 +104,4 @@ OC.search.renderCurrent=function(){
 		$('#searchresults tr.result').removeClass('current');
 		$(result).addClass('current');
 	}
-}
+};
diff --git a/search/templates/part.results.php b/search/templates/part.results.php
index 9e39a1c2c8b..b6e7bad4a2f 100644
--- a/search/templates/part.results.php
+++ b/search/templates/part.results.php
@@ -1,12 +1,12 @@
-<div id='searchresults'>
+<div id="searchresults">
 	<table>
 		<tbody>
-			<tr class='template '>
-				<td class='type'></td>
-				<td class='result'>
+			<tr class="template">
+				<td class="type"></td>
+				<td class="result">
 					<a>
-						<div class='name'></div>
-						<div class='text'></div>
+						<div class="name"></div>
+						<div class="text"></div>
 					</a>
 				</td>
 			</tr>