Track visible meetings during pan, zoom, etc

crouton.php

@@ -5,7 +5,7 @@
 Description: A tabbed based display for showing meeting information.
 Author: bmlt-enabled
 Author URI: https://bmlt.app
-Version: 3.20.0
+Version: 3.20.1
 */
 /* Disallow direct access to the plugin file */
 if (basename($_SERVER['PHP_SELF']) == basename(__FILE__)) {
@@ -73,6 +73,7 @@ class Crouton
             "has_languages" => '0',
             "has_common_needs" => '0',
             "has_venues" => '1',
+            "filter_visible" => '0',
             "include_city_button" => '1',
             "include_weekday_button" => '1',
             "include_unpublished" => '0',
@@ -126,6 +127,7 @@ class Crouton
             "has_languages",
             "has_zip_codes",
             "has_venues",
+            "filter_visible",
             "has_common_needs"
         ];
         private $waitMsg = '<div class="bootstrap-bmlt" id="please-wait"><button class="btn btn-lg btn-info"><span class="glyphicon glyphicon-repeat glyphicon-repeat-animate"></span>Fetching...</button></div>';

croutonjs/meetingMap/css/meeting_map.css

@@ -474,7 +474,7 @@ div.bmlt_map_container_div  button {
 }
 .menu-dropdown {
 		display: none;
-background-color: #EEEEEE;
+    background-color: #EEEEEE;
     color: #2d5c88;
 	    position: absolute;
 	    top: 45px;
@@ -491,6 +491,7 @@ background-color: #EEEEEE;
   text-decoration: none;
   display: block;
   width: 100%;
+  background-color: #EEEEEE;
 }
 .leaflet-popup-content {
   margin: 0px 0px;

croutonjs/meetingMap/js/gmapsDelegate.js

@@ -52,16 +52,16 @@ function MapDelegate(in_config) {
         }
         var	pixel_width = inDiv.offsetWidth;
         var	pixel_height = inDiv.offsetHeight;
-        
+
         if ( (pixel_width < 640) || (pixel_height < 640) ) {
-            myOptions.scrollwheel = true;                    
+            myOptions.scrollwheel = true;
             myOptions.zoomControlOptions = { 'style': google.maps.ZoomControlStyle.SMALL };
         } else {
             myOptions.zoomControlOptions = { 'style': google.maps.ZoomControlStyle.LARGE };
         };
         gInfoWindow = new google.maps.InfoWindow();
         gMainMap = new google.maps.Map ( inDiv, myOptions );
-        
+
         return gMainMap;
     }
     function addListener(ev,f,once) {
@@ -74,11 +74,14 @@ function MapDelegate(in_config) {
                 ;
         }
         if (once) {
-            google.maps.event.addListenerOnce( gMainMap, e, f);
+            return google.maps.event.addListenerOnce( gMainMap, e, f);
         } else {
-            google.maps.event.addListener( gMainMap, e, f);
+            return google.maps.event.addListener( gMainMap, e, f);
         }
     }
+    function removeListener(f) {
+        f.remove();
+    }
     function fitBounds(locations) {
         google.maps.event.addListenerOnce(gMainMap, "bounds_changed", function () {
             gMainMap.setZoom(parseInt(Math.min(gMainMap.getZoom(), config.maxZoom)));
@@ -141,11 +144,11 @@ function MapDelegate(in_config) {
             if (knt == 0) {
                 ret -= 1;
             }
-        } 
+        }
         return ret;
     }
     function setZoom(filterMeetings, force=0) {
-        (force > 0) ? gMainMap.setZoom(force) : 
+        (force > 0) ? gMainMap.setZoom(force) :
         gMainMap.setZoom(getZoomAdjust(false,filterMeetings));
     }
     function getZoom() {
@@ -214,19 +217,19 @@ function MapDelegate(in_config) {
                     }
                 });
             });
-        
+
             // This is necessary to make the Spiderfy work
             gOms.addListener('click', function (marker) {
                 marker.zIndex = 999;
                 gInfoWindow.setContent(marker.desc);
                 gInfoWindow.open(gMainMap, marker);
             });
             markers.forEach((marker)=>gOms.addMarker(marker));
