ajax paging, some js cleanups

lib/private/search.php

@@ -64,8 +64,10 @@ class Search implements ISearch {
 				$providerResults = $provider->search($query);
 				if ($size > 0) {
 					$slicedResults = array_slice($providerResults, $page * $size, $size);
-				}
 					$results = array_merge($results, $slicedResults);
+				} else {
+					$results = array_merge($results, $providerResults);
+				}
 			} else {
 				\OC::$server->getLogger()->warning('Ignoring Unknown search provider', array('provider' => $provider));
 			}

search/ajax/search.php

@@ -46,7 +46,7 @@ if (isset($_GET['page'])) {
 if (isset($_GET['size'])) {
 	$size = (int)$_GET['size'];
 } else {
-	$size = 0;
+	$size = 30;
 }
 if($query) {
 	$result = \OC::$server->getSearch()->search($query, $inApps, $page, $size);

search/css/results.css

@@ -14,6 +14,9 @@
 	box-sizing: border-box;
 	z-index:75;
 }
+#searchresults * {
+	box-sizing: content-box;
+}
 
 #searchresults table {
 	border-spacing:0;
@@ -23,6 +26,9 @@
 }
 
 #searchresults td {
+	padding: 0 15px;
+	font-style: normal;
+	vertical-align: middle;
 	border-top: 20px solid white;
 	border-bottom: none;
 }

search/js/result.js

@@ -8,108 +8,11 @@
  *
  */
 
