diff --git a/css/style.css b/css/style.css index 479ba4d..9f9d92c 100644 --- a/css/style.css +++ b/css/style.css @@ -100,7 +100,8 @@ dd { } #selectedEmergencyContactsField { - visibility: hidden; + /* Initialize the emergency contact field for the selected country to hidden */ + display: none; } /* Styles for the country search */ @@ -116,18 +117,86 @@ dd { } /* Styles for the dropdown */ +.dropdownBox { + display: inline-block; -.dropdown-box { - display: flex;; - width: 300px; - justify-content: center; - padding: 40px; + width: 100%; + position: relative; +} + +.dropdownBox input { + border: 1px solid black; + width: 100%; + border-radius: 5px; + padding: 5px; +} + +.dropdownBox .selectedItem { + position: relative; +} + +.dropdownBox .selectedItem input { + cursor: pointer; + color: rgb(80, 80, 80); } -.dropdown-box input { - border: black solid 1px; - outline: none; +.dropdownBox .selectedItem::after { + content: ""; + width: 5px; + height: 5px; + border: 4px solid; + border-color: transparent rgb(80, 80, 80) rgb(80, 80, 80) transparent; + position: absolute; + top: 70%; + right: 20px; + transform: translateY(-70%) rotate(45deg); +} + +.dropdownBox.active .selectedItem::after { + transform: translateY(-40%) rotate(135deg); +} + +.dropdownBox .dropdownContent { + box-shadow: 0 5px 15px black; border-radius: 5px; + max-height: 370px; + overflow-y: auto; + display: none; + position: absolute; + z-index: 99; + background-color: white; + width: 100%; +} + +.dropdownBox.active .dropdownContent { + display: block; +} + +.dropdownBox .dropdownContent .searchInput { + padding: 5px; + margin-bottom: 5px; +} + +.dropdownBox .dropdownContent ul { + list-style: none; +} + +.dropdownBox .dropdownContent ul li { + padding: 2px 5px; + cursor: pointer; +} + +.dropdownBox .dropdownContent ul li.hidden { + display: none; +} + +.dropdownBox .dropdownContent ul li:hover { + background-color: lightgray; +} + +.selected { + background-color: #bed9f7; + color: midnightblue; } /* Responsive Design for tablets */ diff --git a/index.html b/index.html index f1f4c70..8ea60d5 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ +
@@ -33,294 +34,266 @@

Reload -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-

Selected country:

-

Select a country

Emergency Contacts

- \ No newline at end of file diff --git a/js/dropdown-search.js b/js/dropdown-search.js index e69de29..a825a53 100644 --- a/js/dropdown-search.js +++ b/js/dropdown-search.js @@ -0,0 +1,66 @@ +window.addEventListener("load", () => { + + //Adds an event listener for opening & closing the dropdown + window.addEventListener("click", (click) => { + const dropdownElement = document.querySelector(".dropdownContent"); + const dropdown = document.getElementById("countryDropdown"); + const dropdownField = document.getElementById("dropdownField"); + + + if (dropdown.classList.contains("active") && !dropdownElement.contains(click.target)) { + closeDropdown(); + } else if (dropdownField.contains(click.target)) { + openDropdown(); + } + }) + + //Adds a click event-listener to every dropdown item for selecting the item + const dropdownItems = document.querySelectorAll(".dropdownItem"); + dropdownItems.forEach(dropdownItem => { + dropdownItem.addEventListener("click", () => { + const dropdownField = document.getElementById("dropdownField"); + + //Deselecting the previous item + const selectedItem = document.querySelector(".selected"); + selectedItem.classList.remove("selected"); + + + dropdownItem.classList.add("selected"); + dropdownField.value = dropdownItem.innerHTML; + closeDropdown() + }) + }) + + //Adds an event listener to the search input element for filtering the dropdown + const searchInput = document.getElementById("searchBox"); + searchInput.addEventListener("keyup", () => { + const filter = searchInput.value.toLowerCase(); + dropdownItems.forEach(dropdownItem => { + if (dropdownItem.innerHTML.toLowerCase().includes(filter)) { + dropdownItem.classList.remove("hidden"); + } else { + dropdownItem.classList.add("hidden"); + } + }) + }) + } +) + +function closeDropdown() { + const dropdownSearch = document.getElementById("searchBox"); + const dropdown = document.getElementById("countryDropdown"); + dropdown.classList.remove("active"); + + //Reverses the previous filter + dropdownSearch.value = ""; + const hiddenElements = document.querySelectorAll(".hidden"); + hiddenElements.forEach(hiddenElement => { + hiddenElement.classList.remove("hidden"); + }) +} + +function openDropdown() { + const dropdown = document.getElementById("countryDropdown"); + dropdown.classList.add("active"); + +} \ No newline at end of file diff --git a/js/emergency-contact.js b/js/emergency-contact.js index f52388c..07f6c26 100644 --- a/js/emergency-contact.js +++ b/js/emergency-contact.js @@ -1,5 +1,6 @@ //Since the emergencynumberapi (https://emergencynumberapi.com/) does not send CORS headers in the reply, //the data is stored locally. It might contain some errors or be incomplete. +//Because the site is hosted on github pages, the src path is appended by "/EmergencyInfo". const emergencyContactsSource = "../EmergencyInfo/resources/emergencyContactData.json"; //Gets the emergency contact data, prepares them and passes them on for handling. diff --git a/js/location.js b/js/location.js index 147bb92..2dc74bb 100644 --- a/js/location.js +++ b/js/location.js @@ -3,6 +3,7 @@ const reverseGeocodingApiURL = "https://nominatim.openstreetmap.org/reverse"; //Location of the data source for the mappings between countries and their respective country code. //The source provided here is from https://gist.github.com/kalinchernev/486393efcca01623b18d and was updated a bit. +//Because the site is hosted on github pages, the src path is appended by "/EmergencyInfo". const countryCodesSource = "../EmergencyInfo/resources/countryCodes.json"; //Gets the current location of the device if supported. @@ -61,10 +62,9 @@ function getCountryInformation(position) { //On error, the error message is displayed. function handleSelectedCountry() { getSelectedCountry().then(country => { - document.getElementById("selectedCountry").innerHTML = country["country"]; getEmergencyContacts(country["iso_code"]).then(emergencyContacts => { document.getElementById("selectedEmergencyContacts").innerHTML = handleEmergencyContacts(emergencyContacts); - document.getElementById("selectedEmergencyContactsField").style.visibility = "visible"; + document.getElementById("selectedEmergencyContactsField").style.display = "block"; } ) //Remove potential earlier error messages. @@ -80,7 +80,7 @@ function handleSelectedCountry() { //Returns a promise containing the country code on success. //Throws an error if an invalid country is selected. function getSelectedCountry() { - const selectedCountry = document.getElementById("countrySearch").value; + const selectedCountry = document.getElementById("dropdownField").value; return fetch(countryCodesSource).then(response => { return response.json() }).then(dataJSON => {