https://www.karosyrup.com/wp-content/themes/karo-custom/src/local/products-script.js?ver=7.0.5

1document.addEventListener('DOMContentLoaded', () => {
2  var links = document.querySelectorAll('.nutrition-facts-link');
3
4  for (i = 0; i < links.length; i++) {
5    links[i].addEventListener('click', function (e) {
6      e.preventDefault();
7      if (this.nextElementSibling.classList.contains('closed')) {
8        this.nextElementSibling.classList.remove('closed');
9        this.setAttribute('aria-expanded', 'true');
10      } else {
11        this.nextElementSibling.classList.add('closed');
12        this.setAttribute('aria-expanded', 'false');
13      }
14    });
15  }
16
17  for (let i = 0; i < 4; i++) {
18    const span = document.getElementById(`close-facts-${i}`);
19    if (span) {
20      span.onclick = () => {
21        const factsContent = document.getElementById(`facts-${i}`);
22        if (factsContent) {
23          factsContent.classList.add('closed');
24          factsContent.previousElementSibling.setAttribute('aria-expanded', 'false');
25        }
26      };
27    }
28  }
29
30  // Slider ————————————————————
31  const slideshow = document.querySelector('.slide-wrap');
32
33  if (slideshow != null) {
34    //make sure we don't run this script if the slideshow is not present
35
36    let slides = document.querySelectorAll('.slide-entry'),
37      slideCount = slides.length,
38      currentSlide = 0,
39      slideHeight = null,
40      initialHeight = slides[0].clientHeight;
41
42    slides[0].classList.add('active'); //on load, activate the first slide
43
44    function moveToSlide(n) {
45      // set up our slide navigation functionality
46      slides[currentSlide].className = 'slide-entry';
47      currentSlide = (n + slideCount) % slideCount;
48      slides[currentSlide].className = 'slide-entry active';
49      slideHeight = slides[currentSlide].clientHeight;
50      slideshow.style.height = slideHeight + 'px';
51      window.addEventListener('resize', function () {
52        resizedSlideHeight = slides[currentSlide].clientHeight;
53        slideshow.style.height = resizedSlideHeight + 'px';
54      });
55    }
56
57    function nextSlide(e) {
58      moveToSlide(currentSlide + 1);
59      // let code = e.keyCode;
60      // if( code == 39 ) {
61      //   moveToSlide(currentSlide+1);
62      // }
63    }
64
65    function prevSlide(e) {
66      moveToSlide(currentSlide + -1);
67      // let code = e.keyCode;
68      // if( code == 37 ) {
69      //   moveToSlide(currentSlide+-1);
70      // }
71    }
72
73    const slideHandlers = {
74      nextSlide: function (element) {
75        document.querySelector(element).addEventListener('click', nextSlide);
76        // document.body.addEventListener('keydown', nextSlide, false);
77      },
78      prevSlide: function (element) {
79        document.querySelector(element).addEventListener('click', prevSlide);
80        // document.body.addEventListener('keydown', prevSlide, false);
81      },
82    };
83
84    slideHandlers.nextSlide('#next-slide');
85    slideHandlers.prevSlide('#prev-slide');
86
87    // Dynamic slideshow height
88
89    slideshow.style.height = initialHeight + 'px'; //on load, set the height of the slider to the first active slide
90
91    window.addEventListener('resize', function () {
92      // adjust the height of the slidehow as the browser is resized
93      let resizedHeight = slides[0].clientHeight;
94      slideshow.style.height = resizedHeight + 'px';
95    });
96
97    // Detect swipe events for touch devices, credit to Kirupa @ https://www.kirupa.com/html5/detecting_touch_swipe_gestures.htm
98    let initialX = null;
99    let initialY = null;
100
101    function startTouch(e) {
102      initialX = e.touches[0].clientX;
103      initialY = e.touches[0].clientY;
104    }
105
106    function moveTouch(e) {
107      if (initialX === null) {
108        return;
109      }
110      if (initialY === null) {
111        return;
112      }
113      let currentX = e.touches[0].clientX;
114      let currentY = e.touches[0].clientY;
115      let diffX = initialX - currentX;
116      let diffY = initialY - currentY;
117      if (Math.abs(diffX) > Math.abs(diffY)) {
118        if (diffX > 0) {
119          // swiped left
120          moveToSlide(currentSlide + 1);
121        } else {
122          // swiped right
123          moveToSlide(currentSlide + -1);
124        }
125      }
126      initialX = null;
127      initialY = null;
128      e.preventDefault();
129    }
130
131    slideshow.addEventListener('touchstart', startTouch, false);
132    slideshow.addEventListener('touchmove', moveTouch, false);
133
134    // optional autoplay function
135    setInterval(function () {
136      nextSlide();
137    }, 8000);
138  }
139
140  // Accordion ————————————————————
141  var accordionDropdown = document.querySelectorAll('.accordion');
142
143  for (i = 0; i < accordionDropdown.length; i++) {
144    accordionDropdown[i].addEventListener('click', function () {
145      if (this.classList.contains('closed')) {
146        this.classList.remove('closed');
147      } else {
148        this.classList.add('closed');
149      }
150    });
151  }
152});