118 lines
3.5 KiB
JavaScript
118 lines
3.5 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
const tablist = document.querySelector(
|
|
".statistiques-collections__toolbar .tablist",
|
|
);
|
|
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) {
|
|
const currentTabPanelId = currentTabButton.getAttribute("aria-controls");
|
|
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(() => {
|
|
bar.style.width = `${percentage}%`;
|
|
});
|
|
}
|
|
|
|
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",
|
|
);
|
|
tabPanels.forEach((tabPanel) => {
|
|
tabPanel.setAttribute("data-active", "false");
|
|
});
|
|
}
|
|
|
|
tabsButtons.forEach((tab) => {
|
|
tab.addEventListener("click", () => {
|
|
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 });
|
|
}
|
|
}
|
|
});
|