https://veilmail.app/js/modal.js

1/*
2 * Modal
3 *
4 * Pico.css - https://picocss.com
5 * Copyright 2019-2024 - Licensed under MIT
6 */
7
8// Config
9const isOpenClass = "modal-is-open";
10const openingClass = "modal-is-opening";
11const closingClass = "modal-is-closing";
12const scrollbarWidthCssVar = "--pico-scrollbar-width";
13const animationDuration = 400; // ms
14let visibleModal = null;
15
16// Event
17const modalClosed = new CustomEvent('modalClosed');
18
19// Toggle modal
20const toggleModal = (event) => {
21  event.preventDefault();
22  const modal = document.getElementById(event.currentTarget.dataset.target);
23  if (!modal) return;
24  modal && (modal.open ? closeModal(modal) : openModal(modal));
25};
26
27// Open modal
28const openModal = (modal) => {
29  const { documentElement: html } = document;
30  const scrollbarWidth = getScrollbarWidth();
31  if (scrollbarWidth) {
32    html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`);
33  }
34  html.classList.add(isOpenClass, openingClass);
35  setTimeout(() => {
36    visibleModal = modal;
37    html.classList.remove(openingClass);
38  }, animationDuration);
39  modal.show();
40};
41
42// Close modal
43const closeModal = (modal) => {
44  visibleModal = null;
45  const { documentElement: html } = document;
46  html.classList.add(closingClass);
47  setTimeout(() => {
48    html.classList.remove(closingClass, isOpenClass);
49    html.style.removeProperty(scrollbarWidthCssVar);
50    modal.close();
51  }, animationDuration);
52  document.dispatchEvent(modalClosed);     
53};
54
55// // Close with a click outside
56// document.addEventListener("click", (event) => {
57//   if (visibleModal === null) return;
58//   const modalContent = visibleModal.querySelector("article");
59//   const isClickInside = modalContent.contains(event.target);
60//   !isClickInside && closeModal(visibleModal);
61// });
62
63// Close with Esc key
64document.addEventListener("keydown", (event) => {
65  if (event.key === "Escape" && visibleModal) {
66    closeModal(visibleModal);
67  }
68});
69
70// Get scrollbar width
71const getScrollbarWidth = () => {
72  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
73  return scrollbarWidth;
74};
75
76// Is scrollbar visible
77const isScrollbarVisible = () => {
78  return document.body.scrollHeight > screen.height;
79};
80