Modals

				
					
let modalOpen = document.getElementById("modal");
let modalButton = document.getElementById("modalButton");
let modalClose = document.getElementById("closeModal")
let element = document.getElementById("modal");
let modalSubmit = document.getElementById("submitBtn")
let errorDiv = document.getElementById("errorDiv");
let firstNameErr = document.getElementById("firstNameErr");
let lastNameErr = document.getElementById("lastNameErr");
let emailErr = document.getElementById("emailErr");
let modalForm = document.getElementById("modalForm");
let valid = false;

function tabStopFix() {
    var focusableEls = document.getElementById("modal").querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
    if (element.ariaHidden === "false") {
        focusableEls.forEach(item => {
            item.removeAttribute("tabindex");
        })
    } else {
        focusableEls.forEach(item => {
            item.setAttribute("tabindex", "-1");
        })
    }
}

function trapFocus(element) {
    var focusableEls = document.getElementById("modal").querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]), input[type="submit"]:not([disabled])');
    var firstFocusableEl = focusableEls[0];  
    var lastFocusableEl = focusableEls[focusableEls.length - 1];
    var KEYCODE_TAB = 9;
  
    element.addEventListener('keydown', function(e) {
      var isTabPressed = (e.key === 'Tab' || e.keyCode === KEYCODE_TAB);
  
      if (!isTabPressed) { 
        return; 
      }
  
      if ( e.shiftKey ) {
        if (document.activeElement === firstFocusableEl) {
          lastFocusableEl.focus();
            e.preventDefault();
          }
        } else {
        if (document.activeElement === lastFocusableEl) {
          firstFocusableEl.focus();
            e.preventDefault();
          }
        }
    });
  }

modalButton.addEventListener("click", function(e) {
    modalOpen.classList.toggle("showModal");
    document.body.classList.toggle("faded");
    document.body.setAttribute("visibility", "hidden")
    e.target.style.visibility = "hidden";
    modalClose.focus();
})

modalClose.addEventListener("click", function() {
    modalOpen.classList.toggle("showModal");
    document.body.classList.toggle("faded");
    document.body.setAttribute("visibility", "visible")
    modalButton.style.visibility = "visible";
    modalButton.focus();
})

modalClose.addEventListener("focus", function() {
    element.setAttribute("aria-hidden", "false")
   tabStopFix();
})

modalButton.addEventListener("focus", function() {
    element.setAttribute("aria-hidden", "true")
    tabStopFix();
 })

 modalSubmit.addEventListener("click", function(e) {
   e.preventDefault();
  let inputElems = document.getElementById("modal").querySelectorAll('input[type="text"]:not([disabled])');
  let errorDivs = document.getElementById("modal").querySelectorAll(".errMessage");

  for (x=0; x < inputElems.length; x++) {
  if (inputElems[x].value === "") {
      errorDiv.innerHTML = '<p style="color: rgb(165, 5, 5)">There are one or more errors in the form</p>'
    }
  }
  if (document.getElementById("firstName").value.match(/\d+/g) !== null ||document.getElementById("firstName").value === "" ) {
    console.log("fired")
    firstNameErr.innerHTML = '<p style="color: rgb(165, 5, 5)" class="errMessage">Ensure this is not empty and only includes letters</p>'
  }
  if (document.getElementById("lastName").value.match(/\d+/g) !== null ||document.getElementById("lastName").value === "" ) {
    console.log("fired")
    lastNameErr.innerHTML = '<p style="color: rgb(165, 5, 5)" class="errMessage">Ensure this is not empty and only includes letters</p>'
  }
  if (document.getElementById("Email").value.includes("@") === null ||document.getElementById("Email").value === "" ) {
    console.log("fired")
    emailErr.innerHTML = '<p style="color: rgb(165, 5, 5)" class="errMessage" >Ensure this is a valid email address</p>';
  }

  for (i=-0; i < errorDivs.length; i++) {
    console.log("this should remove")
    errorDivs[i].remove();
  }

  if ( document.getElementById("modal").querySelectorAll(".errMessage").length > 0) {
    valid = false;
    console.log("error messages found")
} else {valid = true}
  console.log(valid);
  console.log(modalForm);
  if (valid) modalForm.submit();
});

  trapFocus(element);