clerie/traveldrafter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Class based popup show and hide api

Browse Source
This commit is contained in:
clerie
2025-07-06 21:01:04 +02:00
parent 5b7ba0ad69
commit 098addc4e8
6 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/index.html
View File

@@ -21,7 +21,7 @@
<div id="drafting-board-content"></div> <div id="drafting-board-content"></div>
</div> </div>
<div id="journeys-search" class="popup"> <div id="journeys-search" class="popup popup-hidden">
<div class="popup-close">&times;</div> <div class="popup-close">&times;</div>
<div id="journeys-search-content" class="popup-content"> <div id="journeys-search-content" class="popup-content">
<div class="container"> <div class="container">
@@ -33,7 +33,7 @@
</div> </div>
</div> </div>
<div id="locations-search" class="popup"> <div id="locations-search" class="popup popup-hidden">
<div class="popup-close">&times;</div> <div class="popup-close">&times;</div>
<div id="locations-search-content" class="popup-content"> <div id="locations-search-content" class="popup-content">
<div class="container"> <div class="container">
@@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<div id="trip-details" class="popup"> <div id="trip-details" class="popup popup-hidden">
<div class="popup-close">&times;</div> <div class="popup-close">&times;</div>
<div id="trip-details-content" class="popup-content"> <div id="trip-details-content" class="popup-content">
<div class="container"> <div class="container">

2
web/journeys-search.js
View File

@@ -51,6 +51,6 @@ export function attachJourneysSearch(search_element) {
element_from.value = ""; element_from.value = "";
element_to.value = ""; element_to.value = "";
element_result.innerText = ""; element_result.innerText = "";
element_journeys_search.style.display = "block"; element_journeys_search.popupShow();
}); });
} }

4
web/locations-search.js
View File

@@ -26,7 +26,7 @@ function createLocationElement(location) {
location_element.addEventListener("click", event => { location_element.addEventListener("click", event => {
window.dataStore.recent_locations.remember(event.target.dataset.locationId); window.dataStore.recent_locations.remember(event.target.dataset.locationId);
element_locations_search.locationSelectedCallback(event.target.innerText, 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; return location_element;
@@ -46,6 +46,6 @@ export function attachLocationsSearch(search_element) {
let el = createLocationElement(location); let el = createLocationElement(location);
element_response.appendChild(el); element_response.appendChild(el);
} }
element_locations_search.style.display = "block"; element_locations_search.popupShow();
}); });
} }

10
web/popup.js
View File

@@ -1,7 +1,15 @@
export function setupPopups() { 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 => { document.querySelectorAll(".popup-close").forEach(element => {
element.addEventListener("click", event => { element.addEventListener("click", event => {
event.target.parentElement.style.display="none"; event.target.parentElement.popupHide();
}); });
}); });
} }

6
web/style.css
View File

@@ -61,11 +61,13 @@ body {
background-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9);
color: white; color: white;
display: none;
overflow: scroll; overflow: scroll;
} }
.popup-hidden {
display: none;
}
#journeys-search { #journeys-search {
z-index: 8000; z-index: 8000;
} }

2
web/trip-details.js
View File

@@ -6,7 +6,7 @@ let element_response = document.querySelector("#trip-details-response");
export function displayTripDetails(trip_id) { export function displayTripDetails(trip_id) {
element_response.innerHTML = "Loading…"; element_response.innerHTML = "Loading…";
element_trip_details.style.display = "block"; element_trip_details.popupShow();
fetchTrip(trip_id).then(result => { fetchTrip(trip_id).then(result => {
element_response.innerText = ""; element_response.innerText = "";