From d88febdcbfd12d06eb888b3e9737b60534b4e33b Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Tue, 30 May 2017 10:02:08 -0400
Subject: [PATCH] removing ajax loader animation

replacing the header search loading animation with loading text in the dropdown markup. changing the
off canvas mark up to not use the same classes as the header search
---
 js/app.js                 | 76 +++++++++++++++++++++++++++++++--------
 js/custom/headerSearch.js | 76 +++++++++++++++++++++++++++++++--------
 parts/oc-trail-form.php   |  2 +-
 parts/oc-trail-search.php | 65 +++++++++++++++++++++++++++++++++
 4 files changed, 188 insertions(+), 31 deletions(-)
 create mode 100644 parts/oc-trail-search.php

diff --git a/js/app.js b/js/app.js
index d2a99ce..9d15b8d 100644
--- a/js/app.js
+++ b/js/app.js
@@ -19,7 +19,6 @@ $(document).ready(function () {
         search_fields[i] = json_search[i];
     }
 
-    
     var activities          = page.find('.activity-search');
     var counties            = page.find('.county-search');
     var cities              = page.find('.city-search');
@@ -30,6 +29,11 @@ $(document).ready(function () {
     var location_loader     = page.find('.location-loader');
     var selected_item;
     
+    function get_select_text(el){
+        var text = $(el + ' option:first-child').text();
+        return text;
+    }
+    
     // member info data on change
     counties.on('change', function(){
 //        $('option:selected', this).attr('selected', 'selected');
@@ -38,7 +42,7 @@ $(document).ready(function () {
             county = 'false';
         }
         var selected = $('option:selected', this).val();
-        
+        var city_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -48,10 +52,12 @@ $(document).ready(function () {
                 county: county,
             },
              beforeSend: function(){
-                location_loader.css("display", 'block');
+                cities.prop('disabled','disabled');
+                city_text = get_select_text('.header-search.city-search');
+                $('.city-search option:first-child').text("Loading...");
             },
             complete: function(){
-                location_loader.css("display", 'none');
+                cities.prop('disabled',false);
             },
             success:function(data){
                 var county_data = data;
@@ -76,7 +82,7 @@ $(document).ready(function () {
             region = 'false';
         }
         var selected = $('option:selected', this).val();
-        
+        var city_text, county_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -86,10 +92,17 @@ $(document).ready(function () {
                 region: region,
             },
             beforeSend: function(){
-                location_loader.css("display", 'block');
+                counties.prop('disabled','disabled');
+                cities.prop('disabled','disabled');
+                
+                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');
+                $('.county-search option:first-child').text("Loading...");
             },
             complete: function(){
-                location_loader.css("display", 'none');
+                counties.prop('disabled',false);
+                cities.prop('disabled',false);
             },
             success:function(data){
                 var region_data = data;
@@ -124,6 +137,7 @@ $(document).ready(function () {
         if(activity === ''){
             activity = 'false';
         }
+        var park_text,destination_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -135,10 +149,20 @@ $(document).ready(function () {
 
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+                parks.prop('disabled','disabled');
+                destinations.prop('disabled','disabled');
+                
+                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');
+                $('.park-search option:first-child').text("Loading...");
             },
             complete: function(){
-                category_loader.css("display", 'none');
+                parks.prop('disabled',false);
+                destinations.prop('disabled',false);
+                
+                $('.destination-search option:first-child').text(destination_text);
+                $('.park-search option:first-child').text(park_text);
             },
             success:function(data){
                var activity_data = data;
@@ -177,7 +201,7 @@ $(document).ready(function () {
         if(park === ''){
             park = 'false';
         }
-
+        var destination_text, activity_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -188,10 +212,20 @@ $(document).ready(function () {
                 others: {'destination' : $('.destination-search option:selected').val(), 'activity' : $('.activity-search option:selected').val()}
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+                activities.prop('disabled','disabled');
+                destinations.prop('disabled','disabled');
+                
+                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');
+                $('.activity-search option:first-child').text("Loading...");
             },
             complete: function(){
-                category_loader.css("display", 'none');
+                activities.prop('disabled',false);
+                destinations.prop('disabled',false);
+                
+                $('.destination-search option:first-child').text(destination_text);
+                $('.activity-search option:first-child').text(activity_text);
             },
             success:function(data){
                var park_data = data;
@@ -230,6 +264,7 @@ $(document).ready(function () {
         if(destination === ''){
             destination = 'false';
         }
+        var park_text, activity_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -240,13 +275,24 @@ $(document).ready(function () {
                 others: {'activity' : $('.activity-search option:selected').val(), 'park' : $('.park-search option:selected').val()}
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+//                category_loader.css("display", 'block');
+                activities.prop('disabled','disabled');
+                parks.prop('disabled','disabled');
+                
+                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(){
-                category_loader.css("display", 'none');
+                activities.prop('disabled',false);
+                parks.prop('disabled',false);
+                
+                $('.park-search option:first-child').text(park_text);
+                $('.activity-search option:first-child').text(activity_text);
             },
             success:function(data){
-                console.log(data.categories);
                var destination_data = data;
                 option = {};
                 $('.activity-search option').not(':eq(0), :selected').remove();
diff --git a/js/custom/headerSearch.js b/js/custom/headerSearch.js
index 5d42d07..ea35f25 100644
--- a/js/custom/headerSearch.js
+++ b/js/custom/headerSearch.js
@@ -10,7 +10,6 @@ $(document).ready(function () {
         search_fields[i] = json_search[i];
     }
 
-    
     var activities          = page.find('.activity-search');
     var counties            = page.find('.county-search');
     var cities              = page.find('.city-search');
@@ -21,6 +20,11 @@ $(document).ready(function () {
     var location_loader     = page.find('.location-loader');
     var selected_item;
     
+    function get_select_text(el){
+        var text = $(el + ' option:first-child').text();
+        return text;
+    }
+    
     // member info data on change
     counties.on('change', function(){
 //        $('option:selected', this).attr('selected', 'selected');
@@ -29,7 +33,7 @@ $(document).ready(function () {
             county = 'false';
         }
         var selected = $('option:selected', this).val();
-        
+        var city_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -39,10 +43,12 @@ $(document).ready(function () {
                 county: county,
             },
              beforeSend: function(){
-                location_loader.css("display", 'block');
+                cities.prop('disabled','disabled');
+                city_text = get_select_text('.header-search.city-search');
+                $('.city-search option:first-child').text("Loading...");
             },
             complete: function(){
-                location_loader.css("display", 'none');
+                cities.prop('disabled',false);
             },
             success:function(data){
                 var county_data = data;
@@ -67,7 +73,7 @@ $(document).ready(function () {
             region = 'false';
         }
         var selected = $('option:selected', this).val();
-        
+        var city_text, county_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -77,10 +83,17 @@ $(document).ready(function () {
                 region: region,
             },
             beforeSend: function(){
-                location_loader.css("display", 'block');
+                counties.prop('disabled','disabled');
+                cities.prop('disabled','disabled');
+                
+                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');
+                $('.county-search option:first-child').text("Loading...");
             },
             complete: function(){
-                location_loader.css("display", 'none');
+                counties.prop('disabled',false);
+                cities.prop('disabled',false);
             },
             success:function(data){
                 var region_data = data;
@@ -115,6 +128,7 @@ $(document).ready(function () {
         if(activity === ''){
             activity = 'false';
         }
+        var park_text,destination_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -126,10 +140,20 @@ $(document).ready(function () {
 
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+                parks.prop('disabled','disabled');
+                destinations.prop('disabled','disabled');
+                
+                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');
+                $('.park-search option:first-child').text("Loading...");
             },
             complete: function(){
-                category_loader.css("display", 'none');
+                parks.prop('disabled',false);
+                destinations.prop('disabled',false);
+                
+                $('.destination-search option:first-child').text(destination_text);
+                $('.park-search option:first-child').text(park_text);
             },
             success:function(data){
                var activity_data = data;
@@ -168,7 +192,7 @@ $(document).ready(function () {
         if(park === ''){
             park = 'false';
         }
-
+        var destination_text, activity_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -179,10 +203,20 @@ $(document).ready(function () {
                 others: {'destination' : $('.destination-search option:selected').val(), 'activity' : $('.activity-search option:selected').val()}
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+                activities.prop('disabled','disabled');
+                destinations.prop('disabled','disabled');
+                
+                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');
+                $('.activity-search option:first-child').text("Loading...");
             },
             complete: function(){
-                category_loader.css("display", 'none');
+                activities.prop('disabled',false);
+                destinations.prop('disabled',false);
+                
+                $('.destination-search option:first-child').text(destination_text);
+                $('.activity-search option:first-child').text(activity_text);
             },
             success:function(data){
                var park_data = data;
@@ -221,6 +255,7 @@ $(document).ready(function () {
         if(destination === ''){
             destination = 'false';
         }
+        var park_text, activity_text;
         jQuery.ajax({
             type:"POST",
             dataType: 'json',
@@ -231,13 +266,24 @@ $(document).ready(function () {
                 others: {'activity' : $('.activity-search option:selected').val(), 'park' : $('.park-search option:selected').val()}
             },
             beforeSend: function(){
-                category_loader.css("display", 'block');
+//                category_loader.css("display", 'block');
+                activities.prop('disabled','disabled');
+                parks.prop('disabled','disabled');
+                
+                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(){
-                category_loader.css("display", 'none');
+                activities.prop('disabled',false);
+                parks.prop('disabled',false);
+                
+                $('.park-search option:first-child').text(park_text);
+                $('.activity-search option:first-child').text(activity_text);
             },
             success:function(data){
-                console.log(data.categories);
                var destination_data = data;
                 option = {};
                 $('.activity-search option').not(':eq(0), :selected').remove();
diff --git a/parts/oc-trail-form.php b/parts/oc-trail-form.php
index 3ebb058..c12e080 100644
--- a/parts/oc-trail-form.php
+++ b/parts/oc-trail-form.php
@@ -1,2 +1,2 @@
  <?php include(get_template_directory().'/parts/search-filters.php'); ?>
- <?php include(get_template_directory().'/parts/trail-search.php'); ?>
\ No newline at end of file
+ <?php include(get_template_directory().'/parts/oc-trail-search.php'); ?>
\ No newline at end of file
diff --git a/parts/oc-trail-search.php b/parts/oc-trail-search.php
new file mode 100644
index 0000000..6508def
--- /dev/null
+++ b/parts/oc-trail-search.php
@@ -0,0 +1,65 @@
+      <h3>Find Trails & Maps</h3>
+            <div class="row">
+                <div class="small-12 columns search-header">
+<!--                   <a class="reset-search" href="">Reset Search</a>-->
+                    <form class="text-search-form" method="post" enctype="multipart/form-data" action="<?php echo get_permalink(get_option('glm_members_database_option_members_list_id')); ?>?action=list">
+                        <span>Search for Trail</span>
+                        <input name="textSearch" type="text" method="post">
+                        <input class="search-button right" type="submit" value="Search" name="submit">
+                    </form>
+                    
+                    <form class="location-search-form" action="<?php echo get_permalink(get_option('glm_members_database_option_members_list_id')); ?>?action=list" method="post" enctype="multipart/form-data">
+                        <span>Search by Location</span>
+                        <select class="oc-search region-search" name="regionUserSearch[]" >
+                            <option value="">Select a Region</option>
+                            <?php foreach($regions as $region){ ?>
+
+                                <option value="<?php echo $region['region']; ?>"><?php echo $region['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <select class="oc-search county-search" name="counties[]" >
+                            <option value="">Select a County</option>
+                            <?php foreach($counties as $county){ ?>
+
+                                <option value="<?php echo $county['county']; ?>"><?php echo $county['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <select class="oc-search city-search" name="cities[]" >
+                            <option value="">Select a City</option>
+                            <?php foreach($cities as $city){ ?>
+                                <option value="<?php echo $city['city']; ?>"><?php echo $city['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <input class="search-button right" type="submit" value="Search" name="submit">
+                        <div class="location-loader">
+                            <div class="loader"></div>
+                        </div>
+                    </form>
+                   
+                    <form class="category-search-form" action="<?php echo get_permalink(get_option('glm_members_database_option_members_list_id')); ?>?action=list" method="post" enctype="multipart/form-data">
+                        <span>Search by</span>
+                        <select class="oc-search destination-search" name="categories[]" >
+                             <option value="">Select a Destination</option>
+                            <?php foreach($destinations as $destination){ ?>
+                                <option value="<?php echo $destination['category']; ?>"><?php echo $destination['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <select class="oc-search activity-search" name="categories[]" >
+                            <option value="">Select an Activity</option>
+                            <?php foreach($activities as $activity){ ?>
+                                <option value="<?php echo $activity['category']; ?>"><?php echo $activity['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <select class="oc-search park-search" name="categories[]" >
+                            <option value="">Select a Park</option>
+                            <?php foreach($parks as $park){ ?>
+                                <option value="<?php echo $park['category']; ?>"><?php echo $park['name']; ?></option>
+                            <?php } ?>
+                        </select>
+                        <input class="search-button right" type="submit" value="Search" name="submit">
+                        <div class="category-loader">
+                            <div class="loader"></div>
+                        </div>
+                    </form>
+                </div>
+            </div>
\ No newline at end of file
-- 
2.17.1