Meeting Details Modal can be swiped left or right

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.19.2
+Version: 3.19.3
 */
 /* Disallow direct access to the plugin file */
 if (basename($_SERVER['PHP_SELF']) == basename(__FILE__)) {

croutonjs/meetingMap/css/meeting_map.css

@@ -264,6 +264,7 @@ div.bmlt_map_container_div  button {
   left: 8%;
   max-width: 85%;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 /* The Close Button */
@@ -272,11 +273,32 @@ div.bmlt_map_container_div  button {
   float: right;
   font-size: 28px;
   font-weight: bold;
-  position: absolute;
-  top: 10px;
-  right: 5px;
   line-height: 0;
 }
+.modal-right {
+  color: #aaa;
+  font-size: 35px;
+  font-weight: bold;
+  position: absolute;
+  top: 50%;
+  right: 2px;
+  line-height: 38px;
+  opacity: 30%;
+  border-radius: 10px;
+  background-color: black;
+}
+.modal-left {
+  color: #aaa;
+  font-size: 35px;
+  font-weight: bold;
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  line-height: 38px;
+  opacity: 30%;
+  border-radius: 10px;
+  background-color: black;
+}
 .table-close {
   color: white;
   float: right;

croutonjs/meetingMap/js/meeting_map.js

@@ -315,6 +315,7 @@ function MeetingMap(inConfig) {
 		}, {});
 	}
 	var g_suspendedFullscreen = false;
+	var g_overflowX;
 	function closeModalWindow(modal) {
 		gDelegate.modalOff();
 		activeModal = null;
@@ -327,6 +328,11 @@ function MeetingMap(inConfig) {
 				toggleFullscreen();
 			}
 		}
+		document.getElementsByTagName("BODY")[0].style.overflowX = g_overflowX;
+		const scrollY = document.body.style.top;
+		document.getElementsByTagName("BODY")[0].style.position = '';
+		document.getElementsByTagName("BODY")[0].style.top = '';
+		window.scrollTo(0, parseInt(scrollY || '0') * -1);
 	}
 	var activeModal = null;
 	document.addEventListener("keydown", function(event) {
@@ -345,6 +351,11 @@ function MeetingMap(inConfig) {
 		dd = document.getElementById("map-menu-dropdown");
 		if (dd) dd.style.display = "none";
 		gDelegate.modalOn();
+		g_overflowX = document.getElementsByTagName("BODY")[0].style.overflowX;
+		const newTop = -window.scrollY+'px';
+		document.getElementsByTagName("BODY")[0].style.overflowX = 'hidden';
+		document.getElementsByTagName("BODY")[0].style.position = 'fixed';
+		document.getElementsByTagName("BODY")[0].style.top = newTop;
 	}
 	function showFilterDialog(e) {
 		openModalWindow(document.getElementById('filter_modal'));

croutonjs/src/js/crouton-core.js

@@ -67,6 +67,7 @@ function Crouton(config) {
 		has_meeting_count: false,	  // Shows the meeting count
 		show_distance: false,         // Determines distance on page load
 		distance_search: 0,			  // Makes a distance based search with results either number of / or distance from coordinates
+		force_service_body_parents: false, // Always get the service body parent data
 		recurse_service_bodies: false,// Recurses service bodies when making service bodies request
 		service_body: [],             // Array of service bodies to return data for.
 		formats: '',		  		  // Return only meetings with these formats (format shared-id, not key-string)
@@ -123,6 +124,7 @@ function Crouton(config) {
 				self.config.refresh_map=1;
 				self.config.show_map = 1;
 				self.reset();
+				self.config.force_service_body_parents = true;
 				self.render();
 				/*
 				croutonMap.reload(self.meetingData);
@@ -559,7 +561,7 @@ function Crouton(config) {
 		});
 	}
 	self.getServiceBodies = function(service_bodies_id) {
-		var requires_parents = self.config.has_regions;
+		var requires_parents = self.config.has_regions || self.config.force_service_body_parents;
 
 		var url = this.config['root_server'] + '/client_interface/jsonp/?switcher=GetServiceBodies'
 			+ (requires_parents ? '&parents=1' : '') + getServiceBodiesQueryString(service_bodies_id);
@@ -1010,18 +1012,59 @@ Crouton.prototype.doHandlebars = function() {
 
 Crouton.prototype.meetingModal = function(meetingId) {
 	let self = this;
+	const tabs = document.getElementById('bmlt-tabs');
+
 	let el = document.createElement('bmlt-handlebar');
-	let tabs = document.getElementById('bmlt-tabs');
 	tabs.appendChild(el);
 	let span = document.createElement('span');
-	let meeting = self.meetingData.find((m) => m.id_bigint == meetingId);
 	el.appendChild(span);
 	span.textContent = self.config.meetingpage_frame_template;
+	let meeting = self.meetingData.find((m) => m.id_bigint == meetingId);
 	self.handlebars(meeting, tabs.getElementsByTagName('bmlt-handlebar'));
+
 	[...tabs.getElementsByClassName('modal-close')].forEach((elem)=>elem.addEventListener('click', (e)=>{croutonMap.closeModalWindow(e.target); document.getElementById('meeting_modal').remove()}));
-	document.body.appendChild(document.getElementById('meeting_modal'));
-	croutonMap.openModalWindow(document.getElementById('meeting_modal'));
+	let mm = document.getElementById('meeting_modal');
+	document.body.appendChild(mm);
+	croutonMap.openModalWindow(mm);
 	croutonMap.showMap(true);
+	let visibleMeetings = jQuery('.bmlt-data-row:visible');
+	let index = -1;
+	const prefix = "meeting-data-row-";
+	for (k=0; k<visibleMeetings.length; k++) {
+		if (visibleMeetings[k].id===prefix+meetingId) {
+			index = k;
+			break;
+		}
+	};
+	let doSwipe = function(swipedir) {
+		switch(swipedir) {
+			case 'left':
+				index = index+1; 
+				break;
+			case 'right':
+				index = index-1;
+				break;
+			default:
+				index = -1;
+		}
+		if (index >= 0 && index < visibleMeetings.length) {
+			const newMeeting = visibleMeetings[index];
+			meetingId = newMeeting.id.substring(prefix.length);
+			mm.getElementsByClassName('modal-close').item(0).dispatchEvent(new MouseEvent("click"));
+			self.meetingModal(meetingId);
+		}
+	}
+	swipedetect(mm, doSwipe);
+	if (index <= 0) {
+		jQuery(".modal-left").addClass("hide");
+	} else {
+		mm.getElementsByClassName('modal-left').item(0).addEventListener("click", ev=>doSwipe("right"));
+	}
+	if (index >= visibleMeetings.length-1) {
+		jQuery(".modal-right").addClass("hide");
+	} else {
+		mm.getElementsByClassName('modal-right').item(0).addEventListener("click", ev=>doSwipe("left"));
+	}
 }
 Crouton.prototype.searchMap = function() {
 	var self = this;
@@ -1798,3 +1841,35 @@ Array.prototype.sortByKey = function (key) {
 	});
 	return this;
 };
+function swipedetect(el, callback){
+
+    var touchsurface = el,
+    swipedir,
+    startX,
+    startY,
+    distX,
+    distY,
+    threshold = 150, //required min distance traveled to be considered swipe
+    restraint = 100, // maximum distance allowed at the same time in perpendicular direction
+    handleswipe = callback || function(swipedir){}
+
+    touchsurface.addEventListener('touchstart', function(e){
+        var touchobj = e.changedTouches[0]
+        swipedir = 'none'
+        startX = touchobj.pageX
+        startY = touchobj.pageY
+    }, false)
+
+
+    touchsurface.addEventListener('touchend', function(e){
+		if (!e.cancelable) return;
+        var touchobj = e.changedTouches[0]
+        distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
+        distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
+    	if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
+            swipedir = (distX < 0)? 'left' : 'right' // if dist traveled is negative, it indicates left swipe
+			handleswipe(swipedir)
+			e.preventDefault()
+        }
+    }, false)
+}

croutonjs/src/js/crouton-default-templates.js

@@ -71,7 +71,7 @@ var croutonDefaultTemplates = {
 	meetingpage_frame_template: `
 	<div id="meeting_modal" class="modal bootstrap-bmlt" style="display: none;" tabindex="-1" >
 	<div class="modal-content">
-        <span class="modal-title">{{getWord "Meeting Details"}}</span><span id="close_meeting_details" class="modal-close">×</span>
+        <span class="modal-title">{{getWord "Meeting Details"}}</span><span id="close_meeting_details" class="modal-close" style="position: absolute;right: 5px;top:10px;">×</span>
 		<table id="meeting-details-table" class="bmlt-table  {{getWord 'css-direction'}} table table-striped table-hover table-bordered tablesaw tablesaw-stack meeting-details">
 			<thead>
         		<th id="meeting-details-title" colspan="2">
@@ -90,6 +90,10 @@ var croutonDefaultTemplates = {
 			<a id="map-button" class="btn btn-primary btn-xs modal-close" tabindex="0" style="float:right">
 				{{getWord "Close"}}</a>
 		</div>
+		<div class="swipe-buttons">
+			<span class="modal-right">&gt;</span>
+			<span class="modal-left">&lt;</span>
+		</div>
 	</div></div>`,
 	meetingpage_title_template: [
 		"{{this.formatted_day}} {{this.start_time_formatted}} - {{this.end_time_formatted}}: {{this.meeting_name}}"

readme.txt

@@ -5,7 +5,7 @@ Tags: na, meeting list, meeting finder, maps, recovery, addiction, webservant, b
 Requires at least: 4.0
 Required PHP: 8.0
 Tested up to: 6.4.2
-Stable tag: 3.19.2
+Stable tag: 3.19.3
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 crouton implements a Tabbed UI for BMLT.
@@ -36,6 +36,10 @@ https://demo.bmlt.app/crouton
 
 == Changelog ==
 
+= 3.19.3 =
+* Retrieve parent service body when using [crouton_map].
+* On mobile devices, the meeting details modal can be swiped left or right to iterate through the list. 
+
 = 3.19.2 =
 * Only ask for user's location one time