89 lines
5.9 KiB
JavaScript
89 lines
5.9 KiB
JavaScript
/** Scroll snapping is the baseline; arrows, dots and controllable playback enhance it. */
|
|
export function initSliders(doc = document) {
|
|
const view = doc.defaultView;
|
|
const cleanups = [];
|
|
doc.querySelectorAll('.block-slider').forEach(slider => {
|
|
const slides = [...slider.querySelectorAll(':scope > .slider-slide')];
|
|
if (slides.length < 2 || slider.dataset.enhanced) return;
|
|
slider.dataset.enhanced = 'true';
|
|
const events = new view.AbortController(), signal = events.signal;
|
|
const preference = view.matchMedia('(prefers-reduced-motion: reduce)');
|
|
const seconds = Number(slider.dataset.autoplay || 0);
|
|
let playing = seconds >= 3 && !preference.matches, hover = false, visible = false, timer;
|
|
const controls = doc.createElement('div'); controls.className = 'slider-controls';
|
|
for (const name of slider.classList) if (name.startsWith('visibility-')) controls.classList.add(name);
|
|
controls.setAttribute('role', 'group'); controls.setAttribute('aria-label', 'Slider bedienen');
|
|
const button = (text, label, action) => {
|
|
const node = doc.createElement('button'); node.type = 'button'; node.textContent = text;
|
|
node.setAttribute('aria-label', label); node.setAttribute('aria-controls', slider.id);
|
|
node.addEventListener('click', event => { event.preventDefault(); event.stopPropagation(); action(); }, { signal });
|
|
controls.append(node); return node;
|
|
};
|
|
const left = slide => slide.getBoundingClientRect().left - slider.getBoundingClientRect().left + slider.scrollLeft;
|
|
const available = () => slides.map((slide, i) => slide.getClientRects().length ? i : -1).filter(i => i >= 0);
|
|
const active = () => {
|
|
let index = 0, distance = Infinity;
|
|
available().forEach(i => { const delta = Math.abs(left(slides[i]) - slider.scrollLeft); if (delta < distance) { distance = delta; index = i; } });
|
|
return index;
|
|
};
|
|
const go = index => {
|
|
if (!available().includes(index)) return;
|
|
slider.scrollTo({ left: Math.max(0, Math.min(slider.scrollWidth - slider.clientWidth, left(slides[index]))), behavior: preference.matches ? 'instant' : 'smooth' });
|
|
};
|
|
const step = direction => {
|
|
const visible = available(), position = visible.indexOf(active());
|
|
if (!visible.length) return;
|
|
const last = slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 2;
|
|
const first = slider.scrollLeft <= 2;
|
|
go(direction > 0 ? (last ? visible[0] : visible[Math.min(visible.length - 1, position + 1)]) : (first ? visible.at(-1) : visible[Math.max(0, position - 1)]));
|
|
};
|
|
const manual = action => { playing = false; clearTimeout(timer); update(); action(); };
|
|
const previous = button('←', 'Vorherige Folie', () => manual(() => step(-1)));
|
|
const count = doc.createElement('span'); count.className = 'slider-position'; controls.append(count);
|
|
const next = button('→', 'Nächste Folie', () => manual(() => step(1)));
|
|
const dots = [];
|
|
if (slider.classList.contains('slider-dots')) {
|
|
const group = doc.createElement('div'); group.className = 'slider-control-dots'; controls.append(group);
|
|
slides.forEach((slide, i) => {
|
|
const dot = button('●', `Folie ${i + 1} anzeigen`, () => manual(() => go(i))); group.append(dot); dots.push(dot);
|
|
});
|
|
}
|
|
const play = seconds >= 3 ? button('', 'Automatische Wiedergabe pausieren', () => { playing = !playing; update(); schedule(); }) : null;
|
|
const update = () => {
|
|
const visible = available();
|
|
const fits = visible.length < 2 || slider.scrollWidth <= slider.clientWidth + 2;
|
|
controls.hidden = fits; previous.disabled = next.disabled = fits;
|
|
const index = active(); count.textContent = `${Math.max(0, visible.indexOf(index) + 1)} / ${visible.length}`;
|
|
dots.forEach((dot, i) => { dot.hidden = !visible.includes(i); dot.setAttribute('aria-pressed', String(i === index)); });
|
|
if (play) {
|
|
play.textContent = playing ? 'Pause' : 'Wiedergabe';
|
|
play.setAttribute('aria-label', playing ? 'Automatische Wiedergabe pausieren' : 'Automatische Wiedergabe starten');
|
|
play.disabled = preference.matches; play.title = preference.matches ? 'Automatik ist bei reduzierter Bewegung deaktiviert.' : '';
|
|
}
|
|
};
|
|
const schedule = () => {
|
|
clearTimeout(timer);
|
|
if (playing && !preference.matches) timer = setTimeout(() => { if (playing && !hover && visible && !doc.hidden) step(1); schedule(); }, seconds * 1000);
|
|
};
|
|
const pause = () => { playing = false; update(); clearTimeout(timer); };
|
|
slider.after(controls); slider.classList.add('slider-controlled'); update();
|
|
slider.addEventListener('scroll', update, { passive: true, signal });
|
|
view.addEventListener('resize', update, { passive: true, signal });
|
|
slider.addEventListener('pointerenter', () => { hover = true; }, { signal });
|
|
slider.addEventListener('pointerleave', () => { hover = false; schedule(); }, { signal });
|
|
for (const event of ['pointerdown', 'wheel', 'touchstart', 'focusin']) slider.addEventListener(event, pause, { passive: true, signal });
|
|
slider.addEventListener('keydown', event => {
|
|
if (event.target !== slider || !['ArrowLeft', 'ArrowRight'].includes(event.key)) return;
|
|
event.preventDefault(); manual(() => step(event.key === 'ArrowRight' ? 1 : -1));
|
|
}, { signal });
|
|
const observer = new view.IntersectionObserver(entries => { visible = entries[0].isIntersecting; }, { threshold: 0 }); observer.observe(slider);
|
|
const resize = new view.ResizeObserver(update); resize.observe(slider);
|
|
preference.addEventListener('change', () => { if (preference.matches) pause(); update(); }, { signal });
|
|
schedule();
|
|
cleanups.push(() => { clearTimeout(timer); events.abort(); observer.disconnect(); resize.disconnect(); controls.remove(); slider.classList.remove('slider-controlled'); delete slider.dataset.enhanced; });
|
|
});
|
|
return () => cleanups.forEach(cleanup => cleanup());
|
|
}
|
|
|
|
if (!document.querySelector('#editor')) initSliders();
|