✨ comic embed

static/js/embed.js

@@ -0,0 +1,129 @@
+// Embed functionality for Sunday Comics
+// Handles showing embed code modal and copying to clipboard
+
+(function() {
+    'use strict';
+
+    const modal = document.getElementById('embed-modal');
+    const embedButton = document.getElementById('embed-button');
+    const closeButton = modal ? modal.querySelector('.modal-close') : null;
+    const embedCodeTextarea = document.getElementById('embed-code');
+    const copyButton = document.getElementById('copy-embed-code');
+    const previewLink = document.getElementById('embed-preview-link');
+
+    if (!modal || !embedButton) {
+        // Embed feature not enabled or elements not found
+        return;
+    }
+
+    // Get the site URL from the page (we'll add it as a data attribute)
+    const siteUrl = document.body.getAttribute('data-site-url') || window.location.origin;
+
+    // Open modal when embed button is clicked
+    embedButton.addEventListener('click', function() {
+        const comicNumber = this.getAttribute('data-comic-number');
+        if (!comicNumber) return;
+
+        // Generate embed code
+        const embedUrl = `${siteUrl}/embed/${comicNumber}`;
+        const embedCode = `<iframe src="${embedUrl}" width="800" height="600" frameborder="0" scrolling="no" style="max-width: 100%;" title="Comic #${comicNumber}"></iframe>`;
+
+        // Set the embed code in the textarea
+        embedCodeTextarea.value = embedCode;
+
+        // Set the preview link
+        previewLink.href = embedUrl;
+
+        // Show the modal
+        modal.style.display = 'block';
+        modal.setAttribute('aria-hidden', 'false');
+
+        // Focus on the textarea
+        embedCodeTextarea.focus();
+        embedCodeTextarea.select();
+    });
+
+    // Close modal when close button is clicked
+    if (closeButton) {
+        closeButton.addEventListener('click', function() {
+            closeModal();
+        });
+    }
+
+    // Close modal when clicking outside the modal content
+    modal.addEventListener('click', function(event) {
+        if (event.target === modal) {
+            closeModal();
+        }
+    });
+
+    // Close modal with Escape key
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'Escape' && modal.style.display === 'block') {
+            closeModal();
+        }
+    });
+
+    // Copy embed code to clipboard
+    if (copyButton) {
+        copyButton.addEventListener('click', function() {
+            embedCodeTextarea.select();
+            embedCodeTextarea.setSelectionRange(0, 99999); // For mobile devices
+
+            try {
+                // Modern clipboard API
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                    navigator.clipboard.writeText(embedCodeTextarea.value).then(function() {
+                        showCopyFeedback();
+                    }).catch(function() {
+                        // Fallback to execCommand
+                        fallbackCopy();
+                    });
+                } else {
+                    // Fallback for older browsers
+                    fallbackCopy();
+                }
+            } catch (err) {
+                fallbackCopy();
+            }
+        });
+    }
+
+    function fallbackCopy() {
+        try {
+            document.execCommand('copy');
+            showCopyFeedback();
+        } catch (err) {
+            alert('Failed to copy. Please select and copy manually.');
+        }
+    }
+
+    function showCopyFeedback() {
+        const originalText = copyButton.textContent;
+        copyButton.textContent = 'Copied!';
+        copyButton.classList.add('copied');
+
+        setTimeout(function() {
+            copyButton.textContent = originalText;
+            copyButton.classList.remove('copied');
+        }, 2000);
+    }
+
+    function closeModal() {
+        modal.style.display = 'none';
+        modal.setAttribute('aria-hidden', 'true');
+
+        // Return focus to the embed button
+        if (embedButton) {
+            embedButton.focus();
+        }
+    }
+
+    // Update embed button when comic changes via client-side navigation
+    // This integrates with the existing comic-nav.js functionality
+    window.addEventListener('comicUpdated', function(event) {
+        if (event.detail && event.detail.comicNumber && embedButton) {
+            embedButton.setAttribute('data-comic-number', event.detail.comicNumber);
+        }
+    });
+})();