https://indee.tv/assets/wp-content/themes/indee/template-parts/block/carousel/embla-init.js

1(function($) {
2    // Slider Section
3    var tabSliderBlock = function($block) {
4        const carousal_position = jQuery('.feature-section').offset().top;
5        onThumbClick = (mainCarousel, thumbCarousel, index) => () => {
6            if (!thumbCarousel.clickAllowed()) return;
7            mainCarousel.scrollTo(index);
8        };
9
10        followMainCarousel = (mainCarousel, thumbCarousel) => () => {
11            thumbCarousel.scrollTo(mainCarousel.selectedScrollSnap());
12            selectThumbBtn(mainCarousel, thumbCarousel);
13        };
14
15        selectThumbBtn = (mainCarousel, thumbCarousel) => {
16            const previous = mainCarousel.previousScrollSnap();
17            const selected = mainCarousel.selectedScrollSnap();
18            thumbCarousel.slideNodes()[previous].classList.remove("is-selected");
19            thumbCarousel.slideNodes()[selected].classList.add("is-selected");
20        };
21
22
23        let delay = 4000;
24
25        mainCarousel = [];
26        mainCarouselWrap = document.querySelectorAll("#main-carousel");
27        mainCarouselView = mainCarouselWrap.forEach((i) =>
28            mainCarousel.push(
29                EmblaCarousel(
30                    i.querySelector(".embla__viewport"), {
31                        skipSnaps: false,
32                        draggable: true,
33                        dragFree: false,
34                    }, [EmblaCarouselAutoplay({
35                            playOnInit: false,
36                            delay: delay,
37                            stopOnInteraction: false,
38                            stopOnMouseEnter: true,
39                        },
40                        (emblaRoot) => emblaRoot.parentElement
41                    )]
42                )
43            )
44        );
45
46        jQuery(window).scroll(function() {
47            if (jQuery(window).scrollTop() >= carousal_position - 500 && jQuery(window).scrollTop() < jQuery('.feature-section').height() + carousal_position) {
48                mainCarousel.forEach((i) => {
49                    i.plugins().autoplay.play();
50                    jQuery(":root").css({ "--durationValue": delay / 1000 + "s" });
51                })
52
53            } else {
54                mainCarousel.forEach((i) => {
55                    i.plugins().autoplay.stop()
56                })
57            }
58        });
59
60
61
62
63        thumbCarousel = [];
64        thumbCarouselWrap = document.querySelectorAll(".embla--thumb");
65        thumbCarouselView = thumbCarouselWrap.forEach((i) =>
66            thumbCarousel.push(
67                EmblaCarousel(i.querySelector(".thumb_embla__viewport"), {
68                    skipSnaps: false,
69                    draggable: true,
70                    dragFree: false,
71                }, [EmblaCarouselAutoplay({
72                        playOnInit: false,
73                        delay: delay,
74                        stopOnInteraction: false,
75                        stopOnMouseEnter: true,
76                    },
77                    (emblaRoot) => emblaRoot.parentElement
78                )])
79            )
80        );
81
82
83        jQuery('.embla__slide--thumb').hover(function() {
84            mainCarousel.forEach((i) => {
85                i.plugins().autoplay.stop()
86            })
87        }, function() {
88            mainCarousel.forEach((i) => {
89                i.plugins().autoplay.play()
90            })
91        });
92
93        thumbCarousel.forEach((i, ind) => {
94            i.slideNodes().forEach((thumbNode, index) => {
95                onClick = onThumbClick(mainCarousel[ind], i, index);
96                thumbNode.addEventListener("click", onClick, false);
97            });
98
99            syncThumbCarousel = followMainCarousel(mainCarousel[ind], i);
100            mainCarousel[ind].on("select", syncThumbCarousel);
101            i.on("init", syncThumbCarousel);
102        });
103    };
104
105
106    // testimonialCarousal
107    var testimonialCarousal = function($block) {
108        const setupPrevNextBtns = (prevBtn, nextBtn, embla) => {
109            setTimeout(() => {
110                prevBtn.addEventListener("click", embla.scrollPrev, false);
111                nextBtn.addEventListener("click", embla.scrollNext, false);
112            }, 1000)
113
114        };
115        const disablePrevNextBtns = (prevBtn, nextBtn, embla) => {
116            return () => {
117                if (embla.canScrollPrev()) prevBtn.removeAttribute("disabled");
118                else prevBtn.setAttribute("disabled", "disabled");
119
120                if (embla.canScrollNext()) nextBtn.removeAttribute("disabled");
121                else nextBtn.setAttribute("disabled", "disabled");
122            };
123        };
124
125
126        const options = {
127            slidesToScroll: 1,
128            skipSnaps: true,
129            containScroll: "trimSnaps",
130            loop: true,
131            align: "center"
132        };
133
134        const setupEmblaCarousel = (emblaNode, options) => {
135            const viewPort = emblaNode.querySelector(".embla__viewport");
136            const prevBtn = emblaNode.querySelector(".embla__button--prev");
137            const nextBtn = emblaNode.querySelector(".embla__button--next");
138            const embla = EmblaCarousel(viewPort, options, [EmblaCarouselClassNames()]);
139            const disablePrevAndNextBtns = disablePrevNextBtns(prevBtn, nextBtn, embla);
140
141            setupPrevNextBtns(prevBtn, nextBtn, embla);
142
143            embla.on("select", disablePrevAndNextBtns);
144            embla.on("init", disablePrevAndNextBtns);
145        };
146
147        const emblaNodes = [].slice.call(document.querySelectorAll(".embla"));
148        const emblaCarousels = emblaNodes.map(emblaNode =>
149            setupEmblaCarousel(emblaNode, options)
150        );
151
152    }
153
154    // experienceCarousal
155    var experienceCarousal = function($block) {
156        const setupDotBtns = (dotsArray, embla) => {
157            dotsArray.forEach((dotNode, i) => {
158                dotNode.classList.add('acc-embladot');
159                dotNode.addEventListener('click', () => embla.scrollTo(i), false);
160            });
161        };
162
163        const generateDotBtns = (dots, embla) => {
164            const scrollSnaps = embla.scrollSnapList();
165            const dotsFrag = document.createDocumentFragment();
166            const dotsArray = scrollSnaps.map(() => document.createElement('button'));
167            dotsArray.forEach(dotNode => dotsFrag.appendChild(dotNode));
168            dots.appendChild(dotsFrag);
169            return dotsArray;
170        };
171
172        const selectDotBtn = (dotsArray, embla) => () => {
173            const previous = embla.previousScrollSnap();
174            const selected = embla.selectedScrollSnap();
175            dotsArray[previous].classList.remove("is-selected");
176            dotsArray[selected].classList.add("is-selected");
177        };
178        const options = {
179            align: "start",
180            slidesToScroll: 1,
181            skipSnaps: true,
182            containScroll: "trimSnaps",
183            dragFree: false,
184        };
185        const setupEmblaCarousel = (emblaNode, options) => {
186            const viewPort = emblaNode.querySelector(".embla__viewport");
187            const dots = document.querySelector(".experience-embladots");
188            const embla = EmblaCarousel(viewPort, options, [EmblaCarouselClassNames()]);
189            const dotsArray = generateDotBtns(dots, embla);
190            const setSelectedDotBtn = selectDotBtn(dotsArray, embla);
191            setupDotBtns(dotsArray, embla);
192
193
194            const toggleEmblaReady = (event) => {
195                const isResizeEvent = event === "resize";
196                const toggleClass = isResizeEvent ? "remove" : "add";
197                viewPort.classList[toggleClass]("embla--is-ready");
198                if (isResizeEvent) embla.reInit();
199            };
200
201            embla.on("select", setSelectedDotBtn);
202            embla.on("init", setSelectedDotBtn);
203            embla.on("init", toggleEmblaReady);
204            embla.on("resize", toggleEmblaReady);
205            embla.on("reInit", toggleEmblaReady);
206
207            embla.internalEngine().translate.toggleActive(false);
208            embla.internalEngine().translate.clear();
209
210        };
211
212        const emblaNodes = [].slice.call(document.querySelectorAll(".experience-banner-carousal"));
213        const emblaCarousels = emblaNodes.map(emblaNode =>
214            setupEmblaCarousel(emblaNode, options)
215        );
216    }
217
218    // Pricing Carousal
219
220    var pricingCarousal = function($block) {
221        const setupPrevNextBtns = (prevBtn, nextBtn, embla) => {
222            setTimeout(() => {
223                prevBtn.addEventListener("click", embla.scrollPrev, false);
224                nextBtn.addEventListener("click", embla.scrollNext, false);
225            }, 1000)
226
227        };
228        const disablePrevNextBtns = (prevBtn, nextBtn, embla) => {
229            return () => {
230                if (embla.canScrollPrev()) prevBtn.removeAttribute("disabled");
231                else prevBtn.setAttribute("disabled", "disabled");
232
233                if (embla.canScrollNext()) nextBtn.removeAttribute("disabled");
234                else nextBtn.setAttribute("disabled", "disabled");
235            };
236        };
237
238
239        const options = {
240            active: true,
241            breakpoints: {
242                '(min-width: 768px)': { active: false },
243            },
244            slidesToScroll: 1,
245            skipSnaps: true,
246            containScroll: "trimSnaps",
247            loop: false,
248            align: "center"
249        };
250
251        const setupEmblaCarousel = (emblaNode, options) => {
252            const viewPort = emblaNode.querySelector(".embla__viewport");
253            const prevBtn = emblaNode.querySelector(".embla__button--prev");
254            const nextBtn = emblaNode.querySelector(".embla__button--next");
255            const embla = EmblaCarousel(viewPort, options, [EmblaCarouselClassNames()]);
256            const disablePrevAndNextBtns = disablePrevNextBtns(prevBtn, nextBtn, embla);
257
258            setupPrevNextBtns(prevBtn, nextBtn, embla);
259
260            embla.on("select", disablePrevAndNextBtns);
261            embla.on("init", disablePrevAndNextBtns);
262        };
263
264        const emblaNodes = [].slice.call(document.querySelectorAll(".pricing-embla"));
265        const emblaCarousels = emblaNodes.map(emblaNode =>
266            setupEmblaCarousel(emblaNode, options)
267        );
268    }
269
270
271    // Initialize dynamic block preview (editor).
272    if (window.acf) {
273        window.acf.addAction(
274            'render_block_preview/type=block-feature-tab-section',
275            tabSliderBlock
276        );
277        window.acf.addAction(
278            'render_block_preview/type=block-testimonial-section-init',
279            testimonialCarousal
280        );
281        window.acf.addAction(
282            'render_block_preview/type=block-experience-section-init',
283            experienceCarousal
284        );
285        window.acf.addAction(
286            'render_block_preview/type=block-price-section-init',
287            pricingCarousal
288        );
289    }
290
291})(jQuery);