https://mrc.org/themes/custom/mrccustom/js/aboutQuotes.js?tlu5m0

1
2const initQuotes = async () => {
3    document.addEventListener('DOMContentLoaded', (event) => {
4        // Get the modal
5        var modal = document.getElementById('videoModal');
6      
7        // Get the button (image with 'play-button' class) that opens the modal
8        var btn = document.querySelector('.play-button');
9      
10        // Get the <span> element that closes the modal
11        var span = document.getElementsByClassName('close')[0];
12      
13        // Get the video player
14        var video = document.getElementById('videoPlayer');
15      
16        // When the user clicks on the button, open the modal and play the video
17        btn.onclick = function() {
18          modal.style.display = "block";
19          // Directly play the video when the modal is opened
20          video.play(); 
21        }
22        
23        // Function to close the modal and stop the video
24        function closeModal() {
25          // Pause and reset the video when the modal is closed
26          video.pause();
27          video.currentTime = 0;
28          // Hide the modal
29          modal.style.display = "none";
30        }
31      
32        // When the user clicks on <span> (x), close the modal
33        span.onclick = closeModal;
34      
35        // When the user clicks anywhere outside of the modal content, close it
36        window.onclick = function(event) {
37          if (event.target == modal) {
38            closeModal();
39          }
40        }
41      });
42    //grab the quote data from the drupal view api
43    const resp = await fetch('/api/aboutquotes?_format=json')
44    const data = await resp.json()
45    console.log(data)
46
47    //grab the quote list handler
48    const quoteList = document.querySelector('.quotes--content')
49
50    for (let i = 0; i < data.length; ++i) {
51        //create wrapper element
52        const quoteWrapper = document.createElement('div')
53        quoteWrapper.classList.add('quotes--content--item')
54
55        //if we are creating the first element, add the class active too
56        // if (i == data.length - 1) {
57        if (i === 0) {
58            quoteWrapper.classList.add('active')
59        }
60
61        //create quote element
62        const quote = document.createElement('div')
63        quote.classList.add('quotes--content--item--quote')
64        quote.innerHTML = `"${data[i].quote}"`
65
66        //create person element
67        const person = document.createElement('div')
68        person.classList.add('quotes--content--item--person')
69        person.innerHTML = `&mdash;${data[i].person}`
70
71        //add the fields to the wrapper element
72        quoteWrapper.appendChild(quote)
73        quoteWrapper.appendChild(person)
74
75        //add the new element
76        quoteList.appendChild(quoteWrapper)
77    }
78
79    //now lets create the logic for the buttons
80    const leftBtn = document.getElementById('LeftArrow')
81    const rightBtn = document.getElementById('RightArrow')
82
83    rightBtn.addEventListener('click', () => {
84        const curr = document.querySelector('.quotes--content--item.active')
85        curr.classList.remove('active')
86        if (curr.nextElementSibling) {
87            curr.nextElementSibling.classList.add('active')
88        }
89        else {
90            //this should lock onto the first quote. queryselector behaivour defaults to first selection if there are multiple
91            const next = document.querySelector('.quotes--content--item')
92            next.classList.add('active')
93
94        }
95    })
96
97
98    leftBtn.addEventListener('click', () => {
99        const curr = document.querySelector('.quotes--content--item.active')
100        curr.classList.remove('active')
101        if (curr.previousElementSibling) {
102            curr.previousElementSibling.classList.add('active')
103        }
104        else {
105            //this should lock onto the last quote
106            const list = document.querySelectorAll('.quotes--content--item')
107            list[list.length - 1].classList.add('active')
108
109        }
110    })
111}
112initQuotes()