fix: remove extra dual-mode images from lightbox (#1883)

cotes2020 · Aug 12, 2024 · a891ba2 · a891ba2
1 parent b641b36
commit a891ba2
Showing 1 changed file with 36 additions and 3 deletions.
diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js
@@ -4,12 +4,45 @@
  * Dependencies: https://github.com/biati-digital/glightbox
  */
 
-const IMG_CLASS = 'popup';
+const html = document.documentElement;
+const lightImages = '.popup:not(.dark)';
+const darkImages = '.popup:not(.light)';
+let selector = lightImages;
+
+if (
+  (html.hasAttribute('data-mode') &&
+    html.getAttribute('data-mode') === 'dark') ||
+  (!html.hasAttribute('data-mode') &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches)
+) {
+  selector = darkImages;
+}
+
+let lightbox = GLightbox({ selector: `${selector}` });
+
+function updateImages(event) {
+  if (
+    event.source === window &&
+    event.data &&
+    event.data.direction === ModeToggle.ID
+  ) {
+    if (selector === lightImages) {
+      selector = darkImages;
+    } else {
+      selector = lightImages;
+    }
+  }
+
+  lightbox.destroy();
+  lightbox = GLightbox({ selector: `${selector}` });
+}
 
 export function imgPopup() {
-  if (document.getElementsByClassName(IMG_CLASS).length === 0) {
+  if (document.querySelector(`${selector}`) === null) {
     return;
   }
 
-  GLightbox({ selector: `.${IMG_CLASS}` });
+  if (document.getElementById('mode-toggle')) {
+    window.addEventListener('message', updateImages);
+  }
 }