extern/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2024-11-22 16:23:35 +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 eb04b02c48
commit bc5964cb86
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; max-height: 90vh;
border-radius: 0; border-radius: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: all 0.5s ease-in-out;
} }
.arrow { .arrow {
@ -583,7 +585,7 @@
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
z-index: 1000; z-index: 1000;
transition: 0.2s ease; transition: all 0.5s ease-in-out;
} }
// .arrow:hover { // .arrow:hover {
@ -615,7 +617,7 @@
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.6);
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
transition: 0.2s ease; transition: all 0.3s ease-in-out;
} }
.dot.active { .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); 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 = () => { const handleNext = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % slideshowItems.length); setCurrentIndex((prevIndex) => (prevIndex + 1) % slideshowItems.length);
}; };
@ -63,7 +83,7 @@ export default function ImageViewer() {
}; };
const handleImageClick = (index) => { const handleImageClick = (index) => {
const mediaPageUrl = site.url + slideshowItems[index]?.url; const mediaPageUrl = site.url + slideshowItems[index]?.url;
window.location = mediaPageUrl; window.location.href = mediaPageUrl;
}; };
return !image ? null : ( return !image ? null : (