Meeting Details Modal can be swiped left or right

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,7 @@ function MeetingMap(inConfig) {
 				toggleFullscreen();
 			}
 		}
+		document.getElementsByTagName("BODY")[0].style.overflowX = g_overflowX;
 	}
 	var activeModal = null;
 	document.addEventListener("keydown", function(event) {
@@ -345,6 +347,8 @@ 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;
+		document.getElementsByTagName("BODY")[0].style.overflowX = 'hidden';
 	}
 	function showFilterDialog(e) {
 		openModalWindow(document.getElementById('filter_modal'));

croutonjs/src/js/crouton-core.js

@@ -1010,18 +1010,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-left").addClass("hide");
+	} else {
+		mm.getElementsByClassName('modal-right').item(0).addEventListener("click", ev=>doSwipe("left"));
+	}
 }
 Crouton.prototype.searchMap = function() {
 	var self = this;
@@ -1798,3 +1839,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}}"