toggle images in report with left & right buttons on desktop or swipi…

…ng left & right on mobile
assafelovic · Nov 6, 2024 · 1791581 · 1791581
1 parent 0b646b3
commit 1791581
Showing 1 changed file with 50 additions and 2 deletions.
diff --git a/frontend/nextjs/components/Images/ImageModal.jsx b/frontend/nextjs/components/Images/ImageModal.jsx
@@ -3,8 +3,56 @@ import React, { useEffect } from 'react';
 export default function ImageModal({ imageSrc, isOpen, onClose, onNext, onPrev }) {
     if (!isOpen) return null;
 
+    // Set up keyboard event listeners
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'ArrowLeft') {
+                onPrev();
+            } else if (e.key === 'ArrowRight') {
+                onNext();
+            } else if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [onClose, onNext, onPrev]);
+
+    // Swipe detection for mobile
+    let touchStartX = 0;
+    let touchEndX = 0;
+
+    const handleTouchStart = (e) => {
+        touchStartX = e.changedTouches[0].screenX;
+    };
+
+    const handleTouchEnd = (e) => {
+        touchEndX = e.changedTouches[0].screenX;
+        handleSwipeGesture();
+    };
+
+    const handleSwipeGesture = () => {
+        if (touchEndX < touchStartX - 50) {
+            onNext();
+        } else if (touchEndX > touchStartX + 50) {
+            onPrev();
+        }
+    };
+
+    const handleClose = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+
     return (
-        <div className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
+        <div
+            className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4 overflow-auto"
+            onClick={handleClose}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+        >
             <div className="relative max-w-[90vw] max-h-[90vh] flex items-center justify-center">
                 <button
                     onClick={onPrev}
@@ -32,4 +80,4 @@ export default function ImageModal({ imageSrc, isOpen, onClose, onNext, onPrev }
             </div>
         </div>
     );
-}
+}