diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js index 6c3e733..ac12043 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,11 @@ 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 +42,18 @@ export function imgPopup() { selector = darkImages; } - let lightbox = GLightbox({ selector: `${selector}` }); + let current = GLightbox({ selector: `${selector}` }); + + if (hasDualImages && document.getElementById('mode-toggle')) { + let reverse = null; - if (document.getElementById('mode-toggle')) { window.addEventListener('message', (event) => { if ( event.source === window && event.data && event.data.direction === ModeToggle.ID ) { - updateImages(lightbox); + updateImages(current, reverse); } }); }