https://www.smartpush.ai/wp-content/themes/Avada-Child-Theme/js/scripts.js?ver=46

1/*
2* Questions and Answers accordion
3*/
4const accordionItem = document.querySelectorAll('.qa-wrapper ul')
5if (accordionItem?.length) {
6    accordionItem.forEach((item, key, array) => {
7        item.addEventListener('click', e => {
8            array.forEach((i, k) => {
9                if (k != key) {
10                    i.querySelector('.qa-wrapper ul li+li').style.maxHeight = null
11                    i.classList.remove('opened')
12                }
13            })
14
15            const wrapper = e.target?.closest('.qa-wrapper ul') ?? e.target
16            const answer = wrapper.querySelector('.qa-wrapper ul li+li')
17            const answerHeight = answer.scrollHeight
18
19            const opened = wrapper.classList.contains('opened')
20
21            answer.style.maxHeight = opened === false ? `${answerHeight}px` : null
22
23            wrapper.classList.toggle('opened', !opened)
24        })
25    })
26}
27
28
29/*
30* Pricing page top large card switcher
31*/
32const cardSwitcher = document.querySelectorAll('.plan-card__switcher')
33if (cardSwitcher?.length) {
34    cardSwitcher.forEach(item => {
35        item.addEventListener('click', e => {
36            if (e.target.classList.contains('active')) return
37            if (!e.target?.dataset.plan) return
38
39            document.querySelectorAll('.card-abs').forEach(i => {
40                i.classList.remove('card-active')
41            })
42            const select = e.target.dataset.plan
43            const plan = document.querySelector('.card-abs.' + select)
44
45            plan.classList.add('card-active')
46        })
47    })
48}
49
50
51/*
52* Testimonials slider
53*/
54// const testimonials = document.querySelector('#testimonials .reviews')
55// if (testimonials !== undefined) {
56//     var $ = jQuery.noConflict();
57//     $(document).ready(function () {
58//         $("#testimonials .reviews").owlCarousel({
59//             items: 1,
60//             loop: true,
61//             rewind: true,
62//             nav: false,
63//             dots: false,
64//             autoplay: true,
65//         });
66//     });
67// }
68
69
70/*
71* Global menu toggler
72*/
73const menuToggler = document.querySelector('#hamburger-menu')
74const mainMenu = document.querySelector('.menu-main-container')
75menuToggler.addEventListener('click', e => {
76    if (e.currentTarget.dataset.opened !== 'opened') {
77        e.currentTarget.dataset.opened = 'opened'
78        document.documentElement.classList.add('menu-open')
79        mainMenu.style.height = mainMenu.scrollHeight + 'px'
80    }
81    else {
82        e.currentTarget.dataset.opened = ''
83        document.documentElement.classList.remove('menu-open')
84        mainMenu.style.height = null
85    }
86})
87
88
89/*
90* Pricing page sync tables horizontal scroll
91*/
92const tables = document.querySelectorAll('.plans-table')
93// if (window.innerWidth > 640) {
94    if (tables?.length) {
95        tables.forEach((table, key, array) => {
96            table.addEventListener('scroll', e => {
97                const scroll = e.currentTarget.scrollLeft
98                const tablesArray = [...array]
99                const newArr = tablesArray.filter((value, index) => {
100                    return index != key ? value : null;
101                });
102                syncTables(newArr, scroll)
103            })
104        })
105
106        const mainTable = document.querySelector('#plans-table')
107        const stickyTable = document.querySelector('#plans-table-sticky')
108        window.addEventListener('scroll', e => {
109            const offset = mainTable.getBoundingClientRect();
110            const mainTableTop = offset.top
111            // console.log(mainTable.scrollLeft)
112            // stickyTable.style.left = `-${mainTable.scrollLeft}px`
113            stickyTable.classList.toggle('show', mainTableTop < 0)
114        })
115
116        const tablesArray = [...tables]
117        const lastTable = [...tables][tables.length - 1]
118        // console.log(lastTable)
119
120        
121        let observer = new IntersectionObserver(observTables, {
122            rootMargin: '-200px 0px 0px 0px',
123        });
124        observer.observe(lastTable);
125    }
126// }
127function syncTables(tables, scroll) {

128    tables.forEach(table => {
129        table.scrollLeft = scroll
130    })
131}
132
133
134
135function observTables(entries, observer) {
136    // console.log(entries)
137    const sticky = document.querySelector('#plans-table-sticky')
138    const table = entries[0].target
139    const visible = entries[0].isIntersecting
140    const offset = table.getBoundingClientRect();
141
142    if (!visible && offset.top < 0) {
143        // sticky.style.opacity = 0
144        // sticky.style.visibility = 'hidden'
145        sticky.classList.add('disabled')
146    }
147    else {
148        // sticky.style.opacity = 1
149        // sticky.style.visibility = 'visible'
150        sticky.classList.remove('disabled')
151
152    }
153};
154
155
156const singlePostHeadings = document.querySelectorAll('.single-heading-link')
157if (singlePostHeadings?.length) {
158    const singleContent = document.querySelector('.sp-single__inner-content')
159    singlePostHeadings.forEach(element => {
160        element.addEventListener('click', e => {
161            const headingKey = element.dataset.headingTarget
162            const headingTarget = singleContent.querySelector('[data-heading="' + headingKey + '"]')
163
164            headingTarget.scrollIntoView({ block: "start", behavior: "smooth" });
165
166        })
167    });
168}
169
170
171const tabsControl = document.querySelectorAll('.sp_tabs__control')
172if (tabsControl?.length) {
173    document.addEventListener('DOMContentLoaded', e => {
174        const tabs = document.querySelectorAll('.sp_tabs__tabs')

175        tabs.forEach(tab => {
176            tab.querySelector('.fusion-row').classList.add('show')
177        })
178    })
179    tabsControl.forEach((i, k, arr) => {
180        i.addEventListener('click', e => {
181            // if (e.target.tagName != 'LI') return
182            const item = e.target?.closest('li')
183
184            if (!item) return
185            if(item.classList.contains('active')) return
186            const items = i.querySelectorAll('li')
187
188            items.forEach((li, pos) => {
189                li.classList.remove('active')
190            })
191            item.classList.add('active')
192
193            const position = item.dataset.tab
194
195            const tabsWrapper = item.closest('.sp_tabs')
196            const tabs = tabsWrapper.querySelectorAll('.sp_tabs__tabs .fusion-row')
197            tabs.forEach((t, tk) => {
198                t.classList.remove('show')
199            })
200            tabs[position - 1].classList.add('show')
201        })
202    })
203}
204
205
206const tableContentsToggler = document.querySelector('.sp-single__table_contents .toggler')
207// console.log(tableContentsToggler)
208if (tableContentsToggler) {
209    tableContentsToggler.addEventListener('click', e => {
210        const toggler = e.currentTarget
211        const wrapper = toggler.closest('.sp-single__table_contents')
212        const list = wrapper.querySelector('ul')
213
214        if (wrapper.classList.contains('show')) {
215            list.style.maxHeight = `calc(1.5 * 5 * 1em)`
216            wrapper.classList.remove('show')
217            toggler.textContent = 'Show more'
218        }
219        else {
220            list.style.maxHeight = list.scrollHeight + 'px'
221            wrapper.classList.add('show')
222            toggler.textContent = 'Show less'
223        }
224    })
225}
226
227
228// sp_youtube video play action
229const spYtPLay = document.querySelectorAll('.sp_youtube__play')
230if (spYtPLay) {
231    spYtPLay.forEach(btn => {
232        btn.addEventListener('click', e => {
233            const target = e.target
234            const container = target.closest('.sp_youtube__inner')
235            const videoId = container.dataset.video
236            const video = buildYtLink(videoId)
237            container.innerHTML = video
238        })
239    })
240}
241
242function buildYtLink(id) {
243    let video = document.createElement('iframe')
244    video.src = "https://www.youtube.com/embed/" + id + "?rel=0&modestbranding=1&autohide=1&showinfo=0&autoplay=1"
245    video.setAttribute('frameborder', 0)
246    video.setAttribute('autoplay', 1)
247    video.setAttribute('allow', "autoplay")
248    video.setAttribute('allowfullscreen', '')
249    return video.outerHTML
250}
251
252
253/* Hide homepage sent notification banner on scroll */
254const homepageNotificationBanner = document.querySelector('.sent-notifications-counter-wrap');
255const homeHeader = document.querySelector('.fusion-header-wrapper')
256
257document.addEventListener('scroll', function () {
258    if (homepageNotificationBanner && window.pageYOffset > 50) {
259        homeHeader.classList.add('hide-sent-notification-banner')
260    } else {
261        homeHeader.classList.remove('hide-sent-notification-banner')
262    }
263})
264
265/* Home hero typing animation */
266let homeHero = document.querySelector('.main-homepage-hero')
267
268if (homeHero) {
269    document.addEventListener('DOMContentLoaded',function(event){
270    let dataText = [ "Conversion", "Revenue", "Marketing ROI"];
271    
272    function typeWriter(text, i, fnCallback) {
273        if (i < (text.length)) {
274            document.querySelector(".text-1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';
275            setTimeout(function() {
276                typeWriter(text, i + 1, fnCallback)
277            }, 100);
278        }
279        // text finished, call callback if there is a callback function
280        else if (typeof fnCallback == 'function') {
281        // call callback after timeout
282            setTimeout(fnCallback, 700);
283        }
284    }
285    // start a typewriter animation for a text in the dataText array
286    function StartTextAnimation(i) {
287        if (typeof dataText[i] == 'undefined'){
288            setTimeout(function() {
289                StartTextAnimation(0);
290            }, 700);
291        }
292        // check if dataText[i] exists
293        if (i < dataText.length) {

294            // text exists! start typewriter animation
295            typeWriter(dataText[i], 0, function(){
296                // after callback (and whole text has been animated), start next text
297                StartTextAnimation(i + 1);
298            });
299        }
300    }
301    // start the text animation
302    StartTextAnimation(0);
303    });
304}
305
306/* Home header top banner counter */
307let counter1 = document.getElementsByClassName("counter1")[0];
308let counter2 = document.getElementsByClassName("counter2")[0];
309
310if (homepageNotificationBanner && counter1 && counter2) {
311    function handleCounter (counter) {
312      let c = 100;
313      let j = 100
314         
315      let interval = setInterval(() => {
316        c++;
317        if(c== 999) {
318           c = 100;
319           j++
320          counter1.innerText = j;
321        }
322        counter2.innerText = c;
323      }, 10);
324    }
325    
326    handleCounter (counter2);
327}
328
329
330/* Blog article page progress bar */
331const articlePage = document.querySelector('.sp-blog-article-page')
332
333if (articlePage) {
334    let scrollTop = window.scrollY;
335    let viewportHeight = document.body.clientHeight - window.innerHeight;
336    let scrollPercent = (scrollTop / viewportHeight) * 100;
337    let progressBar = document.querySelector('#js-progressbar');
338    
339    progressBar.setAttribute('value', scrollPercent);
340    
341    window.addEventListener('scroll', function() {
342      scrollTop = window.scrollY;
343      viewportHeight = document.body.clientHeight - window.innerHeight;
344      scrollPercent = (scrollTop / viewportHeight) * 100;
345      progressBar.setAttribute('value', scrollPercent);
346    });
347}
348
349
350
351