decentralized-video-chat/public/js/modal.js

(function () {
  "use strict";
  const modals = document.getElementsByClassName("modal");
  const modalTriggers = document.getElementsByClassName("modal-trigger");

  function openModal(el) {
    if (el) {
      document.body.classList.add("modal-is-active");
      el.classList.add("is-active");
    }
  }

  function closeModals() {
    document.body.classList.remove("modal-is-active");
    for (let i = 0; i < modals.length; i++) {
      modals[i].classList.remove("is-active");
    }
  }

  if (modals.length > 0 && modalTriggers.length > 0) {
    for (let i = 0; i < modalTriggers.length; i++) {
      let modalTrigger = modalTriggers[i];
      let modal = document.getElementById(
        modalTrigger.getAttribute("aria-controls")
      );
      if (modal) {
        // Modal video
        if (modalTrigger.hasAttribute("data-video")) {
          if (modal.querySelector("iframe") !== null) {
            modal
              .querySelector("iframe")
              .setAttribute("src", modalTrigger.getAttribute("data-video"));
          } else if (modal.querySelector("video") !== null) {
            modal
              .querySelector("video")
              .setAttribute("src", modalTrigger.getAttribute("data-video"));
          }
        }
        modalTrigger.addEventListener("click", function (e) {
          e.preventDefault();
          if (modalTrigger.hasAttribute("aria-controls")) {
            openModal(modal);
          }
        });
      }
    }
  }

  document.addEventListener("click", function (e) {
    if (
      e.target.classList.contains("modal") ||
      e.target.classList.contains("modal-close-trigger")
    ) {
      e.preventDefault();
      closeModals();
    }
  });

  document.addEventListener("keydown", function (event) {
    var e = event || window.event;
    if (e.keyCode === 27) {
      closeModals();
    }
  });
})();