From 914eb8964724e7f223dbd3af4443a233838946f7 Mon Sep 17 00:00:00 2001
From: plutonik <plutonik@gmx.net>
Date: Thu, 23 Nov 2017 17:49:24 +0100
Subject: [PATCH] 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
---
 pages/search/_filter-sections.html |  4 ++--
 resources/scripts/app.js           | 30 +++++++++++++++++++++++++-----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/pages/search/_filter-sections.html b/pages/search/_filter-sections.html
index 629193e42..ae3faebbb 100644
--- 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
index c47e8d1b0..5197d3c28 100644
--- 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();
+    }
 
     //------------------------------------------//