125 lines
4.1 KiB
JavaScript
125 lines
4.1 KiB
JavaScript
/**
|
|
* Presentation Scripts
|
|
*
|
|
* Features:
|
|
* - Tab switching with state persistence (localStorage)
|
|
* - Collapsible sections
|
|
* - Mermaid diagram initialization
|
|
* - Smooth scrolling
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
// Initialize Mermaid with manual control for tab switching
|
|
if (typeof mermaid !== 'undefined') {
|
|
mermaid.initialize({
|
|
startOnLoad: false, // Manual control for better tab switching
|
|
theme: 'default',
|
|
securityLevel: 'loose',
|
|
logLevel: 1, // Only show errors
|
|
flowchart: {
|
|
useMaxWidth: true,
|
|
htmlLabels: true
|
|
}
|
|
});
|
|
|
|
// Render diagrams in the initially active tab (only once)
|
|
setTimeout(async () => {
|
|
const activeTab = document.querySelector('.tab-content.active');
|
|
if (activeTab && !activeTab.dataset.mermaidRendered) {
|
|
try {
|
|
await mermaid.run({
|
|
nodes: activeTab.querySelectorAll('.mermaid'),
|
|
suppressErrors: true
|
|
});
|
|
activeTab.dataset.mermaidRendered = 'true';
|
|
} catch (err) {
|
|
console.error('Mermaid rendering error:', err);
|
|
}
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
// Tab Switching
|
|
const tabButtons = document.querySelectorAll('.tab-button');
|
|
const tabPanes = document.querySelectorAll('.tab-content');
|
|
|
|
// Load saved tab from localStorage
|
|
const savedTab = localStorage.getItem('activeTab') || 'overview';
|
|
switchTab(savedTab);
|
|
|
|
tabButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const tabName = this.getAttribute('data-tab');
|
|
switchTab(tabName);
|
|
});
|
|
});
|
|
|
|
async function switchTab(tabName) {
|
|
// Update buttons
|
|
tabButtons.forEach(btn => {
|
|
btn.classList.remove('active');
|
|
if (btn.getAttribute('data-tab') === tabName) {
|
|
btn.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// Update panes
|
|
tabPanes.forEach(pane => {
|
|
pane.classList.remove('active');
|
|
if (pane.id === `${tabName}-tab`) {
|
|
pane.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// Save to localStorage
|
|
localStorage.setItem('activeTab', tabName);
|
|
|
|
// Render Mermaid diagrams in newly activated tab (only once per tab)
|
|
if (typeof mermaid !== 'undefined') {
|
|
const activeTab = document.getElementById(`${tabName}-tab`);
|
|
if (activeTab && !activeTab.dataset.mermaidRendered) {
|
|
setTimeout(async () => {
|
|
try {
|
|
await mermaid.run({
|
|
nodes: activeTab.querySelectorAll('.mermaid'),
|
|
suppressErrors: true
|
|
});
|
|
activeTab.dataset.mermaidRendered = 'true';
|
|
} catch (err) {
|
|
console.error('Mermaid rendering error on tab switch:', err);
|
|
}
|
|
}, 50);
|
|
}
|
|
}
|
|
|
|
// Scroll to top
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
|
|
// Make switchTab available globally for inline onclick handlers
|
|
window.switchTab = switchTab;
|
|
|
|
// Search functionality
|
|
const searchInput = document.getElementById('search');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', function() {
|
|
const query = this.value.toLowerCase();
|
|
// Basic search implementation - can be enhanced
|
|
if (query.length > 2) {
|
|
console.log('Searching for:', query);
|
|
// TODO: Implement search across all tabs
|
|
}
|
|
});
|
|
}
|
|
|
|
// Collapsible sections (details/summary elements)
|
|
document.querySelectorAll('details').forEach(detail => {
|
|
detail.addEventListener('toggle', function() {
|
|
if (this.open) {
|
|
// Scroll into view when expanded
|
|
this.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
}
|
|
});
|
|
});
|
|
});
|