109 lines
3.6 KiB
JavaScript
109 lines
3.6 KiB
JavaScript
// --- theme toggle ---
|
|
const toggle = document.getElementById('theme-toggle');
|
|
const root = document.documentElement;
|
|
const saved = window?.localStorage?.getItem('dark-mode');
|
|
const sysDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
if (saved === 'true') {
|
|
root.classList.add('dark');
|
|
root.classList.remove('light');
|
|
} else if (saved === 'false') {
|
|
root.classList.add('light');
|
|
root.classList.remove('dark');
|
|
} else {
|
|
if (sysDark) {
|
|
root.classList.add('dark');
|
|
root.classList.remove('light');
|
|
} else {
|
|
root.classList.add('light');
|
|
root.classList.remove('dark');
|
|
}
|
|
}
|
|
toggle?.addEventListener('click', () => {
|
|
const isDark = root.classList.contains('dark');
|
|
root.classList.toggle('dark', !isDark);
|
|
root.classList.toggle('light', isDark);
|
|
window?.localStorage?.setItem('dark-mode', String(!isDark));
|
|
});
|
|
|
|
const { body } = document;
|
|
|
|
// --- lightbox base ---
|
|
const lb = document.getElementById('lightbox');
|
|
const lbCnt = document.getElementById('lb-content');
|
|
const lbCap = document.getElementById('lb-caption');
|
|
document.getElementById('lb-close')?.addEventListener('click', () => {
|
|
lb?.setAttribute('aria-hidden', 'true');
|
|
body.classList.remove('lightbox-open');
|
|
if (lbCnt) lbCnt.innerHTML = '';
|
|
});
|
|
|
|
// Build picture element for lightbox (name, type only)
|
|
function createPicture(name, type) {
|
|
const pic = document.createElement('picture');
|
|
const breakpoints = [
|
|
{ bp: 'desktop', minWidth: 1024 },
|
|
{ bp: 'tablet', minWidth: 768 },
|
|
{ bp: 'mobile', minWidth: 0 }
|
|
];
|
|
for (const { bp, minWidth } of breakpoints) {
|
|
const src = document.createElement('source');
|
|
src.media = `(min-width:${minWidth}px)`;
|
|
if (type === 'image') {
|
|
src.srcset =
|
|
`/assets/media/${bp}/${name}@1x.webp 1x, /assets/media/${bp}/${name}.webp 2x`;
|
|
} else {
|
|
src.srcset =
|
|
`/assets/media/${bp}/${name}_still@1x.webp 1x, /assets/media/${bp}/${name}_still.webp 2x`;
|
|
}
|
|
pic.appendChild(src);
|
|
}
|
|
const img = document.createElement('img');
|
|
img.src = `/assets/media/thumbnail/${name}.webp`;
|
|
img.alt = '';
|
|
pic.appendChild(img);
|
|
return pic;
|
|
}
|
|
|
|
function openLightbox(item) {
|
|
if (!lbCnt || !lbCap || !lb) return;
|
|
lbCnt.innerHTML = '';
|
|
if (item.type === 'video') {
|
|
const v = document.createElement('video');
|
|
v.src = `/assets/media/videos/${item.name}.mp4`;
|
|
v.controls = true;
|
|
v.autoplay = true;
|
|
lbCnt.appendChild(v);
|
|
} else {
|
|
lbCnt.appendChild(createPicture(item.name, item.type));
|
|
}
|
|
lbCap.textContent = item.caption;
|
|
body.classList.add('lightbox-open');
|
|
lb.setAttribute('aria-hidden', 'false');
|
|
}
|
|
|
|
// --- bind to pre-rendered gallery ---
|
|
document.querySelectorAll('.gallery-item').forEach((fig) => {
|
|
const name = fig.getAttribute('data-name');
|
|
const type = fig.getAttribute('data-type');
|
|
const caption = fig.getAttribute('data-caption');
|
|
if (!name || !type || !caption) return;
|
|
const item = { name, type, caption };
|
|
fig.addEventListener('click', () => openLightbox(item));
|
|
fig.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') openLightbox(item);
|
|
});
|
|
});
|
|
|
|
// --- video toggle ---
|
|
const videoTgl = document.getElementById('show_video');
|
|
videoTgl?.addEventListener('click', () => {
|
|
const videoFig = document.querySelector('.gallery-item.video');
|
|
if (videoFig) {
|
|
openLightbox({
|
|
name: videoFig.getAttribute('data-name'),
|
|
type: videoFig.getAttribute('data-type'),
|
|
caption: videoFig.getAttribute('data-caption')
|
|
});
|
|
}
|
|
});
|