haiku-atelier-2024/script.js

function setupBrand() {
  window.onbeforeunload = function() {
    window.scrollTo(0, 0);
  };
  let mediaQuery = window.matchMedia("(max-width: 768px)");
  manifesteDescSlider = new KeenSlider(".manifeste-slider-desc", {
    created: s => {
      document.querySelector(".manifeste-slider-desc").style.display = "block";
    },
    defaultAnimation: {
      duration: 0,
    },
    detailsChanged: s => {
      s.slides.forEach((element, idx) => {
        element.style.display = s.track.details.slides[idx].portion > 0 ? "block" : "none";
      });
    },
    loop: true,
    renderMode: "custom",
    selector: ".manifeste-desc-slides",
    vertical: true,
  });

  manifesteSlider = new KeenSlider(".manifeste-slider", {
    created: s => {},
    defaultAnimation: {
      duration: 0,
    },
    detailsChanged: s => {
      manifesteDescSlider.moveToIdx(s.track.details.rel);

      s.slides.forEach((element, idx) => {
        element.style.display = s.track.details.slides[idx].portion > 0 ? "block" : "none";
      });
    },
    renderMode: "custom",
    selector: ".manifeste-slides",
    vertical: true,
  });

  const isMobile = window.innerWidth <= 768; // Ajustez selon vos besoins

  let lastScrollTop = 0;
  let scrollProgress = 0;
  let scrollThreshold = isMobile ? 300 : 600;
  console.log(scrollThreshold);

  const sliderElement = document.querySelector(".manifeste-slider");
  const aboutContainer = document.querySelector(".about-container");
  function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top >= 0
      && rect.left >= 0
      && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
      && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  const brandContainer = document.querySelector(".brand-container");

  brandContainer.addEventListener("click", function() {
    manifesteSlider.next();
  });

  window.addEventListener(
    "scroll",
    () => {
      if (!isElementInViewport(aboutContainer)) {
        console.log("if");

        // console.log(sliderElement);
        document.querySelector("#link-about").style.opacity = 0.3;
        document.querySelector("#link-legals").style.opacity = 0.3;
        document.querySelector(".manifeste-slider-desc").style.opacity = 1;

        // document
        //   .querySelector("#link-brand")
        //   .style.setProperty("opacity", "0.3", "important");

        // return;
      } else if (isElementInViewport(aboutContainer)) {
        // console.log(sliderElement);

        console.log("else");
        document.querySelector(".manifeste-slider-desc").style.opacity = 0;
        document.querySelector("#link-brand").style.opacity = 1;
        document.querySelector("#link-about").style.opacity = 1;
      }

      document.querySelector(".instruction").style.opacity = 0;
      const st = window.scrollY || document.documentElement.scrollTop;
      const scrollDelta = Math.abs(st - lastScrollTop);
      scrollProgress += scrollDelta;

      if (scrollProgress >= scrollThreshold) {
        if (st > lastScrollTop) {
          manifesteSlider.next();
          console.log("next");
        } else {
          manifesteSlider.prev();
          console.log("prev");
        }
        scrollProgress = 0;
      }

      lastScrollTop = st <= 0 ? 0 : st;
    },
    false,
  );

  const numberOfSlides = document.querySelectorAll(".manifeste-slider .manifeste-slides").length;
  const heightPerSlideVH = 100;
  const totalHeightInVH = numberOfSlides * heightPerSlideVH
    - (numberOfSlides - 1) * ((scrollThreshold / window.innerHeight) * 50);
  brandContainer.style.height = `${totalHeightInVH}vh`;

  const links = document.querySelectorAll(".menu-brand a");

  links.forEach(link => {
    link.addEventListener("click", () => {
      links.forEach(l => (l.style.opacity = 0.3));
      link.style.opacity = 1;
    });
  });

  const brandLink = document.getElementById("link-brand");

  brandLink.addEventListener("click", e => {
    e.preventDefault();
    if (brandContainer) {
      brandContainer.scrollIntoView({ behavior: "smooth" });
    }
  });

  const linkLegals = document.querySelector("#link-legals");
  const linkPersonal = document.querySelector("#link-personal");
  const linkAbout = document.querySelector("#link-about");

  const legalsInfo = document.querySelector(".legals-info");
  const personalInfo = document.querySelector(".personal-info");
  const aboutInfo = document.querySelector(".brand-info");

  linkLegals.addEventListener("click", e => {
    e.preventDefault();
    if (brandContainer) {
      legalsInfo.scrollIntoView({ behavior: "smooth" });
    }
  });
  linkPersonal.addEventListener("click", e => {
    e.preventDefault();
    if (brandContainer) {
      legalsInfo.scrollIntoView({ behavior: "smooth" });
    }
  });
  linkAbout.addEventListener("click", e => {
    e.preventDefault();
    if (brandContainer) {
      legalsInfo.scrollIntoView({ behavior: "smooth" });
    }
  });

  function resetZIndex() {
    legalsInfo.style.zIndex = "0";
    personalInfo.style.zIndex = "0";
    aboutInfo.style.zIndex = "0";
  }

  linkLegals.addEventListener("click", e => {
    e.preventDefault();
    console.log("hey");
    resetZIndex();
    legalsInfo.style.zIndex = "10";
  });

  linkPersonal.addEventListener("click", e => {
    e.preventDefault();
    resetZIndex();
    personalInfo.style.zIndex = "10";
  });

  linkAbout.addEventListener("click", e => {
    e.preventDefault();
    resetZIndex();
    aboutInfo.style.zIndex = "10";
  });
  if (mediaQuery.matches) {
    const divToObserve = document.querySelector(".about-container");

    const observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            console.log("La div est visible dans le viewport");
            document.querySelector(".manifeste-slider-desc").style.opacity = 0;
            entry.target.classList.add("visible");
          } else {
            console.log("La div a quitté le viewport");
            document.querySelector(".manifeste-slider-desc").style.opacity = 1;
            entry.target.classList.remove("visible");
          }
        });
      },
      {
        root: null,
        rootMargin: "0px", // Marge autour de la root. Valeurs similaires à celles de CSS (top, right, bottom, left ou juste un seul pour tous)
        threshold: 0.1, // Un pourcentage de l'élément qui doit être visible pour déclencher l'observer. 0.1 signifie 10% de l'élément
      },
    );

    observer.observe(divToObserve);

    // setTimeout(() => {
    //   let element = document.querySelector(
    //     ".shopify-buy-frame--toggle.is-sticky"
    //   );
    //   element.style.setProperty("opacity", "1");
    // }, 1000);
  }
  // sideSlider = new KeenSlider(".carousel-side-p", {
  //   vertical: false,
  //   selector: ".slide-p",
  // });
}