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