Global legal search enhancements

fec/fec/static/scss/components/_overlay.scss

@@ -27,4 +27,11 @@
     background-repeat: no-repeat;
     background-position: 50% 20%;
   }
+
+  &.position-top {
+    background-position: 50% 100px !important;
+  }
+
 }
+
+

fec/legal/templates/legal-search-results.jinja

@@ -57,6 +57,7 @@ Search legal resources
       </div>
 
       <section class="main__content--right">
+        <div class="overlay is-loading position-top"></div>
         {% if query %}
         <h1 class="main__title data-container__head js-results">Results for &ldquo;{{ query }}&rdquo; in {{document_types[result_type]}}</h1>
         {% endif %}
@@ -195,4 +196,47 @@ Search legal resources
     </div>
   </div>
 </div>
+<script>
+
+const overlayContainer = document.querySelector('.position-top');
+const searchInput = document.querySelector('input[name="search"]');
+const searchSelect = document.querySelector('select[name="search_type"]');
+let params = new URLSearchParams(window.location.search);
+const queries = {
+  search: params.get('search'),
+  search_type: params.get('search_type')
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  const searchForm = document.getElementById('header-search');
+
+  function setLoadingState(isLoading) {
+    if (isLoading) {
+      overlayContainer.style.display = 'block';
+    } else {
+      overlayContainer.style.display = 'none';
+    }
+  }
+
+  // Ends loading state after DOM content loaded
+  window.addEventListener('pageshow', function() {
+    setLoadingState(false);
+    // Make sure state of form always matches querystring parameters
+    let selectedOption = searchSelect.querySelector('option[selected]');
+    if (selectedOption) {
+      searchSelect.value = selectedOption.value;
+    }
+    searchInput.value = queries.search
+  });
+
+  searchSelect.addEventListener('change', function() {
+    setLoadingState(true);
+    searchForm.submit();
+  });
+
+  searchForm.addEventListener('submit', function() {
+    setLoadingState(true);
+  });
+});
+</script>
 {% endblock %}

fec/legal/templates/macros/legal.jinja

@@ -8,7 +8,7 @@
    </div>
   </div>
   <div class="combo combo--search--mini no-mar-b">
-    <input id="search-input" type="text" name="search" class="combo__input" value="">
+    <input id="search-input" type="text" name="search" class="combo__input" value="{{ query }}">
     <button class="combo__button button--search button--standard" type="submit">
       <span class="u-visually-hidden">Search</span>
     </button>
@@ -175,7 +175,6 @@
 {% endif %}
 {% endmacro %}
 
-{# TODO: Re-use keyword_search macro above to use {{ query }} as the input name attr and update AO, MUR, ADR, AF, Rulemakings filters accordingly #}
 {% macro keyword_search_q(result_type, query ) %}
 <div class="filter" data-filter="text">
   <label class="label t-inline-block" for="search-input">Document keyword</label>

fec/legal/views.py

@@ -1362,18 +1362,16 @@ def legal_doc_search_statutes(request):
 
 def get_legal_category_order(results, result_type):
     """ Return categories in pre-defined order, moving categories with empty
-        results to the end. Move chosen category(result_type) to top when not searching 'all'
+        results to the end.
     """
     categories = ['admin_fines', 'advisory_opinions', 'adrs', 'murs', 'regulations', 'rulemakings', 'statutes']
     if not settings.FEATURES['rulemakings']:
         categories.remove('rulemakings')
-    category_order = [x for x in categories if results.get('total_' + x, 0) > 0] +\
+    category_order = [x for x in categories if results.get('total_' + x, 0) > 0] + \
         [x for x in categories if results.get('total_' + x, 0) == 0]
 
     # Default to 'admin_fines' first if result_type is 'all', because we dont want 'all' in category_order
     result_type = 'admin_fines' if result_type == 'all' else result_type
-    # Move chosen search type to the top if not searching 'all'
-    category_order.insert(0, category_order.pop(category_order.index(result_type)))
 
     return category_order