-        
+
         } else markers.forEach((m)=>m.setMap(gMainMap));
    }
 function createMarker (	inCoords,		///< The long/lat for the marker.
-        multi, 
+        multi,
         inHtml,		///< The info window HTML
         inTitle,        ///< The tooltip
         inIds
@@ -237,7 +240,7 @@ function createMarker (	inCoords,		///< The long/lat for the marker.
 
     var	is_clickable = (inHtml ? true : false);
 
-    var marker = new google.maps.Marker ( 
+    var marker = new google.maps.Marker (
         { 'position':		new google.maps.LatLng(...inCoords),
             'shadow':		g_icon_shadow,
             'icon':			in_main_icon,
@@ -349,7 +352,7 @@ function geoCallback( in_geocode_response ) {
             &&  config.bounds.south && config.bounds.south.trim()!== ''
             &&  config.bounds.west && config.bounds.west.trim()!== '') {
                 geoCodeParams.bounds = new google.maps.LatLngBounds(
-                    new google.maps.LatLng(config.bounds.south, config.bounds.west), 
+                    new google.maps.LatLng(config.bounds.south, config.bounds.west),
                     new google.maps.LatLng(config.bounds.north, config.bounds.east));
             }
             if (filterMeetings)
@@ -378,6 +381,10 @@ function geoCallback( in_geocode_response ) {
             cb(e.latLng.lat(), e.latLng.lng());
         })
     };
+    function afterInit(f) {
+        if (typeof gMainMap.getBounds()  !== 'undefined') f();
+        else addListener('idle', f, true);
+    }
     function modalOn() {}
     function modalOff() {}
     this.createMap = createMap;
@@ -405,9 +412,12 @@ function geoCallback( in_geocode_response ) {
     this.getGeocodeCenter = getGeocodeCenter;
     this.modalOn = modalOn;
     this.modalOff = modalOff;
+    this.removeListener = removeListener;
+    this.afterInit = afterInit;
 }
 MapDelegate.prototype.createMap = null;
 MapDelegate.prototype.addListener = null;
+MapDelegate.prototype.removeListener = null;
 MapDelegate.prototype.addControl = null;
 MapDelegate.prototype.setViewToPosition = null;
 MapDelegate.prototype.clearAllMarkers = null;
@@ -430,4 +440,5 @@ MapDelegate.prototype.removeClusterLayer = null;
 MapDelegate.prototype.clickSearch = null;
 MapDelegate.prototype.getGeocodeCenter = null;
 MapDelegate.prototype.modalOn = null;
-MapDelegate.prototype.modalOff = null;
+MapDelegate.prototype.modalOff = null;
+MapDelegate.prototype.afterInit = null;

croutonjs/meetingMap/js/meeting_map.js

@@ -69,7 +69,11 @@ function MeetingMap(inConfig) {
 			if (gDelegate.createMap(inDiv, loc)) {
 				gDelegate.addListener('zoomend', function (ev) {
 					if (shouldRedrawMarkers() && gAllMeetings) {
-						searchResponseCallback();
+						if (listOnlyVisible) {
+							const oldValue = filterVisible(false);
+							searchResponseCallback();
+							filterVisible(oldValue);
+						} else searchResponseCallback();
 					}
 				}, false);
 				if (config.map_search) {
@@ -153,7 +157,7 @@ function MeetingMap(inConfig) {
 		controlDiv.querySelector("#nearbyMeetings").addEventListener('click', function (e) {
 			retrieveGeolocation().then(position => {
 				filterVisible(false);
-				gDelegate.setViewToPosition(position, filterMeetingsAndBounds);
+				gDelegate.setViewToPosition(position, filterMeetingsAndBounds, filterVisible);
 			}).catch(error => {
 				console.error(error.message);
 				$('.geo').removeClass("hide").addClass("show").html(`<p>${error.message}</p>`);
@@ -173,9 +177,10 @@ function MeetingMap(inConfig) {
 			let dropdownContent = document.getElementById("map-menu-dropdown");
 			if (dropdownContent.style.display == "inline-block") {
 				dropdownContent.style.display = "none";
-				filterVisible(false);
-			} else
+			} else {
+				jQuery("#filteringByVisibility").html(listOnlyVisible?'&#10004;':'');
 				dropdownContent.style.display = "inline-block";
+			}
 		});
 		[...controlDiv.getElementsByClassName('modal-close')].forEach((elem)=>elem.addEventListener('click', (e)=>closeModalWindow(e.target)));
 		controlDiv.querySelector("#close_table").addEventListener('click', hideListView);
@@ -222,7 +227,7 @@ function MeetingMap(inConfig) {
 	function filterFromCrouton(filter) {
 		gMeetingIdsFromCrouton = filter;
 		if (gAllMeetings)
-			searchResponseCallback(fitDuringFilter);
+			searchResponseCallback(fitDuringFilter && !listOnlyVisible);
 	};
 	function nearMeSearch() {
 		retrieveGeolocation().then(position => {
@@ -235,7 +240,7 @@ function MeetingMap(inConfig) {
 		});
 	};
 	function clickSearch(e) {
-		croutonMap.showMap();
+		croutonMap.showMap(false,false);
 		gDelegate.clickSearch(e, function(lat,lng) {
 			showThrobber();
 			crouton.searchByCoordinates(lat, lng, config.map_search.width);
@@ -300,20 +305,23 @@ function MeetingMap(inConfig) {
 		}
 		searchResponseCallback();
 		hideThrobber();
+		if (config.filter_visible || config.centerMe || config.goto) crouton.forceShowMap();
 		if (config.centerMe) {
 			if (navigator.geolocation) {
 				navigator.geolocation.getCurrentPosition(
 					function (position) {
 						coords = {latitude: position.coords.latitude, longitude: position.coords.longitude};
-						gDelegate.setViewToPosition(coords, filterMeetingsAndBounds);
+						filterVisible(false);
+						gDelegate.setViewToPosition(coords, filterMeetingsAndBounds, filterVisible);
 					},
 					showGeocodingDialog
 				);
 			} else if (fitAll) {
 				showGeocodingDialog();
 			}
-		} else if (config.goto) {
-			gDelegate.callGeocoder(config.goto, filterMeetingsAndBounds);
+		} else {
+			if (!config.centerMe && !config.goto) gDelegate.afterInit(()=>filterVisible(config.filter_visible));
+			if (config.goto) gDelegate.callGeocoder(config.goto, resetVisibleThenFilterMeetingsAndBounds);
 		}
 	}
 	function createCityHash(allMeetings) {
@@ -407,7 +415,9 @@ function MeetingMap(inConfig) {
 	}
 	function resetVisibleThenFilterMeetingsAndBounds(bounds) {
 		filterVisible(false);
-		filterMeetingsAndBounds(bounds);
+		const ret = filterMeetingsAndBounds(bounds);
+		filterVisible(true);
+		return ret;
 	}
 	function lookupLocation(fullscreen) {
 		if (document.getElementById('goto-text').value != '') {
@@ -582,8 +592,12 @@ function MeetingMap(inConfig) {
 	function filterBounds(bounds) {
 		return gAllMeetings.filter((meeting) => gDelegate.contains(bounds, meeting.latitude, meeting.longitude));
 	}
+	function showAllMeetings() {
+		filterVisible(false);
+		gDelegate.addListener('dragend', filterVisible, true);
+	}
 	function filterVisible(on=true) {
-		if (on===listOnlyVisible) return;
+		if (on===listOnlyVisible) return on;
 		let mtgs = on ? filterBounds(gDelegate.getBounds()) : gAllMeetings;
 		let visible = mtgs.map((m)=>m.id_bigint);
 		jQuery(".bmlt-data-row").each(function(index,row) {
@@ -596,6 +610,12 @@ function MeetingMap(inConfig) {
 		fitDuringFilter = true;
 		jQuery("#filteringByVisibility").html(on?'&#10004;':'');
 		listOnlyVisible = on;
+		if (on) listener = gDelegate.addListener('dragstart', showAllMeetings, true);
+		else if (listener) {
+			gDelegate.removeListener(listener);
+			listener = null;
+		}
+		return !on;
 	}
 	function toggleVisible() {
 		filterVisible(!listOnlyVisible);
@@ -677,14 +697,14 @@ function MeetingMap(inConfig) {
 		}
 		gDelegate.invalidateSize();
 	}
-	function showMap(isModal=false) {
+	function showMap(isModal=false, fitBounds=true) {
 		if (isModal && gModalDelegate) {
 			gModalDelegate.invalidateSize();
 			return;
 		}
 		gDelegate.invalidateSize();
 		if (!gAllMeetings) return;
-		gDelegate.fitBounds(
+		if (fitBounds) gDelegate.fitBounds(
 			((gMeetingIdsFromCrouton) ? gAllMeetings.filter((m) => gMeetingIdsFromCrouton.includes(m.id_bigint)) : gAllMeetings)
 				.reduce(function(a,m) {a.push([m.latitude, m.longitude]); return a;},[])
 		);
@@ -702,6 +722,7 @@ function MeetingMap(inConfig) {
 	this.openModalWindow = openModalWindow;
 	this.closeModalWindow = closeModalWindow;
 	this.loadPopupMap = loadPopupMap;
+	this.filterVisible = filterVisible;
 };
 MeetingMap.prototype.initialize = null;
 MeetingMap.prototype.showMap = null;
@@ -713,3 +734,4 @@ MeetingMap.prototype.refreshMeetings = null;
 MeetingMap.prototype.openModalWindow = null;
 MeetingMap.prototype.closeModalWindow = null;
 MeetingMap.prototype.loadPopupMap = null;
+MeetingMap.prototype.filterVisible = null;