https://bionic-gpt.com/content-lightbox.js

1(function () {
2  function initContentLightbox() {
3    if (window.__contentLightboxReady) return;
4    window.__contentLightboxReady = true;
5
6    const imageOverlay = document.createElement("div");
7    imageOverlay.className = "image-lightbox";
8    imageOverlay.setAttribute("aria-hidden", "true");
9
10    const overlayImg = document.createElement("img");
11    overlayImg.alt = "";
12    imageOverlay.appendChild(overlayImg);
13    document.body.appendChild(imageOverlay);
14
15    const codeOverlay = document.createElement("div");
16    codeOverlay.className = "code-lightbox";
17    codeOverlay.setAttribute("aria-hidden", "true");
18
19    const codePanel = document.createElement("div");
20    codePanel.className = "code-lightbox__panel";
21
22    const codeToolbar = document.createElement("div");
23    codeToolbar.className = "code-lightbox__toolbar";
24
25    const zoomOutButton = document.createElement("button");
26    zoomOutButton.type = "button";
27    zoomOutButton.className = "code-lightbox__button";
28    zoomOutButton.textContent = "A-";
29
30    const zoomInButton = document.createElement("button");
31    zoomInButton.type = "button";
32    zoomInButton.className = "code-lightbox__button";
33    zoomInButton.textContent = "A+";
34
35    const closeButton = document.createElement("button");
36    closeButton.type = "button";
37    closeButton.className = "code-lightbox__button";
38    closeButton.textContent = "Close";
39
40    const codeContent = document.createElement("div");
41    codeContent.className = "code-lightbox__content";
42
43    codeToolbar.appendChild(zoomOutButton);
44    codeToolbar.appendChild(zoomInButton);
45    codeToolbar.appendChild(closeButton);
46    codePanel.appendChild(codeToolbar);
47    codePanel.appendChild(codeContent);
48    codeOverlay.appendChild(codePanel);
49    document.body.appendChild(codeOverlay);
50
51    const contentOverlay = document.createElement("div");
52    contentOverlay.className = "content-lightbox";
53    contentOverlay.setAttribute("aria-hidden", "true");
54    contentOverlay.setAttribute("role", "dialog");
55    contentOverlay.setAttribute("aria-modal", "true");
56    contentOverlay.setAttribute("aria-label", "Expanded content");
57
58    const contentPanel = document.createElement("div");
59    contentPanel.className = "content-lightbox__panel";
60
61    const contentToolbar = document.createElement("div");
62    contentToolbar.className = "content-lightbox__toolbar";
63
64    const contentCloseButton = document.createElement("button");
65    contentCloseButton.type = "button";
66    contentCloseButton.className = "code-lightbox__button";
67    contentCloseButton.textContent = "Close";
68
69    const contentBody = document.createElement("div");
70    contentBody.className = "content-lightbox__content";
71
72    contentToolbar.appendChild(contentCloseButton);
73    contentPanel.appendChild(contentToolbar);
74    contentPanel.appendChild(contentBody);
75    contentOverlay.appendChild(contentPanel);
76    document.body.appendChild(contentOverlay);
77
78    let codeZoom = 1;
79    let contentTrigger = null;
80
81    function setCodeZoom(nextZoom) {
82      codeZoom = Math.max(0.75, Math.min(2.25, nextZoom));
83      codePanel.style.setProperty("--code-lightbox-font-scale", String(codeZoom));
84    }
85
86    function closeImageLightbox() {
87      imageOverlay.classList.remove("is-open");
88      imageOverlay.setAttribute("aria-hidden", "true");
89      overlayImg.removeAttribute("src");
90      if (
91        !codeOverlay.classList.contains("is-open") &&
92        !contentOverlay.classList.contains("is-open")
93      ) {
94        document.body.style.overflow = "";
95      }
96    }
97
98    function openImageLightbox(src, alt) {
99      overlayImg.src = src;
100      overlayImg.alt = alt || "";
101      imageOverlay.classList.add("is-open");
102      imageOverlay.setAttribute("aria-hidden", "false");
103      document.body.style.overflow = "hidden";
104    }
105
106    function closeCodeLightbox() {
107      codeOverlay.classList.remove("is-open");
108      codeOverlay.setAttribute("aria-hidden", "true");
109      codeContent.replaceChildren();
110      setCodeZoom(1);
111      if (
112        !imageOverlay.classList.contains("is-open") &&
113        !contentOverlay.classList.contains("is-open")
114      ) {
115        document.body.style.overflow = "";
116      }
117    }
118
119    function openCodeLightbox(preNode) {
120      const clone = preNode.cloneNode(true);
121      clone.querySelectorAll(".code-copy-btn").forEach((node) => node.remove());
122      codeContent.replaceChildren(clone);
123      setCodeZoom(1.25);
124      codeOverlay.classList.add("is-open");
125      codeOverlay.setAttribute("aria-hidden", "false");
126      document.body.style.overflow = "hidden";
127    }
128
129    function closeContentLightbox() {
130      contentOverlay.classList.remove("is-open");
131      contentOverlay.setAttribute("aria-hidden", "true");
132      contentBody.replaceChildren();
133      if (
134        !imageOverlay.classList.contains("is-open") &&
135        !codeOverlay.classList.contains("is-open")
136      ) {
137        document.body.style.overflow = "";
138      }
139      if (contentTrigger instanceof HTMLElement) {
140        contentTrigger.focus();
141      }
142      contentTrigger = null;
143    }
144
145    function openContentLightbox(sourceNode) {
146      const clone = sourceNode.cloneNode(true);
147      clone.removeAttribute("data-content-lightbox");
148      clone.removeAttribute("tabindex");
149      clone.removeAttribute("role");
150      clone.removeAttribute("aria-haspopup");
151      clone.removeAttribute("aria-label");
152      contentTrigger = sourceNode;

153      contentBody.replaceChildren(clone);
154      contentOverlay.classList.add("is-open");
155      contentOverlay.setAttribute("aria-hidden", "false");
156      document.body.style.overflow = "hidden";
157      contentCloseButton.focus();
158    }
159
160    zoomInButton.addEventListener("click", function (event) {
161      event.stopPropagation();
162      setCodeZoom(codeZoom + 0.15);
163    });
164
165    zoomOutButton.addEventListener("click", function (event) {
166      event.stopPropagation();
167      setCodeZoom(codeZoom - 0.15);
168    });
169
170    closeButton.addEventListener("click", function (event) {
171      event.stopPropagation();
172      closeCodeLightbox();
173    });
174
175    contentCloseButton.addEventListener("click", function (event) {
176      event.stopPropagation();
177      closeContentLightbox();
178    });
179
180    document.addEventListener("click", function (event) {
181      const target = event.target;
182      if (!(target instanceof Element)) return;
183
184      if (target.closest(".code-copy-btn")) return;
185
186      const expandableContent = target.closest("[data-content-lightbox]");
187      if (expandableContent && !target.closest(".content-lightbox")) {
188        openContentLightbox(expandableContent);
189        return;
190      }
191
192      const pre = target.closest("pre");
193      if (pre && pre.closest("article, .prose") && !pre.closest(".code-lightbox")) {
194        openCodeLightbox(pre);
195        return;
196      }
197
198      if (!(target instanceof HTMLImageElement)) return;
199      if (!target.closest("article, .prose")) return;
200      if (target.closest(".image-lightbox")) return;
201      if (!target.src) return;
202      openImageLightbox(target.src, target.alt);
203    });
204
205    imageOverlay.addEventListener("click", function () {
206      closeImageLightbox();
207    });
208
209    codeOverlay.addEventListener("click", function (event) {
210      if (event.target === codeOverlay) {
211        closeCodeLightbox();
212      }
213    });
214
215    codePanel.addEventListener("click", function (event) {
216      event.stopPropagation();
217    });
218
219    contentOverlay.addEventListener("click", function (event) {
220      if (event.target === contentOverlay) {
221        closeContentLightbox();
222      }
223    });
224
225    contentPanel.addEventListener("click", function (event) {
226      event.stopPropagation();
227    });
228
229    document.addEventListener("keydown", function (event) {
230      const target = event.target;
231      if (
232        target instanceof Element &&
233        target.matches("[data-content-lightbox]") &&
234        (event.key === "Enter" || event.key === " ")
235      ) {
236        event.preventDefault();
237        openContentLightbox(target);
238        return;
239      }
240      if (event.key === "Escape" && imageOverlay.classList.contains("is-open")) {
241        closeImageLightbox();
242      }
243      if (event.key === "Escape" && codeOverlay.classList.contains("is-open")) {
244        closeCodeLightbox();
245      }
246      if (event.key === "Escape" && contentOverlay.classList.contains("is-open")) {
247        closeContentLightbox();
248      }
249    });
250  }
251
252  if (document.readyState !== "loading") {
253    initContentLightbox();
254  } else {
255    document.addEventListener("DOMContentLoaded", initContentLightbox);
256  }
257})();