refactor: improve the efficiency of GLightbox switching

Repeatedly using `GLightbox.destroy()` (>= 4 times) will cause `GLightbox` to fail to generate new objects

_javascript/modules/components/img-popup.js

@@ -9,22 +9,28 @@ const lightImages = '.popup:not(.dark)';
 const darkImages = '.popup:not(.light)';
 let selector = lightImages;
 
-function updateImages(lightbox) {
+function updateImages(current, reverse) {
  if (selector === lightImages) {
  selector = darkImages;
  } else {
  selector = lightImages;
  }
 
- lightbox.destroy();
- lightbox = GLightbox({ selector: `${selector}` });
+ if (reverse === null) {
+ reverse = GLightbox({ selector: `${selector}` });
+ }
+
+ [current, reverse] = [reverse, current];
 }
 
 export function imgPopup() {
  if (document.querySelector('.popup') === null) {
  return;
  }
 
+ const hasDualImages = !(document.querySelector('.popup.light') === null &&
+ document.querySelector('.popup.dark') === null);
+
  if (
  (html.hasAttribute('data-mode') &&
  html.getAttribute('data-mode') === 'dark') ||
@@ -34,16 +40,18 @@ export function imgPopup() {
  selector = darkImages;
  }
 
- let lightbox = GLightbox({ selector: `${selector}` });
+ let current = GLightbox({ selector: `${selector}` });
+ let reverse = null;
 
  if (document.getElementById('mode-toggle')) {
  window.addEventListener('message', (event) => {
  if (
  event.source === window &&
  event.data &&
- event.data.direction === ModeToggle.ID
+ event.data.direction === ModeToggle.ID &&
+ hasDualImages
  ) {
- updateImages(lightbox);
+ updateImages(current, reverse);
  }
  });
  }