diff --git a/assets/src/js/app.js b/assets/src/js/app.js index ede97efdb3..d989e745ca 100644 --- a/assets/src/js/app.js +++ b/assets/src/js/app.js @@ -11,6 +11,7 @@ import {setupQueryLoopCarousel} from './query_loop_carousel'; import {setupClickabelActionsListCards} from './actions_list_clickable_cards'; import {removeNoPostText} from './query-no-posts'; import {removeRelatedPostsSection} from './remove_related_section_no_posts'; +import {setupCountrySelector} from './country_selector'; function requireAll(r) { r.keys().forEach(r); @@ -29,3 +30,4 @@ setupQueryLoopCarousel(); removeNoPostText(); removeRelatedPostsSection(); setupClickabelActionsListCards(); +setupCountrySelector(); diff --git a/assets/src/js/country_selector.js b/assets/src/js/country_selector.js new file mode 100644 index 0000000000..961927e355 --- /dev/null +++ b/assets/src/js/country_selector.js @@ -0,0 +1,62 @@ +/** + * The script basically add/remove the tabindex attribute within the country selector + * It helps to improve SEO + * @return {void} + */ +export const setupCountrySelector = () => { + const targetNode = document.querySelector('#country-selector'); + const countriesList = document.querySelector('.countries-list'); + const footerMenu = document.querySelector('.footer-menu'); + const footerSocialMedia = document.querySelector('.footer-social-media'); + + if (!targetNode || !countriesList || !footerMenu || !footerSocialMedia) { + return; + } + + const largeAndUpScreens = '(min-width: 992px)'; + const countriesListTransitionDuration = ( + parseFloat(getComputedStyle(countriesList).transitionDuration) * 1000 + ) || 500; + + /** + * This funtion re-order the elements from the footer + * @param {*} evt + */ + const switchOrders = (evt = null) => { + const event = evt ? evt : window.matchMedia(largeAndUpScreens); + if (event.matches) { + footerMenu.parentNode.prepend(footerMenu); + } else { + footerSocialMedia.parentNode.prepend(footerSocialMedia); + } + }; + + // Create an observer instance linked to the callback function + const observer = new MutationObserver( + // Callback function to execute when mutations are observed + mutationList => { + // Set default visibility + for (const mutation of mutationList) { + if (mutation.attributeName === 'class') { + if (targetNode.classList.contains('open')) { + countriesList.style.visibility = 'visible'; + } else { + setTimeout(() => { + countriesList.style.visibility = 'hidden'; + }, countriesListTransitionDuration); + } + } + } + } + ); + + // Start observing the target node for configured mutations + observer.observe(targetNode, {attributes: true, childList: true, subtree: true}); + + window.matchMedia(largeAndUpScreens).addEventListener('change', event => { + switchOrders(event); + }); + + // Set default order + switchOrders(); +}; diff --git a/assets/src/scss/layout/_country-selector.scss b/assets/src/scss/layout/_country-selector.scss index a8e2b0e4ae..470651d2d7 100644 --- a/assets/src/scss/layout/_country-selector.scss +++ b/assets/src/scss/layout/_country-selector.scss @@ -28,7 +28,6 @@ &.open { .country-selector-toggle-container { - border-bottom: 1px solid rgba($white, 1); transition-delay: 0s; } @@ -94,6 +93,8 @@ max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1.04, .38, .37) 0s; + // Set to hidden because of focus behaviour and a18y + visibility: hidden; } .countries-list .container { diff --git a/templates/footer.twig b/templates/footer.twig index 75879d6352..1a4a7666b9 100644 --- a/templates/footer.twig +++ b/templates/footer.twig @@ -6,7 +6,7 @@ {% include 'footer_country_selector.twig' %} {% endif %} -