Merge pull request #330 from canjs/276-active-result-sticks-to-bottom

Active search result sticks to bottom and top of page

Author: imaustink

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bit-docs-html-canjs",
-  "version": "1.0.3",
+  "version": "1.0.3-pre.1",
   "description": "The plugins to produce the CanJS site",
   "main": "static/canjs",
   "scripts": {
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "bit-docs-generate-html": "^0.6.0",
-    "bit-docs-generate-searchmap": "^0.1.1",
+    "bit-docs-generate-searchmap": "^0.1.2",
     "bit-docs-html-toc": "^0.6.0",
     "connect": "^3.5.0",
     "normalize.css": "^5.0.0",

static/search.js

@@ -674,13 +674,43 @@ var Search = Control.extend({
 	// function activateResult
 	// sets property and adds class to active result
 	activateResult: function($result){
+		// Get position top of last active element
+		var lastResultPosTop = parseInt(this.$activeResult && this.$activeResult.position().top || 0, 10);
 		this.deactivateResult();
 		this.$activeResult = $result;
 		this.$activeResult.addClass(this.options.keyboardActiveClass);
 
-		var activeResultOffset = this.getActiveResultOffset();
+		// Get position top of current active element
+		var activeResultPosTop = parseInt(this.$activeResult.position().top);
+		var resultsContainerHeight = this.$resultsContainer.height();
 
-		this.$resultsContainer.scrollTop(this.$activeResult.position().top - activeResultOffset);
+		// Detect if the user is arrowing down
+		var isMovingDown = lastResultPosTop < this.$activeResult.position().top;
+		var isBelow = activeResultPosTop > resultsContainerHeight;
+		var isAbove = activeResultPosTop < 0;
+
+		if(isMovingDown && isBelow){
+			this.resetScrollToBottom(activeResultPosTop, resultsContainerHeight);
+		}
+		else if(isAbove){
+			this.resetScrollToTop(activeResultPosTop);
+		}
+	},
+
+	resetScrollToTop: function(activeResultPosTop){
+		this.$resultsContainer.scrollTop(
+			this.$resultsContainer.scrollTop() + 
+			activeResultPosTop
+		);
+	},
+
+	resetScrollToBottom: function(activeResultPosTop, resultsContainerHeight){
+		// Calculate active result's position bottom
+		var scrollTo = (activeResultPosTop + this.$activeResult.outerHeight()) - 
+		// Calculate the current scrolled position of the bottom of the list
+		(this.getActiveResultOffset() + resultsContainerHeight);
+
+		this.$resultsContainer.scrollTop(scrollTo);
 	},
 
 	// function deactivateResult