Swipeable calendar

js/views/MealPlanner.js

@@ -32,10 +32,11 @@ import {
     createCalendarTopbarHTML,
     createCalendarWeekdayHeaderHTML,
     isCalendarOnToday,
+    renderCalendarGrid,
     renderCollapsibleCalendar,
     syncCalendarTodayButton,
     syncCollapsibleCalendarMode,
-} from '../ui/mealCalendar.js?v=11';
+} from '../ui/mealCalendar.js?v=14';
 import {
     filterRecipesByQuery,
     renderRecipeGrid,
@@ -76,9 +77,7 @@ export function getMealPlannerHTML() {
             <div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-between gap-3 min-w-0">
                 <h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Plan posiłków</h1>
                 ${createCalendarTopbarHTML({
-        prevId: 'cal-prev',
         todayId: 'cal-go-today',
-        nextId: 'cal-next',
         wrapperClass: 'flex shrink-0 items-center justify-end',
     })}
             </div>
@@ -201,52 +200,214 @@ function bindCalendarSwipeGesture(state, rerender) {
     const zone = document.getElementById('calendar-swipe-zone');
     if (!zone) return;
 
+    const ANIMATION_MS = 260;
+
+    let startX = 0;
     let startY = 0;
     let ptrId = null;
     let moved = false;
+    let axisLocked = null;
+    let suppressClickUntil = 0;
+    let animatingNav = false;
+
+    let dragWrap = null;
+    let wrapWidth = 0;
+    let prevGhost = null;
+    let nextGhost = null;
+    let prevWrapPosition = '';
+    let prevWrapOverflow = '';
+
+    const getActiveWrap = () => document.getElementById(
+        state.mode === 'week' ? 'calendar-week-wrap' : 'calendar-month-wrap',
+    );
+
+    const resolveDayStateForGhost = (day, meta) => {
+        const today = startOfDay(new Date());
+        const isSelected = sameDay(day, state.selected);
+        const isPast = day.getTime() < today.getTime();
+        return {
+            disabled: isPast && !isSelected,
+            dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
+            showIndicator: meta.mode === 'month'
+                ? meta.inCurrentMonth && dayHasAnyMeal(state.plans, day)
+                : dayHasAnyMeal(state.plans, day),
+        };
+    };
+
+    const buildGhost = (anchorDate, mode) => {
+        if (!dragWrap) return null;
+        const ghost = dragWrap.cloneNode(true);
+        ghost.removeAttribute('id');
+        ghost.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));
+        ghost.style.position = 'absolute';
+        ghost.style.top = '0';
+        ghost.style.width = '100%';
+        ghost.style.pointerEvents = 'none';
+        ghost.setAttribute('aria-hidden', 'true');
+        let ghostGridEl = null;
+        ghost.querySelectorAll('.grid-cols-7').forEach((g) => {
+            if (!g.classList.contains('text-center')) ghostGridEl = g;
+        });
+        if (ghostGridEl) {
+            renderCalendarGrid({
+                gridEl: ghostGridEl,
+                mode,
+                anchorDate,
+                selectedDate: state.selected,
+                resolveDayState: resolveDayStateForGhost,
+            });
+        }
+        return ghost;
+    };
+
+    const activateCarousel = () => {
+        dragWrap = getActiveWrap();
+        if (!dragWrap) return;
+        wrapWidth = dragWrap.getBoundingClientRect().width || zone.getBoundingClientRect().width;
+        prevWrapPosition = dragWrap.style.position;
+        prevWrapOverflow = dragWrap.style.overflow;
+        dragWrap.style.position = 'relative';
+        dragWrap.style.overflow = 'visible';
+
+        const prevAnchor = state.mode === 'week'
+            ? addWeeks(state.weekStart, -1)
+            : addMonths(state.monthAnchor, -1);
+        const nextAnchor = state.mode === 'week'
+            ? addWeeks(state.weekStart, 1)
+            : addMonths(state.monthAnchor, 1);
+
+        prevGhost = buildGhost(prevAnchor, state.mode);
+        nextGhost = buildGhost(nextAnchor, state.mode);
+        if (prevGhost) {
+            prevGhost.style.left = `-${wrapWidth}px`;
+            dragWrap.appendChild(prevGhost);
+        }
+        if (nextGhost) {
+            nextGhost.style.left = `${wrapWidth}px`;
+            dragWrap.appendChild(nextGhost);
+        }
+        dragWrap.style.willChange = 'transform';
+        dragWrap.style.transition = 'none';
+    };
+
+    const clearCarousel = () => {
+        if (prevGhost?.parentNode) prevGhost.parentNode.removeChild(prevGhost);
+        if (nextGhost?.parentNode) nextGhost.parentNode.removeChild(nextGhost);
+        prevGhost = null;
+        nextGhost = null;
+        if (dragWrap) {
+            dragWrap.style.transition = '';
+            dragWrap.style.transform = '';
+            dragWrap.style.willChange = '';
+            dragWrap.style.position = prevWrapPosition;
+            dragWrap.style.overflow = prevWrapOverflow;
+        }
+        dragWrap = null;
+    };
+
+    const setTranslate = (x, ms) => {
+        if (!dragWrap) return;
+        dragWrap.style.transition = ms ? `transform ${ms}ms ease` : 'none';
+        dragWrap.style.transform = `translate3d(${x}px, 0, 0)`;
+    };
 
     zone.addEventListener('pointerdown', (e) => {
-        if (ptrId !== null) return;
+        if (ptrId !== null || animatingNav) return;
+        if (e.pointerType === 'mouse' && e.button !== 0) return;
+        startX = e.clientX;
         startY = e.clientY;
         ptrId = e.pointerId;
         moved = false;
+        axisLocked = null;
+        try { zone.setPointerCapture(e.pointerId); } catch (_) {}
     });
 
     zone.addEventListener('pointermove', (e) => {
         if (e.pointerId !== ptrId) return;
-        if (Math.abs(e.clientY - startY) > 10) moved = true;
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+        if (!moved && (Math.abs(dx) > 6 || Math.abs(dy) > 6)) {
+            moved = true;
+            axisLocked = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
+            if (axisLocked === 'x') activateCarousel();
+        }
+        if (axisLocked === 'x' && dragWrap) {
+            setTranslate(dx, 0);
+        }
     });
 
     zone.addEventListener('pointerup', (e) => {
         if (e.pointerId !== ptrId) return;
+        const dx = e.clientX - startX;
         const dy = e.clientY - startY;
         ptrId = null;
 
-        if (!moved || Math.abs(dy) < 30) return;
+        if (!moved) return;
 
-        let switched = false;
-        if (state.mode === 'week' && dy > 30) {
-            state.mode = 'month';
-            state.monthAnchor = startOfMonth(state.selected);
-            switched = true;
-        } else if (state.mode === 'month' && dy < -30) {
-            state.mode = 'week';
-            state.weekStart = startOfWeekMonday(state.selected);
-            switched = true;
+        const horizontal = axisLocked === 'x';
+
+        if (horizontal && dragWrap) {
+            if (Math.abs(dx) < 40) {
+                setTranslate(0, ANIMATION_MS);
+                setTimeout(clearCarousel, ANIMATION_MS + 20);
+                return;
+            }
+            suppressClickUntil = performance.now() + 500;
+            animatingNav = true;
+            const targetX = dx > 0 ? wrapWidth : -wrapWidth;
+            setTranslate(targetX, ANIMATION_MS);
+            setTimeout(() => {
+                if (state.mode === 'week') {
+                    state.weekStart = addWeeks(state.weekStart, dx > 0 ? -1 : 1);
+                    if (!weekContains(state.weekStart, state.selected)) {
+                        state.selected = new Date(state.weekStart);
+                    }
+                } else {
+                    state.monthAnchor = addMonths(state.monthAnchor, dx > 0 ? -1 : 1);
+                    if (!sameMonth(state.monthAnchor, state.selected)) {
+                        state.selected = startOfMonth(state.monthAnchor);
+                    }
+                }
+                clearCarousel();
+                rerender();
+                animatingNav = false;
+            }, ANIMATION_MS);
+            return;
         }
 
-        if (switched) {
-            zone.addEventListener('click', (ev) => {
-                ev.stopPropagation();
-                ev.preventDefault();
-            }, { capture: true, once: true });
-            rerender();
+        if (!horizontal && Math.abs(dy) >= 30) {
+            let triggered = false;
+            if (state.mode === 'week' && dy > 0) {
+                state.mode = 'month';
+                state.monthAnchor = startOfMonth(state.selected);
+                triggered = true;
+            } else if (state.mode === 'month' && dy < 0) {
+                state.mode = 'week';
+                state.weekStart = startOfWeekMonday(state.selected);
+                triggered = true;
+            }
+            if (triggered) {
+                suppressClickUntil = performance.now() + 350;
+                rerender();
+            }
         }
     });
 
+    zone.addEventListener('click', (ev) => {
+        if (performance.now() < suppressClickUntil) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            suppressClickUntil = 0;
+        }
+    }, { capture: true });
+
     zone.addEventListener('pointercancel', () => {
         ptrId = null;
         moved = false;
+        if (dragWrap) {
+            setTranslate(0, ANIMATION_MS);
+            setTimeout(clearCarousel, ANIMATION_MS + 20);
+        }
     });
 }
 
@@ -1181,36 +1342,6 @@ export function setupMealPlanner() {
         rerender();
     });
 
-    document.getElementById('cal-prev')?.addEventListener('click', () => {
-        if (state.mode === 'week') {
-            state.weekStart = addWeeks(state.weekStart, -1);
-            if (!weekContains(state.weekStart, state.selected)) {
-                state.selected = new Date(state.weekStart);
-            }
-        } else {
-            state.monthAnchor = addMonths(state.monthAnchor, -1);
-            if (!sameMonth(state.monthAnchor, state.selected)) {
-                state.selected = startOfMonth(state.monthAnchor);
-            }
-        }
-        rerender();
-    });
-
-    document.getElementById('cal-next')?.addEventListener('click', () => {
-        if (state.mode === 'week') {
-            state.weekStart = addWeeks(state.weekStart, 1);
-            if (!weekContains(state.weekStart, state.selected)) {
-                state.selected = new Date(state.weekStart);
-            }
-        } else {
-            state.monthAnchor = addMonths(state.monthAnchor, 1);
-            if (!sameMonth(state.monthAnchor, state.selected)) {
-                state.selected = startOfMonth(state.monthAnchor);
-            }
-        }
-        rerender();
-    });
-
     document.getElementById('cal-go-today')?.addEventListener('click', () => {
         const today = startOfDay(new Date());
         state.selected = today;