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';

	var accueil = mw.libs && mw.libs.wikithionvilleAccueil;

	if ( !accueil ) {
		return;
	}

	accueil.initCardGlow = function ( listener, container ) {
		var cards;
		var frame = null;

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

		if ( !listener || !container || accueil.reduceMotion ) {
			return;
		}

		cards = listener.querySelectorAll( '.home-card' );

		if ( !cards.length ) {
			return;
		}

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

			var index;
			var card;
			var glow;
			var origin;
			var rect;
			var transform;
			var bounds;
			var posX;
			var posY;

			frame = null;

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

			for ( index = 0; index < cards.length; index++ ) {
				card = cards[ index ];
				glow = card.querySelector( '.home-card__glow' );
				origin = card.querySelector( '.home-card__glow-origin' ) || glow;

				if ( !glow || !origin ) {
					continue;
				}

				rect = origin.getBoundingClientRect();
				transform = 'translate3d(' +
					( posX - rect.left - rect.width / 2 ) + 'px, ' +
					( posY - rect.top - rect.height / 2 ) + 'px, 0)';

				if ( glow.animate ) {
					glow.animate(
						[ { transform: transform } ],
						{ duration: 200, fill: 'forwards' }
					);
				} else {
					glow.style.transform = transform;
				}
			}
		}

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

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