Updated member map directions process and other fixes.

Updated what we send to Google Maps when providing driving directions to include user's current location.
Added fix for problems with dialog box titles when Bootstrap is loaded.

diff --git a/css/front.css b/css/front.css
index 08c5904..766112b 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -1323,8 +1323,8 @@ glm-member-detail-content-toggle {
 }
 .glm-weather-block-text {
     color: #333333;
-    margin: 0; 
-    font-weight: bold; 
+    margin: 0;
+    font-weight: bold;
     font-size: 15px;
     display: block;
     float: right;
@@ -1334,3 +1334,8 @@ glm-member-detail-content-toggle {
 }
 
 /* City Weather End */
+
+/* Fix for jQuery Dialog box title text invading box content area. Caused by Bootstrap. */
+.ui-dialog-titlebar {
+    line-height: 1em;
+}

diff --git a/js/front.js b/js/front.js
index 129bf6b..c1a8f8b 100644 (file)
--- a/js/front.js
+++ b/js/front.js
@@ -1,9 +1 @@
-        jQuery("#MemberDrivingDirectionsForm").submit(function(){
-            var place = jQuery("#MemberLocation").val().replace( new RegExp( " ", "g" ), '+' );
-            var lat = jQuery("#MemberLat").val();
-            var lon = jQuery("#MemberLon").val();
-            var url = "https://maps.google.com/maps?daddr=" + place + "%40" + lat + "," + lon;
-            window.open(url, '_blank');
-            return false;
-        });
 /* Nothing here yet */
\ No newline at end of file

diff --git a/readme.txt b/readme.txt
index c5587d8..50f25fd 100755 (executable)
--- a/readme.txt
+++ b/readme.txt
@@ -69,6 +69,8 @@ There is of course much more to this.
 = PENDING =
 * Now locking out other processes from database update on an Add-On when one process is doing the update.
 * Added parameter to glmMembersConfigArraySetup() in glmPluginSupport.php to use names for resulting array if needed.
+* Updated what we send to Google Maps when providing driving directions to include user's current location.
+* Added fix for problems with dialog box titles when Bootstrap is loaded.
 
 = 2.10.46 =
 * Moved session startup from adminHooks.php to index.php to ensure there's always a session started.

diff --git a/views/front/members/detail.html b/views/front/members/detail.html
index 9b7a36c..b84b18b 100755 (executable)
--- a/views/front/members/detail.html
+++ b/views/front/members/detail.html
@@ -134,7 +134,7 @@
                 </div>
 
     {if $settings.detail_show_map}
-                
+
                 <div id="glm-locationMap-container">
       {if $settings.selected_map_interface == 1}
                     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
@@ -147,18 +147,18 @@
                     <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
                     <script type="text/javascript">var enableDraggable = true;</script>
                     <div id="glm-locationMap" class="glm-map glma-small-12 glma-columns">(map loads here)</div>
-      {/if}   
+      {/if}
                 </div>
                 <div id="glm-member-detail-map-button" class="button map-button">view map</div>
 
                     <div id="member-lat" rel="{$member.lat}"></div>
                     <div id="member-lon" rel="{$member.lon}"></div>
                     <form id="MemberDrivingDirectionsForm" name="MemberDrivingDirectionsForm" method="post" action="">
-                        <input type="hidden" id="MemberLocation" name="MemberLocation" value="{$member.member_name|escape}">
                         <input type="hidden" id="MemberLat" name="MemberLat" value="{$member.lat}">
                         <input type="hidden" id="MemberLon" name="MemberLon" value="{$member.lon}">
                         <input type="submit" class="button map-button text-center" id="MemberDrivingDirectionSubmit" name="MemberDrivingDirectionSubmit" value="Directions">
                     </form>
+                    <br>
 
      {/if}
             </div>
@@ -354,11 +354,109 @@
     </div>
     {apply_filters('glm-member-db-front-members-detail-pageBottom', '', $member.id)}
 
+    <div id="findingYourLocationDialog" title="Your present location">
+        <p>
+            We would like to lookup your present location so we can provide accurate directions.
+        </p><p>
+            Your browser may ask for your permission to determine your location
+            (possibly at the top of this page).
+        </p><p>
+            If you agree, we will use your current location as the starting point for
+            directions. If you don't agree, you may enter a starting location when the map is displayed.
+        </p>
+    </div>
+
     <script type="text/javascript">
         {apply_filters('glm-member-db-front-members-detail-jqueryScriptTop', '', $member.id)}
 
         jQuery(document).ready(function($) {
 
+            // Dialog box to show when submitting checkout page
+            $( "#findingYourLocationDialog" ).dialog({
+                autoOpen: false,
+                width: 600
+            });
+            $( "#lookingUpYourLocationDialog" ).dialog({
+                autoOpen: false,
+                width: 600
+            });
+
+            var trackToConsole = true;         // Send debug/progress messages to developers console (Firefox)
+            var trackPositionInterval = 60000;  // Time interval for getting user's current geolocation - 1 Min
+            var highAccuracyPoisition = true;   // Request high-accuracy user geolocation from user's device
+            var postionTimeout = 15000;         // Maximum amount of time we'll wait for geolocation result - 15 Sec
+
+            // Process form for sending user to Google Maps for driving directions
+            $("#MemberDrivingDirectionsForm").submit(function(){
+
+                var stopGeolocation = false;
+                var myCurrentLocation = false;
+
+                // If we already have a location
+                if (myCurrentLocation) {
+                    sendToGoogleMaps(myCurrentLocation);
+                } else {
+
+                    // We don't yet have a location, so try to get it
+                    if (navigator.geolocation) {
+
+                        $( "#findingYourLocationDialog" ).dialog("open");
+
+                        // Get the user's location
+                        navigator.geolocation.getCurrentPosition(function(position) {
+
+                            // Save their current location
+                            myCurrentLocation = {
+                                  lat: position.coords.latitude,
+                                  lon: position.coords.longitude
+                            };
+
+                            $( "#findingYourLocationDialog" ).dialog("close");
+                            sendToGoogleMaps(myCurrentLocation);
+
+                        // If we can't get the location, then go without it
+                        },
+                        function(err) {
+                            $( "#findingYourLocationDialog" ).dialog("close");
+                            sendToGoogleMaps(false);
+                        },
+                        {
+                            enableHighAccuracy: highAccuracyPoisition,
+                            timeout:            postionTimeout,
+                            maximumAge:         trackPositionInterval - 100     // Allows cached position resulting from other requests during interval
+                        });
+
+                    }
+
+                }
+
+                return false;
+
+            });
+
+            function sendToGoogleMaps(myLocation) {
+                var lat = plusifyMyValue(jQuery("#MemberLat").val());
+                var lon = plusifyMyValue(jQuery("#MemberLon").val());
+                var dest = '&destination=' + lat + '%2C+' + lon;
+
+                var origin = '';
+                if (myLocation) {
+                    var myLat = plusifyMyValue(myLocation.lat);
+                    var myLon = plusifyMyValue(myLocation.lon);
+                    origin = '&origin=' + myLat + '%2C+' + myLon;
+                }
+
+                var url = "https://www.google.com/maps/dir/?api=1" + origin + dest;
+                window.open(url, '_blank');
+            }
+
+            function plusifyMyValue(v) {
+                if (v > 0) {
+                    v = '+' + v;
+                }
+                return v;
+            }
+
             // change the member detail photos grid structure depending
             var images_container = $("#glm-member-detail-images-container");
             // Check if Foundation exists first
@@ -455,7 +553,7 @@
                 }, 500);
             });
 
