Add results animation, more content to index.js.

Add:
    static/js/index.js
        -Add `populateResults()`, to distinguish the addition of results to
        `div#results` from the retrieval of Codelets from the server itself.
        -Add `clearResults()` for convenience.

    static/sass/index.sass
        -Add `.cascade`, to provide new `div.result` elements with a
        downwards-cascading animation.

static/js/index.js

@@ -1,3 +1,8 @@
+/*
+ * @file Manages all query entry, `index.html` server querying, and results
+ *      diplay.
+ */
+
 FINISH_TYPING_INTERVAL = 650;
 searchBar = document.querySelectorAll("form#search-bar input[type='text']")[0];
 
@@ -10,7 +15,7 @@ searchBar.onkeyup = typingTimer;
  */
 function typingTimer(){
     clearTimeout(typingTimer);
-    if(lastValue != searchBar.value && searchBar.value)
+    if(lastValue != searchBar.value)
         typingTimer = setTimeout(finishedTyping, FINISH_TYPING_INTERVAL);
 };
 
@@ -22,31 +27,68 @@ function typingTimer(){
  * server.
  */
 function finishedTyping(){
-    queryServer();
+    lastValue = searchBar.value;
     var searchField = document.querySelectorAll("div#search-field")[0]
-    if(!searchField.classList.contains("partly-visible"))
-        searchField.classList.add("partly-visible");
+
+    clearResults();
+    if(searchBar.value){
+        populateResults();
+        if(!searchField.classList.contains("partly-visible"))
+            searchField.classList.add("partly-visible");
+    }
+    else
+        searchField.classList.remove("partly-visible");
 }
 
 /*
- * AJAX the current query string to the server.
- *
- * Currently just fills `div#results` with random content.
+ * Removes any child elements of `div#results`.
  */
-function queryServer(){
-    lastValue = searchBar.value;
-    var resultsPage = document.querySelectorAll("div#results")[0]
+function clearResults(){
+    var resultsPage = document.querySelectorAll("div#results")[0];
 
-    while(resultsPage.firstChild){
+    while(resultsPage.firstChild)
         resultsPage.removeChild(resultsPage.firstChild);
+}
+
+/*
+ * Query the server with the current search string, and populate `div#results`
+ * 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);
+        setTimeout(
+        (function(divReference){
+            return function(){
+                divReference.classList.add("cascade");
+            };
+        }(newDiv)), result * 20);
     }
 
+    for(var result = 0; result < results.length; result++);
+}
+
+/*
+ * AJAX the current query string to the server, and return its response.
+ *
+ * @return {Array} The server's response in the form of `div.result` DOM
+ *      elements, to fill `div#results`.
+ */
+function queryServer(){
+    var resultDivs = []
     for(var result = 0; result < 200; result++){
         var newDiv = document.createElement("div");
+        newDiv.classList.add("result");
         newDiv.innerHTML = Math.random();
         newDiv.style.textAlign = "center";
         newDiv.style.color = "#" + Math.floor(Math.random() *
                 16777215).toString(16);
-        resultsPage.appendChild(newDiv)
+        resultDivs.push(newDiv)
     }
+
+    return resultDivs;
 }

static/sass/index.sass

@@ -3,8 +3,11 @@
  */
 
 @import mixins
+@import variables
 
 div#search-field
+    @extend .t3
+
     bottom: 0
     height: 50%
     left: 0
@@ -21,14 +24,12 @@ div#search-field
         text-align: center
 
     form input[type="text"]
-        border: 1px solid #A4ACAF
+        border: 1px solid $baseColor1
         font-size: 1.1em
         padding: 3px
         width: 100%
 
     &.partly-visible
-        @extend .t3
-
         margin-top: 3%
         width: 46%
 
@@ -36,7 +37,15 @@ div#search-field
             display: none
 
 div#results
-    background-color: #F6FAFF
     margin-left: auto
     margin-right: auto
     width: 80%
+
+    div.result
+        background-color: #F8F8F8
+        margin-bottom: 10%
+        margin-top: 1%
+        padding: 1%
+
+        &.cascade
+            margin-bottom: 0%