Class based popup show and hide api

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">

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();
 	});
 }

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();
 	});
 }

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();
 		});
 	});
 }

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;
 }

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 = "";