// ---------- Course carousel ---------- // Pulls categories + courses from the shared WB_* globals so the homepage // carousel and the All-Courses subpage stay in sync. // // Carousel model (rewritten 2024-12): track is a transform-based row, not an // overflow-scroll container. Pointer drag with setPointerCapture moves the // row; on release we snap to the nearest card index. This sidesteps the iOS // Safari quirks around overflow + nested touch handlers that broke swiping. // Convert "#RRGGBB" to "rgba(r,g,b,a)" so we can build fade gradients in JS. function hexToRgba(hex, a) { const h = String(hex).replace('#', ''); const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16); return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`; } // Backend-Daten reaktiv halten: das Carousel re-rendert, sobald // course-data.jsx einen frischen Fetch abgeschlossen hat. const useCarouselData = () => { const [version, setVersion] = React.useState(0); React.useEffect(() => { const onUpdate = () => setVersion((v) => v + 1); window.addEventListener('wb-courses-updated', onUpdate); return () => window.removeEventListener('wb-courses-updated', onUpdate); }, []); return React.useMemo(() => { const cats = window.WB_CATEGORIES || []; const courses = window.WB_COURSES || []; // Flach + kategorie-interleaved für ein bunt durchmischtes Pill-Band. const buckets = cats.map((cat) => ({ cat, list: courses.filter((c) => c.cat === cat.id) })); const max = buckets.length ? Math.max(...buckets.map((b) => b.list.length)) : 0; const directCourses = []; for (let i = 0; i < max; i++) { buckets.forEach(({ cat, list }) => { if (list[i]) directCourses.push({ label: list[i].title, cat, course: list[i] }); }); } return { cats, courses, directCourses }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [version]); }; const CourseCarousel = ({ onOpenInquiry }) => { const stageRef = React.useRef(null); const trackRef = React.useRef(null); const pillsRef = React.useRef(null); const [activeBubble, setActiveBubble] = React.useState(null); const [openCourse, setOpenCourse] = React.useState(null); const headRef = useReveal(); const { cats: courseCategories, directCourses } = useCarouselData(); // Card geometry — measured at runtime, recomputed on resize. const [geom, setGeom] = React.useState({ cardW: 240, gap: 18, stageW: 1200 }); // Active card index — never wraps, can go negative or > N. We render the row // long enough to cover any reasonable index, and modulo into the data array // when picking which category a slot shows. const N = courseCategories.length; const [index, setIndex] = React.useState(0); const [drag, setDrag] = React.useState(0); // px, additional translate while dragging const dragRef = React.useRef({ active: false, startX: 0, startIndex: 0, moved: false }); // Measure: card width = clamp(200, 22vw, 260), gap = 18px. React.useEffect(() => { const measure = () => { const stage = stageRef.current; if (!stage) return; const card = stage.querySelector('.crs-card'); const cardW = card ? card.offsetWidth : 240; setGeom({ cardW, gap: 18, stageW: stage.clientWidth }); }; measure(); window.addEventListener('resize', measure); return () => window.removeEventListener('resize', measure); }, []); // Externe Trigger zum Öffnen einer Kurs-Detail-Ansicht (z.B. aus dem // Aktuelles-Karussell): hört auf 'wb-open-course-by-id' und sucht den // Kurs in der globalen Liste. React.useEffect(() => { const onOpenById = (e) => { const id = e?.detail?.id; if (!id) return; const course = (window.WB_COURSES || []).find((c) => c.id === id); if (course) setOpenCourse(course); }; window.addEventListener('wb-open-course-by-id', onOpenById); return () => window.removeEventListener('wb-open-course-by-id', onOpenById); }, []); const step = geom.cardW + geom.gap; // Bounded carousel: how many full cards fit in the visible stage area. // The track sits flush with the container's left and right edges so the // first card aligns with the heading and the last card aligns with the // "Alle Kurse" button. Arrows float over the card edges. const SIDE_GUTTER = 56; const visibleW = geom.stageW; const visibleCount = Math.max(1, Math.floor((visibleW + geom.gap) / step)); const maxIndex = Math.max(0, N - visibleCount); const clampIndex = (i) => Math.max(0, Math.min(maxIndex, i)); // Left-align: card 0 sits flush with the stage's inner padding (SIDE_GUTTER). const baseOffset = -index * step; // Rubber-band drag past the edges so the user feels the stop. const RUBBER = 0.35; const rubberize = (dx) => { // dx > 0 means dragging right (toward earlier cards). if (dx > 0 && index <= 0) return dx * RUBBER; if (dx < 0 && index >= maxIndex) return dx * RUBBER; return dx; }; // Pointer-drag to swipe. const onPointerDown = (e) => { if (e.button !== undefined && e.button !== 0) return; // Don't capture if user clicked the side arrow or any nested button const t = e.target; if (t && t.closest && t.closest('[data-side-arrow]')) return; // NOTE: we deliberately do NOT call setPointerCapture here. Capturing on // pointerdown re-targets the synthesized click event to the stage div, // which swallows clicks on the cards (the browser never sees them as // link activations). We only capture once the user has actually moved // past the drag threshold — see onPointerMove below. dragRef.current = { active: true, startX: e.clientX, startIndex: index, moved: false, pointerId: e.pointerId, captured: false, }; }; const onPointerMove = (e) => { if (!dragRef.current.active) return; const dx = e.clientX - dragRef.current.startX; if (!dragRef.current.moved && Math.abs(dx) > 5) { dragRef.current.moved = true; // Now that we know it's a drag, capture the pointer so we keep getting // move/up events even if the cursor leaves the stage. if (!dragRef.current.captured) { try { e.currentTarget.setPointerCapture(e.pointerId); dragRef.current.captured = true; } catch (_) {} } } if (dragRef.current.moved) { setDrag(rubberize(dx)); } }; const onPointerUp = (e) => { if (!dragRef.current.active) return; const dx = e.clientX - dragRef.current.startX; dragRef.current.active = false; setDrag(0); // Snap: shift index by however many "steps" the drag covered (rounded), // clamped to [0, maxIndex] so we hit a hard stop at the ends. const delta = Math.round(-dx / step); if (delta !== 0) setIndex(i => clampIndex(i + delta)); if (dragRef.current.captured) { try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {} } // Swallow the click that follows a drag so cards don't open accidentally if (dragRef.current.moved) { const swallow = (ev) => { ev.stopPropagation(); ev.preventDefault(); }; e.currentTarget.addEventListener('click', swallow, { capture: true, once: true }); // Reset moved flag for next interaction setTimeout(() => { dragRef.current.moved = false; }, 0); } }; // Re-clamp the active index when the viewport changes (resize might // increase visibleCount and lower maxIndex below the current index). React.useEffect(() => { setIndex(i => clampIndex(i)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [maxIndex]); // Render slots: only the real categories — no infinite wrap. Bounds give // the slider a clear start and end. const slots = courseCategories.map((cat, i) => ({ slot: i, cat })); const atStart = index <= 0; const atEnd = index >= maxIndex; const scrollPillsBy = (dir) => { const p = pillsRef.current; if (!p) return; p.scrollBy({ left: dir * Math.max(220, p.clientWidth * 0.6), behavior: 'smooth' }); }; // Track pill scroll position so we can disable the arrows at the ends. const [pillBounds, setPillBounds] = React.useState({ atStart: true, atEnd: false }); React.useEffect(() => { const p = pillsRef.current; if (!p) return; const update = () => { const max = p.scrollWidth - p.clientWidth; setPillBounds({ atStart: p.scrollLeft <= 1, atEnd: p.scrollLeft >= max - 1, }); }; update(); p.addEventListener('scroll', update, { passive: true }); window.addEventListener('resize', update); return () => { p.removeEventListener('scroll', update); window.removeEventListener('resize', update); }; }, []); return (
{window.wbText('kurse.eyebrow', 'Kurse')}

