Buscador de países

document.addEventListener('DOMContentLoaded', function() { // Function for toggling the dropdown window.toggleDropdown = function() { const items = document.querySelector('.dropdown-items'); const dropArr = document.querySelector('.arrow-sort'); const selectregion = document.querySelector('.custom-dropdown'); if (items.style.display === 'none' || !items.style.display) { items.style.display = 'block'; dropArr.style.borderWidth = "2px 0 0 2px"; // Open dropdown, update arrow border dropArr.classList.add('arrow-with-margin'); // Add the CSS class to apply margin selectregion.classList.add('select-border'); } else { items.style.display = 'none'; dropArr.style.borderWidth = "0 2px 2px 0"; // Close dropdown, update arrow border dropArr.classList.remove('arrow-with-margin'); // Remove the CSS class to remove margin selectregion.classList.remove('select-border'); } } // Function to select an item from the dropdown and apply sorting window.selectItem = function(event, item) { event.stopPropagation(); const selected = document.querySelector('.dropdown-selected'); selected.textContent = item.textContent; selected.dataset.value = item.dataset.value; // Storing selected value in dataset for later usage item.closest('.dropdown-items').style.display = 'none'; // Remove the "active" class from all items const dropdownItems = item.closest('.dropdown-items').querySelectorAll('.dropdown-item'); dropdownItems.forEach(function(dropdownItem) { dropdownItem.classList.remove('active'); }); // Add the "active" class to the selected item item.classList.add('active'); applySorting(); // Apply sorting whenever an item is selected // Set arrow border to "0 2px 2px 0" after item is selected const dropArr = document.querySelector('.arrow-sort'); dropArr.style.borderWidth = "0 2px 2px 0"; dropArr.classList.remove('arrow-with-margin'); // Changed the color of the selected sort selected.classList.add('select-color'); // Removed the border on the dropdown after sort is selected const selectregion = document.querySelector('.custom-dropdown'); selectregion.classList.remove('select-border'); } // Function to apply sorting based on the selected item in the dropdown window.applySorting = function() { const selectedValue = document.querySelector('.dropdown-selected').dataset.value; // Array of classes to handle display const classesToShow = []; const classesToHide = []; if (selectedValue === 'ASC') { classesToShow.push('all-asc', 'asc', 'apac-asc', 'eu-asc', 'latam-asc', 'noram-asc', 'mea-asc'); classesToHide.push('all-desc', 'desc', 'apac-desc', 'eu-desc', 'latam-desc', 'noram-desc', 'mea-desc'); } else if (selectedValue === 'DESC') { classesToShow.push('all-desc', 'desc', 'apac-desc', 'eu-desc', 'latam-desc', 'noram-desc', 'mea-desc'); classesToHide.push('all-asc','asc', 'apac-asc', 'eu-asc', 'latam-asc', 'noram-asc', 'mea-asc'); } // Loop through the classes to show and hide classesToShow.forEach(function(className) { const elementsToShow = document.querySelectorAll('.' + className); elementsToShow.forEach(function(element) { element.style.display = 'block'; }); }); classesToHide.forEach(function(className) { const elementsToHide = document.querySelectorAll('.' + className); elementsToHide.forEach(function(element) { element.style.display = 'none'; }); }); } window.hideSortingDropdownOnScroll = function() { const items = document.querySelector('.dropdown-items'); items.style.display = 'none'; const dropArr = document.querySelector('.arrow-sort'); dropArr.style.borderWidth = "0 2px 2px 0"; // Set arrow border when dropdown is closed dropArr.classList.remove('arrow-with-margin'); } // Add a scroll event listener to the document document.addEventListener('scroll', function() { hideSortingDropdownOnScroll(); }); }); document.addEventListener('DOMContentLoaded', function() { // Function for toggling the region dropdown window.toggleRegionDropdown = function() { const items = document.querySelector('.dropdown-items-region'); const dropArr = document.querySelector('.arrow'); const dropBox = document.querySelector('.custom-dropdown-region'); if (items.style.display === 'none' || !items.style.display) { items.style.display = 'block'; dropArr.style.borderWidth = "2px 0 0 2px"; // Open dropdown, update arrow border dropArr.classList.add('arrow-with-margin'); // Add the CSS class to apply margin dropBox.classList.add('select-border'); } else { items.style.display = 'none'; dropArr.style.borderWidth = "0 2px 2px 0"; // Close dropdown, update arrow border dropArr.classList.remove('arrow-with-margin'); // Remove the CSS class to remove margin dropBox.classList.remove('select-border'); } } // Function to select a region from the dropdown window.selectRegion = function(event, item) { event.stopPropagation(); const selected = document.querySelector('.dropdown-selected-region'); selected.textContent = item.textContent; selected.dataset.value = item.dataset.value; // Storing selected value in dataset for later usage item.closest('.dropdown-items-region').style.display = 'none'; applyRegionChange(); // Apply region change whenever a region is selected } // Function to apply region change window.applyRegionChange = function() { // Modify this function to handle region-specific actions const selectedValue = document.querySelector('.dropdown-selected-region').dataset.value; // Example: Display selected region-specific content const regionContent = document.querySelectorAll('.region-box'); regionContent.forEach(function(box) { box.style.display = 'none'; // Hide all region-specific content // Modify the following conditions based on your requirements if (box.id === selectedValue + '-box') { box.style.display = 'block'; // Show the selected region-specific content } }); // Example: Scroll to the selected region-specific content let selectedBox = document.getElementById(selectedValue + '-box'); if (selectedBox) { let positionToScrollTo = selectedBox.getBoundingClientRect().top + window.pageYOffset - 350; window.scrollTo({ top: positionToScrollTo, behavior: 'smooth' }); } } window.selectRegion = function(event, item) { event.stopPropagation(); const selected = document.querySelector('.dropdown-selected-region'); selected.textContent = item.textContent; selected.dataset.value = item.dataset.value; // Storing selected value in dataset for later usage // Remove the "active" class from all items const dropdownItems = document.querySelectorAll('.dropdown-item-region'); dropdownItems.forEach(function(dropdownItem) { dropdownItem.classList.remove('active'); }); // Add the "active" class to the selected item item.classList.add('active'); item.closest('.dropdown-items-region').style.display = 'none'; applyRegionChange(); // Apply region change whenever a region is selected // Set arrow border to "0 2px 2px 0" after region is selected const dropArr = document.querySelector('.arrow'); dropArr.style.borderWidth = "0 2px 2px 0"; dropArr.classList.remove('arrow-with-margin'); // dropArr.style.borderColor = "#173F76"; //Changed the color of the font on the dropdown selected.classList.add('select-color'); const dropBox = document.querySelector('.custom-dropdown-region'); dropBox.classList.remove('select-border'); } // Function to hide the region dropdown items when scrolling window.hideRegionDropdownOnScroll = function() { const items = document.querySelector('.dropdown-items-region'); items.style.display = 'none'; const dropArr = document.querySelector('.arrow'); dropArr.style.borderWidth = "0 2px 2px 0"; // Set arrow border when dropdown is closed dropArr.classList.remove('arrow-with-margin'); } // Add a scroll event listener to the document document.addEventListener('scroll', function() { hideRegionDropdownOnScroll(); }); });