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

handle image click

Browse Source
This commit is contained in:
aleensd 2024-11-18 20:50:52 +02:00
parent 490f4de01d
commit eb04b02c48
1 changed files with 13 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,7 +46,7 @@ export default function ImageViewer() {
}, [image]); }, [image]);
useEffect(() => { useEffect(() => {
MediaPageStore.on('loaded_image_data', onImageLoad); MediaPageStore.on('page_init', onImageLoad);
return () => MediaPageStore.removeListener('loaded_image_data', onImageLoad); return () => MediaPageStore.removeListener('loaded_image_data', onImageLoad);
}, []); }, []);
@ -55,47 +55,36 @@ export default function ImageViewer() {
}; };
const handlePrevious = () => { const handlePrevious = () => {
setCurrentIndex((prevIndex) => setCurrentIndex((prevIndex) => (prevIndex - 1 + slideshowItems.length) % slideshowItems.length);
(prevIndex - 1 + slideshowItems.length) % slideshowItems.length
);
}; };
const handleDotClick = (index) => { const handleDotClick = (index) => {
setCurrentIndex(index); setCurrentIndex(index);
}; };
const handleImageClick = (index) => {
console.log(slideshowItems[currentIndex]?.original_media_url) const mediaPageUrl = site.url + slideshowItems[index]?.url;
window.location = mediaPageUrl;
};
return !image ? null : ( return !image ? null : (
<div className="viewer-image-container"> <div className="viewer-image-container">
<img src={image} alt={MediaPageStore.get('media-data').title || null} onClick={() => setIsModalOpen(true)} /> <img src={image} alt={MediaPageStore.get('media-data').title || null} onClick={() => setIsModalOpen(true)} />
{/* {slideshowItems && <div>{slideshowItems.map((i)=><li>{i.poster_url}</li>)}</div>} */} {/* {slideshowItems && <div>{slideshowItems.map((i)=><li>{i.poster_url}</li>)}</div>} */}
{isModalOpen && ( {isModalOpen && slideshowItems && (
<div className="modal-overlay" onClick={() => setIsModalOpen(false)}> <div className="modal-overlay" onClick={() => setIsModalOpen(false)}>
<div <div className="slideshow-container" onClick={(e) => e.stopPropagation()}>
className="slideshow-container" <button className="arrow left" onClick={handlePrevious} aria-label="Previous slide">
onClick={(e) => e.stopPropagation()} &#8249;
>
<button
className="arrow left"
onClick={handlePrevious}
aria-label="Previous slide"
>
&#8249;
</button> </button>
<div className="slideshow-image"> <div className="slideshow-image">
<img <img
src={site.url + '/' + slideshowItems[currentIndex]?.original_media_url} src={site.url + '/' + slideshowItems[currentIndex]?.original_media_url}
alt={`Slide ${currentIndex + 1}`} alt={`Slide ${currentIndex + 1}`}
onClick={() => handleImageClick(currentIndex)}
/> />
</div> </div>
<button <button className="arrow right" onClick={handleNext} aria-label="Next slide">
className="arrow right" &#8250;
onClick={handleNext}
aria-label="Next slide"
>
&#8250;
</button> </button>
<div className="dots"> <div className="dots">
{slideshowItems.map((_, index) => ( {slideshowItems.map((_, index) => (