first commit

assets/js/onload.js

@@ -0,0 +1,90 @@
+window.onload = function () {
+  headerShrink();
+  initCart();
+  toggleDonationButton();
+  videos();
+};
+
+window.onscroll = function () {
+  headerShrink();
+  toggleDonationButton();
+};
+
+function initCart() {
+  const items = document.querySelectorAll('.store__product .link-block');
+  const header = document.querySelector('#site-header');
+}
+
+function headerShrink() {
+  const header = document.getElementById('site-header');
+  const scrollPosition = window.scrollY || document.documentElement.scrollTop;
+
+  if (scrollPosition > 100) {
+    header.classList.add('is-shrinked');
+  } else {
+    header.classList.remove('is-shrinked');
+  }
+}
+
+function toggleDonationButton() {
+  const btn = document.getElementById('btn--don__mobile');
+  const section = document.getElementById('section__donation');
+  const footer = document.getElementById('site-footer');
+
+  if (!btn || !section || !footer) return; // sécurité
+
+  const scrollTop = window.scrollY || window.pageYOffset;
+  const triggerPoint = section.offsetTop + section.offsetHeight / 2;
+
+  // 1️⃣ Gestion de la visibilité du bouton
+  if (scrollTop >= triggerPoint) {
+    btn.classList.add('is-visible');
+  } else {
+    btn.classList.remove('is-visible');
+  }
+
+  // 2️⃣ Gestion du stickiness quand le footer apparaît
+  const footerRect = footer.getBoundingClientRect();
+  const windowHeight = window.innerHeight;
+
+  if (footerRect.top < windowHeight) {
+    // Le footer est visible dans la fenêtre
+    btn.classList.add('is-sticky');
+  } else {
+    btn.classList.remove('is-sticky');
+  }
+}
+
+
+function videos(){
+  console.log("video");
+  let section = document.getElementById("section__video");
+  console.log(section);
+
+  let videoslinks = document.querySelectorAll(".videos__li");
+  videoslinks.forEach(function (video, index) {
+
+    video.addEventListener("click", (event) => { 
+      let data = video.getAttribute('data-video');
+
+      var div = document.createElement('section');
+      div.id = "video__fullscreen";
+      div.innerHTML = '<button id="video__close">✕</button>\
+          <iframe\
+          src="' + data + '"\
+          style="aspect-ratio: 9/16; width: 100%; border: 0"\
+          allow="autoplay; fullscreen; picture-in-picture"\
+          allowfullscreen ></iframe>';
+      document.body.appendChild(div);
+      document.body.classList.add("is-fullscreen");
+
+      let close = document.querySelector("#video__close");
+      close.addEventListener("click", (event) => { 
+        div.remove();
+        document.body.classList.remove("is-fullscreen");
+      });
+    });
+   
+  });
+  
+}