zeroretro.github.io/scripts.js at main · ZeroRetro/zeroretro.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// Modern Accessible Lightbox for DejaVu Softworks
(() => {
  const lightbox = document.createElement("dialog");
  lightbox.className = "image-lightbox";
  lightbox.setAttribute("aria-label", "Image viewer");
  lightbox.innerHTML = `
    <div class="image-lightbox-content">
      <header class="image-lightbox-header">
        <span class="lightbox-counter" aria-live="polite"></span>
        <button class="lightbox-close" type="button" aria-label="Close image viewer">
          <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
        </button>
      </header>
      <div class="lightbox-view">
        <button class="lightbox-nav-btn lightbox-nav-prev" type="button" aria-label="Previous image">
          <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
        </button>
        <img class="lightbox-image" alt="">
        <button class="lightbox-nav-btn lightbox-nav-next" type="button" aria-label="Next image">
          <svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
        </button>
      </div>
    </div>`;

  document.body.appendChild(lightbox);

  const lightboxImg = lightbox.querySelector(".lightbox-image");
  const counter = lightbox.querySelector(".lightbox-counter");
  const closeBtn = lightbox.querySelector(".lightbox-close");
  const prevBtn = lightbox.querySelector(".lightbox-nav-prev");
  const nextBtn = lightbox.querySelector(".lightbox-nav-next");

  let galleryItems = [];
  let currentIndex = 0;

  function updateLightbox() {
    if (!galleryItems.length) return;
    const current = galleryItems[currentIndex];
    lightboxImg.src = current.currentSrc || current.src;
    lightboxImg.alt = current.alt || "Game screenshot";
    counter.textContent = `${currentIndex + 1} / ${galleryItems.length}`;

    prevBtn.style.display = galleryItems.length > 1 ? "grid" : "none";
    nextBtn.style.display = galleryItems.length > 1 ? "grid" : "none";
  }

  function openLightbox(index, items) {
    galleryItems = items;
    currentIndex = index;
    updateLightbox();
    if (typeof lightbox.showModal === "function") {
      lightbox.showModal();
    } else {
      lightbox.setAttribute("open", "");
    }
  }

  function closeLightbox() {
    if (typeof lightbox.close === "function") {
      lightbox.close();
    } else {
      lightbox.removeAttribute("open");
    }
  }

  function showPrev() {
    if (galleryItems.length <= 1) return;
    currentIndex = (currentIndex - 1 + galleryItems.length) % galleryItems.length;
    updateLightbox();
  }

  function showNext() {
    if (galleryItems.length <= 1) return;
    currentIndex = (currentIndex + 1) % galleryItems.length;
    updateLightbox();
  }

  // Setup gallery items
  const galleries = document.querySelectorAll(".gallery");
  galleries.forEach((gallery) => {
    const images = Array.from(gallery.querySelectorAll("img"));
    images.forEach((img, idx) => {
      const container = img.closest(".gallery-item") || img;
      container.tabIndex = 0;
      container.setAttribute("role", "button");
      container.setAttribute("aria-label", `${img.alt || "Screenshot"}. Click to view full size`);

      const triggerOpen = () => openLightbox(idx, images);

      container.addEventListener("click", triggerOpen);
      container.addEventListener("keydown", (e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          triggerOpen();
        }
      });
    });
  });

  closeBtn.addEventListener("click", closeLightbox);
  prevBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    showPrev();
  });
  nextBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    showNext();
  });

  lightbox.addEventListener("click", (e) => {
    if (e.target === lightbox) {
      closeLightbox();
    }
  });

  window.addEventListener("keydown", (e) => {
    if (!lightbox.open) return;
    if (e.key === "ArrowLeft") {
      e.preventDefault();
      showPrev();
    } else if (e.key === "ArrowRight") {
      e.preventDefault();
      showNext();
    }
  });

  lightbox.addEventListener("close", () => {
    lightboxImg.removeAttribute("src");
  });
})();