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

_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);
+ }
+ });
+ }
 }