Unify calendar code

js/views/MealPlanner.js

@@ -1,14 +1,10 @@
 import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=9';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import {
-    addMonths,
-    addWeeks,
     sameDay,
-    sameMonth,
     startOfDay,
     startOfMonth,
     startOfWeekMonday,
-    weekContains,
 } from '../services/dateUtils.js';
 import {
     computeEntryNutrition,
@@ -26,17 +22,18 @@ import {
     savePlans,
 } from '../services/planStore.js?v=2';
 import {
-    CALENDAR_HANDLE_CLASS,
     CALENDAR_MONTHS_SHORT,
+    bindCollapsibleCalendarSwipeGesture,
     bindCalendarDayClicks,
+    createCollapsibleCalendarHTML,
     createCalendarTopbarHTML,
-    createCalendarWeekdayHeaderHTML,
+    formatCalendarPeriodLabel,
     isCalendarOnToday,
-    renderCalendarGrid,
     renderCollapsibleCalendar,
     syncCalendarTodayButton,
     syncCollapsibleCalendarMode,
-} from '../ui/mealCalendar.js?v=14';
+    syncCollapsibleCalendarToggleIcon,
+} from '../ui/mealCalendar.js?v=15';
 import {
     filterRecipesByQuery,
     renderRecipeGrid,
@@ -67,6 +64,9 @@ function syncTodayButton(mode, weekStart, monthAnchor, selected) {
         document.getElementById('cal-go-today'),
         isCalendarOnToday(mode, weekStart, monthAnchor, selected),
         selected,
+        {
+            labelText: formatCalendarPeriodLabel(mode, weekStart, monthAnchor),
+        },
     );
 }
 
@@ -81,19 +81,7 @@ export function getMealPlannerHTML() {
         wrapperClass: 'flex shrink-0 items-center justify-end',
     })}
             </div>
-            <div id="calendar-swipe-zone" class="overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]" style="touch-action: none">
-                <div id="calendar-week-wrap" class="px-3 overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]" style="overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.75rem">
-                    ${createCalendarWeekdayHeaderHTML()}
-                    <div id="calendar-week-grid" class="grid grid-cols-7 gap-1.5 max-w-full overflow-x-hidden"></div>
-                </div>
-                <div id="calendar-month-wrap" class="px-3 bg-[rgb(var(--app-bg-rgb))]" style="overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 0">
-                    ${createCalendarWeekdayHeaderHTML()}
-                    <div id="calendar-month-grid" class="grid grid-cols-7 gap-1.5"></div>
-                </div>
-                <button id="calendar-mode-toggle" type="button" class="w-full flex items-center justify-center py-1 pb-2 pt-0.5 text-[rgb(var(--text-faint-rgb))] hover:text-[rgb(var(--text-body-soft-rgb))] transition-colors" aria-label="Przełącz widok kalendarza">
-                    <i id="calendar-handle-icon" class="fas fa-chevron-down text-[10px]"></i>
-                </button>
-            </div>
+            ${createCollapsibleCalendarHTML({ idPrefix: 'calendar' })}
         </div>
 
         <div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-24 bg-[rgb(var(--app-bg-rgb))]">
@@ -192,223 +180,7 @@ function syncModeToggle(mode) {
         weekWrapEl: document.getElementById('calendar-week-wrap'),
         monthWrapEl: document.getElementById('calendar-month-wrap'),
     });
-    const icon = document.getElementById('calendar-handle-icon');
-    if (icon) icon.className = mode === 'month' ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
-}
-
-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 || 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;
-        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) return;
-
-        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 (!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);
-        }
-    });
+    syncCollapsibleCalendarToggleIcon(document.getElementById('calendar-handle-icon'), mode);
 }
 
 function showPlannerToast(message) {
@@ -1291,27 +1063,29 @@ export function setupMealPlanner() {
         maxMinutes: PICKER_FILTER_MAX_MINUTES,
     };
 
+    const resolveCalendarDayState = (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 rerender = () => {
         syncModeToggle(state.mode);
         syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
-        const today = startOfDay(new Date());
         renderCollapsibleCalendar({
             weekGridEl: weekGrid,
             monthGridEl: monthGrid,
             weekAnchorDate: state.weekStart,
             monthAnchorDate: state.monthAnchor,
             selectedDate: state.selected,
-            resolveDayState: (day, meta) => {
-                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),
-                };
-            },
+            resolveDayState: resolveCalendarDayState,
         });
         renderDayContent(state, persist);
     };
@@ -1559,7 +1333,30 @@ export function setupMealPlanner() {
         rerender();
     };
 
-    bindCalendarSwipeGesture(state, rerender);
+    bindCollapsibleCalendarSwipeGesture({
+        zoneEl: document.getElementById('calendar-swipe-zone'),
+        weekWrapEl: document.getElementById('calendar-week-wrap'),
+        monthWrapEl: document.getElementById('calendar-month-wrap'),
+        getMode: () => state.mode,
+        setMode: (mode) => {
+            state.mode = mode;
+        },
+        getWeekAnchor: () => state.weekStart,
+        setWeekAnchor: (date) => {
+            state.weekStart = startOfWeekMonday(date);
+        },
+        getMonthAnchor: () => state.monthAnchor,
+        setMonthAnchor: (date) => {
+            state.monthAnchor = startOfMonth(date);
+        },
+        getSelectedDate: () => state.selected,
+        setSelectedDate: (date) => {
+            state.selected = startOfDay(date);
+        },
+        rerender,
+        resolveDayState: resolveCalendarDayState,
+        selectOnNavigateOutside: false,
+    });
 
     document.getElementById('calendar-mode-toggle')?.addEventListener('click', () => {
         if (state.mode === 'week') {