https://www.coa.edu/wp-content/themes/coatlantic/blocks/events-archive/events-archive.js?ver=7.1.1

1/**
2 * Events Archive Block - Date Picker & Navigation Functionality
3 */
4(function () {
5  'use strict';
6
7  function initEventsArchive() {
8    const blocks = document.querySelectorAll('.block-events-archive');
9
10    blocks.forEach((block) => {
11      const dateDisplay = block.querySelector('.events-archive__date-display');
12      const dateDropdown = block.querySelector('.events-archive__date-dropdown');
13      const applyBtn = block.querySelector('.events-archive__date-apply');
14      const clearBtn = block.querySelector('.events-archive__date-clear');
15      const startDateInput = block.querySelector('#events-start-date');
16      const endDateInput = block.querySelector('#events-end-date');
17      const searchForm = block.querySelector('.events-archive__search-form');
18
19      if (!dateDisplay || !dateDropdown) return;
20
21      // Toggle date picker dropdown
22      dateDisplay.addEventListener('click', (e) => {
23        e.preventDefault();
24        const isExpanded = dateDisplay.getAttribute('aria-expanded') === 'true';
25        dateDisplay.setAttribute('aria-expanded', !isExpanded);
26        dateDropdown.hidden = isExpanded;
27      });
28
29      // Close dropdown when clicking outside
30      document.addEventListener('click', (e) => {
31        if (!block.contains(e.target)) {
32          dateDisplay.setAttribute('aria-expanded', 'false');
33          dateDropdown.hidden = true;
34        }
35      });
36
37      // Apply date filter
38      if (applyBtn && searchForm) {
39        applyBtn.addEventListener('click', () => {
40          // Clear the dropdown inputs from the form submission
41          // They're inside the dropdown which is outside the form flow
42          const dropdownStartInput = block.querySelector('#events-start-date');
43          const dropdownEndInput = block.querySelector('#events-end-date');
44
45          // Remove any existing hidden date inputs
46          const existingHiddenInputs = searchForm.querySelectorAll('input[type="hidden"][name="tribe-bar-date"], input[type="hidden"][name="tribe-bar-date-end"]');
47          existingHiddenInputs.forEach((input) => input.remove());
48
49          // Add new hidden inputs with the dropdown values
50          if (dropdownStartInput && dropdownStartInput.value) {
51            const hiddenStart = document.createElement('input');
52            hiddenStart.type = 'hidden';
53            hiddenStart.name = 'tribe-bar-date';
54            hiddenStart.value = dropdownStartInput.value;
55            searchForm.appendChild(hiddenStart);
56          }
57
58          if (dropdownEndInput && dropdownEndInput.value) {
59            const hiddenEnd = document.createElement('input');
60            hiddenEnd.type = 'hidden';
61            hiddenEnd.name = 'tribe-bar-date-end';
62            hiddenEnd.value = dropdownEndInput.value;
63            searchForm.appendChild(hiddenEnd);
64          }
65
66          searchForm.submit();
67        });
68      }
69
70      // Clear date inputs - returns to "Upcoming" view
71      if (clearBtn && searchForm) {
72        clearBtn.addEventListener('click', () => {
73          if (startDateInput) startDateInput.value = '';
74          if (endDateInput) endDateInput.value = '';
75
76          // Remove any hidden date inputs and submit to reset
77          const existingHiddenInputs = searchForm.querySelectorAll('input[type="hidden"][name="tribe-bar-date"], input[type="hidden"][name="tribe-bar-date-end"]');
78          existingHiddenInputs.forEach((input) => input.remove());
79
80          // Close dropdown
81          dateDisplay.setAttribute('aria-expanded', 'false');
82          dateDropdown.hidden = true;
83
84          // Submit form without date filters to return to "Upcoming"
85          searchForm.submit();
86        });
87      }
88
89      // Prev/Next navigation using server-calculated dates
90      const prevArrow = block.querySelector('.events-archive__nav-arrow--prev');
91      const nextArrow = block.querySelector('.events-archive__nav-arrow--next');
92
93      if (prevArrow && !prevArrow.disabled) {
94        prevArrow.addEventListener('click', () => {
95          const startDate = prevArrow.dataset.date;
96          const endDate = prevArrow.dataset.dateEnd;
97          if (startDate && searchForm) {
98            navigateToDateRange(searchForm, startDate, endDate);
99          }
100        });
101      }
102
103      if (nextArrow) {
104        nextArrow.addEventListener('click', () => {
105          const startDate = nextArrow.dataset.date;
106          const endDate = nextArrow.dataset.dateEnd;
107          if (startDate && searchForm) {
108            navigateToDateRange(searchForm, startDate, endDate);
109          }
110        });
111      }
112    });
113  }
114
115  /**
116   * Navigate to a specific date range
117   * @param {HTMLFormElement} form - The search form
118   * @param {string} startDate - Start date in YYYY-MM-DD format
119   * @param {string} endDate - End date in YYYY-MM-DD format
120   */
121  function navigateToDateRange(form, startDate, endDate) {
122    // Clear dropdown date inputs
123    const dropdownDateInputs = form.closest('.block-events-archive').querySelectorAll('.events-archive__date-dropdown input[type="date"]');

124    dropdownDateInputs.forEach((input) => {
125      input.value = '';
126    });
127
128    // Remove any existing hidden date inputs
129    const hiddenDateInputs = form.querySelectorAll('input[type="hidden"][name="tribe-bar-date"], input[type="hidden"][name="tribe-bar-date-end"]');
130    hiddenDateInputs.forEach((input) => input.remove());
131
132    // Add new hidden inputs for the date range
133    if (startDate) {
134      const hiddenStart = document.createElement('input');
135      hiddenStart.type = 'hidden';
136      hiddenStart.name = 'tribe-bar-date';
137      hiddenStart.value = startDate;
138      form.appendChild(hiddenStart);
139    }
140
141    if (endDate) {
142      const hiddenEnd = document.createElement('input');
143      hiddenEnd.type = 'hidden';
144      hiddenEnd.name = 'tribe-bar-date-end';
145      hiddenEnd.value = endDate;
146      form.appendChild(hiddenEnd);
147    }
148
149    form.submit();
150  }
151
152  // Initialize on DOM ready
153  if (document.readyState === 'loading') {
154    document.addEventListener('DOMContentLoaded', initEventsArchive);
155  } else {
156    initEventsArchive();
157  }
158})();