51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
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);
|
|
});
|
|
});
|
|
});
|