Add ability to add input fields/groups.

Add:
    static/js/index.js
        -Add callback functions to the buttons/checkboxes in `#sidebar`, which
        allow the user to add new search groups, and to add input fields to the
        currently selected search group.

Rem:
    static/js/index.js
        -Remove obsolete functions which allowed the creation/deletion of search
        groups in the old form.

static/js/index.js

@@ -171,65 +171,33 @@ function loadMoreResults(){
     }
 }
 
-var searchGroups = [];
-var currentSearchGroup = 0;
-
+var searchGroups = $("div#search-groups");
 // Create a new search group.
-$("div#add-group").click(function(){
-    storeSearchGroup();
-    currentSearchGroup = searchGroups.length;
-    $("span#current, span#total").text(currentSearchGroup + 1);
-});
-
-// Save the current's search group's values, and load the previous one.
-$("div#previous-group").click(function(){
-    console.log(currentSearchGroup);
-    if(0 < currentSearchGroup){
-        storeSearchGroup();
-        currentSearchGroup--;
-        loadSearchGroup();
-        $("span#current").text(currentSearchGroup + 1);
-    }
-});
-
-// Save the current's search group's values, and load the next one.
-$("div#next-group").click(function(){
-    console.log(currentSearchGroup);
-    if(currentSearchGroup < searchGroups.length - 1){
-        storeSearchGroup();
-        currentSearchGroup++;
-        loadSearchGroup();
-        $("span#current").text(currentSearchGroup + 1);
-    }
+$("button#add-group").click(function(){
+    var searchGroup = $("<div/>", {class : "search-group"});
+    searchGroups.append(searchGroup.append(createSearchGroupInput("language")));
 });
 
-/*
- * Store the advanced search form's values into the currently selected search
- * group object.
- */
-function storeSearchGroup(){
-    var searchGroup = {};
-    var inputs = $("div#advanced-search input[type='text']");
-
-    for(var input = 0; input < inputs.length; input++)
-        if(inputs[input].value.length > 0){
-            searchGroup[inputs[input].id] = inputs[input].value;
-            inputs[input].value = "";
-        }
-
-    if(currentSearchGroup < searchGroups.length)
-        searchGroups[currentSearchGroup] = searchGroup;
+$("div#advanced-search #sidebar input[type=checkbox]").click(function(){
+    var fieldId = $(this).attr("id");
+    if($(this).is(":checked"))
+        $("div.search-group#selected").append(
+            $.parseHTML(createSearchGroupInput(fieldId)));
     else
-        searchGroups.push(searchGroup);
-}
+        $("div.search-group#selected #" + fieldId).remove()
+})
 
 /*
- * Load the values belonging to the currently selected search group object into
- * the advanced search form.
+ * Return an HTML string representing a new input field div in a search group.
+ *
+ * @param fieldId The id of the input field div, and its child elements.
  */
-function loadSearchGroup(groupNumber){
-    for(var inputId in searchGroups[currentSearchGroup]){
-        var selector = "div#advanced-search input[type='text']#" + inputId;
-        $(selector).val(searchGroups[currentSearchGroup][inputId]);
-    }
+function createSearchGroupInput(fieldId){
+    return [
+        "<div id='" + fieldId + "'>",
+            "<div>" + fieldId + "</div>",
+            "<input id='" + "'type='text'>",
+            "<input type='checkbox' name='regex'><span>Regex</span>",
+        "</div>"
+    ].join("");
 }

static/sass/index.sass

@@ -70,8 +70,6 @@ div#search-field
                 font-style: italic
 
     form#search-bar
-        min-width: 510px
-
         input[type="text"], button
             @extend .t3
             @include vendor(box-sizing, border-box)
@@ -114,6 +112,8 @@ div#search-field
         div#advanced-search
             background-color: white
             border: 1px solid $baseColor3
+            font-size: 96%
+            min-width: 490px
             padding-top: 0px
             overflow-x: auto
             height: 400px
@@ -150,7 +150,6 @@ div#search-field
 
                                 background-color: $lightGray
                                 border: none
-                                font-size: 96%
                                 padding: 3%
                                 width: 85%
 
@@ -176,21 +175,29 @@ div#search-field
                     background-color: $lightBlue
                     border: none
                     color: white
-                    font-weight: bold
                     height: 40px
                     margin-bottom: 10%
+                    overflow: hidden
+                    white-space: nowrap
                     width: 40px
 
+                    span
+                        font-size: 150%
+                        font-weight: bold
+                        margin-left: 6px
+                        margin-right: 10px
+
                     &:hover
                         @extend .t3
 
                         background-color: $blue
                         cursor: pointer
+                        width: 90%
 
             #search-groups
                 margin-top: 2%
                 max-height: 93%
-                overflow-y: scroll
+                overflow-y: auto
                 width: 75%
 
                 .search-group
@@ -212,6 +219,12 @@ div#search-field
                         input[type=checkbox]
                             margin-left: 2%
 
+                            &:checked + span
+                                @extend .t2
+
+                                color: green
+                                font-weight: bold
+
                         span
                             font-size: 80%
 

templates/index.html

@@ -40,7 +40,7 @@
           </div>
           <ul>
             <li>
-              <input type="checkbox" id="language"/>
+              <input type="checkbox" id="language" checked/>
               <label for="language"><div>languages</div></label>
             </li>
             <li>
@@ -73,45 +73,19 @@
             </li>
           </ul>
           <button id="add-group">
-            <!-- <div> -->
-              +
-            <!-- </div> -->
+            <div>
+              <span>+</span> Add group
+            </div>
           </button>
         </div>
         <div id="search-groups">
-          <div class="search-group">
-            <div>
-              <div>Authors</div>
-              <input type="text">
-              <input type="checkbox" name="regex"><span>Regex?</span>
-            </div>
-            <div>
-              <div>Language</div>
-              <input type="text">
-              <input type="checkbox" name="regex"><span>Regex?</span>
+          <div class="search-group" id="selected">
+            <div id="language">
+              <div>language</div>
+              <input id="language" type="text">
+              <input type="checkbox" name="regex"><span>Regex</span>
             </div>
           </div>
-          <div class="search-group">Hello, world. 2</div>
-          <div class="search-group">Hello, world. 3</div>
-          <div class="search-group">Hello, world. 4</div>
-          <div class="search-group">Hello, world. 5</div>
-          <div class="search-group">Hello, world. 6</div>
-          <div class="search-group">Hello, world. 7</div>
-          <div class="search-group">Hello, world. 8</div>
-          <div class="search-group">Hello, world. 9</div>
-          <div class="search-group">Hello, world. 10</div>
-          <div class="search-group">Hello, world. 11</div>
-          <div class="search-group">Hello, world. 12</div>
-          <div class="search-group">Hello, world. 13</div>
-          <div class="search-group">Hello, world. 14</div>
-          <div class="search-group">Hello, world. 15</div>
-          <div class="search-group">Hello, world. 16</div>
-          <div class="search-group">Hello, world. 17</div>
-          <div class="search-group">Hello, world. 18</div>
-          <div class="search-group">Hello, world. 19</div>
-          <div class="search-group">Hello, world. 20</div>
-          <div class="search-group">Hello, world. 21</div>
-          <div class="search-group">Hello, world. 22</div>
         </div>
       </div>
     </form>