-OC.Search.hide = function(){
+//FIXME move to files?
-	$('#searchresults').hide();
+$(document).ready(function() {
-	if($('#searchbox').val().length>2){
+	// wait for other apps/extensions to register their event handlers and file actions
-		$('#searchbox').val('');
+	// in the "ready" clause
-		if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
+	_.defer(function() {
-			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){
-		return;
-	}
-	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;
-			$('#searchresults').click(function(event){
-				OC.Search.hide();
-				event.stopPropagation();
-			});
-			$(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);
-		});
-	} else {
-		$('#searchresults tr.result').remove();
-		$('#searchresults').show();
-		jQuery.each(results, function(i, result) {
-			var $row = $('#searchresults tr.template').clone();
-			$row.removeClass('template');
-			$row.addClass('result');
-
-			$row.data('result', result);
-
-			// generic results only have four attributes
-			$row.find('td.info div.name').text(result.name);
-			$row.find('td.info a').attr('href', result.link);
-
-			$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){ FIXME
-			 *  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 && OC.search.customResults[result.type]) {
-					OC.search.customResults[result.type]($row, result);
-				}
-			}
-			$('#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.renderCurrent = function(){
-	var $resultsContainer = $('#searchresults');
-	var result = $resultsContainer.find('tr.result')[OC.Search.currentResult]
-	if (result) {
-		var $result = $(result);
-		var currentOffset = $resultsContainer.scrollTop();
-		$resultsContainer.animate({
-			// Scrolling to the top of the new result
-			scrollTop: currentOffset + $result.offset().top - $result.height() * 2
-		}, {
-			duration: 100
-		});
-		$resultsContainer.find('tr.result.current').removeClass('current');
-		$result.addClass('current');
-	}
-};
-
 		OC.Search.setFormatter('file', function ($row, result) {
 			// backward compatibility:
 			if (typeof result.mime !== 'undefined') {
@@ -176,3 +79,5 @@ OC.Search.setHandler('folder',  function ($row, result, event) {
 				return true;
 			}
 		});
+	});
+});

search/js/search.js

@@ -4,113 +4,257 @@
  * This file is licensed under the Affero General Public License version 3 or
  * later. See the COPYING file.
  *
- * @author Bernhard Posselt <dev@bernhard-posselt.com>
+ * @author Jörn Friedrich Dreyer <jfd@owncloud.com>
- * @copyright Bernhard Posselt 2014
+ * @copyright Jörn Friedrich Dreyer 2014
  */
 
-(function (exports) {
+(function () {
+	/**
+	 * @class OCA.Search
+	 * @classdesc
+	 *
+	 * The Search class manages a search queries and their results
+	 *
+	 * @param $searchBox container element with existing markup for the #searchbox form
+	 */
+	var Search = function($searchBox) {
+		this.initialize($searchBox);
+	};
+	/**
+	 * @memberof OC
+	 */
+	Search.prototype = {
 
-	'use strict';
+		/**
+		 * Initialize the search box and results
+		 *
+		 * @param $searchBox container element with existing markup for the #searchbox form
+		 * @private
+		 */
+		initialize: function($searchBox) {
+
+			var that = this;
 
-	exports.Search = {
 			/**
 			 * contains closures that are called to format search results
 			 */
-		formatter:{},
+			var formatters = {};
-		setFormatter: function(type, formatter) {
+			this.setFormatter = function(type, formatter) {
-			this.formatter[type] = formatter;
+				formatters[type] = formatter;
-		},
+			};
-		hasFormatter: function(type) {
+			this.hasFormatter = function(type) {
-			return typeof this.formatter[type] !== 'undefined';
+				return typeof formatters[type] !== 'undefined';
-		},
+			};
-		getFormatter: function(type) {
+			this.getFormatter = function(type) {
-			return this.formatter[type];
+				return formatters[type];
-		},
+			};
+
 			/**
 			 * contains closures that are called when a search result has been clicked
 			 */
-		handler:{},
+			var handlers = {};
-		setHandler: function(type, handler) {
+			this.setHandler = function(type, handler) {
-			this.handler[type] = handler;
+				handlers[type] = handler;
-		},
+			};
-		hasHandler: function(type) {
+			this.hasHandler = function(type) {
-			return typeof this.handler[type] !== 'undefined';
+				return typeof handlers[type] !== 'undefined';
-		},
+			};
-		getHandler: function(type) {
+			this.getHandler = function(type) {
-			return this.handler[type];
+				return handlers[type];
-		},
+			};
-		currentResult:-1,
+
-		lastQuery:'',
+			var currentResult = -1;
-		lastResults:{},
+			var lastQuery = '';
+			var lastPage = 0;
+			var lastSize = 30;
+			var lastResults = {};
+
 			/**
 			 * Do a search query and display the results
 			 * @param {string} query the search query
 			 */
-		search: _.debounce(function(query, page, size) {
+			this.search = _.debounce(function(query, page, size) {
 				if(query) {
-				exports.addStyle('search','results');
+					OC.addStyle('search','results');
 					if (typeof page !== 'number') {
 						page = 0;
 					}
 					if (typeof size !== 'number') {
 						size = 30;
 					}
+					// prevent double pages
+					if (query === lastPage && page === lastPage && currentResult !== -1) {
+						return;
+					}
 					$.getJSON(OC.generateUrl('search/ajax/search.php'), {query:query, page:page, size:size }, function(results) {
-					exports.Search.lastResults = results;
+						lastQuery = query;
-					exports.Search.showResults(results);
+						lastPage = page;
+						lastSize = size;
+						lastResults = results;
+						if (page === 0) {
+							showResults(results);
+						} else {
+							addResults(results);
+						}
 					});
 				}
-		}, 500)
+			}, 500);
+			var $searchResults = false;
+
+			function showResults(results) {
+				if (results.length === 0) {
+					return;
+				}
+				if (!$searchResults) {
+					var $parent = $('<div class="searchresults-wrapper"/>');
+					$('#app-content').append($parent);
+					$parent.load(OC.webroot + '/search/templates/part.results.html', function () {
+						$searchResults = $parent.find('#searchresults');
+						$searchResults.click(function (event) {
+							that.hideResults();
+							event.stopPropagation();
+						});
+						$(document).click(function (event) {
+							that.hideResults();
+							if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
+								FileList.unfilter();
+							}
+						});
+						$searchResults.on('scroll', _.bind(onScroll, this));
+						lastResults = results;
+						showResults(results);
+					});
+				} else {
+					$searchResults.find('tr.result').remove();
+					$searchResults.show();
+					addResults(results);
+				}
+			}
+			function addResults(results) {
+				var $template = $searchResults.find('tr.template');
+				jQuery.each(results, function (i, result) {
+					var $row = $template.clone();
+					$row.removeClass('template');
+					$row.addClass('result');
+
+					$row.data('result', result);
+
+					// generic results only have four attributes
+					$row.find('td.info div.name').text(result.name);
+					$row.find('td.info a').attr('href', result.link);
+
+					$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'places/link') + ')');
+					/**
+					 * Give plugins the ability to customize the search results. see result.js for examples
+					 */
+					if (that.hasFormatter(result.type)) {
+						that.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 && OC.search.customResults[result.type]) {
+							OC.search.customResults[result.type]($row, result);
+						}
+					}
+					$searchResults.find('tbody').append($row);
+				});
+			}
+			function renderCurrent() {
+				var result = $searchResults.find('tr.result')[currentResult];
+				if (result) {
+					var $result = $(result);
+					var currentOffset = $searchResults.scrollTop();
+					$searchResults.animate({
+						// Scrolling to the top of the new result
+						scrollTop: currentOffset + $result.offset().top - $result.height() * 2
+					}, {
+						duration: 100
+					});
+					$searchResults.find('tr.result.current').removeClass('current');
+					$result.addClass('current');
+				}
+			}
+			this.hideResults = function() {
+				if ($searchResults) {
+					$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();
+						}
+					}
+				}
 			};
 
-
+			$searchBox.keyup(function(event) {
-	$(document).ready(function () {
-		$('form.searchbox').submit(function(event) {
-			event.preventDefault();
-		});
-		$('#searchbox').keyup(function(event) {
 				if (event.keyCode === 13) { //enter
-				if(exports.Search.currentResult > -1) {
+					if(currentResult > -1) {
-					var result = $('#searchresults tr.result a')[exports.Search.currentResult];
+						var result = $searchResults.find('tr.result a')[currentResult];
 						window.location = $(result).attr('href');
 					}
 				} else if(event.keyCode === 38) { //up
-				if(exports.Search.currentResult > 0) {
+					if(currentResult > 0) {
-					exports.Search.currentResult--;
+						currentResult--;
-					exports.Search.renderCurrent();
+						renderCurrent();
 
 					}
 				} else if(event.keyCode === 40) { //down
-				if(exports.Search.lastResults.length > exports.Search.currentResult + 1){
+					if(lastResults.length > currentResult + 1){
-					exports.Search.currentResult++;
+						currentResult++;
-					exports.Search.renderCurrent();
+						renderCurrent();
 					}
 				} else if(event.keyCode === 27) { //esc
-				exports.Search.hide();
+					that.hideResults();
 					if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system
 						FileList.unfilter();
 					}
 				} else {
-				var query = $('#searchbox').val();
+					var query = $searchBox.val();
-				if (exports.Search.lastQuery !== query) {
+					if (lastQuery !== query) {
-					exports.Search.lastQuery = query;
+						lastQuery = query;
-					exports.Search.currentResult = -1;
+						currentResult = -1;
 						if (FileList && typeof FileList.filter === 'function') { //TODO add hook system
 							FileList.filter(query);
 						}
 						if (query.length > 2) {
-						exports.Search.search(query);
+							that.search(query);
 						} else {
-						if (exports.Search.hide) {
+							if (that.hideResults) {
-							exports.Search.hide();
+								that.hideResults();
 							}
 						}
 					}
 				}
 			});
-	});
 
-}(OC));
+			/**
+			 * Event handler for when scrolling the list container.
+			 * This appends/renders the next page of entries when reaching the bottom.
+			 */
+			function onScroll(e) {
+				if ( $searchResults.scrollTop() + $searchResults.height() > $searchResults.find('table').height() - 300 ) {
+					that.search(lastQuery, lastPage + 1);
+				}
+			}
+
+			$('form.searchbox').submit(function(event) {
+				event.preventDefault();
+			});
+		}
+	};
+	OCA.Search = Search;
+})();
+
+$(document).ready(function() {
+	OC.Search = new OCA.Search($('#searchbox'));
+});
 
 /**
  * @deprecated use get/setFormatter() instead