ok

2026-06-10 17:38:42 +02:00 · 2026-06-10 17:38:42 +02:00 · a4822fce6c
commit a4822fce6c
parent b95d5c2ee5
221 changed files with 353 additions and 81 deletions
--- a/js/album.js
+++ b/js/album.js
@ -0,0 +1,94 @@
+(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 =
+      '<button id="lb-close" aria-label="Zamknij"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>' +
+      '<button id="lb-prev" aria-label="Poprzednie"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button>' +
+      '<img src="" alt="">' +
+      '<button id="lb-next" aria-label="Następne"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>'
+    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)
+})()