extern/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2024-11-24 17:24:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

add arrow keys functionality

Browse Source
This commit is contained in:
aleensd 2024-11-19 10:04:40 +02:00
parent 80e732f2e8
commit d4907fc810
2 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/static/js/components/media-page/MediaPage.scss
View File

@ -569,6 +569,8 @@
max-height: 90vh;
border-radius: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: all 0.5s ease-in-out;
}
.arrow {
@ -583,7 +585,7 @@
padding: 10px;
border-radius: 50%;
z-index: 1000;
transition: 0.2s ease;
transition: all 0.5s ease-in-out;
}
// .arrow:hover {
@ -615,7 +617,7 @@
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
cursor: pointer;
transition: 0.2s ease;
transition: all 0.3s ease-in-out;
}
.dot.active {

22
frontend/src/static/js/components/media-viewer/ImageViewer.js
View File

@ -50,6 +50,26 @@ export default function ImageViewer() {
return () => MediaPageStore.removeListener('loaded_image_data', onImageLoad);
}, []);
useEffect(() => {
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [isModalOpen, slideshowItems]);
const handleKeyDown = (event) => {
if (!isModalOpen) return;
if (event.key === 'ArrowRight') {
handleNext();
} else if (event.key === 'ArrowLeft') {
handlePrevious();
}
};
const handleNext = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % slideshowItems.length);
};
@ -63,7 +83,7 @@ export default function ImageViewer() {
};
const handleImageClick = (index) => {
const mediaPageUrl = site.url + slideshowItems[index]?.url;
window.location = mediaPageUrl;
window.location.href = mediaPageUrl;
};
return !image ? null : (