Untitled

import { gsap } from "gsap";
import { tns } from "tiny-slider/src/tiny-slider";
import { fadeInUpTween } from '../utils/animations';

const quoteblockElement = ".bx-quote-block";

class QuoteBlock {
  /**
   * Construct
   *
   * @description set state and cache elements.
   *
   * @param {HTMLElement} element Target element.
   */
  constructor(element) {
    this.element = element;
    this.carousel = null;
    this.contentCarousel = null;
    this.picture = this.element.querySelectorAll(".bx-quote-block_picture");
    this.container = this.element.querySelector(".bx-quote-block__items");
    this.authorContainer = this.element.querySelector(".bx-quote-block__content");
    this.contentContainer = this.element.querySelector(".bx-quote-block-right__content__inner");
    this.authorInnter = this.element.querySelector(".bx-quote-block__author-inner");
    this.quoteAuthorname = this.element.querySelectorAll(".bx-quote-block__authorname");
    this.quoteDesignation = this.element.querySelectorAll(".bx-quote-block__designation");
    this.quoteContent = this.element.querySelectorAll(".bx-quote-block-inner_content__inner");
    this.imageWrapperList = this.element.querySelectorAll('.bx-animation__image-wrapper');
    this.componentHeader = this.element.querySelectorAll('.bx-headers');
    this.dotNavItems = Array.from(
      this.element.querySelectorAll(".bx-dot-nav__item")
    );
    this.dotNavLinks = Array.from(
      this.element.querySelectorAll(".bx-dot-nav__item-link")
    );
    this.floaters = Array.from(
      this.element.querySelectorAll(".bx-quote-block__floater")
    );
    this.nextButton = this.element.querySelector(
      ".bx-quote-block__nav-button--next"
    );
    this.prevButton = this.element.querySelector(
      ".bx-quote-block__nav-button--prev"
    );
    this.activeSlide = 1;

    this.fadeInUpElementsTweenTo = {
			...fadeInUpTween().to,
			duration: 800,
			stagger: 400,
		};

    this.initQuoteBlock();
    this.handleDotNacheckActivelick();
    this.initAnimation();

  }
  /**
   * Initialize Quote Block
   *
   * @description initialize Quote Block.
   */
  initQuoteBlock() {
    this.carousel = tns({
      arrowKeys: true,
      container: this.container,
      nav: false,
      loop: false,
      rewind: true,
      nextButton: this.nextButton,
      prevButton: this.prevButton,
      swipeAngle: 30,
      useLocalStorage: false,
      autoHeight: true,
      preventScrollOnTouch: "auto",
      speed: 0
    });
    this.carousel.events.on('transitionEnd', ( info ) => {this.customizedFunction(info, this.carousel)});

    this.contentCarousel = tns({
      arrowKeys: true,
      container: this.contentContainer,
      nav: false,
      nextButton: this.nextButton,
      prevButton: this.prevButton,
      loop: false,
      rewind: true,
      swipeAngle: 30,
      useLocalStorage: false,
      autoHeight: true,
      preventScrollOnTouch: "auto",
      speed: 0
    });
    this.contentCarousel.events.on('transitionEnd', ( info ) => {this.customizedContentFunction(info, this.contentCarousel)});

    this.carousel.events.on("indexChanged", ( info ) => {
      console.log("in img");
      // info.preventDefault();
      this.handleTextAnimation(info.index)
      this.setActiveDot(info.displayIndex);
      this.setActiveFloater(info.displayIndex);
      this.activeSlide = info.displayIndex;
      if(this.componentHeader.length===0){
        this.element.setAttribute("aria-labelledby",this.quoteAuthorname[info.index].getAttribute("id"));
      }
    });

    this.contentCarousel.events.on("indexChanged", ( info ) => {
      console.log("in title");
      // info.preventDefault();
      this.setActiveDot(info.displayIndex);
      this.setActiveFloater(info.displayIndex);
      this.activeSlide = info.displayIndex;
     
    });
  }

  customizedFunction(info, carousel) {
    
    var currentSlideIndex = info.index;
    var currentSlideDOM = info.slideItems[currentSlideIndex];

    var specificParentClass = 'bx-quote-block__outer';
    var hasSpecificParent = currentSlideDOM.closest(`.${specificParentClass}`);


    var imageElements = currentSlideDOM.querySelectorAll('.bx-quote-block-inner__image');

    var leftContentDiv = document.querySelector('.bx-quote-block-left__content');

    var leftParentDiv = 'bx-quote-block-left__content';
    var hadleftParentDiv = currentSlideDOM.closest(`.${leftParentDiv}`);

    var existingClass = 'bx-quote-block__inner'; 
    var newClass = 'bx-quote-block__inner_2'; 
    
    if (imageElements.length ) {
      hasSpecificParent.classList.replace(newClass, existingClass);
      hadleftParentDiv.classList.remove('bx_quote_block_leftContent_hide');
    } else {
      hasSpecificParent.classList.replace(existingClass, newClass);
      hadleftParentDiv.classList.add('bx_quote_block_leftContent_hide');
    }
  }

