Added modal animation to recap

Author: paviro

assets/calendar.js

@@ -4,6 +4,8 @@
 //   import { initializeCalendar } from '/assets/js/calendar.js';
 //   initializeCalendar();
 
+import { showModal, hideModal, setupModalCloseHandlers } from './modal-utils.js';
+
 let calendar;
 let currentEvents = [];
 let currentBooks = {};
@@ -332,38 +334,23 @@ function showEventModal(_title, event) {
     if (event.book_path) {
         viewBookBtn.classList.remove('hidden');
         viewBookBtn.onclick = () => {
-            hideModal(); // Ensure modal hidden immediately
+            hideEventModal(); // Ensure modal hidden immediately
             window.location.href = event.book_path;
         };
     } else {
         viewBookBtn.classList.add('hidden');
         viewBookBtn.onclick = null;
     }
 
-    // Animate open
-    modal.classList.remove('hidden');
-    modal.classList.add('opacity-0');
-    modalCard.classList.add('scale-95', 'opacity-0');
-    modal.offsetHeight; // Force reflow
-    requestAnimationFrame(() => {
-        modal.classList.replace('opacity-0', 'opacity-100');
-        modalCard.classList.remove('scale-95', 'opacity-0');
-        modalCard.classList.add('scale-100', 'opacity-100');
-    });
+    // Animate open using shared utility
+    showModal(modal, modalCard);
 }
 
-function hideModal() {
+// Helper to hide the event modal using the shared utility
+function hideEventModal() {
     const modal = document.getElementById('eventModal');
     const modalCard = document.getElementById('modalCard');
-    if (!modal || !modalCard) return;
-
-    modal.classList.replace('opacity-100', 'opacity-0');
-    modalCard.classList.replace('scale-100', 'scale-95');
-    modalCard.classList.replace('opacity-100', 'opacity-0');
-
-    setTimeout(() => {
-        modal.classList.add('hidden');
-    }, 300);
+    hideModal(modal, modalCard);
 }
 
 function setupEventHandlers() {
@@ -390,11 +377,11 @@ function setupEventHandlers() {
         }
     });
 
-    // Modal close / backdrop click
-    document.getElementById('closeModal')?.addEventListener('click', hideModal);
-    document.getElementById('eventModal')?.addEventListener('click', (e) => {
-        if (e.target === e.currentTarget) hideModal();
-    });
+    // Modal close handlers using shared utility
+    const modal = document.getElementById('eventModal');
+    const modalCard = document.getElementById('modalCard');
+    const closeBtn = document.getElementById('closeModal');
+    setupModalCloseHandlers(modal, modalCard, closeBtn);
 }
 
 // Update Today button disabled state based on whether we're viewing the current month

assets/modal-utils.js

@@ -0,0 +1,77 @@
+// Shared modal animation utilities
+
+/**
+ * Show a modal with scale/fade animation
+ * @param {HTMLElement} modal - The modal backdrop element
+ * @param {HTMLElement} modalCard - The modal card/content element
+ */
+export function showModal(modal, modalCard) {
+    if (!modal || !modalCard) return;
+
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
+    modal.classList.add('opacity-0');
+    modalCard.classList.add('scale-95', 'opacity-0');
+
+    // Force reflow
+    modal.offsetHeight;
+
+    requestAnimationFrame(() => {
+        modal.classList.remove('opacity-0');
+        modal.classList.add('opacity-100');
+        modalCard.classList.remove('scale-95', 'opacity-0');
+        modalCard.classList.add('scale-100', 'opacity-100');
+    });
+}
+
+/**
+ * Hide a modal with scale/fade animation
+ * @param {HTMLElement} modal - The modal backdrop element
+ * @param {HTMLElement} modalCard - The modal card/content element
+ */
+export function hideModal(modal, modalCard) {
+    if (!modal || !modalCard) return;
+
+    modal.classList.remove('opacity-100');
+    modal.classList.add('opacity-0');
+    modalCard.classList.remove('scale-100', 'opacity-100');
+    modalCard.classList.add('scale-95', 'opacity-0');
+
+    setTimeout(() => {
+        modal.classList.add('hidden');
+        modal.classList.remove('flex');
+    }, 300);
+}
+
+/**
+ * Setup standard modal close handlers (close button, backdrop click, Escape key)
+ * @param {HTMLElement} modal - The modal backdrop element
+ * @param {HTMLElement} modalCard - The modal card/content element
+ * @param {HTMLElement|null} closeBtn - Optional close button element
+ */
+export function setupModalCloseHandlers(modal, modalCard, closeBtn = null) {
+    if (!modal || !modalCard) return;
+
+    const hide = () => hideModal(modal, modalCard);
+
+    // Close button
+    if (closeBtn) {
+        closeBtn.addEventListener('click', hide);
+    }
+
+    // Backdrop click
+    modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+            hide();
+        }
+    });
+
+    // Escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
+            hide();
+        }
+    });
+
+    return hide;
+}

