MediaWiki:Gadget-Accueil.stats.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;

	function formatCounter( value ) {
		try {
			return value.toLocaleString(
				navigator.language || undefined, 
				{
					notation: "compact",
					compactDisplay: "short",
					maximumFractionDigits: 1
				}
			);
		} catch ( error ) {
			return String( value );
		}
	}

	function animateCounter(element, target) {
		const DURATION = 1100;
		let startTime = null;

		function tick(timestamp) {
			if (startTime === null)
				startTime = timestamp;

			const progress = Math.min((timestamp - startTime) / DURATION, 1);
			const value = Math.round(target * progress);

			element.textContent = formatCounter( value );

			if ( progress < 1 ) {
				window.requestAnimationFrame( tick );
				return;
			}

			element.textContent = formatCounter(target);
		}

		window.requestAnimationFrame(tick);
	}

	function countWhenVisible(element, value) {
		if (!element) return;
		value = Number(value);

		if (isNaN(value)) value = 0;
		value = Math.max(value, 0);

		if (
			accueil.reduceMotion 
			|| !("IntersectionObserver" in window)
		) {
			element.textContent = formatCounter(value);
			return;
		}

		const observer = new IntersectionObserver(
			entries => {
				if (!entries[0].isIntersecting) return;
				
				observer.disconnect();
				animateCounter( element, value );
			},
			{ threshold: 0.2 }
		);

		observer.observe(element);
	}

	accueil.initStats = root => {
		const stats = root.querySelector(".home-info__stats");
		if (!stats) return;

		const api = new mw.Api();
		api.get({
			action: "query",
			meta: "siteinfo",
			siprop: "statistics",
			formatversion: 2
		})
		.then(data => {
			const statistics =
				data
				&& data.query
				&& data.query.statistics;

			if (!statistics) return;

			stats.classList.add("is-visible");

			countWhenVisible(
				root.querySelector("#counter_articles"),
				statistics.articles
			);

			countWhenVisible(
				root.querySelector("#counter_pages"),
				statistics.pages
			);

			countWhenVisible(
				root.querySelector("#counter_utilisateurs"),
				statistics.users
			);
		})
		.catch(error => {
			console.error("Impossible de charger les statistiques", error);
		});
	};
}(mediaWiki));