dontbechad/static/js/story.js

// Simple Story Page JavaScript - Only handle year timeline
document.addEventListener('DOMContentLoaded', function() {
    console.log('Story.js loaded - DOM content loaded');
    
    // TEMPORARY FIX: Just hide the original content for now
    const content = document.querySelector('.container') || document.querySelector('main');
    if (content) {
        content.style.display = 'none';
    }
    
    console.log('Content hidden for debugging');
});
    
    // Wrap everything in story structure
    const container = document.querySelector('.container') || document.querySelector('main');
    if (!container) {
        console.log('No container found');
        return;
    }
    
    // Create story structure but only wrap year sections
    const storyPage = document.createElement('div');
    storyPage.className = 'story-page';
    
    const storyContainer = document.createElement('div');
    storyContainer.className = 'story-container';
    
    const storyThread = document.createElement('div');
    storyThread.className = 'story-thread';
    
    // Move all content from original container to new structure
    while (container.firstChild) {
        storyThread.appendChild(container.firstChild);
    }
    
    // Now convert only the h2 year sections
    const allH2Elements = storyThread.querySelectorAll('h2');
    const sections = [];
    
    allH2Elements.forEach((h2, index) => {
        const text = h2.textContent;
        const yearMatch = text.match(/(\d{4})/);
        
        if (yearMatch) {
            const year = yearMatch[1];
            const title = text.replace(/^\d{4}\s*[:\-]?\s*/, '');
            
            console.log(`Processing year ${year}: ${title}`);
            
            // Create year section
            const yearSection = document.createElement('div');
            yearSection.className = 'year-section';
            yearSection.dataset.year = year;
            
            // Create header button
            const headerButton = document.createElement('div');
            headerButton.className = 'year-header';
            headerButton.innerHTML = `
                <span><span class="year-number">${year}</span> - ${title}</span>
                <span class="year-arrow">▶</span>
            `;
            
            // Create content container
            const yearContent = document.createElement('div');
            yearContent.className = 'year-content';
            
            const yearContentInner = document.createElement('div');
            yearContentInner.className = 'year-content-inner';
            
            // Collect all content until next h2 or end
            let nextElement = h2.nextElementSibling;
            const contentElements = [];
            
            while (nextElement && !nextElement.matches('h2')) {
                contentElements.push(nextElement);
                nextElement = nextElement.nextElementSibling;
            }
            
            // Move content to inner container
            contentElements.forEach(element => {
                yearContentInner.appendChild(element);
            });
            
            // Assemble the section
            yearContent.appendChild(yearContentInner);
            yearSection.appendChild(headerButton);
            yearSection.appendChild(yearContent);
            
            // Replace the h2 with the new section
            if (h2.parentNode) {
                h2.parentNode.insertBefore(yearSection, h2);
                h2.remove();
            }
            
            sections.push(yearSection);
        }
    });
    
    // Add click handlers for the year sections
    sections.forEach(section => {
        const header = section.querySelector('.year-header');
        const content = section.querySelector('.year-content');
        const arrow = section.querySelector('.year-arrow');
        
        header.addEventListener('click', function() {
            const isActive = content.classList.contains('active');
            
            // Close all other sections
            document.querySelectorAll('.year-content').forEach(c => c.classList.remove('active'));
            document.querySelectorAll('.year-arrow').forEach(a => a.style.transform = 'rotate(0deg)');
            
            // Open this section if it wasn't active
            if (!isActive) {
                content.classList.add('active');
                arrow.style.transform = 'rotate(90deg)';
                
                // Smooth scroll to section
                setTimeout(() => {
                    header.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }, 100);
            }
        });
    });
    
    // Open first section by default
    if (sections.length > 0) {
        const firstContent = sections[0].querySelector('.year-content');
        const firstArrow = sections[0].querySelector('.year-arrow');
        firstContent.classList.add('active');
        firstArrow.style.transform = 'rotate(90deg)';
    }
    
    // Add quick jump navigation
    if (sections.length > 1) {
        const quickJump = document.createElement('div');
        quickJump.className = 'quick-jump';
        quickJump.innerHTML = `
            <label>Quick Jump to Year:</label>
            <div class="story-navigation">
                ${sections.map(section => {
                    const year = section.dataset.year;
                    return `<a href="#" class="story-nav-btn jump-to-year" data-year="${year}">${year}</a>`;
                }).join('')}
            </div>
        `;
        
        if (storyThread.firstChild) {
            storyThread.insertBefore(quickJump, storyThread.firstChild);
        } else {
            storyThread.appendChild(quickJump);
        }
        
        // Add jump handlers
        quickJump.querySelectorAll('.jump-to-year').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const year = this.dataset.year;
                const targetSection = document.querySelector(`[data-year="${year}"]`);
                
                if (targetSection) {
                    const header = targetSection.querySelector('.year-header');
                    header.click();
                }
            });
        });
    }
    
    // Wrap everything in story structure
    storyPage.appendChild(storyContainer);
    storyPage.appendChild(storyThread);
    
    // Replace the original container content with the new structure - KEEP ORIGINAL CONTENT
    // container.innerHTML = '';
    container.appendChild(storyPage);
    
    console.log('Story conversion completed with', sections.length, 'year sections');
    console.log('Story structure created:', document.querySelector('.story-page'));
    console.log('Story container exists:', document.querySelector('.story-container'));
});