fix: ability to go back using escape

This commit is contained in:
Damien Ostler 2024-05-26 16:45:17 -04:00
parent d8e30415cb
commit b14c9d54ad

View File

@ -16,28 +16,12 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
const [images, setImages] = useState<string[]>([]);
const [galleryId, setGalleryId] = useState(id as string);
const [currentIndex, setCurrentIndex] = useState(0);
const goToNext = () => {
setCurrentIndex(prevIndex => (prevIndex + 1) % images.length);
}
const goToPrevious = () => {
setCurrentIndex(prevIndex => (prevIndex - 1 + images.length) % images.length);
}
console.log(id)
const getData = async () => {
const thumbnailResponse = await fetch('/api/galleries/'+String(galleryId)+'/images');
const thumbnailResponse = await fetch('/api/galleries/' + String(galleryId) + '/images');
const thumbnailUrl = await thumbnailResponse.json() as string[];
setImages(thumbnailUrl);
}
const generateRandomString = function (length:number) {
let result = '';
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let charactersLength = characters.length;
for ( let i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
const next = () => {
if (currentIndex < images.length - 1) {
@ -94,7 +78,7 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
</div>
</>
);
};
};
const handleDownload = (image: string) => {
const link = document.createElement('a');
link.href = image;
@ -119,6 +103,9 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
case 'D':
next();
break;
case 'Escape':
close();
break;
default:
break;
}
@ -132,7 +119,7 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [currentIndex]);
}, [selectedImage,currentIndex]);
const handleClick = (image: string) => {
setSelectedImage(image);
@ -140,20 +127,21 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
};
const open = () => {
if(selectedImage === null) return;
if (selectedImage === null) return;
console.log(selectedImage)
let base64Image = selectedImage.split(';base64,').pop();
if(!base64Image) return;
let blob = new Blob([Uint8Array.from(atob(base64Image), c => c.charCodeAt(0))], {type: 'image/jpeg'}); // adjust the type as needed
if (!base64Image) return;
let blob = new Blob([Uint8Array.from(atob(base64Image), c => c.charCodeAt(0))], { type: 'image/jpeg' }); // adjust the type as needed
let url = URL.createObjectURL(blob);
window.open(url, '_blank');
}
const close = () => {
if(selectedImage != null){
if (selectedImage != null) {
setSelectedImage(null);
setImages([]);
}
else{
else {
closeMenu();
}
}