diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js index 6c3e733ad8f..1f55d7cc2b6 100644 --- a/_javascript/modules/components/img-popup.js +++ b/_javascript/modules/components/img-popup.js @@ -9,15 +9,18 @@ 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() { @@ -25,6 +28,9 @@ export function imgPopup() { 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); } }); }