https://zenklub.com.br/static/webflow/auto-slide-hp.js

1import {
2  getBlodSpans,
3  RecurringTimer,
4  isInViewport,
5  isOnMobile,
6} from "./helpers.js";
7
8class TestimonialSlider {
9  constructor(dataArr, slideTimer = 5000) {
10    this.testimonialData = dataArr;
11    this.slideTimer = slideTimer;
12    this.$arrowUp = $(".arrow-up");
13    this.$arrowDown = $(".arrow-down");
14    this.$firstPara = $('[testimonial="para-1"]');
15    this.$secPara = $('[testimonial="para-2"]');
16    this.$authorName = $('[testimonial="author-name"]');
17    this.$authorPosition = $('[testimonial="author-position"]');
18    this.$companyLogo = $('[testimonial="company-logo"]');
19    this.$viewMoreLink = $('[testimonial="view-more"]');
20    this.$allTestimonialBLock = $("[testimonial='main'] .testemonial-img");
21    this.currSlideIdx = 0;
22    this.isRunning = false;
23    this.init();
24  }
25
26  init() {
27    this.activateEvents();
28    this.addProgressCircles();
29    this.showSlide();
30    this.startAutoAni();
31  }
32
33  activateEvents() {
34    this.$arrowUp.on("click", () => {
35      this.currSlideIdx--;
36      this.stopAutoAni();
37      this.intervalTimer && this.intervalTimer.resume();
38      this.showSlide();
39    });
40
41    this.$arrowDown.on("click", () => {
42      this.currSlideIdx++;
43      this.stopAutoAni();
44      this.intervalTimer && this.intervalTimer.resume();
45      this.showSlide();
46    });
47
48    this.$allTestimonialBLock.click((evt) => {
49      this.currSlideIdx = $(evt.currentTarget).index();
50      const $currTab = $(evt.currentTarget);
51      if (!$currTab.find("svg").is(":visible")) {
52        this.stopAutoAni();
53        isOnMobile() && this.intervalTimer && this.intervalTimer.resume();
54        this.showSlide();
55      }
56    });
57
58    if (!isOnMobile()) {
59      this.$allTestimonialBLock.mouseenter((e) => this.mouseEnterCode(e));
60
61      this.$allTestimonialBLock.mouseleave((e) => {
62        const currEleHovered = e.currentTarget;
63        const $innerSvg = $(currEleHovered).find("svg");
64
65        if ($innerSvg.is(":visible")) {
66          this.resumeAutoAni();
67        }
68      });
69    }
70  }
71
72  mouseEnterCode(e) {
73    const currEleHovered = e.currentTarget;
74    const $innerSvg = $(currEleHovered).find("svg");
75
76    if ($innerSvg.is(":visible")) {
77      this.pauseAutoAni();
78    }
79  }
80
81  addProgressCircles() {
82    const imgWidth = $(".testemonial-img").width();
83    const imgHeight = $(".testemonial-img").height();
84    $(".testemonial-img").css({ position: "relative", overflow: "visible" });
85    this.$allTestimonialBLock.each(function () {
86      $(this).append(`<svg class="progress-svg">
87          <circle class='circle2'/>
88          <circle class='circle'/>
89        </svg>`);
90    });
91    $(".progress-svg").css({
92      position: "absolute",
93      left: "-8px",
94      top: "-12px",
95      height: `${imgHeight + 20}px`,
96      width: `${imgWidth + 20}px`,

97      transform: `rotate(-90deg)`,
98    });
99
100    $(".circle2, .circle").css({
101      cx: (imgWidth + 16) / 2,
102      cy: (imgWidth + 16) / 2,
103      r: (imgWidth + 10) / 2,
104      stroke: "#9A7EF1",
105      fill: "none",
106      "stroke-width": "4",
107      "z-index": 1,
108    });
109
110    $(".circle").css({
111      stroke: "#F448E3",
112      "z-index": 2,
113    });
114
115    $(".progress-svg").hide();
116  }
117
118  showSlide(isMouseLeave) {
119    if (this.currSlideIdx < 0) {
120      this.currSlideIdx = this.testimonialData.length - 1;
121    } else if (this.currSlideIdx >= this.testimonialData.length) {
122      this.currSlideIdx = 0;
123    }
124    const slideData = this.testimonialData[this.currSlideIdx];
125    const $progSVG = $(".testemonial-img").eq(this.currSlideIdx).find("svg");
126    this.hideSlide();
127    if (slideData) {
128      const {
129        testimonialPara2,
130        testimonialPara1,
131        authorViewMore,
132        authorPosition,
133        authorName,
134        authorCompanyLogo,
135      } = slideData;
136
137      this.$firstPara.html(getBlodSpans(testimonialPara1));
138      this.$secPara.html(getBlodSpans(testimonialPara2));
139      this.$authorName.text(authorName);
140      this.$authorPosition.text(authorPosition);
141      this.$companyLogo.attr("src", authorCompanyLogo);
142      if (authorViewMore.length) {
143        this.$viewMoreLink.attr("href", authorViewMore);
144        this.$viewMoreLink.show();
145      } else {
146        this.$viewMoreLink.hide();
147      }
148
149      var c = $progSVG.find(".circle");
150      var s = $progSVG;
151
152      $progSVG.show();
153
154      this.aniPlay = TweenMax.fromTo(
155        c,
156        this.slideTimer / 1000,
157        { drawSVG: "0% 0%" },
158        { drawSVG: "0% 100%", ease: "Power1.easeInOut" }
159      );
160
161      if (!isMouseLeave) {
162        gsap.fromTo(
163          [this.$firstPara, this.$secPara],
164          { opacity: 0, y: -15 },
165          { opacity: 1, y: 0, duration: 1, ease: "Power1.easeInOut" }
166        );
167
168        gsap.fromTo(
169          [
170            this.$authorName,
171            this.$authorPosition,
172            this.$companyLogo,
173            this.$viewMoreLink,
174          ],
175          { opacity: 0 },
176          { opacity: 1, duration: 1 }
177        );
178      }
179    }
180  }
181
182  hideSlide() {
183    const $otherSlides = this.$allTestimonialBLock.not(
184      this.$allTestimonialBLock.eq(this.currSlideIdx)
185    );
186    $otherSlides.find("svg").hide();
187  }
188
189  startAutoAni() {
190    this.isRunning = true;
191    this.intervalTimer = new RecurringTimer(() => {
192      this.currSlideIdx++;
193      this.showSlide();
194    }, this.slideTimer);
195  }
196
197  pauseAutoAni() {
198    this.isRunning = false;
199    this.intervalTimer && this.intervalTimer.pause();
200    this.aniPlay && this.aniPlay.pause();
201  }
202
203  stopAutoAni() {
204    this.intervalTimer && this.intervalTimer.clear();
205  }
206
207  resumeAutoAni() {
208    this.isRunning = true;
209    this.intervalTimer && this.intervalTimer.resume();
210    this.aniPlay && this.aniPlay.resume();
211  }
212}
213
214let autoSlider;
215if (typeof appData === "object" && appData?.testimonialArr.length) {
216  autoSlider = new TestimonialSlider(appData.testimonialArr, 8000);
217}
218
219function checkAndStartSliderTwo() {
220  if (isInViewport($(".testemonial-sec")) && !autoSlider.isRunning) {
221    autoSlider.stopAutoAni();
222    autoSlider.showSlide();
223    autoSlider.startAutoAni();
224  } else if (!isInViewport($(".testemonial-sec")) && autoSlider.isRunning) {
225    autoSlider.stopAutoAni();
226    autoSlider.isRunning = false;
227  }
228}
229
230var resizeTimerTwo;
231
232autoSlider && checkAndStartSliderTwo();
233$(window).on("scroll", function (e) {
234  clearTimeout(resizeTimerTwo);
235  resizeTimerTwo = setTimeout(function () {
236    autoSlider && checkAndStartSliderTwo();
237  }, 250);
238});