https://fryd.app/assets/js/mobile-modal.js

1/**
2 * close all mobile modals if screen orientation changes and lg breakpoint is reached
3 */
4document.addEventListener("DOMContentLoaded", () => {
5  if (screen.orientation) {
6    screen.orientation.addEventListener("change", (event) => {
7      switch (event.target.type) {
8        case "landscape-primary":
9        case "landscape-secondary":
10          if (window.innerHeight >= 1024) {
11            closeAllMobileModal();
12          }
13          break;
14        case "portrait-secondary":
15        case "portrait-primary":
16          break;
17      }
18    });
19  }
20});
21
22/**
23 * @param {string} id
24 */
25function toggleMobileModal(id) {
26  const body = document.body;
27  const modal = document.getElementById(id);
28  if (modal.classList.contains("tw-left-full")) {
29    if (!modal.parentElement.closest(".mobile-modal")) {
30      body.classList.add("tw-overflow-hidden");
31    }
32    modal.classList.remove("tw-left-full");
33    modal.classList.add("tw-left-0");
34  } else {
35    if (!modal.parentElement.closest(".mobile-modal")) {
36      body.classList.remove("tw-overflow-hidden");
37    }
38    modal.classList.remove("tw-left-0");
39    modal.classList.add("tw-left-full");
40  }
41}
42
43function closeAllMobileModal() {
44  const body = document.body;
45  const modals = Array.from(document.getElementsByClassName("mobile-modal"));
46
47  modals.forEach((modal) => {
48    if (!modal.parentElement.closest(".mobile-modal")) {
49      body.classList.remove("tw-fixed", "tw-overflow-hidden");
50    }
51    modal.classList.remove("tw-left-0");
52    modal.classList.add("tw-left-full");
53  });
54}