Add jQuery; infinite scrolling to results.

Add:
    static/js/index.js
        -Add new results to the results `div` whenever the user scrolls to the
        bottom of the page.

static/js/index.js

@@ -5,10 +5,17 @@
 
 FINISH_TYPING_INTERVAL = 650;
 searchBar = document.querySelectorAll("form#search-bar input[type='text']")[0];
+resultsDiv = document.querySelectorAll("div#results")[0];
 
 var typingTimer, lastValue;
 searchBar.onkeyup = typingTimer;
 
+$(window).scroll(function() {
+    if($(window).scrollTop() + $(window).height() == $(document).height()) {
+        loadMoreResults();
+    }
+});
+
 /*
  * Clear the existing timer and set a new one the the user types text into the
  * search bar.
@@ -32,9 +39,10 @@ function finishedTyping(){
 
     clearResults();
     if(searchBar.value){
-        populateResults();
         if(!searchField.classList.contains("partly-visible"))
             searchField.classList.add("partly-visible");
+
+        populateResults();
     }
     else
         searchField.classList.remove("partly-visible");
@@ -44,10 +52,8 @@ function finishedTyping(){
  * Removes any child elements of `div#results`.
  */
 function clearResults(){
-    var resultsPage = document.querySelectorAll("div#results")[0];
-
-    while(resultsPage.firstChild)
-        resultsPage.removeChild(resultsPage.firstChild);
+    while(resultsDiv.firstChild)
+        resultsDiv.removeChild(resultsDiv.firstChild);
 }
 
 /*
@@ -55,18 +61,17 @@ function clearResults(){
  * with its response.
  */
 function populateResults(){
-    var resultsPage = document.querySelectorAll("div#results")[0];
     var results = queryServer();
 
     for(var result = 0; result < results.length; result++){
         var newDiv = results[result];
-        resultsPage.appendChild(newDiv);
+        resultsDiv.appendChild(newDiv);
         setTimeout(
-        (function(divReference){
-            return function(){
-                divReference.classList.add("cascade");
-            };
-        }(newDiv)), result * 20);
+            (function(divReference){
+                return function(){
+                    divReference.classList.add("cascade");
+                };
+            }(newDiv)), result * 20);
     }
 
     for(var result = 0; result < results.length; result++);
@@ -80,7 +85,7 @@ function populateResults(){
  */
 function queryServer(){
     var resultDivs = []
-    for(var result = 0; result < 200; result++){
+    for(var result = 0; result < 20; result++){
         var newDiv = document.createElement("div");
         newDiv.classList.add("result");
         newDiv.innerHTML = Math.random();
@@ -92,3 +97,20 @@ function queryServer(){
 
     return resultDivs;
 }
+
+/*
+ * Adds more results to `div#results`.
+ */
+function loadMoreResults(){
+    results = queryServer();
+    for(var result = 0; result < results.length; result++){
+        var newDiv = results[result];
+        resultsDiv.appendChild(newDiv);
+        setTimeout(
+            (function(divReference){
+                return function(){
+                    divReference.classList.add("cascade");
+                };
+            }(newDiv)), result * 20);
+    }
+}

static/sass/_mixins.sass

@@ -13,5 +13,8 @@
 .t1
     @include vendor(transition, all 0.1s ease-out)
 
+.t2
+    @include vendor(transition, all 0.2s ease-out)
+
 .t3
     @include vendor(transition, all 0.3s ease-out)

static/sass/index.sass

@@ -6,7 +6,7 @@
 @import variables
 
 div#search-field
-    @extend .t3
+    @extend .t2
 
     bottom: 0
     height: 50%
@@ -48,4 +48,6 @@ div#results
         padding: 1%
 
         &.cascade
+            @extend .t3
+
             margin-bottom: 0%

templates/index.html

@@ -6,6 +6,7 @@
 
 = block head
   {{ assets.tag("index.css") }}
+  {{ assets.tag("jquery.min.js") }}
 = endblock
 
 = block body