Statistics Row

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-statistics-row {
	padding-top: clamp(rem-calc(30), 5vw, rem-calc(100));
	padding-bottom: clamp(rem-calc(30), 5vw, rem-calc(100));

	.content-styles {
		.block-statistics-row__statistic-text {
			p {
				font-size: clamp(rem-calc(18), 2vw, rem-calc(24));
				line-height: 1.3;
				font-weight: 400;
			}
		}
	}

}

class StatisticsRow {
	/**
	 * Create and initialise objects of this class
	 * @param {object} block
	 */
	constructor(block) {
		this.block = block;
		this.init();
	}

	init() {
		// Get all statistic figures within this block
		const figures = this.block.querySelectorAll('.statistics-row__statistic-figure');

		figures.forEach(figure => {
			this.animateStatistic(figure);
		});
	}

	/**
	 * Animate a single statistic figure
	 * @param {HTMLElement} figure
	 */
	animateStatistic(figure) {
		// Get the original text content
		const originalText = figure.textContent.trim();

		// Extract the numeric value and any text prefix/suffix
		const match = originalText.match(/^([^\d]*)(\d+(?:[.,]\d+)?)([^\d]*)$/);

		if (!match) {
			// If no number found, don't animate
			return;
		}

		const prefix = match[1];
		const numberStr = match[2];
		const suffix = match[3];

		// Convert to number (handle both comma and period decimals)
		const targetValue = parseFloat(numberStr.replace(',', '.'));

		// Determine if the original number has decimals
		const hasDecimals = numberStr.includes('.') || numberStr.includes(',');
		const decimalPlaces = hasDecimals ? numberStr.split(/[.,]/)[1].length : 0;

		// Create an object to animate
		const counter = { value: 0 };

		// Set initial display to 0
		figure.textContent = prefix + '0' + suffix;

		// Create the ScrollTrigger animation
		gsap.to(counter, {
			value: targetValue,
			duration: 2,
			ease: "power2.out",
			scrollTrigger: {
				trigger: figure,
				start: "top 80%", // Start when the element is 80% down the viewport
				toggleActions: "play none none none", // Only play once
				once: true // Only trigger once
			},
			onUpdate: function() {
				// Format the number based on whether it had decimals
				let displayValue;
				if (hasDecimals) {
					displayValue = counter.value.toFixed(decimalPlaces);
				} else {
					displayValue = Math.floor(counter.value);
				}

				// Update the text with prefix and suffix
				figure.textContent = prefix + displayValue + suffix;
			}
		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-statistics-row').forEach( block => new StatisticsRow(block) );
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/statistics-row",
    "title": "Statistics row",
    "description": "Statistics row block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "edit",
        "renderTemplate": "block-statistics-row.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
		"mode": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": true
        },
        "spacing": {
            "padding": [
				"top",
				"bottom"
			],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "style": "file:../../assets/css/statistics-row/block-statistics-row.css"
}