125 lines
4.6 KiB
JavaScript
125 lines
4.6 KiB
JavaScript
const root = document.documentElement;
|
|
const saved = window?.localStorage?.getItem('theme');
|
|
const sysDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
if (saved) {
|
|
root.setAttribute('data-theme', saved);
|
|
} else {
|
|
if (sysDark) {
|
|
root.setAttribute('data-theme', 'dark');
|
|
} else {
|
|
root.setAttribute('data-theme', 'light');
|
|
}
|
|
}
|
|
|
|
// Theme toggle
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener('click', () => {
|
|
const current = root.getAttribute('data-theme') || 'light';
|
|
const next = current === 'light' ? 'dark' : 'light';
|
|
root.setAttribute('data-theme', next);
|
|
try {
|
|
localStorage.setItem('theme', next);
|
|
} catch (_) {}
|
|
});
|
|
}
|
|
|
|
// Lightbox (structure from Lightbox.svelte; we fill content and handle open/close)
|
|
const dialog = document.querySelector('dialog.lightbox');
|
|
const lbContent = dialog?.querySelector('.lb-content');
|
|
const lbCaption = dialog?.querySelector('#lb-caption, .lb-caption');
|
|
let lightboxOpener = null;
|
|
|
|
function openLightbox(name, type, caption) {
|
|
if (!dialog || !lbContent || !lbCaption) return;
|
|
lightboxOpener = document.activeElement;
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
if (type === 'video') {
|
|
lbContent.innerHTML = `<video src="/assets/media/videos/${name}.mp4" controls autoplay><track kind="captions" src="/assets/media/videos/${name}-captions.vtt" default></video>`;
|
|
} else {
|
|
const srcset = (bp) =>
|
|
type === 'image'
|
|
? `/assets/media/${bp}/${name}@1x.webp 1x, /assets/media/${bp}/${name}.webp 2x`
|
|
: `/assets/media/${bp}/${name}_still@1x.webp 1x, /assets/media/${bp}/${name}_still.webp 2x`;
|
|
lbContent.innerHTML = `<picture>
|
|
<source media="(min-width:1024px)" srcset="${srcset('desktop')}">
|
|
<source media="(min-width:768px)" srcset="${srcset('tablet')}">
|
|
<source media="(min-width:0px)" srcset="${srcset('mobile')}">
|
|
<img src="/assets/media/thumbnail/${name}.webp" alt="">
|
|
</picture>`;
|
|
}
|
|
lbCaption.textContent = caption || '';
|
|
dialog.setAttribute('aria-hidden', 'false');
|
|
dialog.showModal();
|
|
}
|
|
|
|
function closeLightbox() {
|
|
if (!dialog) return;
|
|
if (lightboxOpener && typeof lightboxOpener.focus === 'function') {
|
|
lightboxOpener.focus();
|
|
}
|
|
lightboxOpener = null;
|
|
document.body.style.overflow = '';
|
|
if (lbContent) lbContent.innerHTML = '';
|
|
if (lbCaption) lbCaption.textContent = '';
|
|
dialog.setAttribute('aria-hidden', 'true');
|
|
dialog.close();
|
|
}
|
|
|
|
if (dialog) {
|
|
// Add event handlers
|
|
dialog.querySelector('.lb-close').addEventListener('click', closeLightbox);
|
|
dialog.querySelector('.lb-close').addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
closeLightbox();
|
|
}
|
|
});
|
|
dialog.addEventListener('close', closeLightbox);
|
|
dialog.addEventListener('cancel', closeLightbox);
|
|
dialog.addEventListener('click', (e) => {
|
|
if (e.target === dialog) closeLightbox();
|
|
});
|
|
}
|
|
|
|
// Gallery items
|
|
document.querySelectorAll('.gallery-item[data-name]').forEach((el) => {
|
|
el.addEventListener('click', () => {
|
|
const name = el.getAttribute('data-name');
|
|
const type = el.getAttribute('data-type') || 'image';
|
|
const caption = el.getAttribute('data-caption') || '';
|
|
if (name) openLightbox(name, type, caption);
|
|
});
|
|
el.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
const name = el.getAttribute('data-name');
|
|
const type = el.getAttribute('data-type') || 'image';
|
|
const caption = el.getAttribute('data-caption') || '';
|
|
if (name) openLightbox(name, type, caption);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Show video button (open lightbox with tour)
|
|
const showVideoBtn = document.getElementById('show_video');
|
|
if (showVideoBtn) {
|
|
const openTour = () => {
|
|
const name = showVideoBtn.getAttribute('data-name') || 'tour';
|
|
const type = showVideoBtn.getAttribute('data-type') || 'video';
|
|
const caption =
|
|
showVideoBtn.getAttribute('data-caption') ||
|
|
"Take the scenic route—explore your the home's highlights with a virtual walkthrough.";
|
|
openLightbox(name, type, caption);
|
|
};
|
|
showVideoBtn.addEventListener('click', openTour);
|
|
showVideoBtn.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
openTour();
|
|
}
|
|
});
|
|
}
|