https://www.wofford.edu/Content/js/index.js

1document.addEventListener('DOMContentLoaded', () => {
2    // Media is video
3    const videoExists = document.querySelector('.home-media-item')
4    const pageContent = document.querySelector('#page-content')
5
6    if (videoExists?.tagName === 'VIDEO') {
7        document.querySelector('#header').classList.add('has-video')
8        videoExists.addEventListener('click', (e) => {
9            if (!videoExists.controls) {
10                if (videoExists.paused) {
11                    videoExists.play()
12                } else {
13                    videoExists.pause()
14                }
15            }
16        })
17    }
18
19    if (pageContent) {
20        if (pageContent.querySelector('.home-section-cta')) {
21            pageContent.style.backgroundColor = '#282829'
22        }
23    }
24
25    // Modal
26    const modalEls = Array.from(document.querySelectorAll('[data-modal]'))
27    const openModalBtns = Array.from(document.querySelectorAll('[data-modal-open]'))
28    const closeModalBtns = Array.from(document.querySelectorAll('[data-modal-close]'))
29
30    // Tab
31    const tabContainers = Array.from(document.querySelectorAll('[data-tab]'))
32
33    // Search input
34    const searchInput = document.querySelector('#search-input')
35    const searchIconClearBtn = document.querySelector('#search-icon-clear')
36
37    // Mobile menu
38    const homeMobileToggleMenu = document.querySelector('#home-mobile-toggle-menu')
39    const homeNavMenu = document.querySelector('#home-nav-menu')
40    const homeNavItems = Array.from(document.querySelectorAll('.home-nav-item'))
41
42    // News story images
43    const newsStoriesContainer = document.querySelector('.news-stories')
44    const newsStories = Array.from(document.querySelectorAll('.news-story'))
45    const prevButton = document.querySelector('.prev-arrow')
46    const nextButton = document.querySelector('.next-arrow')
47
48    // Drawer
49    const drawerItems = Array.from(document.querySelectorAll('.drawer-nav-item'))
50
51    // Fast facts
52    const fastFactsSlider = document.querySelector('.fast-facts-slider')
53    const fastFactsPrevBtn = document.querySelector('.fast-facts-slider .prev-slide')
54    const fastFactsNextBtn = document.querySelector('.fast-facts-slider .next-slide')
55
56    // FAQs
57    const faqs = Array.from(document.querySelectorAll('[data-faq]'))
58
59    // Window size
60    let screenSize
61
62    const getScreenSize = () => {
63        screenSize = window.innerWidth
64
65        if (screenSize > 860) {
66            homeMobileToggleMenu.classList.remove('open')
67            homeNavMenu.classList.remove('show')
68        }
69    }
70
71    window.addEventListener('load', getScreenSize)
72    window.addEventListener('resize', getScreenSize)
73
74    // Modal
75    openModalBtns.map((button) => {
76        button.addEventListener('click', () => {
77            if (button.nextElementSibling.matches('[data-modal]')) {
78                document.body.classList.add('modal-open')
79                button.nextElementSibling.classList.toggle('open')
80            }
81        })
82    })
83
84    closeModalBtns.map((button) => {
85        button.addEventListener('click', () => {
86            document.body.classList.remove('modal-open')
87            button.closest('[data-modal]').classList.remove('open')
88            button.closest('.home-nav-item').classList.remove('active')
89        })
90    })
91
92    modalEls.map((modal) => {
93        modal.addEventListener('click', (e) => {
94            if (e.target === modal) {
95                document.body.classList.remove('modal-open')
96                modal.classList.remove('open')
97                modal.closest('.home-nav-item').classList.remove('active')
98            }
99        })
100    })
101
102    // Tabs
103    tabContainers.map((tabs) => {
104        const tabBtns = Array.from(tabs.querySelectorAll('[data-tab-button]'))
105        const tabEls = Array.from(tabs.querySelectorAll('[data-tab-content]'))
106
107        document.addEventListener('DOMContentLoaded', () => {
108            tabBtnActive = tabs.querySelector('[data-tab-button="1"]')
109            tabContentActive = tabs.querySelector('[data-tab-content="1"]')
110
111            tabBtnActive.classList.add('active')
112            tabContentActive.classList.add('show')
113        })
114
115        tabBtns.map((button) => {
116            button.addEventListener('click', (e) => {
117                if (screenSize > 860) {
118                    if (button.classList.contains('active')) return
119
120                    e.preventDefault()
121
122                    const tabNumber = button.dataset.tabButton
123                    const tabContent = tabs.querySelector(`[data-tab-content="${tabNumber}"]`)
124
125                    const prevActiveBtn = tabBtns.filter((btn) => {
126                        return btn.classList.contains('active')
127                    })
128
129                    if (prevActiveBtn.length > 0 && prevActiveBtn[0] !== button) {
130                        prevActiveBtn[0].classList.remove('active')
131                    }
132
133                    const prevActiveTab = tabEls.filter((tab) => {
134                        return tab.classList.contains('show')
135                    })
136
137                    if (prevActiveTab.length > 0) {
138                        prevActiveTab[0].classList.remove('show')
139                    }
140
141                    button.classList.add('active')
142                    tabContent.classList.add('show')
143                }
144            })
145        })
146    })
147
148    // Search input
149    searchIconClearBtn.addEventListener('click', () => {
150        searchInput.value = ''
151    })
152
153    // Mobile menu
154    homeMobileToggleMenu.addEventListener('click', () => {
155        document.body.classList.toggle('modal-open')
156        homeMobileToggleMenu.classList.toggle('open')
157        homeNavMenu.classList.toggle('show')
158    })
159
160    // Toggle navbar item menus
161    homeNavItems.map((item) => {
162        item.addEventListener('click', (e) => {
163            const prevActiveItem = homeNavItems.filter((i) => {
164                return i.classList.contains('active')
165            })
166
167            if (prevActiveItem.length > 0) {
168                prevActiveItem.map((prevItem) => {
169                    if (prevItem !== item) {
170                        prevItem.classList.remove('active')
171                        prevItem.querySelector('[data-modal]').classList.remove('open')
172                    }
173                })
174            }
175
176            if (e.target === item.children[0] && item.children[0].hasAttribute('data-modal-open')) {
177                item.classList.toggle('active')
178            }
179
180            homeNavMenu.scrollTo({ top: item.offsetTop - 30, behavior: 'smooth' })
181        })
182    })
183
184    // News story images
185    if (Array.isArray(newsStories) && !!newsStories.length) {
186        let story = newsStories.map((story) => story)
187
188        const prevStory = () => {
189            const [prev, main, next] = story
190            story = [next, prev, main]
191
192            newsStoriesContainer.append(...story)
193
194            next.classList.replace('next', 'prev')
195            prev.classList.replace('prev', 'current')
196            main.classList.replace('current', 'next')
197        }
198
199        const nextStory = () => {
200            const [prev, main, next] = story
201            story = [main, next, prev]
202
203            newsStoriesContainer.append(...story)
204
205            next.classList.replace('next', 'current')
206            prev.classList.replace('prev', 'next')
207            main.classList.replace('current', 'prev')
208        }
209
210        prevButton.addEventListener('click', prevStory)
211        nextButton.addEventListener('click', nextStory)
212    }
213
214    // Drawer
215    if (Array.isArray(drawerItems) && !!drawerItems.length) {
216        drawerItems?.map((item, i) => {
217            item.addEventListener('click', (e) => {
218                const drawerContainer = item.querySelector('.drawer-container')
219
220                if (drawerContainer.clientHeight > 0) return
221
222                e.preventDefault()
223            })
224        })
225    }
226
227    // Fast facts
228    if (fastFactsSlider) {
229        const rotateSlides = (direction) => {
230            const timer = 500
231            const slides = fastFactsSlider.querySelectorAll('.fact-slide')
232
233            const slideIndex = direction == 'prev' ? slides.length - 1 : 0
234            const currentSlide = slides[slideIndex]
235
236            const slide = currentSlide.cloneNode(true)
237
238            if (direction === 'prev') {

239                fastFactsSlider.prepend(slide)
240            } else {
241                fastFactsSlider.append(slide)
242            }
243
244            const slideWidth = currentSlide.offsetWidth
245            currentSlide.remove()
246
247            const updatedSlides = fastFactsSlider.querySelectorAll('.fact-slide')
248
249            updatedSlides.forEach((item, i) => {
250                item.animate([{ transform: `translateX(${direction === 'prev' ? '-' : ''}${slideWidth}px)` }, { transform: 'translateX(0)' }], {
251                    duration: timer,
252                    easing: 'ease-in-out',
253                })
254            })
255        }
256
257        if (fastFactsPrevBtn) {
258            fastFactsPrevBtn.addEventListener('click', (e) => rotateSlides('prev'))
259        }
260
261        if (fastFactsNextBtn) {
262            fastFactsNextBtn.addEventListener('click', (e) => rotateSlides('next'))
263        }
264    }
265
266    // FAQs
267    if (Array.isArray(faqs) && !!faqs.length) {
268        faqs.map((faq) => {
269            const faqBtns = Array.from(faq.querySelectorAll('[data-faq-button]'))
270            const faqEls = Array.from(faq.querySelectorAll('[data-faq-content]'))
271
272            faqBtns.map((button) => {
273                button.addEventListener('click', (e) => {
274                    const faqNumber = button.dataset.faqButton
275                    const faqContent = faq.querySelector(`[data-faq-content="${faqNumber}"]`)
276
277                    const prevActiveBtn = faqBtns.filter((btn) => {
278                        return btn.classList.contains('active')
279                    })
280
281                    if (prevActiveBtn.length > 0) {
282                        prevActiveBtn[0].classList.remove('active')
283                    }
284
285                    const prevActiveFaq = faqEls.filter((faq) => {
286                        return faq.classList.contains('show')
287                    })
288
289                    if (prevActiveFaq.length > 0) {
290                        prevActiveFaq[0].classList.remove('show')
291                    }
292
293                    if (prevActiveBtn[0] !== button) {
294                        button.classList.add('active')
295                        faqContent.classList.add('show')
296                    }
297                })
298            })
299        })
300    }
301})