{window.wbT('kurse.headline', 'Kurse für alle [Lebensphasen].')}

{window.wbText('kurse.lead', 'Vom ersten Spüren bis lange nach der Geburt — und durch alles, was Frausein sonst noch ausmacht. Kurse, Einzelbegleitung, Frauenkreise.')}

Alle Kurse →
{/* Subheading: Kategorien */}
● Kategorien Lebensphasen im Überblick — wisch durch oder klick eine Karte
{/* Empty-State falls keine Kategorien gepflegt sind */} {courseCategories.length === 0 ? (
Aktuell sind keine Kurs-Kategorien angelegt. Sobald wir hier Kurse ausschreiben, tauchen sie als Karten auf.
) : ( <> {/* Card carousel — transform-based, pointer-drag swipe */}
setIndex(i => clampIndex(i - 1))} gutter={SIDE_GUTTER} disabled={atStart} /> setIndex(i => clampIndex(i + 1))} gutter={SIDE_GUTTER} disabled={atEnd} />
{slots.map(({ slot, cat: c }) => ( e.currentTarget.style.transform = 'translateY(-4px)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'} onClick={(e) => { // Block native navigation only if this was a drag, not a click. if (dragRef.current.moved) { e.preventDefault(); e.stopPropagation(); } }} onDragStart={(e) => e.preventDefault()} > {/* Themed photo backdrop — Bild kommt aus dem Admin (Kategorie-Editor). Wenn kein Bild gesetzt: kein , nur sanfter Gradient — kein Stock-Bild. */}
{/* Subheading: Einzelne Kurse */}
● Einzelne Kurse Direkt zum Kurs — tippe einen Kurs für Details
{/* Empty-State falls keine Kurse gepflegt sind */} {directCourses.length === 0 ? (
Aktuell sind keine Einzel-Kurse ausgeschrieben. Schau bald wieder vorbei — oder schreib uns direkt.
) : ( <> {/* Single-row pill carousel — colored by parent category. Stays overflow-scroll; pills are tiny and don't have iOS issues. */}
scrollPillsBy(-1)} gutter={SIDE_GUTTER} small disabled={pillBounds.atStart} /> scrollPillsBy(1)} gutter={SIDE_GUTTER} small disabled={pillBounds.atEnd} />
{directCourses.map(({ label, cat, course }, i) => { const active = activeBubble === label; return ( ); })}
)} )} {(() => { const Detail = window.WBCourseDetail; return openCourse && Detail ? ( { setOpenCourse(null); setActiveBubble(null); }} /> ) : null; })()}
); }; // Floating side arrow — uses the same gutter so card arrows + pill arrows line up vertically. const CrsArrow = ({ dir, onClick, gutter = 56, small, disabled }) => { const size = small ? 32 : 40; const offset = Math.max(8, (gutter - size) / 2); return ( ); }; window.CourseCarousel = CourseCarousel;