Do not nag directly for geolocation

public/static/js/geolocation.js

@@ -1,9 +1,9 @@
 $(document).ready(function() {
-	var prePlaceholder = $('p.geolocationhint');
+	function getPlaceholder() {
-	var placeholder = $('div.geolocation div.progress');
+		return $('div.geolocation div.progress');
+	}
 	var showError = function(header, message, code) {
-		prePlaceholder.remove();
+		getPlaceholder().remove();
-		placeholder.remove();
 		var errnode = $(document.createElement('div'));
 		errnode.attr('class', 'error');
 		errnode.text(message);
@@ -36,7 +36,7 @@ $(document).ready(function() {
 
 				resultBody.append('<tr><td><a href="/s/' + ds100 + '">' + name + '</a></td></tr>');
 			});
-			placeholder.replaceWith(resultTable);
+			getPlaceholder().replaceWith(resultTable);
 		}
 	};
 
@@ -56,9 +56,26 @@ $(document).ready(function() {
 		}
 	};
 
-	if ($('div.geolocation').length) {
+	var geoLocationButton = $('div.geolocation > button');
+	var getGeoLocation = function() {
+		geoLocationButton.replaceWith($('<p class="geolocationhint">Stationen in der Umgebung:</p><div class="progress"><div class="indeterminate"></div></div>'));
+		navigator.geolocation.getCurrentPosition(processLocation, processError);
+	}
+
+	if (geoLocationButton.length) {
 		if (navigator.geolocation) {
-			navigator.geolocation.getCurrentPosition(processLocation, processError);
+			if (navigator.permissions) {
+				navigator.permissions.query({ name:'geolocation' }).then(function(value) {
+					if (value.state === 'prompt') {
+						geoLocationButton.on('click', getGeoLocation);
+					} else {
+						// User either rejected or granted permission. User wont get prompted and we can show stations/error
+						getGeoLocation();
+					}
+				});
+			} else {
+				geoLocationButton.on('click', getGeoLocation);
+			}
 		} else {
 			showError('Standortanfragen werden von diesem Browser nicht unterstützt', '', null);
 		}

public/static/js/geolocation.min.js

@@ -1 +1 @@
-$(document).ready(function(){var e=$("p.geolocationhint"),t=$("div.geolocation div.progress"),n=function(n,r,o){e.remove(),t.remove();var a=$(document.createElement("div"));a.attr("class","error"),a.text(r);var i=$(document.createElement("strong"));i.text(n),a.prepend(i),$("div.geolocation").append(a)},r=function(e){e.error?n("Backend-Fehler:",e.error):0==e.candidates.length?n("Keine Bahnhöfe in 70km Umkreis gefunden",""):(resultTable=$("<table><tbody></tbody></table>"),resultBody=resultTable.children(),$.each(e.candidates,function(e,t){var n=t.ds100,r=t.name,o=t.distance;o=o.toFixed(1);var a=$(document.createElement("a"));a.attr("href",n),a.text(r),resultBody.append('<tr><td><a href="/s/'+n+'">'+r+"</a></td></tr>")}),t.replaceWith(resultTable))},o=function(e){$.post("/geolocation",{lon:e.coords.longitude,lat:e.coords.latitude},r)},a=function(e){e.code==e.PERMISSION_DENIED?n("Standortanfrage nicht möglich.","Vermutlich fehlen die Rechte im Browser oder der Android Location Service ist deaktiviert."):e.code==e.POSITION_UNAVAILABLE?n("Standort konnte nicht ermittelt werden","(Service nicht verfügbar)"):e.code==e.TIMEOUT?n("Standort konnte nicht ermittelt werden","(Timeout)"):n("Standort konnte nicht ermittelt werden","(unbekannter Fehler)")};$("div.geolocation").length&&(navigator.geolocation?navigator.geolocation.getCurrentPosition(o,a):n("Standortanfragen werden von diesem Browser nicht unterstützt",""))});
+$(document).ready(function(){function i(){return $("div.geolocation div.progress")}function t(e,t,n){i().remove();var o=$(document.createElement("div"));o.attr("class","error"),o.text(t);var r=$(document.createElement("strong"));r.text(e),o.prepend(r),$("div.geolocation").append(o)}function n(e){e.error?t("Backend-Fehler:",e.error):0==e.candidates.length?t("Keine Bahnhöfe in 70km Umkreis gefunden",""):(resultTable=$("<table><tbody></tbody></table>"),resultBody=resultTable.children(),$.each(e.candidates,function(e,t){var n=t.ds100,o=t.name,r=t.distance;r=r.toFixed(1);var i=$(document.createElement("a"));i.attr("href",n),i.text(o),resultBody.append('<tr><td><a href="/s/'+n+'">'+o+"</a></td></tr>")}),i().replaceWith(resultTable))}function e(e){$.post("/geolocation",{lon:e.coords.longitude,lat:e.coords.latitude},n)}function o(e){e.code==e.PERMISSION_DENIED?t("Standortanfrage nicht möglich.","Vermutlich fehlen die Rechte im Browser oder der Android Location Service ist deaktiviert."):e.code==e.POSITION_UNAVAILABLE?t("Standort konnte nicht ermittelt werden","(Service nicht verfügbar)"):e.code==e.TIMEOUT?t("Standort konnte nicht ermittelt werden","(Timeout)"):t("Standort konnte nicht ermittelt werden","(unbekannter Fehler)")}function r(){a.replaceWith($('<p class="geolocationhint">Stationen in der Umgebung:</p><div class="progress"><div class="indeterminate"></div></div>')),navigator.geolocation.getCurrentPosition(e,o)}var a=$("div.geolocation > button");a.length&&(navigator.geolocation?navigator.permissions?navigator.permissions.query({name:"geolocation"}).then(function(e){"prompt"===e.state?a.on("click",r):r()}):a.on("click",r):t("Standortanfragen werden von diesem Browser nicht unterstützt",""))});

templates/landingpage.html.ep

@@ -51,9 +51,8 @@
 					<div class="card-content white-text">
 						<span class="card-title">Hallo, <%= current_user()->{name} %>!</span>
 						<p>Du bist gerade nicht eingecheckt.</p>
-						<p class="geolocationhint">Stationen in der Umgebung:</p>
 						<div class="geolocation">
-							<div class="progress"><div class="indeterminate"></div></div>
+							<button class="btn waves-effect waves-light btn-flat white">Stationen in der Umgebung abfragen</button>
 						</div>
 						%= form_for 'list_departures' => begin
 							<div class="input-field">