@bmlt-enabled/croutonjs 3.22.2 → 3.22.4

package/crouton.css

@@ -189,7 +189,7 @@ span.bmlt_tabs_group_count {
 	color: #FFF;
 }
 
-#bmlt-tabs a#map-button,#bmlt-tabs a#share-button {
+#bmlt-tabs a#map-button,#bmlt-tabs a#share-button,.bmlt-data-row button.get-directions-modal {
 	margin-bottom: 4px;
 }
 
@@ -197,7 +197,7 @@ span.bmlt_tabs_group_count {
 	margin: 4px 0;
 }
 
-#bmlt-formats.btn-xs,#map-button.btn-xs,#share-button.btn-xs {
+#bmlt-formats.btn-xs,#map-button.btn-xs,#share-button.btn-xs,.bmlt-data-row button.get-directions-modal {
 	padding: 3px 5px;
 	font-size: 10px;
 	background-color: #93C3CD;
@@ -205,7 +205,7 @@ span.bmlt_tabs_group_count {
 	border-color: #C5C5C5;
 }
 
-#bmlt-formats.btn-xs:hover,#map-button.btn-xs:hover,#share-button.btn-xs:hover {
+#bmlt-formats.btn-xs:hover,#map-button.btn-xs:hover,#share-button.btn-xs:hover,.bmlt-data-row button.get-directions-modal:hover {
 	background-color: #F1F1F1;
 }
 
@@ -376,7 +376,7 @@ span.bmlt_tabs_group_count {
 		width: 100% !important;
 	}
 
-	#bmlt-tabs a#bmlt-formats,#bmlt-tabs a#map-button {
+	#bmlt-tabs a#bmlt-formats,#bmlt-tabs a#map-button,.bmlt-data-row button.get-directions-modal {
 		border-radius: 0;
 	}
 
@@ -434,7 +434,7 @@ span.bmlt_tabs_group_count {
 		font-size: 12px !important;
 	}
 
-	#map-button.btn-xs,#share-button.btn-xs {
+	#map-button.btn-xs,#share-button.btn-xs,.bmlt-data-row button.get-directions-modal {
 		display: -webkit-inline-box;
 	}
 
@@ -752,6 +752,9 @@ input#search_radius, input#search_count {
 	font-size: 0.9em;
 	color: #666;
 }
