FEATURE Handling data tab urls

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

@@ -1,6 +1,6 @@
 <?php
 
-$documents_statistics = get_field('documents_statistics');
+$documents_statistics = get_field('documents_statistics') ?: array();
 $total_documents_count = 0;
 
 
@@ -17,7 +17,10 @@ foreach ($documents_statistics as $document_statistic) {
 
 ?>
 
-<section <?php echo get_block_wrapper_attributes(array('class' => 'statistiques-collections content-section ')); ?>>
+<section <?php echo get_block_wrapper_attributes(array(
+	'class' => 'statistiques-collections content-section ',
+	'id' => 'statistiques-collections',
+)); ?>>
 	<div class="statistiques-collections__toolbar">
 		<div role="tablist" aria-label="<?php esc_attr_e('Onglets', 'tab-group'); ?>" class="tablist">
 			<button
@@ -26,18 +29,26 @@ foreach ($documents_statistics as $document_statistic) {
 				aria-selected="true"
 				aria-controls="tabpanel-0"
 				tabindex="0"
-				data-tab="0">
+				data-tab="0"
+				data-tab-key="all">
 				Toutes nos collections
 
 			</button>
 			<?php foreach ($documents_statistics as $index => $document_statistic) : ?>
+				<?php
+				$tab_key = sanitize_title($document_statistic['name'] ?? '');
+				if ($tab_key === '') {
+					$tab_key = (string) ($index + 1);
+				}
+				?>
 				<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); ?>">
+					data-tab="<?php echo esc_attr($index + 1); ?>"
+					data-tab-key="<?php echo esc_attr($tab_key); ?>">
 					<?php echo esc_html($document_statistic['name']); ?>
 				</button>
 			<?php endforeach; ?>

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

@@ -5,12 +5,19 @@ document.addEventListener("DOMContentLoaded", function () {
 	if (!tablist) return;
 
 	const tabsButtons = tablist.querySelectorAll("button");
+	if (!tabsButtons.length) return;
+
+	const blockSection =
+		document.getElementById("statistiques-collections") ||
+		tablist.closest("section.statistiques-collections");
 
 	function setActiveTab(currentTab) {
 		tabsButtons.forEach((tab) => {
 			tab.setAttribute("aria-selected", "false");
+			tab.setAttribute("tabindex", "-1");
 		});
 		currentTab.setAttribute("aria-selected", "true");
+		currentTab.setAttribute("tabindex", "0");
 	}
 
 	function setActiveTabPanel(currentTabButton) {
@@ -18,12 +25,14 @@ document.addEventListener("DOMContentLoaded", function () {
 		const currentTabPanel = document.querySelector(
 			`.statistiques-collections__stats-items #${currentTabPanelId}`,
 		);
+		if (!currentTabPanel) return;
 		currentTabPanel.setAttribute("data-active", "true");
 		animateBar(currentTabPanel);
 	}
 
 	function animateBar(currentTabPanel) {
 		const bar = currentTabPanel.querySelector(".percentage-bar");
+		if (!bar) return;
 		const percentage = bar.getAttribute("data-percentage");
 		bar.style.width = "0%";
 		requestAnimationFrame(() => {
@@ -31,6 +40,54 @@ document.addEventListener("DOMContentLoaded", function () {
 		});
 	}
 
+	function scrollToBlock() {
+		if (!blockSection) return;
+		blockSection.scrollIntoView({ behavior: "smooth", block: "start" });
+	}
+
+	function updateUrlTabParam(tab) {
+		const tabKey = tab.getAttribute("data-tab-key");
+		if (!tabKey) return;
+
+		const url = new URL(window.location.href);
+		url.searchParams.set("tab", tabKey);
+		url.searchParams.delete("collection");
+		url.searchParams.delete("stats_tab");
+
+		window.history.replaceState(null, "", url);
+	}
+
+	function activateTab(tab, options = {}) {
+		const { updateUrl = true } = options;
+		setActiveTab(tab);
+		hideAllTabPanels();
+		setActiveTabPanel(tab);
+		if (updateUrl) {
+			updateUrlTabParam(tab);
+		}
+	}
+
+	function getInitialTabFromUrl() {
+		const params = new URLSearchParams(window.location.search);
+		const rawValue =
+			params.get("tab") || params.get("collection") || params.get("stats_tab");
+		if (!rawValue) return null;
+		return rawValue.trim().toLowerCase();
+	}
+
+	function findTabButtonByQueryValue(queryValue) {
+		if (!queryValue) return null;
+		return Array.from(tabsButtons).find((tab) => {
+			const tabKey = (tab.getAttribute("data-tab-key") || "")
+				.trim()
+				.toLowerCase();
+			const tabIndex = (tab.getAttribute("data-tab") || "")
+				.trim()
+				.toLowerCase();
+			return tabKey === queryValue || tabIndex === queryValue;
+		});
+	}
+
 	function hideAllTabPanels() {
 		const tabPanels = document.querySelectorAll(
 			".statistiques-collections__stats-items .statistiques-collections__stat-item",
@@ -42,9 +99,19 @@ document.addEventListener("DOMContentLoaded", function () {
 
 	tabsButtons.forEach((tab) => {
 		tab.addEventListener("click", () => {
-			setActiveTab(tab);
-			hideAllTabPanels();
-			setActiveTabPanel(tab);
+			activateTab(tab);
 		});
 	});
+
+	const initialTabValue = getInitialTabFromUrl();
+	const initialTabButton = findTabButtonByQueryValue(initialTabValue);
+	if (initialTabButton) {
+		activateTab(initialTabButton, { updateUrl: false });
+		const scrollAfterLoad = () => setTimeout(() => scrollToBlock(), 200);
+		if (document.readyState === "complete") {
+			scrollAfterLoad();
+		} else {
+			window.addEventListener("load", scrollAfterLoad, { once: true });
+		}
+	}
 });