90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
|
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");
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|