Add back/forward buttons to switch between images in tasks

This commit is contained in:
Olivia Godone-Maresca
2023-04-03 19:35:37 -04:00
parent 75445185c4
commit 88d415d3f9
2 changed files with 129 additions and 15 deletions

View File

@ -398,7 +398,30 @@ function showImages(reqBody, res, outputContainer, livePreview) {
if ('seed' in result && !imageElem.hasAttribute('data-seed')) {
const imageExpandBtn = imageItemElem.querySelector('.imgExpandBtn')
imageExpandBtn.addEventListener('click', function() {
imageModal(imageElem.src)
function previousImage(img) {
const allImages = Array.from(outputContainer.parentNode.querySelectorAll('.imgItem img'))
const index = allImages.indexOf(img)
return allImages.slice(0, index).reverse()[0]
}
function nextImage(img) {
const allImages = Array.from(outputContainer.parentNode.querySelectorAll('.imgItem img'))
const index = allImages.indexOf(img)
return allImages.slice(index + 1)[0]
}
function imageModalParameter(img) {
const previousImg = previousImage(img)
const nextImg = nextImage(img)
return {
src: img.src,
previous: previousImg ? () => imageModalParameter(previousImg) : undefined,
next: nextImg ? () => imageModalParameter(nextImg) : undefined,
}
}
imageModal(imageModalParameter(imageElem))
})
const req = Object.assign({}, reqBody, {