From dbba109a313b7f2ee7f75892365d2c838b4dd3e5 Mon Sep 17 00:00:00 2001
From: Severyn Kozak <severyn.kozak@gmail.com>
Date: Wed, 21 May 2014 19:22:31 -0400
Subject: [PATCH] Add advanced-query live update. Clean up.

Add:
    templates/index.html, static/js/index.advanced-search-form.js
        -Remove commented-out code, `testQueryStringGeneration()`, etc.; prepare
        for merging into `develop`.

    static/js/advanced-search-form.js
        -Perform a live update of the main query bar with a user's inputs in the
        advanced search form.
---
 static/js/index.advanced-search-form.js | 41 ++++++++++++++++-----------------
 static/sass/index.sass                  | 17 ++++++++++----
 templates/index.html                    |  5 ----
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/static/js/index.advanced-search-form.js b/static/js/index.advanced-search-form.js
index 1338936..79deb8d 100644
--- a/static/js/index.advanced-search-form.js
+++ b/static/js/index.advanced-search-form.js
@@ -30,9 +30,12 @@ var searchGroups = $("div#search-groups");
         $("div#sidebar input[type=checkbox]").prop("checked", false);
 
         searchGroups.children("#selected").removeAttr("id");
-        var searchGroup = $("<div/>", {class : "search-group", id : "selected"});
+        var searchGroup = $("<div/>", {
+            class : "search-group",
+            id : "selected"
+        });
         searchGroups.append(
-                searchGroup.append(createSearchGroupInput("language")));
+            searchGroup.append(createSearchGroupInput("language")));
         $("div#sidebar input[type=checkbox]#language").prop("checked", true);
     });
 
@@ -76,6 +79,17 @@ var searchGroups = $("div#search-groups");
         else
             $("div.search-group#selected #" + fieldId).remove()
     });
+
+    var previousAdvancedQuery = "";
+    var searchBar = $("form#search-bar input[name=query]");
+
+    window.setInterval(function(){
+        var currentQuery = assembleQuery();
+        if(currentQuery != previousAdvancedQuery){
+            previousAdvancedQuery = currentQuery;
+            searchBar.val(assembleQuery());
+        }
+    }, 1e3 / 15);
 }());
 
 /*
@@ -88,7 +102,8 @@ function createSearchGroupInput(fieldId){
         "<div id='" + fieldId + "'>",
             "<div class='name'>" + fieldId.replace(/-/g, " ") + "</div>",
             "<input class='" + fieldId + "' name='" + fieldId + "'type='text'>",
-            "<input type='checkbox' name='regex'><span>Regex</span>",
+            "<input type='checkbox' name='regex'>",
+            "<span class='regex'>Regex</span>",
         "</div>"
     ].join("");
 }
@@ -113,7 +128,7 @@ function assembleQuery(){
         groupQueries.push(groupQuery.join(" AND "));
     }
 
-    console.log(groupQueries.join(" OR "));
+    return groupQueries.join(" OR ");
 }
 
 /*
@@ -124,25 +139,9 @@ function assembleQuery(){
  */
 function genFieldQueryString(field, hasRegex){
     var terms = field.value.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"");
-    var query = field.getAttribute("name") + ":" + ((hasRegex)?"re:":"") + terms;
+    var query = field.getAttribute("name") + ":" + (hasRegex?"re:":"") + terms;
     if(field.value.indexOf('"') >= 0){
-        // ['"', field.getAttribute("name"), ":", regex?"re:":"", terms, '"']
         return '"' + query + '"';
     }
     return query;
 }
-
-(function testQueryStringGeneration(){
-    var sampleStrings = [
-        "A B",
-        "A \\ B",
-        '"A \\" B"',
-        '"A \\" B" C D "A B"',
-    ];
-    for(var string = 0; string < sampleStrings.length; string++)
-        console.log([
-                (sampleStrings[string] + "          ").slice(0, 12),
-                ":",
-                "  " + genFieldQueryString($("<input>").val(sampleStrings[string])[0])
-            ].join(""));
-})();
diff --git a/static/sass/index.sass b/static/sass/index.sass
index db5db1c..e20b53f 100644
--- a/static/sass/index.sass
+++ b/static/sass/index.sass
@@ -19,7 +19,6 @@ $minSearchFieldsWidth: 490px
     >li.ui-menu-item a.ui-state-focus
         @include vendor(transition, background-color 0.3s ease-out)
 
-
 div#search-field
     @extend .t2
 
@@ -78,17 +77,21 @@ div#search-field
             padding: 0px
             float: right
 
-            &.clicked, &:hover
+            &:hover
                 img
-                    @extend .t3
-
                     background-color: black
                     cursor: pointer
 
+            &.clicked
+                img
+                    background-color: $baseColor1
+
             &:focus
                 outline: 0
 
             img
+                @extend .t3
+
                 background-color: $baseColor2
                 margin-top: 5px
                 width: 26px
@@ -247,7 +250,8 @@ div#advanced-search
 
                 >div.name
                     display: inline-block
-                    width: 18%
+                    font-size: 90%
+                    width: 20%
 
                 >input[type=text]
                     display: inline-block
@@ -263,6 +267,9 @@ div#advanced-search
                         color: green
                         font-weight: bold
 
+                    &:hover
+                        cursor: checkbox
+
                 span.regex
                     font-size: 80%
 
diff --git a/templates/index.html b/templates/index.html
index eca93e1..8c14b5c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -90,11 +90,6 @@
             </div>
           </div>
         </div>
-
-        <!-- Temporary.  -->
-        <button onclick="assembleQuery()">
-          Assemble
-        </button>
       </div>
     </form>
   </div>