-            // Auto-expand data sections in small view            
+            // Auto-expand data sections in small view
             {if $settings.detail_auto_expand_sections}
                  if ( $(window).width() >= 1024 ) {
                     // Expand all data sections by default
@@ -463,7 +561,7 @@
                     $("#glm-member-detail-data-container > .glm-member-detail-content-data").slideToggle("fast", "swing",  function() {});
                 }
             {/if}
-            
+
             // Open or close the appropriate section if a toggle is clicked
             $(".glm-member-detail-content-toggle").not("#glm-member-detail-fullprofile-toggle").click(function() {
                 if($(this).parents('.glm-member-detail-sub-data-links').length) {
@@ -540,8 +638,8 @@
                 $(this).html(mapBtnTxt);
             });
 
-      {if $settings.selected_map_interface == 1}    
-            
+      {if $settings.selected_map_interface == 1}
+
             /*
              *  Leaflet Map
              *  API reference: https://leafletjs.com/reference-1.3.2.html
@@ -558,7 +656,7 @@
         {/if}
 
             function initMap() {
-            
+
                 var leafletMap = L.map('LeafletMapContainer').setView([memberLat, memberLon], {$settings.maps_default_zoom});
                 var leafletTileServer = '{$settings.leaflet_tile_server}/{$settings.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal};
                 var leafletMinZoom = 5;
@@ -579,16 +677,16 @@
                     delayIndicator: 500
                 });
                 leafletMap.addControl(loadingControl);
-                
+
                 // Marker
                 var leafletMarker = L.marker([memberLat, memberLon]).addTo(leafletMap);
-            
+
             }
-        
+
       {/if}
 
-      {if $settings.selected_map_interface == 2}    
-      
+      {if $settings.selected_map_interface == 2}
+
             /*
              * Google Maps
              *  API reference: https://developers.google.com/maps/documentation/javascript/reference
@@ -628,9 +726,9 @@
             google.maps.event.addDomListener(window, 'load', initMap);
 
       {/if}
-          
+
     {/if} {*detail_show_map*}
-            
+
             $(window).load(function(){
                 initMap();
             });