script.js

// AI Tools Seminar Presentation Script

// Theme Management
class ThemeManager {
    constructor() {
        this.currentTheme = this.getStoredTheme() || this.getSystemTheme();
        this.init();
    }
    
    init() {
        this.applyTheme(this.currentTheme);
        this.bindEvents();
    }
    
    getSystemTheme() {
        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }
    
    getStoredTheme() {
        return localStorage.getItem('presentation-theme');
    }
    
    storeTheme(theme) {
        localStorage.setItem('presentation-theme', theme);
    }
    
    applyTheme(theme) {
        document.documentElement.setAttribute('data-theme', theme);
        this.currentTheme = theme;
        this.storeTheme(theme);
        
        // Update theme toggle button
        const themeToggle = document.getElementById('theme-toggle');
        if (themeToggle) {
            themeToggle.textContent = theme === 'dark' ? '☀️' : '🌙';
            themeToggle.setAttribute('aria-label', `Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`);
        }
    }
    
    toggleTheme() {
        const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
        this.applyTheme(newTheme);
        
        // Provide visual feedback with reduced motion consideration
        if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            document.body.style.transition = 'background-color 250ms ease-in-out, color 250ms ease-in-out';
        }
    }
    
    bindEvents() {
        // Listen for system theme changes
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
            if (!this.getStoredTheme()) {
                this.applyTheme(e.matches ? 'dark' : 'light');
            }
        });
        
        // Theme toggle button
        const themeToggle = document.getElementById('theme-toggle');
        if (themeToggle) {
            themeToggle.addEventListener('click', () => this.toggleTheme());
        }
    }
}

class PresentationController {
    constructor() {
        this.currentSlide = 1;
        this.totalSlides = 0;
        this.slides = [];
        this.presenterNotesVisible = false;
        this.themeManager = new ThemeManager();
        
        this.init();
    }
    
    init() {
        this.cacheElements();
        this.setupSlides();
        this.bindEvents();
        this.updateSlideCounter();
        this.loadPresenterNotes();
    }
      cacheElements() {
        this.slidesContainer = document.querySelector('.slides-container');
        this.slides = document.querySelectorAll('.slide');
        this.prevBtn = document.getElementById('prev-btn');
        this.nextBtn = document.getElementById('next-btn');
        this.slideCounter = document.getElementById('slide-counter');
        this.fullscreenBtn = document.getElementById('fullscreen-btn');
        this.themeToggle = document.getElementById('theme-toggle');
        this.presenterNotes = document.getElementById('presenter-notes');
        this.currentNotes = document.getElementById('current-notes');
    }
    
    setupSlides() {
        this.totalSlides = this.slides.length;
        
        // Ensure first slide is active
        this.slides.forEach((slide, index) => {
            slide.classList.remove('active', 'prev');
            if (index === 0) {
                slide.classList.add('active');
            }
        });
    }
    
    bindEvents() {
        // Navigation buttons
        this.prevBtn.addEventListener('click', () => this.previousSlide());
        this.nextBtn.addEventListener('click', () => this.nextSlide());
        this.fullscreenBtn.addEventListener('click', () => this.toggleFullscreen());
        
        // Keyboard navigation
        document.addEventListener('keydown', (e) => this.handleKeydown(e));
        
        // Touch/swipe gestures for mobile
        this.bindTouchEvents();
        
        // Window resize handler
        window.addEventListener('resize', () => this.handleResize());
    }
    
    handleKeydown(e) {
        switch(e.key) {
            case 'ArrowLeft':
            case 'ArrowUp':
                e.preventDefault();
                this.previousSlide();
                break;
            case 'ArrowRight':
            case 'ArrowDown':
            case ' ': // Space bar
                e.preventDefault();
                this.nextSlide();
                break;
            case 'Home':
                e.preventDefault();
                this.goToSlide(1);
                break;
            case 'End':
                e.preventDefault();
                this.goToSlide(this.totalSlides);
                break;
            case 'Escape':
                e.preventDefault();
                if (document.fullscreenElement) {
                    this.exitFullscreen();
                }
                break;
            case 'n':
            case 'N':
                e.preventDefault();
                this.togglePresenterNotes();
                break;            case 'f':
            case 'F':
                e.preventDefault();
                this.toggleFullscreen();
                break;
            case 't':
            case 'T':
                e.preventDefault();
                this.themeManager.toggleTheme();
                break;
        }
    }
    
