https://www.hotelmanagement-network.com/wp-content/themes/goodlife-wp-B2B/assets/js/modules/enquiryModal.js

1const enquiryModal = {
2  init() {
3    const triggers = document.querySelectorAll('.show-enquiry-form');
4    const modal = document.getElementById('enquiry-modal');
5    const closeBtn = modal.querySelector('.close-modal');
6
7    if (!triggers.length || !modal) return;
8
9    this.lastTrigger = null;
10
11    // Check for hash on page load
12    this.checkHashOnLoad(modal);
13
14    triggers.forEach((trigger) => {
15      trigger.addEventListener('click', (e) => {
16        e.preventDefault();
17        this.lastTrigger = trigger;
18        this.showModal(modal);
19      });
20    });
21
22    closeBtn.addEventListener('click', () => this.hideModal(modal));
23
24    // Handle cancel buttons
25    const cancelBtns = modal.querySelectorAll('.cancel');
26    cancelBtns.forEach(btn => {
27      btn.addEventListener('click', (e) => {
28        e.preventDefault();
29        this.hideModal(modal);
30      });
31    });
32
33    modal.addEventListener('keydown', (e) => {
34      if (e.key === 'Escape') this.hideModal(modal);
35    });
36
37    // Prevent modal from closing when clicking inside the modal content
38    modal.addEventListener('click', (e) => {
39      if (e.target === modal) {
40        this.hideModal(modal);
41      }
42    });
43  },
44
45  /**
46   * Check for #enquiry hash on page load and show modal if present
47   */
48  checkHashOnLoad(modal) {
49    if (window.location.hash === '#enquiry') {
50      this.showModal(modal);
51    }
52  },
53
54  showModal(modal) {
55    modal.setAttribute('aria-hidden', 'false');
56    modal.style.display = 'block';
57    document.body.style.overflow = 'hidden'; // Prevent background scrolling
58    document.body.classList.add('modal-open'); // Add modal-open class to body
59
60    // Update URL hash
61    this.updateHash(true);
62
63    // Focus management
64    const firstFocusable = modal.querySelector('input, button, textarea, select');
65    if (firstFocusable) {
66      firstFocusable.focus();
67    }
68
69    // Announce to screen readers
70    const liveRegion = modal.querySelector('.sr-live-region');
71    if (liveRegion) {
72      liveRegion.textContent = 'Enquiry form modal opened';
73    }
74  },
75
76  hideModal(modal) {
77    modal.setAttribute('aria-hidden', 'true');
78    modal.style.display = 'none';
79    document.body.style.overflow = ''; // Restore scrolling
80    document.body.classList.remove('modal-open'); // Remove modal-open class from body
81
82    // Remove URL hash
83    this.updateHash(false);
84
85    // Return focus to trigger
86    if (this.lastTrigger) {
87      this.lastTrigger.focus();
88    }
89
90    // Announce to screen readers
91    const liveRegion = modal.querySelector('.sr-live-region');
92    if (liveRegion) {
93      liveRegion.textContent = 'Enquiry form modal closed';
94    }
95  },
96
97  /**
98   * Update URL hash when modal is shown/hidden
99   */
100  updateHash(show) {
101    if (show) {
102      // Add #enquiry to URL
103      window.history.replaceState(null, null, '#enquiry');
104    } else {
105      // Remove hash from URL
106      window.history.replaceState(null, null, window.location.pathname + window.location.search);
107    }
108  }
109};
110
111export default enquiryModal;