From 2ae74f04830a24cd07d85dd262e5a0cdc714955f Mon Sep 17 00:00:00 2001 From: otrok7 <50595291+otrok7@users.noreply.github.com> Date: Mon, 12 Aug 2024 16:21:16 +0200 Subject: [PATCH 1/8] Meeting Details Modal can be swiped left or right --- croutonjs/meetingMap/css/meeting_map.css | 28 ++++++- croutonjs/meetingMap/js/meeting_map.js | 4 + croutonjs/src/js/crouton-core.js | 81 ++++++++++++++++++- croutonjs/src/js/crouton-default-templates.js | 6 +- 4 files changed, 111 insertions(+), 8 deletions(-) diff --git a/croutonjs/meetingMap/css/meeting_map.css b/croutonjs/meetingMap/css/meeting_map.css index fdfa6b37..a84ab5c9 100644 --- a/croutonjs/meetingMap/css/meeting_map.css +++ b/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; diff --git a/croutonjs/meetingMap/js/meeting_map.js b/croutonjs/meetingMap/js/meeting_map.js index 46c95372..78459e7d 100644 --- a/croutonjs/meetingMap/js/meeting_map.js +++ b/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')); diff --git a/croutonjs/src/js/crouton-core.js b/croutonjs/src/js/crouton-core.js index c95b0113..ea3e7d14 100644 --- a/croutonjs/src/js/crouton-core.js +++ b/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= 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) +} diff --git a/croutonjs/src/js/crouton-default-templates.js b/croutonjs/src/js/crouton-default-templates.js index 7ea5e90f..8d6ce4c3 100644 --- a/croutonjs/src/js/crouton-default-templates.js +++ b/croutonjs/src/js/crouton-default-templates.js @@ -71,7 +71,7 @@ var croutonDefaultTemplates = { meetingpage_frame_template: `