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

cotes2020 · Aug 18, 2024 · 5c5910f · 5c5910f
1 parent b641b36
commit 5c5910f
Showing 1 changed file with 38 additions and 3 deletions.
diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js
@@ -4,12 +4,47 @@
  * 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;
+
+function updateImages(lightbox) {
+  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('.popup') === null) {
     return;
   }
 
-  GLightbox({ selector: `.${IMG_CLASS}` });
+  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}` });
+
+  if (document.getElementById('mode-toggle')) {
+    window.addEventListener('message', (event) => {
+      if (
+        event.source === window &&
+        event.data &&
+        event.data.direction === ModeToggle.ID
+      ) {
+        updateImages(lightbox);
+      }
+    });
+  }
 }