MediaWiki:Gadget-Accueil.glow.js

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

• Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
• Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
•  Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.

( function ( mw ) {
	"use strict";

	const accueil = mw.libs && mw.libs.wikithionvilleAccueil;
	if (!accueil) return;

	accueil.initCardGlow = ( listener, container ) => {
		if (!listener || !container || accueil.reduceMotion)
			return;

		let frame = null;

		const pointerEventName = 
			window.PointerEvent
			? "pointermove"
			: "mousemove";

		const cards = listener.querySelectorAll(".home-card");

		if (!cards.length) return;

		function moveGlows(event) {
			if (!event) return;

			frame = null;

			const bounds = container.getBoundingClientRect();
			const posX = accueil.clamp(event.clientX, bounds.left, bounds.right);
			const posY = accueil.clamp(event.clientY, bounds.top, bounds.bottom);

			for (const card of cards) {
				const glow = card.querySelector(".home-card__glow");
				const origin = card.querySelector(".home-card__glow-origin") || glow;

				if ( !glow || !origin ) continue;

				const rect = origin.getBoundingClientRect();

				const translateX = posX - rect.left - rect.width / 2;
				const translateY = posY - rect.top - rect.height / 2;

				const transform = `translate3d(${translateX}px, ${translateY}px, 0)`;

				glow.style.transform = transform;
			}
		}

		function rAF(event) {
			if (frame) return;
			
			frame = window.requestAnimationFrame(() => {
				moveGlows(event)
			});
		}

		listener.addEventListener(pointerEventName, rAF, { passive: true });
		listener.addEventListener("wheel", rAF,	{ passive: true });
	};
}( mediaWiki ) );