M2 Towns

<script>
  
function moveCtaCenter() {
	var ctaSidebar = document.querySelector(".cta-sidebar");
	var ctaSidebarWrapper = document.querySelector(".cta-sidebar__wrapper");

	let closeButton = document.querySelector(".cta-close-popup");

	var rect = ctaSidebar.getBoundingClientRect();

	var translateY = (window.innerHeight - rect.height) / 2 - rect.top;
	var translateX = (window.innerWidth - rect.width) / 2 - rect.left;

  if (window.innerWidth < 700){
	ctaSidebarWrapper.classList.add("cta-modal--mobile");
  }else{
	ctaSidebar.style.transform = `translate(${translateX}px, ${translateY}px)`;
  }
	ctaSidebarWrapper.style.zIndex = "1005";
	closeButton.style.display = "flex";
	closeButton.style.opacity = "1";
}

function resetSidebarPosition() {
	var ctaSidebar = document.querySelector(".cta-sidebar");
	let closeButton = document.querySelector(".cta-close-popup");
	var ctaSidebarWrapper = document.querySelector(".cta-sidebar__wrapper");
	ctaSidebarWrapper.style.zIndex = "1";

	ctaSidebar.style.transform = "translate(0, 0)";
	closeButton.style.opacity = "0";
	closeButton.style.display = "none";
	ctaSidebarWrapper.classList.remove("cta-modal--mobile");
}

function addEventListeners(){
	var closeButton = document.querySelector(".cta-close-popup");
  let navRegisterButton = document.querySelector(".header-cta");
	let projectHeroCTA = document.querySelector(".project-hero__cta");
  let requestLinks = document.querySelectorAll(".request-info");
  let ctaSidebarWrapper = document.querySelector(".cta-sidebar__wrapper");

	const modal = document.getElementById("brxe-okoobg");

	closeButton.addEventListener("click", function (event) {
		xCloseModal("brxe-okoobg");
	});
  
  	ctaSidebarWrapper.addEventListener("click", function (event) {
      if (modal.getAttribute("aria-hidden") == 'false' && !event.target.closest(".cta-sidebar")){

				xCloseModal("brxe-okoobg");
      }
  });

	modal.addEventListener("x_modal:open", function () {
		moveCtaCenter();
	});

	modal.addEventListener("x_modal:close", function () {
		resetSidebarPosition();
	});
  navRegisterButton.addEventListener("click", function (event) {
    xOpenModal("brxe-okoobg");
	});
	projectHeroCTA.addEventListener("click", function (event) {
    xOpenModal("brxe-okoobg");
  });
	requestLinks.forEach(function (link) {
    link.addEventListener("click", function (event) {
      xOpenModal("brxe-okoobg");
    });
  });
}

document.addEventListener("DOMContentLoaded", function () {
  let regLink = document.querySelector(".header-cta > a");

  regLink.setAttribute("href", "#");
  addEventListeners();
});
</script>