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__)) {
@@ -842,6 +842,11 @@ public function adminOptionsPage()
     <li>serviceBodyDescription</li>
     <li>serviceBodyContactEmail (must be comfigured in root server)</li>
     <li>serviceBodyType</li>
+    <li>parentServiceBodyUrl</li>
+    <li>parentServiceBodyPhone</li>
+    <li>parentServiceBodyName</li>
+    <li>parentServiceBodyDescription</li>
+    <li>parentServiceBodyType</li>
 </ul>
         </p>
         <p>To include a map in the meeting details, use the "crouton_map" helper function, ie, {{{crouton_map}}}.  

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

@@ -218,13 +218,14 @@ function MeetingMap(inConfig) {
 		retrieveGeolocation().then(position => {
 			showThrobber();
 			crouton.searchByCoordinates(position.latitude, position.longitude, config.map_search.width);
+			if (activeModal == gSearchModal) closeModalWindow(gSearchModal);
 		}).catch(error => {
 			console.error(error.message);
+			if (activeModal != gSearchModal) showBmltSearchDialog();
 		});
-		showBmltSearchDialog();
-		closeModalWindow(gSearchModal);
 	};
 	function clickSearch(e) {
+		croutonMap.showMap();
 		gDelegate.clickSearch(e, function(lat,lng) {
 			showThrobber();
 			crouton.searchByCoordinates(lat, lng, config.map_search.width);
@@ -315,6 +316,9 @@ function MeetingMap(inConfig) {
 		}, {});
 	}
 	var g_suspendedFullscreen = false;
+	var g_overflowX;
+	var activeModal = null;
+	var swipableModal = false;
 	function closeModalWindow(modal) {
 		gDelegate.modalOff();
 		activeModal = null;
@@ -327,24 +331,43 @@ function MeetingMap(inConfig) {
 				toggleFullscreen();
 			}
 		}
+		if (swipableModal) {
+			const body = document.getElementsByTagName("BODY")[0];
+			const scrollY = body.style.top;
+			body.style.overflowX = g_overflowX;
+			body.style.position = '';
+			body.style.top = '';
+			body.style.width = '';
+			window.scrollTo(0, parseInt(scrollY || '0') * -1);
+		}
 	}
-	var activeModal = null;
 	document.addEventListener("keydown", function(event) {
 		if (activeModal && event.key == "Escape") {
 			closeModalWindow(activeModal);
 		}
 	}, true);
-	function openModalWindow(modal) {
+	function openModalWindow(modal,swipe=false) {
 		if (isFullscreen()) {
 			g_suspendedFullscreen = true;
 			toggleFullscreen();
 		}
 		modal.style.display = "block";
+		swipableModal = swipe;
 		modal.focus();
 		activeModal = modal;
 		dd = document.getElementById("map-menu-dropdown");
 		if (dd) dd.style.display = "none";
 		gDelegate.modalOn();
+		if (swipableModal) {
+			const body = document.getElementsByTagName("BODY")[0];
+			g_overflowX = body.style.overflowX;
+			const newTop = -window.scrollY+'px';
+			const newWidth = window.width+'px';
+			body.style.overflowX = 'hidden';
+			body.style.position = 'fixed';
+			body.style.top = newTop;
+			body.style.width = newWidth;
+		}
 	}
 	function showFilterDialog(e) {
 		openModalWindow(document.getElementById('filter_modal'));

croutonjs/src/js/crouton-core.js

@@ -559,7 +559,7 @@ function Crouton(config) {
 		});
 	}
 	self.getServiceBodies = function(service_bodies_id) {
-		var requires_parents = self.config.has_regions;
+		const requires_parents = true;
 
 		var url = this.config['root_server'] + '/client_interface/jsonp/?switcher=GetServiceBodies'
 			+ (requires_parents ? '&parents=1' : '') + getServiceBodiesQueryString(service_bodies_id);
@@ -896,7 +896,7 @@ function Crouton(config) {
 		window.croutonMap = new MeetingMap(self.config);
 		if (self.config['map_search']) self.searchMap();
 	}
-	self.meetingSearch();
+	else if (!self.config['map_search']) self.meetingSearch();
 }
 
 Crouton.prototype.setConfig = function(config) {
@@ -994,8 +994,10 @@ Crouton.prototype.doHandlebars = function() {
 			.then(function(data) {
 				hbs_Crouton['localization'] = self.localization;
 				self.all_service_bodies = [];
-				var service_body = data[0][0];
-				self.all_service_bodies.push(service_body);
+				var service_bodies = data[0];
+				for (var i = 0; i < service_bodies.length; i++) {
+					self.all_service_bodies.push(service_bodies[i]);
+				}
 				var enrichedMeetingData = self.enrichMeetings(self.meetingData);
 				var customStartupTemplate = crouton_Handlebars.compile('{{startup}}');
 				customStartupTemplate(enrichedMeetingData);
@@ -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, true);
 	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 infos regarding parent service body.
+* 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