From 098addc4e8c6d85cdc2a6791bdcf4a90f27d950b Mon Sep 17 00:00:00 2001
From: clerie <git@clerie.de>
Date: Sun, 6 Jul 2025 21:01:04 +0200
Subject: [PATCH] Class based popup show and hide api

---
 web/index.html          |  6 +++---
 web/journeys-search.js  |  2 +-
 web/locations-search.js |  4 ++--
 web/popup.js            | 10 +++++++++-
 web/style.css           |  6 ++++--
 web/trip-details.js     |  2 +-
 6 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/web/index.html b/web/index.html
index 924edbc..a323903 100644
--- a/web/index.html
+++ b/web/index.html
@@ -21,7 +21,7 @@
 			<div id="drafting-board-content"></div>
 		</div>
 
-		<div id="journeys-search" class="popup">
+		<div id="journeys-search" class="popup popup-hidden">
 			<div class="popup-close">&times;</div>
 			<div id="journeys-search-content" class="popup-content">
 				<div class="container">
@@ -33,7 +33,7 @@
 			</div>
 		</div>
 
-		<div id="locations-search" class="popup">
+		<div id="locations-search" class="popup popup-hidden">
 			<div class="popup-close">&times;</div>
 			<div id="locations-search-content" class="popup-content">
 				<div class="container">
@@ -43,7 +43,7 @@
 			</div>
 		</div>
 
-		<div id="trip-details" class="popup">
+		<div id="trip-details" class="popup popup-hidden">
 			<div class="popup-close">&times;</div>
 			<div id="trip-details-content" class="popup-content">
 				<div class="container">
diff --git a/web/journeys-search.js b/web/journeys-search.js
index 3c7b70d..9ffdaea 100644
--- a/web/journeys-search.js
+++ b/web/journeys-search.js
@@ -51,6 +51,6 @@ export function attachJourneysSearch(search_element) {
 		element_from.value = "";
 		element_to.value = "";
 		element_result.innerText = "";
-		element_journeys_search.style.display = "block";
+		element_journeys_search.popupShow();
 	});
 }
diff --git a/web/locations-search.js b/web/locations-search.js
index be13b7a..fd7affd 100644
--- a/web/locations-search.js
+++ b/web/locations-search.js
@@ -26,7 +26,7 @@ function createLocationElement(location) {
 	location_element.addEventListener("click", event => {
 		window.dataStore.recent_locations.remember(event.target.dataset.locationId);
 		element_locations_search.locationSelectedCallback(event.target.innerText, event.target.dataset.locationId);
-		element_locations_search.style.display = "none";
+		element_locations_search.popupHide();
 	});
 
 	return location_element;
@@ -46,6 +46,6 @@ export function attachLocationsSearch(search_element) {
 			let el = createLocationElement(location);
 			element_response.appendChild(el);
 		}
-		element_locations_search.style.display = "block";
+		element_locations_search.popupShow();
 	});
 }
diff --git a/web/popup.js b/web/popup.js
index cf9f4db..f45f6c8 100644
--- a/web/popup.js
+++ b/web/popup.js
@@ -1,7 +1,15 @@
 export function setupPopups() {
+	document.querySelectorAll(".popup").forEach(element => {
+		element.popupShow = () => {
+			element.classList.remove("popup-hidden");
+		};
+		element.popupHide = () => {
+			element.classList.add("popup-hidden");
+		};
+	});
 	document.querySelectorAll(".popup-close").forEach(element => {
 		element.addEventListener("click", event => {
-			event.target.parentElement.style.display="none";
+			event.target.parentElement.popupHide();
 		});
 	});
 }
diff --git a/web/style.css b/web/style.css
index b8b9f80..35e551b 100644
--- a/web/style.css
+++ b/web/style.css
@@ -61,11 +61,13 @@ body {
 	background-color: rgba(0, 0, 0, 0.9);
 	color: white;
 
-	display: none;
-
 	overflow: scroll;
 }
 
+.popup-hidden {
+	display: none;
+}
+
 #journeys-search {
 	z-index: 8000;
 }
diff --git a/web/trip-details.js b/web/trip-details.js
index 3c9640f..9bca668 100644
--- a/web/trip-details.js
+++ b/web/trip-details.js
@@ -6,7 +6,7 @@ let element_response = document.querySelector("#trip-details-response");
 
 export function displayTripDetails(trip_id) {
 	element_response.innerHTML = "Loading…";
-	element_trip_details.style.display = "block";
+	element_trip_details.popupShow();
 
 	fetchTrip(trip_id).then(result => {
 		element_response.innerText = "";