assets/recap.js

@@ -1,4 +1,5 @@
 import { StorageManager } from './storage-manager.js';
+import { showModal, setupModalCloseHandlers } from './modal-utils.js';
 
 // Recap interactions: year dropdown + navigation
 document.addEventListener('DOMContentLoaded', () => {
@@ -100,6 +101,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // --- Share Modal Logic ---
   const shareBtn = document.getElementById('shareButton');
   const shareModal = document.getElementById('shareModal');
+  const shareModalCard = document.getElementById('shareModalCard');
   const shareModalClose = document.getElementById('shareModalClose');
   const shareModalTitle = document.getElementById('shareModalTitle');
 
@@ -134,36 +136,14 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
-  if (shareBtn && shareModal) {
-    // Open modal
+  if (shareBtn && shareModal && shareModalCard) {
+    // Open modal with animation
     shareBtn.addEventListener('click', () => {
-      shareModal.classList.remove('hidden');
-      shareModal.classList.add('flex');
+      showModal(shareModal, shareModalCard);
     });
 
-    // Close modal on X button
-    if (shareModalClose) {
-      shareModalClose.addEventListener('click', () => {
-        shareModal.classList.add('hidden');
-        shareModal.classList.remove('flex');
-      });
-    }
-
-    // Close modal on backdrop click
-    shareModal.addEventListener('click', (e) => {
-      if (e.target === shareModal) {
-        shareModal.classList.add('hidden');
-        shareModal.classList.remove('flex');
-      }
-    });
-
-    // Close modal on Escape key
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape' && !shareModal.classList.contains('hidden')) {
-        shareModal.classList.add('hidden');
-        shareModal.classList.remove('flex');
-      }
-    });
+    // Setup close handlers (X button, backdrop click, Escape key)
+    setupModalCloseHandlers(shareModal, shareModalCard, shareModalClose);
 
     // Handle share/download button clicks
     document.querySelectorAll('.share-webp-btn').forEach(btn => {

templates/recap/recap_year.html

@@ -107,8 +107,8 @@ <h2 class="hidden lg:block text-2xl font-bold text-gray-900 dark:text-white">Rec
     </header>
 
     <!-- Share Modal -->
-    <div id="shareModal" class="fixed inset-0 z-[60] hidden items-center justify-center bg-black/50 backdrop-blur-sm p-4">
-        <div class="bg-gray-100 dark:bg-dark-900 rounded-2xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto border border-gray-200/70 dark:border-dark-700/50">
+    <div id="shareModal" class="fixed inset-0 z-[60] hidden items-center justify-center bg-black/50 backdrop-blur-sm p-4 opacity-0 transition-opacity duration-300">
+        <div id="shareModalCard" class="bg-gray-100 dark:bg-dark-900 rounded-2xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto border border-gray-200/70 dark:border-dark-700/50 transform transition-all duration-300 scale-95 opacity-0">
             <!-- Modal Header -->
             <div class="flex items-center justify-between p-4 border-b border-gray-200/70 dark:border-dark-700/50">
                 <h3 id="shareModalTitle" class="text-lg font-bold text-gray-900 dark:text-white">Download Recap Image</h3>