Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Meeting Details Modal can be swiped left or right #486

Merged
merged 8 commits into from
Aug 21, 2024
Merged

Meeting Details Modal can be swiped left or right #486

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2ae74f0
Meeting Details Modal can be swiped left or right
otrok7 Aug 12, 2024
2699b26
add service body parent to crouton_map default values
otrok7 Aug 19, 2024
22f7200
Version Bump
otrok7 Aug 19, 2024
67c7de9
stabilize crouton_map searches
otrok7 Aug 19, 2024
091912f
small fix
otrok7 Aug 19, 2024
8af6ec1
Always get the service body parent
otrok7 Aug 20, 2024
dff0eb4
forgot meeting page again
otrok7 Aug 20, 2024
ed4c920
Only Meeting Details Modal is swippable
otrok7 Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 25 additions & 3 deletions croutonjs/meetingMap/css/meeting_map.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,7 @@ div.bmlt_map_container_div button {
left: 8%;
max-width: 85%;
overflow-y: auto;
overflow-x: hidden;
}

/* The Close Button */
Expand All @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions croutonjs/meetingMap/js/meeting_map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,7 @@ function MeetingMap(inConfig) {
}, {});
}
var g_suspendedFullscreen = false;
var g_overflowX;
function closeModalWindow(modal) {
gDelegate.modalOff();
activeModal = null;
Expand All @@ -327,6 +328,7 @@ function MeetingMap(inConfig) {
toggleFullscreen();
}
}
document.getElementsByTagName("BODY")[0].style.overflowX = g_overflowX;
}
var activeModal = null;
document.addEventListener("keydown", function(event) {
Expand All @@ -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'));
Expand Down
81 changes: 77 additions & 4 deletions croutonjs/src/js/crouton-core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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)
}
6 changes: 5 additions & 1 deletion croutonjs/src/js/crouton-default-templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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}}"
Expand Down
Loading