Initial commit

skills/ln-115-presentation-creator/references/scripts.js

@@ -0,0 +1,124 @@
+/**
+ * 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' });
+            }
+        });
+    });
+});