{"size": 2611, "ext": "js", "max_stars_repo_path": "src/js/components/stage.js", "max_stars_repo_name": "jensbambauer/seriale", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/js/components/stage.js", "max_issues_repo_name": "jensbambauer/seriale", "max_issues_repo_issues_event_min_datetime": "2021-05-02T16:21:31.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-12T16:00:39.000Z", "max_forks_repo_path": "src/js/components/stage.js", "max_forks_repo_name": "jensbambauer/seriale", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 21.7583333333, "max_line_length": 74, "alphanum_fraction": 0.4408272692}
import jQuery from "jquery";
import {TimelineLite, Power4, Power0, TweenLite} from "gsap";
/**
 *
 * @author
 * @description
 *
 */

/*jslint browser: true*/

const stage = function(el) {
  const $el = $(el);
  const duration = 5;
  const tl = new TimelineLite({
    onComplete: () => {
      tl.restart();
    }
  });
  const ease = Power4.easeInOut;
  let current = 0;

  TweenLite.to($el.find(".stage__slider"), 0.5, {
    opacity: 1
  });

  const handleClick = (e, index) => {
    tl.pause();
    tl.seek(`end-${index}-=1.8`);
  };
  $el.on("mouseleave", () => {
    tl.play();
  });

  $el.find(".stage__timeline li span").each((index, el) => {
    el.parentNode.addEventListener("click", (e) => {
      handleClick(e, index);
    });
    tl.add(() => {
      current = index;
    });
    tl.fromTo(el, duration, {
      xPercent: "-105",
      ease: Power0.easeNone
    }, {
      xPercent: "0",
    }, index === 0 ? "start" : "-=0.5");
    $el.find(".stage__slider__slide").each((slideIndex, slide) => {
      const svg = slide.querySelector("svg");
      const headline = slide.querySelector(".stage__slider__slide__text");
      const button = slide.querySelector(".button");

      if (slideIndex === index) {
        if (button) {
          tl.to(button, 0.5, {
            y: 100,
            opacity: 0,
            zIndex: 1,
            ease
          });
        }
        tl.to(headline, 0.5, {
          y: 100,
          opacity: 0,
          zIndex: 1,
          ease
        }, "-=0.1");
        tl.to(svg, 0.5, {
          y: 100,
          opacity: 0,
          zIndex: 1,
          ease
        }, "-=0.3");
      }
      if ((slideIndex === index + 1) || slideIndex === 0) {
        tl.fromTo(svg, 0.5, {
          y: -100,
          opacity: 0,
          ease
        }, {
          zIndex: 2,
          y: 0,
          opacity: 1
        }, slideIndex === 0 ? "start" : null);
        tl.fromTo(headline, 0.5, {
          y: -100,
          opacity: 0,
          ease
        }, {
          zIndex: 2,
          y: 0,
          opacity: 1
        }, slideIndex === 0 ? "start" : "-=0.4");
        if (button) {
          tl.fromTo(button, 0.5, {
            y: -100,
            opacity: 0,
            ease
          }, {
            zIndex: 2,
            y: 0,
            opacity: 1
          }, slideIndex === 0 ? "start" : "-=0.8");
        }
      }
    });
    tl.addLabel(`end-${index}`);
  });
  $el.find(".stage__timeline li span").each((index, el) => {
    tl.to(el, 0.2, {
      transform: "translateY(100%)",
      ease
    }, "end");

  });

};

export default stage;
