From: Chuck Scott <cscott@gaslightmedia.com>
Date: Mon, 27 Aug 2018 19:43:48 +0000 (-0400)
Subject: Added max width and height calculations to the pop-up.
X-Git-Tag: v2.10.39^2~7
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=cca1a8291d57f43a1c5fd6efda9ca42b892511ca;p=WP-Plugins%2Fglm-member-db.git

Added max width and height calculations to the pop-up.
---

diff --git a/views/front/members/list.html b/views/front/members/list.html
index 9d986ebb..e8efa555 100755
--- a/views/front/members/list.html
+++ b/views/front/members/list.html
@@ -572,13 +572,23 @@
                 });
               {/if}
 
+                var mapContainerWidth = Number(leafletMap._container.clientWidth);
+                var maxPopupWidth = .65 * mapContainerWidth;
+                if (maxPopupWidth > 600) {
+                    maxPopupWidth = 600;
+                }
+                var mapContainerHeight = Number(leafletMap._container.clientHeight);
+                var maxPopupHeight = .7 * mapContainerHeight;
 
               {foreach $mapItems as $m}
                 {if $m.lat != 0 && $m.lon != 0}
 
                 // Create marker for this member and and to Feature Group
                 var leafletMarker = L.marker([{$m.lat}, {$m.lon}], { title:  '{$m.member_name|escape:quotes}' })
-                    .bindPopup($('#map_info_' + {$m.id}).html())
+                    .bindPopup($('#map_info_' + {$m.id}).html(), {
+                        maxWidth: maxPopupWidth,
+                        maxHeight: maxPopupHeight
+                    })
                     .addTo(markerGroup);
 
             {/if}
@@ -595,7 +605,8 @@
 
                 leafletMap.on('popupopen', function(e) {
                     var px = leafletMap.project(e.popup._latlng);
-                    px.y -= e.popup._container.clientHeight/2;
+                    px.x -= 20;                                         // Bump a bit to the right to avoid resize buttons
+                    px.y -= e.popup._container.clientHeight/2;          // Position more toward the center
                     leafletMap.panTo(leafletMap.unproject(px),{ animate: true });
                 });