From 6c57afab1d2d13cb783618e6e62af2a8503ae84b Mon Sep 17 00:00:00 2001
From: Dave <davidwhittingham94@gmail.com>
Date: Tue, 9 Jul 2024 00:53:07 +0200
Subject: [PATCH] Close keyboard on mobile before loading polygon on map and
 use custom minimized attribution control for better ui on mobiles.

---
 TODO.md         |  3 ++-
 app/src/main.ts | 13 ++++++++++++-
 app/src/ui.ts   | 30 ++++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/TODO.md b/TODO.md
index 96fd788..2e22426 100644
--- a/TODO.md
+++ b/TODO.md
@@ -28,4 +28,5 @@
 - [] Add close button to the info-container.
 - [] Add directions with [maplibre-gl-directions](https://maplibre.org/maplibre-gl-directions) [https://github.com/maplibre/maplibre-gl-directions](https://github.com/maplibre/maplibre-gl-directions)
 - [] Add distance.
-
+- [x] Hide the keyboard on phone when something is selected. [https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur)
+- [] Add loading location spinner.
\ No newline at end of file
diff --git a/app/src/main.ts b/app/src/main.ts
index 73274bd..f5c81d3 100644
--- a/app/src/main.ts
+++ b/app/src/main.ts
@@ -1,7 +1,7 @@
 import { Map } from "maplibre-gl";
 import MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder'
 import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
-import { ShareControl, FAQControl, hideAllContainers, hideInfo, showSpinButton, hideSpinButton, currentlyDisplayedContainer } from "./ui";
+import { ShareControl, FAQControl, hideAllContainers, hideInfo, showSpinButton, hideSpinButton, currentlyDisplayedContainer, CustomAttributionControl } from "./ui";
 import { FeatureCollection, Feature, Geometry } from "geojson";
 import { fetchPubsInRelation } from "./overpass";
 
@@ -16,6 +16,7 @@ export const map = new Map({
   zoom: 2,
   maxZoom: 18,
   minZoom: 0,
+  attributionControl: false
 });
 
 
@@ -91,6 +92,15 @@ geocoderControl.on('result', async (event: any) => {
     return;
   }
 
+  // remove focus the input field to hide the keyboard on mobile
+  const inputElement = document.getElementsByClassName('maplibregl-ctrl-geocoder--input')[0];
+  if (inputElement instanceof HTMLElement) {
+    inputElement.blur();
+    await (300) // wait for the Map resize to finish after the keyboard is hidden
+  } else {
+    console.error('Element not found or is not an HTMLElement');
+  }
+
   displayBoundaryOnMap(event.result.geometry)
   pubs = await fetchPubsInRelation(event.result.properties.osm_id);
   displayPointsOnMap(pubs)
@@ -98,6 +108,7 @@ geocoderControl.on('result', async (event: any) => {
 });
 
 map.addControl(geocoderControl, "top-right");
+map.addControl(new CustomAttributionControl({ compact: true }), "bottom-right");
 map.addControl(new FAQControl(), "bottom-right");
 map.addControl(new ShareControl("https://whereroulette.com", "Spin the wheel!", "WhereRoulette helps you choose a place to meet! 🌍 Powered by OSM ❤️‍🔥"), "bottom-right");
 
diff --git a/app/src/ui.ts b/app/src/ui.ts
index 5398eee..65b412f 100644
--- a/app/src/ui.ts
+++ b/app/src/ui.ts
@@ -1,5 +1,6 @@
 import { library, icon } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion, faShareNodes, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import maplibregl from "maplibre-gl";
 
 // register the icons with the library for future use
 library.add(faQuestion, faShareNodes, faSpinner);
@@ -7,6 +8,35 @@ library.add(faQuestion, faShareNodes, faSpinner);
 // state variable to keep track of which container is currently displayed
 export let currentlyDisplayedContainer: "faq" | "info" | null = "info";
 
+export class CustomAttributionControl extends maplibregl.AttributionControl {
+  _toggleAttribution = () => {
+    if (this._container.classList.contains("maplibregl-compact")) {
+      if (this._container.classList.contains("maplibregl-compact-show")) {
+        this._container.setAttribute("open", "");
+        this._container.classList.remove("maplibregl-compact-show");
+      } else {
+        this._container.classList.add("maplibregl-compact-show");
+        this._container.removeAttribute("open");
+      }
+    }
+  };
+
+  _updateCompactMinimize = () => {
+    if (this._container.classList.contains("maplibregl-compact")) {
+      if (this._container.classList.contains("maplibregl-compact-show")) {
+        this._container.classList.remove("maplibregl-compact-show");
+      }
+    }
+  };
+
+  onAdd(map: maplibregl.Map) {
+    const container = super.onAdd(map);
+    container.classList.add("maplibregl-compact");
+    this._map.on("mousedown", this._updateCompactMinimize);
+    return container;
+  }
+}
+
 export class FAQControl {
   _map: any;
   _container!: HTMLDivElement;