From 1bc132c8c4755940f1ef5add48eae3542373bd2a Mon Sep 17 00:00:00 2001
From: Severyn Kozak <severyn.kozak@gmail.com>
Date: Sun, 11 May 2014 12:30:45 -0400
Subject: [PATCH] Add transition when user types, results styling.

Add:
    static/js/index.js
        -Add conditional to prevent a search from being triggered when a
        non-character key combination (ie, `up`, `down`, `ctrl-c`) was entered.
        -Add `queryServer()`, currently only for testing purposes (it populates
        `div#results` with randomized content).
        -Add documentation comments to all functions.

    static/sass/index.sass
        -Add different styling to the `#search-field` whenever results are
        visible (in other words, at any point after a query has been executed).
---
 static/js/index.js     | 54 +++++++++++++++++++++++++++++++++++++++++---------
 static/sass/index.sass | 20 +++++++++++++++++--
 static/sass/main.sass  |  4 ++--
 templates/index.html   |  6 +++++-
 4 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 5ab4c97..055c2d5 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,16 +1,52 @@
-var typingTimer;
-var finishedTypingInterval = 650;
+FINISH_TYPING_INTERVAL = 650;
+searchBar = document.querySelectorAll("form#search-bar input[type='text']")[0];
 
-searchBar = document.querySelectorAll("form#search-bar input[type='text']")[0]
-console.log(searchBar)
+var typingTimer, lastValue;
+searchBar.onkeyup = typingTimer;
 
-searchBar.onkeyup = function(){
+/*
+ * Clear the existing timer and set a new one the the user types text into the
+ * search bar.
+ */
+function typingTimer(){
     clearTimeout(typingTimer);
-    if(searchBar.value){
-        typingTimer = setTimeout(finishedTyping, doneTypingInterval);
-    }
+    if(lastValue != searchBar.value && searchBar.value)
+        typingTimer = setTimeout(finishedTyping, FINISH_TYPING_INTERVAL);
 };
 
+/*
+ * Callback which queries the server whenver the user stops typing.
+ *
+ * Whenever the user doesn't type for a `FINISH_TYPING_INTERVAL` after having
+ * entered new text in the search bar, send the current query request to the
+ * server.
+ */
 function finishedTyping(){
-    console.log("You stopped typing.");
+    queryServer();
+    var searchField = document.querySelectorAll("div#search-field")[0]
+    if(!searchField.classList.contains("partly-visible"))
+        searchField.classList.add("partly-visible");
+}
+
+/*
+ * AJAX the current query string to the server.
+ *
+ * Currently just fills `div#results` with random content.
+ */
+function queryServer(){
+    lastValue = searchBar.value;
+    var resultsPage = document.querySelectorAll("div#results")[0]
+
+    while(resultsPage.firstChild){
+        resultsPage.removeChild(resultsPage.firstChild);
+    }
+
+    for(var result = 0; result < 200; result++){
+        var newDiv = document.createElement("div");
+        newDiv.innerHTML = Math.random();
+        newDiv.style.textAlign = "center";
+        newDiv.style.color = "#" + Math.floor(Math.random() *
+                16777215).toString(16);
+        resultsPage.appendChild(newDiv)
+    }
 }
diff --git a/static/sass/index.sass b/static/sass/index.sass
index 127ccb0..2b773c5 100644
--- a/static/sass/index.sass
+++ b/static/sass/index.sass
@@ -3,9 +3,10 @@
  */
 
 @import mixins
-@import variables
 
-div.search-field
+div#search-field
+    @extend .t3
+
     bottom: 0
     height: 200px
     left: 0
@@ -25,3 +26,18 @@ div.search-field
         font-size: 1.1em
         padding: 3px
         width: 100%
+
+    &.partly-visible
+        @extend .t3
+
+        margin-top: 2%
+        width: 46%
+
+        #title
+            display: none
+
+div#results
+    background-color: #F6FAFF
+    margin-left: auto
+    margin-right: auto
+    width: 80%
diff --git a/static/sass/main.sass b/static/sass/main.sass
index ed9f8e9..c8c7f2d 100644
--- a/static/sass/main.sass
+++ b/static/sass/main.sass
@@ -21,7 +21,7 @@ div#container
         padding: 10px
 
     div#body
-        padding-bottom: 50px
+        padding-bottom: 110px
         padding-top: 4%
 
         div#center
@@ -33,7 +33,7 @@ div#container
         @extend .t3
 
         background-color: $lightBlue
-        bottom: 0px
+        bottom: 0
         height: 60px
         padding-top: 12px
         position: absolute
diff --git a/templates/index.html b/templates/index.html
index 5d8d092..8815083 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,7 +9,7 @@
 = endblock
 
 = block body
-  <div class="search-field" id="outer">
+  <div id="search-field">
     <div id="title">
       We shift mad bits.
     </div>
@@ -17,5 +17,9 @@
       <input type="text">
     </form>
   </div>
+
+  <div id="results">
+  </div>
+
   {{ assets.tag("index.js") }}
 = endblock