2024-11-08

script.js

@@ -0,0 +1,224 @@
+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",
+  // });
+}