    bindTouchEvents() {
        let startX = 0;
        let startY = 0;
        let endX = 0;
        let endY = 0;
        
        this.slidesContainer.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
        }, { passive: true });
        
        this.slidesContainer.addEventListener('touchend', (e) => {
            endX = e.changedTouches[0].clientX;
            endY = e.changedTouches[0].clientY;
            
            const deltaX = startX - endX;
            const deltaY = startY - endY;
            const minSwipeDistance = 50;
            
            // Horizontal swipe detection
            if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > minSwipeDistance) {
                if (deltaX > 0) {
                    // Swipe left - next slide
                    this.nextSlide();
                } else {
                    // Swipe right - previous slide
                    this.previousSlide();
                }
            }
        }, { passive: true });
    }
    
    nextSlide() {
        if (this.currentSlide < this.totalSlides) {
            this.goToSlide(this.currentSlide + 1);
        }
    }
    
    previousSlide() {
        if (this.currentSlide > 1) {
            this.goToSlide(this.currentSlide - 1);
        }
    }
    
    goToSlide(slideNumber) {
        if (slideNumber < 1 || slideNumber > this.totalSlides) {
            return;
        }
        
        const previousSlide = this.currentSlide;
        this.currentSlide = slideNumber;
        
        // Update slide visibility
        this.slides.forEach((slide, index) => {
            slide.classList.remove('active', 'prev');
            
            if (index + 1 === this.currentSlide) {
                slide.classList.add('active');
            } else if (index + 1 < this.currentSlide) {
                slide.classList.add('prev');
            }
        });
        
        this.updateSlideCounter();
        this.updateNavigationButtons();
        this.updatePresenterNotes();
        
        // Announce slide change for screen readers
        this.announceSlideChange();
    }
    
    updateSlideCounter() {
        this.slideCounter.textContent = `${this.currentSlide} / ${this.totalSlides}`;
    }
    
    updateNavigationButtons() {
        this.prevBtn.disabled = this.currentSlide === 1;
        this.nextBtn.disabled = this.currentSlide === this.totalSlides;
    }
    
    toggleFullscreen() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen().catch(err => {
                console.log(`Error attempting to enable fullscreen: ${err.message}`);
            });
        } else {
            this.exitFullscreen();
        }
    }
    
    exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
    
    togglePresenterNotes() {
        this.presenterNotesVisible = !this.presenterNotesVisible;
        
        if (this.presenterNotesVisible) {
            this.presenterNotes.classList.add('show');
        } else {
            this.presenterNotes.classList.remove('show');
        }
    }
    
    loadPresenterNotes() {
        // Presenter notes data for each slide
        this.notesData = {
            1: "Welcome to the AI Tools seminar. This presentation will guide you through the current landscape of AI development tools.",
            2: "Emphasize that this is about strategic selection, not just tool adoption. Highlight the practical, hands-on nature of the session.",
            3: "Walk through each agenda item briefly. Mention this is a comprehensive journey from theory to practical implementation.",
            4: "Section 1 introduction - set the stage for understanding AI's transformative impact on development.",
            5: "Emphasize the speed of AI evolution. Share specific examples of how tools have become essential rather than experimental.",
            6: "Address common fears directly. Use concrete examples of productivity gains. Mention the 20-40% improvement statistics.",
            7: "This is crucial - emphasize that AI makes good practices MORE important, not less. Give examples of how poor naming hurts AI assistance."
        };
        
        this.updatePresenterNotes();
    }
    
    updatePresenterNotes() {
        const notes = this.notesData[this.currentSlide] || "No notes for this slide.";
        this.currentNotes.innerHTML = `
            <p><strong>Slide ${this.currentSlide}:</strong> ${notes}</p>
            <p><em>Press 'N' to toggle notes, 'F' for fullscreen, arrows or space to navigate.</em></p>
        `;
    }
    
    announceSlideChange() {
        // Create or update live region for screen readers
        let announcer = document.getElementById('slide-announcer');
        if (!announcer) {
            announcer = document.createElement('div');
            announcer.id = 'slide-announcer';
            announcer.setAttribute('aria-live', 'polite');
            announcer.setAttribute('aria-atomic', 'true');
            announcer.style.position = 'absolute';
            announcer.style.left = '-10000px';
            announcer.style.width = '1px';
            announcer.style.height = '1px';
            announcer.style.overflow = 'hidden';
            document.body.appendChild(announcer);
        }
        
        const currentSlideElement = this.slides[this.currentSlide - 1];
        const slideTitle = currentSlideElement.querySelector('h1')?.textContent || `Slide ${this.currentSlide}`;
        announcer.textContent = `${slideTitle}, slide ${this.currentSlide} of ${this.totalSlides}`;
    }
    
    handleResize() {
        // Handle responsive updates if needed
        // This can be extended for dynamic layout adjustments
    }
    
    // Public API methods
    getCurrentSlide() {
        return this.currentSlide;
    }
    
    getTotalSlides() {
        return this.totalSlides;
    }
    
    // Add slide programmatically (for dynamic content)
    addSlide(slideHTML, notes = '') {
        const slideElement = document.createElement('section');
        slideElement.className = 'slide';
        slideElement.setAttribute('data-slide', this.totalSlides + 1);
        slideElement.innerHTML = slideHTML;
        
        this.slidesContainer.appendChild(slideElement);
        this.slides = document.querySelectorAll('.slide');
        this.totalSlides = this.slides.length;
        
        if (notes) {
            this.notesData[this.totalSlides] = notes;
        }
        
        this.updateSlideCounter();
    }
}

// Utility functions for slide content
class SlideUtils {
    static createCodeBlock(code, language = 'javascript') {
        return `
            <div class="code-block">
                <pre><code class="language-${language}">${this.escapeHtml(code)}</code></pre>
            </div>
        `;
    }
    
    static createTable(headers, rows) {
        const headerRow = headers.map(h => `<th>${h}</th>`).join('');
        const dataRows = rows.map(row => 
            `<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`
        ).join('');
        
        return `
            <table class="slide-table">
                <thead><tr>${headerRow}</tr></thead>
                <tbody>${dataRows}</tbody>
            </table>
        `;
    }
    
    static escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}

// Initialize presentation when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.presentation = new PresentationController();
    
    // Add additional slides dynamically if needed
    // This allows for modular slide construction
    
    console.log('AI Tools Presentation loaded successfully!');
    console.log('Keyboard shortcuts:');
    console.log('- Arrow keys or Space: Navigate slides');
    console.log('- N: Toggle presenter notes');
    console.log('- F: Toggle fullscreen');
    console.log('- T: Toggle theme');
    console.log('- Home/End: Go to first/last slide');
    console.log('- Esc: Exit fullscreen');
});

// Export for potential external use
if (typeof module !== 'undefined' && module.exports) {
    module.exports = { PresentationController, SlideUtils };
}