FEATURE introducing statistques collections

plugins/carhop-blocks/acf-blocks/statistiques-collections/block.json

@@ -0,0 +1,26 @@
+{
+	"name": "acf/statistiques-collections",
+	"title": "Statistiques collections",
+	"category": "carhop-blocks",
+	"multiple": true,
+	"icon": {
+		"foreground": "#136f63",
+		"src": "universal-access-alt"
+	},
+	"keywords": [
+		"statistiques",
+		"collections"
+	],
+	"supports": {
+		"align": [
+			"full",
+			"wide"
+		]
+	},
+	"acf": {
+		"mode": "auto",
+		"renderTemplate": "statistiques-collections.php"
+	},
+	"align": "full",
+	"viewScript": "file:./view.js"
+}

plugins/carhop-blocks/acf-blocks/statistiques-collections/statistiques-collections.php

@@ -0,0 +1,85 @@
+<?php
+
+$documents_statistics = get_field('documents_statistics');
+$total_documents_count = 0;
+
+
+foreach ($documents_statistics as $document_statistic) {
+	$total_documents_count += intval($document_statistic['amount']);
+}
+
+foreach ($documents_statistics as $document_statistic) {
+	$amount = intval($document_statistic['amount'] ?? 0);
+	if (!$amount || $amount <= 0) continue;
+	$document_statistic['percentage'] = intval($document_statistic['amount']) / $total_documents_count * 100;
+}
+write_log($documents_statistics);
+
+
+?>
+
+<section <?php echo get_block_wrapper_attributes(array('class' => 'statistiques-collections content-section')); ?>>
+	<div class="statistiques-collections__toolbar">
+		<div role="tablist" aria-label="<?php esc_attr_e('Onglets', 'tab-group'); ?>" class="tablist">
+			<button
+				type="button"
+				role="tab"
+				aria-selected="true"
+				aria-controls="tabpanel-0"
+				tabindex="0"
+				data-tab="0">
+				<span>Toutes nos collections</span>
+			</button>
+			<?php foreach ($documents_statistics as $index => $document_statistic) : ?>
+				<button
+					type="button"
+					role="tab"
+					aria-selected="false"
+					aria-controls="tabpanel-<?php echo esc_attr($index + 1); ?>"
+					tabindex="-1"
+					data-tab="<?php echo esc_attr($index + 1); ?>">
+					<span><?php echo esc_html($document_statistic['name']); ?></span>
+				</button>
+			<?php endforeach; ?>
+
+		</div>
+	</div>
+	<ul class="statistiques-collections__stats-items">
+		<li class="statistiques-collections__stat-item" id="tabpanel-0" data-active="true">
+			<div class="heading">
+				<h3>Nos collection</h3>
+			</div>
+
+			<div class="amount-container-all" id="tabpanel-0" data-active="true">
+				<p class="total-documents-count"><?php echo $total_documents_count ?> documents</p>
+				<p class="total-documents-label">Dans nos collections</p>
+			</div>
+
+
+		</li>
+		<?php foreach ($documents_statistics as $index => $document_statistic) : ?>
+			<?php
+			$amount = intval($document_statistic['amount'] ?? 0);
+			if (!$amount || $amount <= 0) continue;
+			$percentage = intval($document_statistic['amount']) / $total_documents_count * 100;
+			?>
+			<li class="statistiques-collections__stat-item" id="tabpanel-<?php echo esc_attr($index + 1); ?>" data-active="false">
+				<div class="heading">
+					<h3><?php echo esc_html($document_statistic['name']); ?></h3>
+					<p class="total-documents-count"><?php echo esc_html($document_statistic['amount']); ?> <?php echo $document_statistic['name']  ?></p>
+				</div>
+
+				<div class="amount-container">
+					<div class="percentage-bar" data-percentage="<?php echo esc_attr($percentage); ?>"><?php echo esc_html($document_statistic['number']); ?></div>
+					<p class="percentage-label"><?php echo round($percentage, 2); ?> % </p>
+				</div>
+
+				<p class="stat-item-description">
+					<?php echo esc_html($document_statistic['description']); ?>
+				</p>
+
+
+			</li>
+		<?php endforeach; ?>
+	</ul>
+</section>

plugins/carhop-blocks/acf-blocks/statistiques-collections/view.js

@@ -0,0 +1,50 @@
+document.addEventListener("DOMContentLoaded", function () {
+	const tablist = document.querySelector(
+		".statistiques-collections__toolbar .tablist",
+	);
+	if (!tablist) return;
+
+	const tabsButtons = tablist.querySelectorAll("button");
+
+	function setActiveTab(currentTab) {
+		tabsButtons.forEach((tab) => {
+			tab.setAttribute("aria-selected", "false");
+		});
+		currentTab.setAttribute("aria-selected", "true");
+	}
+
+	function setActiveTabPanel(currentTabButton) {
+		const currentTabPanelId = currentTabButton.getAttribute("aria-controls");
+		const currentTabPanel = document.querySelector(
+			`.statistiques-collections__stats-items #${currentTabPanelId}`,
+		);
+		currentTabPanel.setAttribute("data-active", "true");
+		animateBar(currentTabPanel);
+	}
+
+	function animateBar(currentTabPanel) {
+		const bar = currentTabPanel.querySelector(".percentage-bar");
+		const percentage = bar.getAttribute("data-percentage");
+		bar.style.width = "0%";
+		requestAnimationFrame(() => {
+			bar.style.width = `${percentage}%`;
+		});
+	}
+
+	function hideAllTabPanels() {
+		const tabPanels = document.querySelectorAll(
+			".statistiques-collections__stats-items .statistiques-collections__stat-item",
+		);
+		tabPanels.forEach((tabPanel) => {
+			tabPanel.setAttribute("data-active", "false");
+		});
+	}
+
+	tabsButtons.forEach((tab) => {
+		tab.addEventListener("click", () => {
+			setActiveTab(tab);
+			hideAllTabPanels();
+			setActiveTabPanel(tab);
+		});
+	});
+});

plugins/carhop-blocks/carhop-blocks.php

@@ -28,6 +28,7 @@ function create_block_carhop_blocks_block_init()
 	register_block_type(__DIR__ . '/acf-blocks/custom-video');
 	register_block_type(__DIR__ . '/acf-blocks/team-carhop');
 	register_block_type(__DIR__ . '/acf-blocks/member-card');
+	register_block_type(__DIR__ . '/acf-blocks/statistiques-collections');
 
 	$manifest_data = require __DIR__ . '/build/blocks-manifest.php';
 	foreach (array_keys($manifest_data) as $block_type) {