asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: improve the efficiency of GLightbox switching

Browse source 
Repeatedly using `GLightbox.destroy()` (>= 4 times) will cause `GLightbox` to fail to generate new objects
This commit is contained in:
Cotes Chung 2024-08-19 21:05:39 +08:00
parent d74bfaeda2
commit 7f83c3d00d
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
1 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
_javascript/modules/components/img-popup.js
View file

@ -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);
}
});
}