60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
/**
|
|
* Updates the tabs display by showing the active tab content and scrolling to make it visible.
|
|
* This function is called when switching between tabs to update both the content visibility
|
|
* and the tab button states.
|
|
*
|
|
* @param {string} controllerId - The ID of the tabs controller element (format: "{managerId}-controller")
|
|
*/
|
|
function updateTabs(controllerId) {
|
|
const controller = document.getElementById(controllerId);
|
|
if (!controller) {
|
|
console.warn(`Controller ${controllerId} not found`);
|
|
return;
|
|
}
|
|
|
|
const activeTabId = controller.dataset.activeTab;
|
|
if (!activeTabId) {
|
|
console.warn('No active tab ID found');
|
|
return;
|
|
}
|
|
|
|
// Extract manager ID from controller ID (remove '-controller' suffix)
|
|
const managerId = controllerId.replace('-controller', '');
|
|
|
|
// Hide all tab contents for this manager
|
|
const contentWrapper = document.getElementById(`${managerId}-content-wrapper`);
|
|
if (contentWrapper) {
|
|
contentWrapper.querySelectorAll('.mf-tab-content').forEach(content => {
|
|
content.classList.add('hidden');
|
|
});
|
|
|
|
// Show the active tab content
|
|
const activeContent = document.getElementById(`${managerId}-${activeTabId}-content`);
|
|
if (activeContent) {
|
|
activeContent.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
// Update active tab button styling
|
|
const header = document.getElementById(`${managerId}-header`);
|
|
if (header) {
|
|
// Remove active class from all tabs
|
|
header.querySelectorAll('.mf-tab-button').forEach(btn => {
|
|
btn.classList.remove('mf-tab-active');
|
|
});
|
|
|
|
// Add active class to current tab
|
|
const activeButton = header.querySelector(`[data-tab-id="${activeTabId}"]`);
|
|
if (activeButton) {
|
|
activeButton.classList.add('mf-tab-active');
|
|
|
|
// Scroll to make active tab visible if needed
|
|
activeButton.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'nearest',
|
|
inline: 'nearest'
|
|
});
|
|
}
|
|
}
|
|
}
|