https://www.eventilla.com/wp-content/themes/marketing-site-v3/2023-facelift/facelift.js?ver=1782456356

1// Toggle images block
2const toggleImages = document.querySelectorAll('.toggle-images')
3
4if (toggleImages[0] !== null && toggleImages[0] !== undefined) {
5  for (const el of toggleImages) {
6    const toggleButton = el.querySelector('.toggle-images-button')
7    const firstImage = el.querySelector('.toggle-images-item.animate-shrink')
8    const secondImage = el.querySelector('.toggle-images-item.animate-visible')
9    const buttonText = el.querySelector('.toggle-images-button-text')
10
11    toggleButton.addEventListener('click', () => {
12      if (el.classList.contains('second-toggled')) {
13        el.classList.remove('second-toggled')
14        firstImage.classList.remove('shrink-forwards')
15        secondImage.classList.remove('animation-forwards')
16        firstImage.classList.add('shrink-reverse')
17        secondImage.classList.add('animation-reverse')
18        buttonText.textContent = firstImage.dataset.text
19      } else {
20        el.classList.add('second-toggled')
21        firstImage.classList.add('shrink-forwards')
22        secondImage.classList.add('animation-forwards')
23        firstImage.classList.remove('shrink-reverse')
24        secondImage.classList.remove('animation-reverse')
25        buttonText.textContent = secondImage.dataset.text
26      }
27    })
28  }
29}
30
31// Tabs block
32const tabs = document.querySelectorAll('.tabs')
33
34if (tabs[0] !== null && tabs[0] !== undefined) {
35  for (const el of tabs) {
36    const buttons = el.querySelectorAll('.tabs-button')
37
38    for (const button of buttons)
39      button.addEventListener('click', () => {
40        const targetID = button.dataset.target
41        const targetEl = document.querySelector(`#${targetID}`)
42        const currentActiveEl = el.querySelector('.tabs-item.is-visible')
43        const currentActibeButton = el.querySelector('.tabs-button.is-active')
44
45        if (targetEl.classList.contains('is-hidden')) {
46          currentActiveEl.classList.add('is-hidden')
47          currentActiveEl.classList.remove('is-visible')
48          targetEl.classList.remove('is-hidden')
49          targetEl.classList.add('is-visible')
50
51          currentActibeButton.classList.remove('is-active')
52          button.classList.add('is-active')
53        }
54      })
55  }
56}
57
58// Animated heading
59const headings = document.querySelectorAll('.animated-heading')
60
61if (headings[0] !== null && headings[0] !== undefined) {
62  for (const heading of headings) {
63    const animateEl = heading.querySelector('.animated-heading-animate')
64    const words = animateEl.getAttribute('data-words').split(',')
65    let currentIndex = 0
66
67    setInterval(function () {
68      animateEl.style.opacity = 0
69      setTimeout(() => {
70        animateEl.textContent = words[currentIndex]
71        animateEl.style.opacity = 1
72      }, 500)
73      currentIndex = (currentIndex + 1) % words.length
74    }, 3000)
75  }
76}
77
78// Pricing slider
79const pricingBlocks = document.querySelectorAll('.pricing');
80
81const initSwiper = (el) => {
82  const swiper = new Swiper(el, {
83    direction: 'horizontal',
84    slidesPerView: 1.05,
85    spaceBetween: 32,
86    navigation: {
87      nextEl: '.swiper-button-next',
88      prevEl: '.swiper-button-prev',
89    },
90    breakpoints: {
91      768: {
92        slidesPerView: 2.1,
93      },
94      990: {
95        slidesPerView: 3.1,
96      },
97      1200: {
98        slidesPerView: 4.1,
99      },
100    },
101  });
102};
103
104if (pricingBlocks[0] !== null && pricingBlocks[0] !== undefined) {
105
106  const updateFeatureHeights = () => {
107    const featureLists = document.querySelectorAll('.features-visible .pricing-features');
108
109    for (const list of featureLists) {
110      list.style.maxHeight = list.scrollHeight + 'px';
111    }
112  };
113
114  for (const block of pricingBlocks) {
115    const slider = block.querySelector('.swiper');
116    const button = block.querySelector('.pricing-toggle');
117    const features = block.querySelectorAll('.pricing-options');
118
119    if (slider) initSwiper(slider);
120
121    if (button) {
122      button.addEventListener('click', (e) => {
123
124        if (block.classList.contains('features-visible')) {
125          block.classList.remove('features-visible');
126        } else {
127          block.classList.add('features-visible');
128        }
129
130        for (const feature of features) {
131          const featureHeight = block.classList.contains('features-visible') ? feature.scrollHeight + 'px' : 0;
132
133          feature.style.maxHeight = featureHeight;
134        }
135      });
136    }
137  }
138
139  window.addEventListener('resize', updateFeatureHeights);
140}