(function () {
window.initAlbum = function () {
var old = document.getElementById('lightbox')
if (old) old.remove()
var grid = document.getElementById('album-grid')
if (!grid) return
var items = Array.from(grid.children)
if (!items.length) return
var lb = document.createElement('div')
lb.id = 'lightbox'
lb.innerHTML =
'' +
'' +
'![]()
' +
''
document.body.appendChild(lb)
var lbImg = lb.querySelector('img')
var current = -1
function open(idx) {
current = idx
var img = items[current].querySelector('img')
lbImg.removeAttribute('src')
lbImg.alt = ''
lb.classList.add('open')
lbImg.src = img.src
lbImg.alt = img.alt
}
function close() {
lb.classList.remove('open')
current = -1
}
function prev() {
if (current < 0) return
open((current - 1 + items.length) % items.length)
}
function next() {
if (current < 0) return
open((current + 1) % items.length)
}
items.forEach(function (item, i) {
item.addEventListener('click', function () { open(i) })
})
lb.querySelector('#lb-close').addEventListener('click', close)
lb.querySelector('#lb-prev').addEventListener('click', function (e) {
e.stopPropagation()
prev()
})
lb.querySelector('#lb-next').addEventListener('click', function (e) {
e.stopPropagation()
next()
})
document.addEventListener('keydown', function (e) {
if (!lb.classList.contains('open')) return
if (e.key === 'Escape') { close(); e.preventDefault() }
if (e.key === 'ArrowLeft') { prev(); e.preventDefault() }
if (e.key === 'ArrowRight') { next(); e.preventDefault() }
})
lb.addEventListener('click', function (e) {
if (e.target === lb) close()
})
var touchStartX = 0
var touchStartY = 0
lb.addEventListener('touchstart', function (e) {
touchStartX = e.changedTouches[0].screenX
touchStartY = e.changedTouches[0].screenY
}, { passive: true })
lb.addEventListener('touchend', function (e) {
var dx = e.changedTouches[0].screenX - touchStartX
var dy = e.changedTouches[0].screenY - touchStartY
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
if (dx < 0) next()
else prev()
}
}, { passive: true })
}
window.initAlbum()
document.addEventListener('htmx:afterSwap', window.initAlbum)
})()