diff --git a/themes/custom/ts_wrin/js/components/wri_cta_banners.js b/themes/custom/ts_wrin/js/components/wri_cta_banners.js index 0d604f824..09432c835 100644 --- a/themes/custom/ts_wrin/js/components/wri_cta_banners.js +++ b/themes/custom/ts_wrin/js/components/wri_cta_banners.js @@ -5,20 +5,20 @@ */ export default function(context) { - const modals = context.querySelectorAll('.region-top-modals .block-modal'); - const ctaCookie = 'wri_cta_displayed'; - const thankYouCookie = 'wri_cta_thank_you'; + const modals = context.querySelectorAll(".region-top-modals .block-modal"); + const ctaCookie = "wri_cta_displayed"; + const thankYouCookie = "wri_cta_thank_you"; // Accessibility: aria-live region for announcements - const announceRegion = document.createElement('div'); - announceRegion.setAttribute('aria-live', 'assertive'); - announceRegion.setAttribute('role', 'alert'); - announceRegion.style.position = 'absolute'; - announceRegion.style.left = '-9999px'; + const announceRegion = document.createElement("div"); + announceRegion.setAttribute("aria-live", "assertive"); + announceRegion.setAttribute("role", "alert"); + announceRegion.style.position = "absolute"; + announceRegion.style.left = "-9999px"; document.body.appendChild(announceRegion); function announce(message) { - announceRegion.textContent = ''; + announceRegion.textContent = ""; // Timeout ensures the message is re-announced when modal changes. setTimeout(() => { announceRegion.textContent = message; @@ -28,7 +28,12 @@ export default function(context) { function getCookie(name) { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); - return parts.length === 2 ? parts.pop().split(';').shift() : null; + return parts.length === 2 + ? parts + .pop() + .split(";") + .shift() + : null; } function setCookie(name, value, days) { @@ -38,40 +43,54 @@ export default function(context) { } function closeModal(modal) { - modal.style.display = 'none'; - setCookie(getCookie(thankYouCookie) ? thankYouCookie : ctaCookie, 'true', 1); - document.removeEventListener('keydown', closeOnEscape); - document.removeEventListener('click', clickOutsideModal); - announce('Modal closed.'); + modal.style.display = "none"; + setCookie( + getCookie(thankYouCookie) ? thankYouCookie : ctaCookie, + "true", + 1 + ); + document.removeEventListener("keydown", closeOnEscape); + document.removeEventListener("click", clickOutsideModal); + announce("Modal closed."); } function closeOnEscape(event) { - if (event.key === 'Escape') { - const visibleModal = context.querySelector('.block-modal[style*="display: block"]'); + if (event.key === "Escape") { + const visibleModal = context.querySelector( + '.block-modal[style*="display: block"]' + ); if (visibleModal) closeModal(visibleModal); } } function clickOutsideModal(event) { - const visibleModal = context.querySelector('.block-modal[style*="display: block"]'); - if (visibleModal && !visibleModal.querySelector('.modal_inner').contains(event.target)) { + const visibleModal = context.querySelector( + '.block-modal[style*="display: block"]' + ); + if ( + visibleModal && + !visibleModal.querySelector(".modal_inner").contains(event.target) + ) { closeModal(visibleModal); } } function showModal(modal) { - modal.style.display = 'block'; - modal.querySelector('.modal-close').addEventListener('click', function () { + modal.style.display = "block"; + modal.querySelector(".modal-close").addEventListener("click", function() { closeModal(modal); }); - document.addEventListener('keydown', closeOnEscape); - document.addEventListener('click', clickOutsideModal); - announce('A message for you: ' + modal.querySelector('.field--name-field-title').textContent); + document.addEventListener("keydown", closeOnEscape); + document.addEventListener("click", clickOutsideModal); + announce( + "A message for you: " + + modal.querySelector(".field--name-field-title").textContent + ); } function displayThankYouModal() { - const thankYouMessage = document.createElement('div'); - thankYouMessage.classList.add('block-modal', 'thank-you-modal'); + const thankYouMessage = document.createElement("div"); + thankYouMessage.classList.add("block-modal", "thank-you-modal"); thankYouMessage.innerHTML = `