ldc-doux/resources/js/frontend/custom.js

function docReady(fn) {
	// see if DOM is already available
	if (document.readyState === "complete" || document.readyState === "interactive") {
		// call on next available tick
		setTimeout(fn, 1);
	} else {
		document.addEventListener("DOMContentLoaded", fn);
	}
}

docReady(function () {
	// DOM is loaded and ready for manipulation here

	window.onscroll = function () {
		let imgZoom = document.querySelectorAll('.img-zoom');
		let index = 0;
		if (
			document.body.scrollTop > 50 ||
			document.documentElement.scrollTop > 50
		) {
			document.getElementById("backtotop").style.display = "flex";
			for (index = 0; index < imgZoom.length; index++) {
				imgZoom[index].classList.add('zoomed');
			}
		} else {
			document.getElementById("backtotop").style.display = "none";
			for (index = 0; index < imgZoom.length; index++) {
				imgZoom[index].classList.remove('zoomed');
			}
		}
	};

    // PAGE CONTACT
    let eltCountry = document.getElementById("country");
    if (eltCountry) {
        eltCountry.addEventListener("click", function () {
            showDromField(this);
        });
    }

    let eltsConsoRecla = document.getElementsByClassName("consoRecla");
    if (eltsConsoRecla) {
        for (let ii = 0; ii < eltsConsoRecla.length; ii++) {
            eltsConsoRecla[ii].addEventListener("click", function () {
                showReclaFields();
            });
        }
    }

    let eltsOtherRecla = document.getElementsByClassName("otherRecla");
    if (eltsOtherRecla) {
        for (let ii = 0; ii < eltsOtherRecla.length; ii++) {
            eltsOtherRecla[ii].addEventListener("click", function () {
                hideReclaFields();
            });
        }
    }
    // FIN PAGE CONTACT

	document
		.getElementById("backtotop")
		.addEventListener("click", function () {
			window.scrollTo({
				top: 0,
				behavior: "smooth",
			});
		});

	let eltsTitle = document.getElementsByClassName("menu__link");
	for (let ii = 0; ii < eltsTitle.length; ii++) {
		// eltsTitle[ii].classList.remove('red-color');
		eltsTitle[ii].addEventListener("click", function () {
			this.classList.add('red-color');
		});
	}

	// FONCTION PERMETTANT DE FAIRE UN EFFET ANIMATION AU DEFILEMENT
	const ratio = 0.1; // 10% du div revelé pour rendre visible
	const options = {
		root: null, // Zone d'affichage : null = le viewport
		rootMargin: "0px",
		threshold: ratio,
	};
	var animArray = [
		"bounce",
		"flash",
		"pulse",
		"rubberBand",
		"shakeX",
		"shakeY",
		"headShake",
		"swing",
		"tada",
		"wobble",
		"jello",
		"heartBeat",
		"backInDown",
		"backInLeft",
		"backInRight",
		"backInUp",
		"backOutDown",
		"backOutLeft",
		"backOutRight",
		"backOutUp",
		"bounceIn",
		"bounceInDown",
		"bounceInLeft",
		"bounceInRight",
		"bounceInUp",
		"bounceOut",
		"bounceOutDown",
		"bounceOutLeft",
		"bounceOutRight",
		"bounceOutUp",
		"fadeIn",
		"fadeInDown",
		"fadeInDownBig",
		"fadeInLeft",
		"fadeInLeftBig",
		"fadeInRight",
		"fadeInRightBig",
		"fadeInUp",
		"fadeInUpBig",
		"fadeInTopLeft",
		"fadeInTopRight",
		"fadeInBottomLeft",
		"fadeInBottomRight",
		"fadeOut",
		"fadeOutDown",
		"fadeOutDownBig",
		"fadeOutLeft",
		"fadeOutLeftBig",
		"fadeOutRight",
		"fadeOutRightBig",
		"fadeOutUp",
		"fadeOutUpBig",
		"fadeOutTopLeft",
		"fadeOutTopRight",
		"fadeOutBottomRight",
		"fadeOutBottomLeft",
		"flip",
		"flipInX",
		"flipInY",
		"flipOutX",
		"flipOutY",
		"lightSpeedInRight",
		"lightSpeedInLeft",
		"lightSpeedOutRight",
		"lightSpeedOutLeft",
		"rotateIn",
		"rotateInDownLeft",
		"rotateInDownRight",
		"rotateInUpLeft",
		"rotateInUpRight",
		"rotateOut",
		"rotateOutDownLeft",
		"rotateOutDownRight",
		"rotateOutUpLeft",
		"rotateOutUpRight",
		"hinge",
		"jackInTheBox",
		"rollIn",
		"rollOut",
		"zoomIn",
		"zoomInDown",
		"zoomInLeft",
		"zoomInRight",
		"zoomInUp",
		"zoomOut",
		"zoomOutDown",
		"zoomOutLeft",
		"zoomOutRight",
		"zoomOutUp",
		"slideInDown",
		"slideInLeft",
		"slideInRight",
		"slideInUp",
		"slideOutDown",
		"slideOutLeft",
		"slideOutRight",
		"slideOutUp",
	];
	/**
	 *
	 * @param {IntersectionObserverEntry[]} entries
	 * @param {IntersectionObserver} observer
	 */
	const handleIntersect = function (entries, observer) {
		entries.forEach(function (entry) {
			if (entry.intersectionRatio > ratio) {
				for (var i = 0; i < animArray.length; i++) {
					if (entry.target.classList.contains(animArray[i])) {
						entry.target.classList.add("animate__" + animArray[i]);
						entry.target.classList.add("reveal-visible");
						observer.unobserve(entry.target);
					}
				}
			}
		});
	};
	const observer = new IntersectionObserver(handleIntersect, options);
	document.querySelectorAll(".animate__animated").forEach(function (r) {
		observer.observe(r);
	});
});