From 5db902b88e0a2a28f796573489d8af2b3052488e Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Tue, 18 Jul 2017 12:14:10 -0400
Subject: [PATCH] Top-search buttons now show 'loading' when the form is
 loading new fields

---
 js/app.js                 | 72 +++++++++++++++++++++++++--------------
 js/custom/headerSearch.js | 72 +++++++++++++++++++++++++--------------
 2 files changed, 94 insertions(+), 50 deletions(-)

diff --git a/js/app.js b/js/app.js
index cf844ad..79e3a9a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -12,7 +12,7 @@ $(document).foundation();
 $(document).ready(function () {
     var page = $('body');
     var header_search = page.find( '.header-search' );
-    
+
     var json_search = window.search;
     var search_fields = [];
     for( var i in json_search ) {
@@ -27,8 +27,10 @@ $(document).ready(function () {
     var parks               = page.find('.park-search');
     var category_loader     = page.find('.category-loader');
     var location_loader     = page.find('.location-loader');
+    var location_button     = page.find('.location-search-form .search-button');
+    var category_button     = page.find('.category-search-form .search-button');
     var selected_item;
-    
+
     function get_select_text(el){
         var text = $(el + ' option:first-child').text();
         return text;
@@ -47,12 +49,12 @@ $(document).ready(function () {
             });
             $('.header-search.' + selectId).html(soptions).prepend(foption);
         }
-        
+
 
     };
 //    sortDropDownListByText('county-search', true);
 //
-//    
+//
 //    sortDropDownListByText('county-search', false);
 
 
@@ -76,20 +78,24 @@ $(document).ready(function () {
             },
              beforeSend: function(){
                 cities.prop('disabled','disabled');
+                location_button.prop('disabled','disabled');
+                location_button.attr('value','Loading...');
                 city_text = get_select_text('.header-search.city-search');
                 $('.city-search option:first-child').text("Loading...");
             },
             complete: function(){
                 cities.prop('disabled',false);
+                location_button.prop('disabled',false);
+                location_button.attr('value','Search');
             },
             success:function(data){
                 var county_data = data;
-            
+
 //                $('option:selected', this).attr('selected', 'selected');
                 option = {};
                 cities.empty();
                 cities.append($('<option>', {value: '', text: 'Select a City'}));
-                
+
                 $.each(county_data.cities, function(index, value){
                    var option = $('<option>', {value: value.city, text: value.name});
                    option.attr('data-id', value.city);
@@ -117,7 +123,9 @@ $(document).ready(function () {
             beforeSend: function(){
                 counties.prop('disabled','disabled');
                 cities.prop('disabled','disabled');
-                
+                location_button.prop('disabled','disabled');
+                location_button.attr('value','Loading...');
+
                 city_text = get_select_text('.header-search.city-search');
                 $('.city-search option:first-child').text("Loading...");
                 county_text = get_select_text('.header-search.county-search');
@@ -126,25 +134,27 @@ $(document).ready(function () {
             complete: function(){
                 counties.prop('disabled',false);
                 cities.prop('disabled',false);
+                location_button.prop('disabled',false);
+                location_button.attr('value','Search');
             },
             success:function(data){
                 var region_data = data;
-       
-                
+
+
 //                $('option:selected', this).attr('selected', 'selected');
                 option = {};
                 cities.empty();
                 cities.append($('<option>', {value: '', text: 'Select a City', 'data-taxonomy': 'default'}));
-                
+
                 $.each(region_data.cities, function(index, value){
-        
+
                    var option = $('<option>', {value: index, text: value});
                    option.attr('data-id', index);
                    cities.append(option);
                 });
                 counties.empty();
                 counties.append($('<option>', {value: '', text: 'Select a County', 'data-taxonomy': 'default'}));
-                
+
                 $.each(region_data.counties, function(index, value){
                    var option = $('<option>', {value: index, text: value});
                    counties.append(option);
@@ -152,7 +162,7 @@ $(document).ready(function () {
             }
         });
     });
-    
+
     // categories on change
     activities.on('change', function(){
 //       $('option:selected', this).attr('selected', 'selected');
@@ -174,7 +184,9 @@ $(document).ready(function () {
             beforeSend: function(){
                 parks.prop('disabled','disabled');
                 destinations.prop('disabled','disabled');
-                
+                category_button.prop('disabled','disabled');
+                category_button.attr('value','Loading...');
+
                 destination_text = get_select_text('.header-search.destination-search');
                 $('.destination-search option:first-child').text("Loading...");
                 park_text = get_select_text('.header-search.park-search');
@@ -183,7 +195,9 @@ $(document).ready(function () {
             complete: function(){
                 parks.prop('disabled',false);
                 destinations.prop('disabled',false);
-                
+                category_button.prop('disabled',false);
+                category_button.attr('value','Search');
+
                 $('.destination-search option:first-child').text(destination_text);
                 $('.park-search option:first-child').text(park_text);
             },
@@ -202,7 +216,7 @@ $(document).ready(function () {
                         destinations.append(option);
                     }
                 });
-                
+
                 option = {};
                 $('.park-search option').not(':eq(0), :selected').remove();
                 var selected = $('.park-search option:selected').val();
@@ -237,7 +251,9 @@ $(document).ready(function () {
             beforeSend: function(){
                 activities.prop('disabled','disabled');
                 destinations.prop('disabled','disabled');
-                
+                category_button.prop('disabled','disabled');
+                category_button.attr('value','Loading...');
+
                 destination_text = get_select_text('.header-search.destination-search');
                 $('.destination-search option:first-child').text("Loading...");
                 activity_text = get_select_text('.header-search.activity-search');
@@ -246,7 +262,9 @@ $(document).ready(function () {
             complete: function(){
                 activities.prop('disabled',false);
                 destinations.prop('disabled',false);
-                
+                category_button.prop('disabled',false);
+                category_button.attr('value','Search');
+
                 $('.destination-search option:first-child').text(destination_text);
                 $('.activity-search option:first-child').text(activity_text);
             },
@@ -255,7 +273,7 @@ $(document).ready(function () {
                 option = {};
                 $('.destination-search option').not(':eq(0), :selected').remove();
                 var selected = $('.destination-search option:selected').val();
-       
+
 //               counties.append($('<option>', {value: 'default', text: 'County', 'data-taxonomy': 'default'}));
                 $.each(park_data.categories.Destinations,function(index,value){
                     if(value.category !== selected){
@@ -264,11 +282,11 @@ $(document).ready(function () {
                         destinations.append(option);
                     }
                 });
-                
+
                 option = {};
                 $('.activity-search option').not(':eq(0), :selected').remove();
                 var selected = $('.activity-search option:selected').val();
-          
+
 //               counties.append($('<option>', {value: 'default', text: 'County', 'data-taxonomy': 'default'}));
                 $.each(park_data.categories.Activities,function(index,value){
                     if(value.category !== selected){
@@ -301,17 +319,21 @@ $(document).ready(function () {
 //                category_loader.css("display", 'block');
                 activities.prop('disabled','disabled');
                 parks.prop('disabled','disabled');
-                
+                category_button.prop('disabled','disabled');
+                category_button.attr('value','Loading...');
+
                 park_text = get_select_text('.header-search.park-search');
                 $('.park-search option:first-child').text("Loading...");
                 activity_text = get_select_text('.header-search.activity-search');
                 $('.activity-search option:first-child').text("Loading...");
-                
+
             },
             complete: function(){
                 activities.prop('disabled',false);
                 parks.prop('disabled',false);
-                
+                category_button.prop('disabled',true);
+                category_button.attr('value','Search');
+
                 $('.park-search option:first-child').text(park_text);
                 $('.activity-search option:first-child').text(activity_text);
             },
@@ -331,7 +353,7 @@ $(document).ready(function () {
                 option = {};
                 $('.park-search option').not(':eq(0), :selected').remove();
                 var selected = $('.park-search option:selected').val();
-     
+
 //               parks.append($('<option>', {value: 'default', text: 'County', 'data-taxonomy': 'default'}));
                 $.each(destination_data.categories.Parks,function(index,value){
                     if(value.category !== selected){
diff --git a/js/custom/headerSearch.js b/js/custom/headerSearch.js
index 203f670..20cc1f2 100644
--- a/js/custom/headerSearch.js
+++ b/js/custom/headerSearch.js
@@ -3,7 +3,7 @@ $(document).foundation();
 $(document).ready(function () {
     var page = $('body');
     var header_search = page.find( '.header-search' );
-    
+
     var json_search = window.search;
     var search_fields = [];
     for( var i in json_search ) {
@@ -18,8 +18,10 @@ $(document).ready(function () {
     var parks               = page.find('.park-search');
     var category_loader     = page.find('.category-loader');
     var location_loader     = page.find('.location-loader');
+    var location_button     = page.find('.location-search-form .search-button');
+    var category_button     = page.find('.category-search-form .search-button');
     var selected_item;
-    
+
     function get_select_text(el){
         var text = $(el + ' option:first-child').text();
         return text;
@@ -38,12 +40,12 @@ $(document).ready(function () {
             });
             $('.header-search.' + selectId).html(soptions).prepend(foption);
         }
-        
+
 
     };
 //    sortDropDownListByText('county-search', true);
 //
-//    
+//
 //    sortDropDownListByText('county-search', false);
 
 
@@ -67,20 +69,24 @@ $(document).ready(function () {
             },
              beforeSend: function(){
                 cities.prop('disabled','disabled');
+                location_button.prop('disabled','disabled');
+                location_button.attr('value','Loading...');
                 city_text = get_select_text('.header-search.city-search');
                 $('.city-search option:first-child').text("Loading...");
             },
             complete: function(){
                 cities.prop('disabled',false);
+                location_button.prop('disabled',false);
+                location_button.attr('value','Search');
             },
             success:function(data){
                 var county_data = data;
-            
+
 //                $('option:selected', this).attr('selected', 'selected');
                 option = {};
                 cities.empty();
                 cities.append($('<option>', {value: '', text: 'Select a City'}));
-                
+
                 $.each(county_data.cities, function(index, value){
                    var option = $('<option>', {value: value.city, text: value.name});
                    option.attr('data-id', value.city);
@@ -108,7 +114,9 @@ $(document).ready(function () {
             beforeSend: function(){
                 counties.prop('disabled','disabled');
                 cities.prop('disabled','disabled');
-                
+                location_button.prop('disabled','disabled');
+                location_button.attr('value','Loading...');
+
                 city_text = get_select_text('.header-search.city-search');
                 $('.city-search option:first-child').text("Loading...");
                 county_text = get_select_text('.header-search.county-search');
@@ -117,25 +125,27 @@ $(document).ready(function () {
             complete: function(){
                 counties.prop('disabled',false);
                 cities.prop('disabled',false);
+                location_button.prop('disabled',false);
+                location_button.attr('value','Search');
             },
             success:function(data){
                 var region_data = data;
-       
-                
+
+
 //                $('option:selected', this).attr('selected', 'selected');
                 option = {};
                 cities.empty();
                 cities.append($('<option>', {value: '', text: 'Select a City', 'data-taxonomy': 'default'}));
-                
+
                 $.each(region_data.cities, function(index, value){
-        
+
                    var option = $('<option>', {value: index, text: value});
                    option.attr('data-id', index);
                    cities.append(option);
                 });
                 counties.empty();
                 counties.append($('<option>', {value: '', text: 'Select a County', 'data-taxonomy': 'default'}));
-                
+
                 $.each(region_data.counties, function(index, value){
                    var option = $('<option>', {value: index, text: value});
                    counties.append(option);
@@ -143,7 +153,7 @@ $(document).ready(function () {
             }
         });
     });
-    
+
     // categories on change
     activities.on('change', function(){
 //       $('option:selected', this).attr('selected', 'selected');
@@ -165,7 +175,9 @@ $(document).ready(function () {
             beforeSend: function(){
                 parks.prop('disabled','disabled');
                 destinations.prop('disabled','disabled');
-                
+                category_button.prop('disabled','disabled');
+                category_button.attr('value','Loading...');
+
                 destination_text = get_select_text('.header-search.destination-search');
                 $('.destination-search option:first-child').text("Loading...");
                 park_text = get_select_text('.header-search.park-search');
@@ -174,7 +186,9 @@ $(document).ready(function () {
             complete: function(){
                 parks.prop('disabled',false);
                 destinations.prop('disabled',false);
-                
+                category_button.prop('disabled',false);
+                category_button.attr('value','Search');
+
                 $('.destination-search option:first-child').text(destination_text);
                 $('.park-search option:first-child').text(park_text);
             },
@@ -193,7 +207,7 @@ $(document).ready(function () {
                         destinations.append(option);
                     }
                 });
-                
+
                 option = {};
                 $('.park-search option').not(':eq(0), :selected').remove();
                 var selected = $('.park-search option:selected').val();
@@ -228,7 +242,9 @@ $(document).ready(function () {
             beforeSend: function(){
                 activities.prop('disabled','disabled');
                 destinations.prop('disabled','disabled');
-                
+                category_button.prop('disabled','disabled');
+                category_button.attr('value','Loading...');
+
                 destination_text = get_select_text('.header-search.destination-search');
                 $('.destination-search option:first-child').text("Loading...");
                 activity_text = get_select_text('.header-search.activity-search');
@@ -237,7 +253,9 @@ $(document).ready(function () {
             complete: function(){
                 activities.prop('disabled',false);
                 destinations.prop('disabled',false);
-                
+                category_button.prop('disabled',false);
+                category_button.attr('value','Search');
+
                 $('.destination-search option:first-child').text(destination_text);
                 $('.activity-search option:first-child').text(activity_text);
             },
@@ -246,7 +264,7 @@ $(document).ready(function () {
                 option = {};
                 $('.destination-search option').not(':eq(0), :selected').remove();
                 var selected = $('.destination-search option:selected').val();
-       
+
 //               counties.append($('<option>', {value: 'default', text: 'County', 'data-taxonomy': 'default'}));
                 $.each(park_data.categories.Destinations,function(index,value){
                     if(value.category !== selected){
@@ -255,11 +273,11 @@ $(document).ready(function () {
                         destinations.append(option);
                     }
                 });
-                
+
                 option = {};
                 $('.activity-search option').not(':eq(0), :selected').remove();
                 var selected = $('.activity-search option:selected').val();
-          
+
 //               counties.append($('<option>', {value: 'default', text: 'County', 'data-taxonomy': 'default'}));
                 $.each(park_data.categories.Activities,function(index,value){
                     if(value.category !== selected){
@@ -292,17 +310,21 @@ $(document).ready(function () {
 //                category_loader.css("display", 'block');
                 activities.prop('disabled','disabled');
                 parks.prop('disabled','disabled');
-                
+                category_button.prop('disabled','disabled');
+                category_button.attr('value','Loading...');
+
                 park_text = get_select_text('.header-search.park-search');
                 $('.park-search option:first-child').text("Loading...");
                 activity_text = get_select_text('.header-search.activity-search');
                 $('.activity-search option:first-child').text("Loading...");
-                
+
             },
             complete: function(){
                 activities.prop('disabled',false);
                 parks.prop('disabled',false);
-                
+                category_button.prop('disabled',true);
+                category_button.attr('value','Search');
+
                 $('.park-search option:first-child').text(park_text);
                 $('.activity-search option:first-child').text(activity_text);
             },
@@ -322,7 +344,7 @@ $(document).ready(function () {
                 option = {};
                 $('.park-search option').not(':eq(0), :selected').remove();
                 var selected = $('.park-search option:selected').val();
-     
+
 //               parks.append($('<option>', {value: 'default', text: 'County', 'data-taxonomy': 'default'}));
                 $.each(destination_data.categories.Parks,function(index,value){
                     if(value.category !== selected){
-- 
2.17.1