Fixes to popup handling and to broken styles

Logic/Actors/GeoLocationHandler.ts

@@ -8,13 +8,46 @@ import {LocalStorageSource} from "../Web/LocalStorageSource";
 
 export default class GeoLocationHandler extends UIElement {
 
+    /**
+     * Wether or not the geolocation is active, aka the user requested the current location
+     * @private
+     */
     private readonly _isActive: UIEventSource<boolean> = new UIEventSource<boolean>(false);
+
+    /**
+     * The callback over the permission API
+     * @private
+     */
     private readonly _permission: UIEventSource<string> = new UIEventSource<string>("");
+    /***
+     * The marker on the map, in order to update it
+     * @private
+     */
     private _marker: L.Marker;
+    /**
+     * Literally: _currentGPSLocation.data != undefined
+     * @private
+     */
     private readonly _hasLocation: UIEventSource<boolean>;
     private readonly _currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>;
+    /**
+     * Kept in order to update the marker
+     * @private
+     */
     private readonly _leafletMap: UIEventSource<L.Map>;
+    /**
+     * The date when the user requested the geolocation. If we have a location, it'll autozoom to it the first 30 secs
+     * @private
+     */
     private _lastUserRequest: Date;
+    /**
+     * A small flag on localstorage. If the user previously granted the geolocation, it will be set.
+     * On firefox, the permissions api is broken (probably fingerprint resistiance) and "granted + don't ask again" doesn't stick between sessions.
+     *
+     * Instead, we set this flag. If this flag is set upon loading the page, we start geolocating immediately.
+     * If the user denies the geolocation this time, we unset this flag
+     * @private
+     */
     private readonly _previousLocationGrant : UIEventSource<string> = LocalStorageSource.Get("geolocation-permissions");
     
     constructor(currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>,
@@ -28,17 +61,26 @@ export default class GeoLocationHandler extends UIElement {
         import("../../vendor/Leaflet.AccuratePosition.js").then(() => {
             self.init();
         })
+        
+        const currentPointer = this._isActive.map(isActive => {
+            if(isActive && !self._hasLocation.data){
+                return "cursor-wait"
+            }
+            return "cursor-pointer"
+        }, [this._hasLocation])
+        currentPointer.addCallbackAndRun(pointerClass => {
+            self.SetClass(pointerClass);
+            self.Update()
+        })
     }
 
-
-    public init() {
+    private init() {
         this.ListenTo(this._hasLocation);
         this.ListenTo(this._isActive);
         this.ListenTo(this._permission);
 
         const self = this;
 
-
         function onAccuratePositionProgress(e) {
             self._currentGPSLocation.setData({latlng: e.latlng, accuracy: e.accuracy});
         }
@@ -60,7 +102,7 @@ export default class GeoLocationHandler extends UIElement {
 
         this._currentGPSLocation.addCallback((location) => {
             self._previousLocationGrant.setData("granted");
-
+            
             const timeSinceRequest = (new Date().getTime() - (self._lastUserRequest?.getTime() ?? 0)) / 1000;
             if(timeSinceRequest < 30){
                 self._lastUserRequest = undefined;
@@ -90,7 +132,7 @@ export default class GeoLocationHandler extends UIElement {
             ?.then(function (status) {
                 console.log("Geolocation is already", status)
                 if (status.state === "granted") {
-                   self.StartGeolocating();
+                   self.StartGeolocating(19, false);
                 }
                 self._permission.setData(status.state);
                 status.onchange = function () {
@@ -134,10 +176,10 @@ export default class GeoLocationHandler extends UIElement {
     }
 
    
-    private StartGeolocating(zoomlevel = 19) {
+    private StartGeolocating(zoomlevel = 19, zoomToGPS=true) {
         const self = this;
         console.log("Starting geolocation")
-        this._lastUserRequest = new Date();
+        this._lastUserRequest = zoomToGPS ? new Date() : new Date(0);
         const map: any = this._leafletMap.data;
         if (self._permission.data === "denied") {
             self._previousLocationGrant.setData("");

Logic/Actors/StrayClickHandler.ts

@@ -1,8 +1,8 @@
 import * as L from "leaflet";
-import {UIElement} from "../../UI/UIElement";
 import Svg from "../../Svg";
 import {UIEventSource} from "../UIEventSource";
 import Img from "../../UI/Base/Img";
+import ScrollableFullScreen from "../../UI/Base/ScrollableFullScreen";
 
 /**
  * The stray-click-hanlders adds a marker to the map if no feature was clicked.
@@ -10,15 +10,13 @@ import Img from "../../UI/Base/Img";
  */
 export default class StrayClickHandler {
     private _lastMarker;
-    private _uiToShow: (() => UIElement);
 
     constructor(
         lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
         selectedElement: UIEventSource<string>,
         filteredLayers: UIEventSource<{ readonly isDisplayed: UIEventSource<boolean> }[]>,
         leafletMap: UIEventSource<L.Map>,
-        uiToShow: (() => UIElement)) {
-        this._uiToShow = uiToShow;
+        uiToShow: ScrollableFullScreen) {
         const self = this;
         filteredLayers.data.forEach((filteredLayer) => {
             filteredLayer.isDisplayed.addCallback(isEnabled => {
@@ -49,13 +47,13 @@ export default class StrayClickHandler {
                     popupAnchor: [0, -45]
                 })
             });
-            const uiElement = uiToShow();
-            const popup = L.popup().setContent(uiElement.Render());
+            const popup = L.popup().setContent(uiToShow.Render());
             self._lastMarker.addTo(leafletMap.data);
             self._lastMarker.bindPopup(popup);
 
             self._lastMarker.on("click", () => {
-                uiElement.Update();
+                uiToShow.Activate();
+                uiToShow.Update();
             });
         });