lumin/comfycamp
lumin/comfycamp
1
0
Fork 0
Code Issues 4 Pull requests Packages Projects Releases Wiki Activity

feat(gallery): add keyboard control support

Browse source
This commit is contained in:
Ivan R. 2024-03-05 23:42:38 +05:00
parent ff52077150
commit 2d70d0cd18
No known key found for this signature in database
GPG key ID: 56C7BAAE859B302C
1 changed files with 30 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/Gallery.astro
View file

@ -86,9 +86,12 @@ const rowCount = Math.ceil(images.length/3)
fsContainer.style.pointerEvents = "none"
})
for (const img of Array.from(gallery.children) as HTMLImageElement[]) {
const isOpen = () => fsContainer.style.opacity !== "0"
const images = Array.from(gallery.children) as HTMLImageElement[]
for (const img of images) {
img.addEventListener("click", () => {
if (fsContainer.style.opacity === "0") {
if (!isOpen()) {
fsContainer.style.opacity = "1"
fsContainer.style.pointerEvents = "auto"
fsImg.src = img.src
@ -99,5 +102,30 @@ const rowCount = Math.ceil(images.length/3)
}
})
}
let index = 0
document.addEventListener("keydown", function(event) {
if (!isOpen()) return
switch (event.key) {
case "Escape":
fsContainer.style.opacity = "0"
fsContainer.style.pointerEvents = "none"
break
case "ArrowLeft":
index = images.findIndex(el => el.src === fsImg.src)
index = index > 0 ? index - 1 : images.length - 1
fsImg.src = images[index]?.src || "???"
fsAlt.innerHTML = images[index]?.alt || "???"
break
case "ArrowRight":
index = images.findIndex(el => el.src === fsImg.src)
index = index < images.length - 1 ? index + 1 : 0
fsImg.src = images[index]?.src || "???"
fsAlt.innerHTML = images[index]?.alt || "???"
break
}
})
}
</script>