+.directions-remember-choice-div {
+    margin-top: 20px;
+}
 
 div.bmlt_map_container_div
 {

package/crouton.js

@@ -13413,6 +13413,7 @@ function CroutonLocalization(language) {
 			"google_maps_desc_mobile": "In Google Maps App öffnen",
 			"waze": "Waze",
 			"waze_desc": "In Waze App öffnen",
+			"remember my choice": "Auswahl speichern",
 		},
 "en-AU": {
 			"days_of_the_week" : ["", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
@@ -14416,6 +14417,22 @@ this["hbs_Crouton"]["templates"]["byfield"] = Handlebars.template({"1":function(
     + ((stack1 = lookupProperty(helpers,"each").call(depth0 != null ? depth0 : (container.nullContext || {}),depth0,{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":2,"column":8},"end":{"line":13,"column":17}}})) != null ? stack1 : "")
     + "    </table>\n</div>";
 },"usePartial":true,"useData":true});
+this["hbs_Crouton"]["templates"]["directionsButton"] = Handlebars.template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
+    var alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "            <div class=\"bootstrap-bmlt\">\n                <button data-latitude=\""
+    + alias2(alias1((depth0 != null ? lookupProperty(depth0,"latitude") : depth0), depth0))
+    + "\" data-longitude=\""
+    + alias2(alias1((depth0 != null ? lookupProperty(depth0,"longitude") : depth0), depth0))
+    + "\" class=\"btn btn-primary bmlt-xs get-directions-modal\">\n                    <span class=\"glyphicon glyphicon-road\"></span> "
+    + alias2((lookupProperty(helpers,"getWord")||(depth0 && lookupProperty(depth0,"getWord"))||container.hooks.helperMissing).call(depth0 != null ? depth0 : (container.nullContext || {}),"get_directions",{"name":"getWord","hash":{},"data":data,"loc":{"start":{"line":3,"column":67},"end":{"line":3,"column":95}}}))
+    + "\n                </button>\n            </div>\n";
+},"useData":true});
 this["hbs_Crouton"]["templates"]["formatPopup"] = Handlebars.template({"1":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
         if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
@@ -14832,6 +14849,20 @@ this["hbs_Crouton"]["templates"]["mapSearch"] = Handlebars.template({"1":functio
     + alias3((lookupProperty(helpers,"getWord")||(depth0 && lookupProperty(depth0,"getWord"))||alias2).call(alias1,"Back",{"name":"getWord","hash":{},"data":data,"loc":{"start":{"line":33,"column":73},"end":{"line":33,"column":91}}}))
     + "</button>\n        </div>\n    </div>\n</div>";
 },"useData":true});
+this["hbs_Crouton"]["templates"]["meetingDetailsButton"] = Handlebars.template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
+    var alias1=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "            <div>\n		        <a onclick='crouton.meetingModal("
+    + alias1(container.lambda((depth0 != null ? lookupProperty(depth0,"id_bigint") : depth0), depth0))
+    + ")' tabindex='0' href='#' id='map-button' class='btn btn-primary btn-xs'>\n				    <span class='glyphicon glyphicon-search' aria-hidden='true'></span>\n					"
+    + alias1((lookupProperty(helpers,"getWord")||(depth0 && lookupProperty(depth0,"getWord"))||container.hooks.helperMissing).call(depth0 != null ? depth0 : (container.nullContext || {}),"meeting details",{"name":"getWord","hash":{},"data":data,"loc":{"start":{"line":4,"column":5},"end":{"line":4,"column":34}}}))
+    + "\n				</a>\n		    </div>\n";
+},"useData":true});
 this["hbs_Crouton"]["templates"]["meetings"] = Handlebars.template({"1":function(container,depth0,helpers,partials,data) {
     var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3=container.escapeExpression, alias4=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) {
         if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
@@ -15147,12 +15178,7 @@ var croutonDefaultTemplates = {
 		"{{/isVirtualOrHybrid}}",
 		"{{#isNotTemporarilyClosed this}}",
 		"    {{#unless (hasFormats 'VM' this)}}",
-		"        <div>",
-		"            <a onclick='crouton.meetingModal({{this.id_bigint}})' tabindex='0' href='#' id='map-button' class='btn btn-primary btn-xs'>",
-		"				<span class='glyphicon glyphicon-search' aria-hidden='true'></span>",
-		"				{{getWord 'meeting details'}}",
-		"			</a>",
-		"        </div>",
+		"	 {{> meetingDetailsButton this}}",
 		"    {{/unless}}",
 		"{{/isNotTemporarilyClosed}}"
 	].join('\n'),
@@ -15223,18 +15249,7 @@ var croutonDefaultTemplates = {
             <div class="location-text">{{{this.location_text}}}</div>
             <div class="meeting-address">{{this.formatted_address}}</div>
             <div class="location-information">{{{this.formatted_location_info}}}</div>
-            <div class="bootstrap-bmlt">
-                <button data-latitude="{{this.latitude}}" data-longitude="{{this.longitude}}" class="btn btn-primary bmlt-xs get-directions-modal">
-                    <span class="glyphicon glyphicon-road"></span> {{getWord "get_directions"}}
-                </button>
-            </div>
-            <div id="directionsMapModal" class="directions-map-modal" style="display: none;">
-                <div class="directions-map-modal-content">
-                    <span class="directions-map-modal-close">&times;</span>
-                    <h3>{{getWord "select_map_app"}}</h3>
-                    <div id="directionsMapOptions"></div>
-                </div>
-            </div>
+			{{> directionsButton this}}
             <br/>
         {{/isInPersonOrHybrid}}
         {{#isVirtualOrHybrid this}}
@@ -17158,21 +17173,6 @@ function Crouton(config) {
 		else self.meetingSearch();
 	}
 	else if (!window.croutonMap.hasMapSearch()) self.meetingSearch();
-
-	jQuery('html').on('click', '.get-directions-modal', function (e) {
-		var lat = jQuery(this).data('latitude');
-		var lng = jQuery(this).data('longitude');
-
-		if (isMobileDevice()) {
-			showMapSelector(lat, lng);
-		} else {
-			window.open(`https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`, '_blank');
-		}
-	});
-
-	jQuery('html').on('click', '.directions-map-modal-close', function (e) {
-		closeDirectionsMapModal()
-	});
 }
 
 Crouton.prototype.setConfig = function(config) {
@@ -17286,10 +17286,10 @@ Crouton.prototype.doHandlebars = function() {
 				var customEnrichTemplate = crouton_Handlebars.compile('{{enrich this}}');
 				customEnrichTemplate(enrichedMeetingData[0]);
 
-				self.handlebars(enrichedMeetingData[0], elements)
+				self.handlebars(enrichedMeetingData[0], elements);
+				jQuery('.get-directions-modal').on('click', openDirectionsModal);
 			});
 	});
-
 };
 
 Crouton.prototype.meetingModal = function(meetingId) {
@@ -17303,10 +17303,10 @@ Crouton.prototype.meetingModal = function(meetingId) {
 	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()}));
 	let mm = document.getElementById('meeting_modal');
 	document.body.appendChild(mm);
+	jQuery('#meeting_modal .get-directions-modal').on('click', openDirectionsModal);
 	croutonMap.openModalWindow(mm, true);
 	croutonMap.showMap(true);
 	let visibleMeetings = jQuery('.bmlt-data-row:visible');
@@ -17667,7 +17667,12 @@ Crouton.prototype.render = function(doMeetingMap = false) {
 					});
 					jQuery('.meeting-group:not(.non-collapsable) .group-header').on('click', function(e) {
 						jQuery(e.target.parentElement).toggleClass('closed');
-					})
+					});
+					jQuery('.get-directions-modal').on('click', openDirectionsModal);
+
+					jQuery('.directions-map-modal-close').on('click', function (e) {
+						closeDirectionsMapModal()
+					});
 					/****
 					jQuery('.custom-ul').on('click', 'a', function (event) {
 						jQuery('.bmlt-page').each(function (index) {
@@ -17824,9 +17829,8 @@ function isMobileDevice() {
     return isIOSDevice() || isAndroidDevice() || /Mobi|Android/i.test(navigator.userAgent);
 }
 
-function createMapOptions(latitude, longitude) {
+function createDirectionsOptions() {
     const options = [];
-    const isMobile = isMobileDevice();
     const isIOS = isIOSDevice();
 
     // Apple Maps (iOS only)
@@ -17835,7 +17839,7 @@ function createMapOptions(latitude, longitude) {
             name: crouton.localization.getWord('apple_maps'),
             description: crouton.localization.getWord('apple_maps_desc'),
             icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007AFF'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E",
-            url: `https://maps.apple.com/?daddr=${latitude},${longitude}`
+            url: 'https://maps.apple.com/?daddr=${latitude},${longitude}'
         });
     }
 
@@ -17844,18 +17848,16 @@ function createMapOptions(latitude, longitude) {
         name: crouton.localization.getWord('google_maps'),
         description: crouton.localization.getWord('google_maps_desc_mobile'),
         icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234285f4'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E",
-        url: `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`
+        url: 'https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}'
     });
 
-    // Waze (mobile devices)
-    if (isMobile) {
-        options.push({
-            name: crouton.localization.getWord('waze'),
-            description: crouton.localization.getWord('waze_desc'),
-            icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300D4FF'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E",
-            url: `https://waze.com/ul?ll=${latitude},${longitude}&navigate=yes`
-        });
-    }
+    // Waze (always available)
+    options.push({
+        name: crouton.localization.getWord('waze'),
+        description: crouton.localization.getWord('waze_desc'),
+        icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300D4FF'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E",
+        url: 'https://waze.com/ul?ll=${latitude},${longitude}&navigate=yes'
+    });
 
     return options;
 }
@@ -18034,6 +18036,8 @@ crouton_Handlebars.registerPartial('icsButton',
     '<a href="{{BMLT2ics}}?meeting-id={{id_bigint}}" download="{{meeting_name}}.ics" id="share-button" class="btn btn-primary btn-xs" ><span class="glyphicon glyphicon-download-alt"></span> {{getWord "bmlt2ics"}}</a>');
 crouton_Handlebars.registerPartial('offerIcsButton',
     "{{#if (hasBMLT2ics)}}{{> icsButton}}<br/>{{/if}}");
+crouton_Handlebars.registerPartial('directionsButton', hbs_Crouton.templates['directionsButton']);
+crouton_Handlebars.registerPartial('meetingDetailsButton', hbs_Crouton.templates['meetingDetailsButton']);
 function convertToPunyCode(str) {
 	return str !== undefined ? punycode.toASCII(str.toLowerCase()).replace(/\W|_/g, "-") : "";
 }
@@ -18249,15 +18253,27 @@ function swipedetect(el, callback){
         }
     }, false)
 }
+function openDirectionsModal(e) {
+	const latitude = jQuery(this).data('latitude');
+	const longitude = jQuery(this).data('longitude');
 
-function showMapSelector(latitude, longitude) {
-	// For desktop users, directly open Google Maps
-	if (!isMobileDevice()) {
-		window.open(`https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`, '_blank');
+	const savedUrl = localStorage.getItem("croutonDirectionsURL");
+	if (savedUrl && savedUrl != null) {
+		openDirections(savedUrl, latitude, longitude, false);
 		return;
 	}
-
-	// For mobile users, show the map selection modal
+	if (!document.getElementById('directionsMapModal')) {
+		const word = crouton.localization.getWord("select_map_app");
+		e.target.insertAdjacentHTML("afterend",
+`<div id="directionsMapModal" class="directions-map-modal remove-after-use">
+                <div class="directions-map-modal-content">
+                    <span class="directions-map-modal-close">×</span>
+                    <h3>`+word+`</h3>
+                    <div id="directionsMapOptions"></div>
+                </div>
+</div>`
+		);
+	}
 	const modal = document.getElementById('directionsMapModal');
 	const optionsContainer = document.getElementById('directionsMapOptions');
 
@@ -18268,12 +18284,12 @@ function showMapSelector(latitude, longitude) {
 
 	optionsContainer.innerHTML = '';
 
-	const options = createMapOptions(latitude, longitude);
+	const options = createDirectionsOptions();
 
 	options.forEach(option => {
 		const optionElement = document.createElement('div');
 		optionElement.className = 'directions-map-option';
-		optionElement.onclick = () => openMap(option.url);
+		optionElement.onclick = () => openDirections(option.url, latitude, longitude);
 
 		optionElement.innerHTML = `
             <img src="${option.icon}" alt="${option.name}" class="directions-map-option-icon">
@@ -18285,18 +18301,32 @@ function showMapSelector(latitude, longitude) {
 
 		optionsContainer.appendChild(optionElement);
 	});
-
+	const label = crouton.localization.getWord('Remember my choice');
+	const rememberChoiceElement = document.createElement('div');
+	rememberChoiceElement.className = 'directions-remember-choice-div';
+	rememberChoiceElement.innerHTML =
+`<input type="checkbox" id="rememberDirectionsChoice" name="rememberDirectionsChoice" value="1">
+<label for="rememberDirectionsChoice">`+label+`</label>`
+	;
+	optionsContainer.appendChild(rememberChoiceElement);
+	jQuery('html').on('click', '.directions-map-modal-close', closeDirectionsModal);
 	// Show modal
 	modal.style.display = 'block';
 }
 
-function closeDirectionsMapModal() {
-	document.getElementById('directionsMapModal').style.display = 'none';
+function closeDirectionsModal() {
+		const modal = document.getElementById('directionsMapModal');
+		modal.style.display = 'none';
+		if (modal.className.includes('remove-after-use')) modal.remove();
 }
 
-function openMap(url) {
+function openDirections(url, latitude, longitude, fromModal = true) {
+	const save = jQuery('#rememberDirectionsChoice');
+	if (fromModal && save.length && save.is(":checked")) localStorage.setItem("croutonDirectionsURL", url);
+	url = url.replaceAll('${latitude}', latitude);
+	url = url.replaceAll('${longitude}', longitude);
 	window.open(url, '_blank');
-	closeDirectionsMapModal();
+	if (fromModal) closeDirectionsModal();
 }
 
 function MeetingMap(inConfig) {