in gemini/mcp/adk_multiagent_mcp_app/static/tabs.js [20:69]
export function initTabs() {
const tabButtons = document.querySelectorAll(".tab-button");
const tabPanels = document.querySelectorAll(".tab-panel");
if (!tabButtons.length || !tabPanels.length) {
console.warn(
"Tab elements (buttons or panels) not found. Skipping tab initialization.",
);
return;
}
tabButtons.forEach((button) => {
button.addEventListener("click", () => {
const targetPanelId = button.getAttribute("data-tab");
if (!targetPanelId) {
console.error("Tab button is missing 'data-tab' attribute:", button);
return;
}
const targetPanel = document.getElementById(targetPanelId);
// Deactivate all buttons and panels
tabButtons.forEach((btn) => btn.classList.remove("active"));
tabPanels.forEach((panel) => panel.classList.remove("active"));
// Activate the clicked button and corresponding panel
button.classList.add("active");
if (targetPanel) {
targetPanel.classList.add("active");
console.log(`Switched to tab: ${targetPanelId}`);
} else {
console.error(`Target panel with ID '${targetPanelId}' not found.`);
}
});
});
// Set the initial active tab (optional, based on HTML having 'active' class)
const initialActiveButton = document.querySelector(".tab-button.active");
if (initialActiveButton) {
const initialPanelId = initialActiveButton.getAttribute("data-tab");
const initialPanel = document.getElementById(initialPanelId);
if (initialPanel) initialPanel.classList.add("active");
else console.warn(`Initial active panel '${initialPanelId}' not found.`);
} else if (tabButtons.length > 0) {
// Fallback: activate the first tab if none are marked active
tabButtons[0].click();
console.log("No initial active tab set, activating the first one.");
}
console.log("Tab switching logic initialized.");
}