  customizedContentFunction (info, contentCarousel) {

    var currentSlideIndex = info.index;
    var currentSlideDOM = info.slideItems[currentSlideIndex];

    var specificParentClass = 'bx-quote-block__inner';
    var hasSpecificParent = currentSlideDOM.closest(`.${specificParentClass}`);
  
    var element = document.querySelector('.bx-quote-block__inner__html');

    var hasFirstClass = element.classList.contains('bx-quote-block__inner');

    var divElementAuthor = currentSlideDOM.querySelector('.bx-quote-block__test');
  
    var existingClass1 = 'bx-quote-block-inner_content__inner'; 
    var newClass1 = 'bx_quote-block-inner--fullwidth';
    
    if ( hasSpecificParent ) {
      // divElementAuthor.replace(newClass1,existingClass1);
    } else {
      divElementAuthor.classList.replace(existingClass1,newClass1);
      }
  }

  /**
   * Set Active Dot
   *
   * @description set, toggle and animate the active dot.
   *
   * @param {number} number Dot to make active.
   */
  setActiveDot(number) {
    if (number === this.activeSlide) {
      return;
    }

    this.dotNavItems.forEach((dotElement, index) => {
      /**
       * Update class
       */
      if (number !== index + 1) {
        dotElement.classList.remove(
          "bx-dot-nav__item--active",
          number !== index + 1
        );
        return;
      }

      dotElement.classList.add("bx-dot-nav__item--active");

      /**
       * Setup
       */
      const svg = dotElement.querySelector(".bx-quote-block__nav-item-icon");
      const dotStroke = dotElement.querySelector(".bx-dot-nav__item-stroke");
      const { circumference } = svg.dataset;

      /**
       * Timeline
       */
      gsap
        .timeline({ defaults: { duration: 1000 } })
        .set(dotStroke, { attr: { "stroke-dasharray": `0 ${circumference}` } })
        .to(dotStroke, { attr: { "stroke-dasharray": `${circumference} 0` }});
    });
  }

  initAnimation() {
    /**
     * Setup
     */
    const scrollTrigger = {
      start: '50% 90%',
    };
    console.log("inside init Anim");

    function curtainAnimation(imageWrapper) {
      imageWrapper.children[0].classList.add("bx-animation__curtain");
      imageWrapper.children[1].children[0].classList.add("bx-animation__curtain-image");
    }

    /**
     * Image Animation
     */
    this.imageWrapperList.forEach((imageWrapper, index) => {
      gsap.timeline({ scrollTrigger: { trigger: imageWrapper, ...scrollTrigger, onEnter: () => curtainAnimation(imageWrapper) } })
    })

    this.quoteAuthorname.forEach((author, index) => {
      if (index === 0) {
        gsap.set(this.authorInnter, fadeInUpTween().set);
        gsap.timeline({ scrollTrigger: { trigger: author, ...scrollTrigger} }).to(this.authorInnter, this.fadeInUpElementsTweenTo);
      }
    })

    this.quoteDesignation.forEach((designation, index) => {
      if (index === 0) {
        gsap.set(this.authorInnter, fadeInUpTween().set);
        gsap.timeline({ scrollTrigger: { trigger: designation, ...scrollTrigger} }).to(this.authorInnter, this.fadeInUpElementsTweenTo);
      }
    })

    this.quoteContent.forEach((content, index) => {
      if (index === 0) {
        gsap.set(content, fadeInUpTween().set);
        gsap.timeline({ scrollTrigger: { trigger: content, ...scrollTrigger} }).to(content, this.fadeInUpElementsTweenTo);
      }
    })

    window.onload = () => {
      this.nextButton?.setAttribute( "tabindex", "0" );
      this.prevButton?.setAttribute( "tabindex", "0" );
    };
    console.log("endind of init Anim");
  }

  /*Handle Text Animation*/
  handleTextAnimation(selectedIndex) {
    [...this.imageWrapperList].map(x => {
      x.children[0].classList.remove("bx-animation__curtain");
      x.children[1].children[0].classList.remove("bx-animation__curtain-image");
    });

    this.quoteAuthorname.forEach((author, index) => {
      if (selectedIndex === index) {
        gsap.set(author, fadeInUpTween().set);
        gsap.set(this.quoteDesignation[index], fadeInUpTween().set);
        gsap.set(this.quoteContent[index], fadeInUpTween().set);
        gsap.timeline()
        .to(author, this.fadeInUpElementsTweenTo)
        .to(this.quoteDesignation[index], this.fadeInUpElementsTweenTo, '<')
        .to(this.quoteContent[index], this.fadeInUpElementsTweenTo, '<');
      }
    })

    setTimeout(()=>{
      const imageContent = this.element.querySelector('.tns-slide-active .bx-animation__image-wrapper');
      if(imageContent) {
        imageContent.children[0].classList.add("bx-animation__curtain");
        imageContent.children[1].children[0].classList.add("bx-animation__curtain-image");    
      }
    },100)
  }

  /**
   * Handle Dot Nav Click
   *
   * @description handle dot nav click.
   */
  handleDotNacheckActivelick() {
    this.dotNavLinks.forEach(dotLink => {
      dotLink.addEventListener("click", event => {

        event.preventDefault();
        const { index } = dotLink.dataset;
        this.carousel.goTo(index - 1);
        this.contentCarousel.goTo(index - 1);

      });
    });
  }



  /**
   * Set Active Floater
   *
   * @description set, toggle and animate the active dot.
   *
   * @param {number} number Floater to make active.
   */
  setActiveFloater(number) {
    this.floaters.forEach((floaterElement, index) => {
      if (number !== index + 1) {
        floaterElement.setAttribute("aria-hidden", true);
        return;
      }

      floaterElement.setAttribute("aria-hidden", false);
    });
  }
}

export { QuoteBlock, quoteblockElement };