sunday/static/js/comic-nav.js

// Client-side comic navigation using the API
(function() {
    'use strict';

    let totalComics = 0;

    // Fetch and display a comic
    async function loadComic(comicId) {
        try {
            const response = await fetch(`/api/comics/${comicId}`);

            if (!response.ok) {
                if (response.status === 404) {
                    window.location.href = '/404';
                    return;
                }
                throw new Error('Failed to load comic');
            }

            const comic = response.json ? await response.json() : comic;
            displayComic(comic);

        } catch (error) {
            console.error('Error loading comic:', error);
        }
    }

    // Update the page with comic data
    function displayComic(comic) {
        // Update container class for full-width option
        const container = document.querySelector('.comic-container');
        if (comic.full_width) {
            container.classList.add('comic-container-fullwidth');
        } else {
            container.classList.remove('comic-container-fullwidth');
        }

        // Update title
        const title = comic.title || `#${comic.number}`;
        document.querySelector('.comic-header h1').textContent = title;

        // Update date
        document.querySelector('.comic-date').textContent = comic.date;

        // Update image and its link
        const comicImageDiv = document.querySelector('.comic-image');
        const img = comicImageDiv.querySelector('img');
        img.src = `/static/images/comics/${comic.filename}`;
        img.alt = title;
        img.title = comic.alt_text;

        // Update or create/remove the link wrapper
        updateComicImageLink(comic.number);

        // Update author note
        const transcriptDiv = document.querySelector('.comic-transcript');
        if (comic.author_note) {
            if (!transcriptDiv) {
                const container = document.querySelector('.comic-container');
                const newDiv = document.createElement('div');
                newDiv.className = 'comic-transcript';
                newDiv.innerHTML = '<h3>Author Note</h3><p></p>';
                container.appendChild(newDiv);
            }
            document.querySelector('.comic-transcript p').textContent = comic.author_note;
            document.querySelector('.comic-transcript').style.display = 'block';
        } else if (transcriptDiv) {
            transcriptDiv.style.display = 'none';
        }

        // Update navigation buttons
        updateNavButtons(comic.number);

        // Update page title
        document.title = `${title} - Sunday Comics`;

        // Update URL without reload
        history.pushState({ comicId: comic.number }, '', `/comic/${comic.number}`);
    }

    // Update comic image link for click navigation
    function updateComicImageLink(currentNumber) {
        const comicImageDiv = document.querySelector('.comic-image');
        const img = comicImageDiv.querySelector('img');

        // Remove existing link if present
        const existingLink = comicImageDiv.querySelector('a');
        if (existingLink) {
            existingLink.replaceWith(img);
        }

        // Add link if there's a next comic
        if (currentNumber < totalComics) {
            const link = document.createElement('a');
            link.href = `/comic/${currentNumber + 1}`;
            link.onclick = (e) => {
                e.preventDefault();
                loadComic(currentNumber + 1);
            };
            img.parentNode.insertBefore(link, img);
            link.appendChild(img);
        }
    }

    // Update navigation button states
    function updateNavButtons(currentNumber) {
        const navButtons = document.querySelector('.nav-buttons');

        // First button
        const firstBtn = navButtons.children[0];
        if (currentNumber > 1) {
            firstBtn.className = 'btn btn-nav';
            firstBtn.onclick = (e) => { e.preventDefault(); loadComic(1); };
        } else {
            firstBtn.className = 'btn btn-nav btn-disabled';
            firstBtn.onclick = null;
        }

        // Previous button
        const prevBtn = navButtons.children[1];
        if (currentNumber > 1) {
            prevBtn.className = 'btn btn-nav';
            prevBtn.onclick = (e) => { e.preventDefault(); loadComic(currentNumber - 1); };
        } else {
            prevBtn.className = 'btn btn-nav btn-disabled';
            prevBtn.onclick = null;
        }

        // Comic number display
        navButtons.children[2].textContent = `Comic #${currentNumber}`;

        // Next button
        const nextBtn = navButtons.children[3];
        if (currentNumber < totalComics) {
            nextBtn.className = 'btn btn-nav';
            nextBtn.onclick = (e) => { e.preventDefault(); loadComic(currentNumber + 1); };
        } else {
            nextBtn.className = 'btn btn-nav btn-disabled';
            nextBtn.onclick = null;
        }

        // Latest button
        const latestBtn = navButtons.children[4];
        if (currentNumber < totalComics) {
            latestBtn.className = 'btn btn-nav';
            latestBtn.onclick = (e) => { e.preventDefault(); loadComic(totalComics); };
        } else {
            latestBtn.className = 'btn btn-nav btn-disabled';
            latestBtn.onclick = null;
        }
    }

    // Initialize on page load
    async function init() {
        // Only run on comic pages
        if (!document.querySelector('.comic-container')) {
            return;
        }

        // Get total comics count from the page
        totalComics = parseInt(document.querySelector('.comic-container').dataset.totalComics || 0);

        // Get current comic number
        const currentNumber = parseInt(document.querySelector('.comic-container').dataset.comicNumber || 0);

        if (currentNumber && totalComics) {
            updateNavButtons(currentNumber);
            updateComicImageLink(currentNumber);
        }

        // Handle browser back/forward
        window.addEventListener('popstate', (event) => {
            if (event.state && event.state.comicId) {
                loadComic(event.state.comicId);
            }
        });

        // Set initial state
        history.replaceState({ comicId: currentNumber }, '', window.location.pathname);
    }

    // Run when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();