95 lines
3.6 KiB
JavaScript
95 lines
3.6 KiB
JavaScript
// Mobiles Menü
|
|
const toggle = document.querySelector('.nav-toggle');
|
|
const menu = document.querySelector('.nav-menu');
|
|
if (toggle && menu) {
|
|
toggle.addEventListener('click', () => {
|
|
menu.classList.toggle('open');
|
|
});
|
|
// Schließen beim Klick auf einen Link
|
|
menu.querySelectorAll('a').forEach(a => {
|
|
a.addEventListener('click', () => menu.classList.remove('open'));
|
|
});
|
|
}
|
|
|
|
// Slide-Box (Bildkarussell)
|
|
document.querySelectorAll('.slider').forEach(slider => {
|
|
const track = slider.querySelector('.slider-track');
|
|
const prev = slider.querySelector('.slider-prev');
|
|
const next = slider.querySelector('.slider-next');
|
|
const step = () => {
|
|
const slide = track.querySelector('.slider-slide');
|
|
if (!slide) return slider.clientWidth * 0.8;
|
|
const gap = parseFloat(getComputedStyle(track).columnGap) || 0;
|
|
return slide.getBoundingClientRect().width + gap;
|
|
};
|
|
if (prev) prev.addEventListener('click', () => track.scrollBy({ left: -step(), behavior: 'smooth' }));
|
|
if (next) next.addEventListener('click', () => track.scrollBy({ left: step(), behavior: 'smooth' }));
|
|
});
|
|
|
|
// Belegungsplan ein-/ausblenden (externes webplanner-iframe erst bei Klick nachladen)
|
|
const belBtn = document.getElementById('belegungsplan-btn');
|
|
const belFrame = document.getElementById('belegungsplan-frame');
|
|
if (belBtn && belFrame) {
|
|
const labelClosed = belBtn.textContent.trim();
|
|
let loaded = false;
|
|
belBtn.addEventListener('click', () => {
|
|
const willShow = belFrame.hidden;
|
|
if (willShow && !loaded) {
|
|
const iframe = document.createElement('iframe');
|
|
iframe.width = '100%';
|
|
iframe.height = '225';
|
|
iframe.frameBorder = '0';
|
|
belFrame.appendChild(iframe);
|
|
iframe.src = belFrame.dataset.src;
|
|
loaded = true;
|
|
}
|
|
belFrame.hidden = !willShow;
|
|
belBtn.setAttribute('aria-expanded', String(willShow));
|
|
belBtn.textContent = willShow ? 'Belegungsplan ausblenden' : labelClosed;
|
|
});
|
|
}
|
|
|
|
// Lightbox für Bildergalerien (eine Lightbox, beliebig viele Galerien pro Seite)
|
|
const lightbox = document.querySelector('.lightbox');
|
|
if (lightbox) {
|
|
const imgEl = lightbox.querySelector('.lightbox-img');
|
|
const closeBtn = lightbox.querySelector('.lightbox-close');
|
|
const prevBtn = lightbox.querySelector('.lightbox-prev');
|
|
const nextBtn = lightbox.querySelector('.lightbox-next');
|
|
let images = [];
|
|
let current = 0;
|
|
|
|
const show = i => {
|
|
current = (i + images.length) % images.length;
|
|
imgEl.src = images[current].src;
|
|
imgEl.alt = images[current].alt;
|
|
};
|
|
const open = (gallery, i) => {
|
|
images = Array.from(gallery.querySelectorAll('.lightbox-trigger'))
|
|
.map(a => ({ src: a.href, alt: a.querySelector('img').alt }));
|
|
show(i);
|
|
lightbox.hidden = false;
|
|
document.body.style.overflow = 'hidden';
|
|
};
|
|
const close = () => {
|
|
lightbox.hidden = true;
|
|
document.body.style.overflow = '';
|
|
};
|
|
|
|
document.querySelectorAll('.lightbox-gallery').forEach(gallery => {
|
|
Array.from(gallery.querySelectorAll('.lightbox-trigger')).forEach((a, i) => {
|
|
a.addEventListener('click', e => { e.preventDefault(); open(gallery, i); });
|
|
});
|
|
});
|
|
closeBtn.addEventListener('click', close);
|
|
prevBtn.addEventListener('click', () => show(current - 1));
|
|
nextBtn.addEventListener('click', () => show(current + 1));
|
|
lightbox.addEventListener('click', e => { if (e.target === lightbox) close(); });
|
|
document.addEventListener('keydown', e => {
|
|
if (lightbox.hidden) return;
|
|
if (e.key === 'Escape') close();
|
|
if (e.key === 'ArrowLeft') show(current - 1);
|
|
if (e.key === 'ArrowRight') show(current + 1);
|
|
});
|
|
}
|