feat(search): Toggle "entire search" & "sections" #286

* if entire search is checked, all other options are unchecked * if any of the sections is checked, entire search is unchecked * if all sections are selected, all will be unchecked and entire search will be checked again
HistoryAtState · Nov 23, 2017 · 914eb89 · 914eb89
1 parent 33dc71b
commit 914eb89
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/pages/search/_filter-sections.html b/pages/search/_filter-sections.html
@@ -4,12 +4,12 @@
         <legend class="sr-only">Select sections</legend>
             <ul class="hsg-search-inputs-vertical">
                 <li>
-                    <input id="entire-site-input" class="hsg-search-input" type="checkbox" name="within" value="entire_site"/>
+                    <input id="entire-site-input" class="hsg-search-input global" type="checkbox" name="within" value="entire_site" checked="checked"/>
                     <label id="entire-site-label" for="entire-site-input" class="hsg-search-input-label">Entire Office of The Historian Website</label>
                 </li>
                 <ul class="filter-subsections">
                     <li data-template="templates:each" data-template-from="sections" data-template-to="section">
-                        <input class="hsg-search-input" type="checkbox" name="within" data-template="search:section-input-attributes"/>
+                        <input class="hsg-search-input section" type="checkbox" name="within" data-template="search:section-input-attributes"/>
                         <label class="hsg-search-input-label" data-template="search:section-label">
                             <span data-template="search:section-label-string"/>
                         </label>

diff --git a/resources/scripts/app.js b/resources/scripts/app.js
@@ -148,12 +148,32 @@ $(document).ready(function() {
 
     filterReset.on('click', resetFilter);
 
-    var sectionFilterForm = $('#sectionForm');
-    var sectionFilters = document.querySelectorAll('.filter-subsections .hsg-search-input');
-    var entireSiteFilter = $('#entire-site-input');
+    /**
+     * Toggle activation of options "search entire site" or selected "sections"
+     */
+    var global = $('.global'),
+        sections = $('.section');
+
+    global.on("change", function() {
+        toggleAllSections(this.checked);
+    });
+
+    sections.on("change", function() {
+        if (allSelected()) {
+            global.prop('checked', true);
+            toggleAllSections(true)
+            return
+        }
+        global.prop('checked', false);
+    });
 
-    // "Search entire site" is checked per default
-    entireSiteFilter.attr('checked', true);
+    function toggleAllSections(state) {
+        sections.prop("checked", !state);
+    }
+
+    function allSelected() {
+        return sections.filter(':checked').size() === sections.size();
+    }
 
     //------------------------------------------//