import { addDays, startOfMonth, startOfWeekMonday } from '../services/dateUtils.js';
const DEFAULT_WEEKDAYS = ['pn', 'wt', 'śr', 'cz', 'pt', 'sb', 'nd'];
const DEFAULT_MONTHS_LONG = [
'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień',
];
const DEFAULT_THEME = {
selectedBg: 'rgb(var(--card-rgb))',
selectedBorder: 'rgb(var(--border-input-rgb))',
selectedText: 'rgb(var(--text-emphasis-rgb))',
selectedDot: 'rgb(var(--text-emphasis-rgb))',
bg: 'rgb(var(--app-bg-rgb))',
border: 'rgb(var(--card-raised-rgb))',
text: 'rgb(var(--text-body-soft-rgb))',
dimmedBg: 'transparent',
dimText: 'rgb(var(--text-faint-rgb))',
dimOpacity: 0.58,
dot: 'rgb(var(--text-faint-rgb))',
};
function dateKeyLocal(date) {
const y = date.getFullYear();
const m = String(date.getMonth() + 1).padStart(2, '0');
const d = String(date.getDate()).padStart(2, '0');
return `${y}-${m}-${d}`;
}
function keyToDate(key) {
return new Date(`${key}T00:00:00`);
}
function normalizeMonth(date) {
return startOfMonth(date instanceof Date ? date : new Date());
}
function monthLabel(date, monthsLong) {
return `${monthsLong[date.getMonth()]} ${date.getFullYear()}`;
}
function dayRange(aKey, bKey) {
const a = keyToDate(aKey);
const b = keyToDate(bKey);
const [from, to] = a <= b ? [a, b] : [b, a];
const out = [];
for (let d = new Date(from); d <= to; d = addDays(d, 1)) out.push(dateKeyLocal(d));
return out;
}
export function createSwipePopoverCalendarHTML({
idPrefix,
weekdays = DEFAULT_WEEKDAYS,
monthLabelTextClass = 'text-[10px] font-semibold leading-none tabular-nums whitespace-nowrap',
}) {
const weekdayHeader = `
${weekdays.map((d) => `
${d}
`).join('')}
`;
const gripRight = `
`;
return `
${weekdayHeader}
${gripLeft}
${gripRight}
${weekdayHeader}
${gripLeft}
${gripRight}
${weekdayHeader}
${gripLeft}
${gripRight}
`;
}
export function initSwipePopoverCalendar({
idPrefix,
selectionMode = 'single',
monthsLong = DEFAULT_MONTHS_LONG,
theme = DEFAULT_THEME,
getMonthAnchor,
setMonthAnchor,
canNavigateToMonth,
getSelectionKeys,
onSelectionCommit,
resolveDayState,
panelHandlePx = null,
panelHandleRatio = 0.045,
panelHandleMin = 10,
panelHandleMax = 16,
}) {
const monthLabelEl = document.getElementById(`${idPrefix}-month-label`);
const gridEl = document.getElementById(`${idPrefix}-grid`);
const prevGridEl = document.getElementById(`${idPrefix}-prev-grid`);
const nextGridEl = document.getElementById(`${idPrefix}-next-grid`);
const track = document.getElementById(`${idPrefix}-track`);
const viewport = document.getElementById(`${idPrefix}-viewport`);
if (!gridEl || !track || !viewport) {
return {
render: () => {},
reapplyLayout: () => {},
resetTrackPosition: () => {},
};
}
const MOVE_THRESHOLD = 6;
const SWIPE_THRESHOLD = 40;
const ANIMATION_MS = 260;
let viewportWidth = 0;
let panelWidth = 0;
let panelHandle = 0;
let dragHandleWidth = 0;
let restOffset = 0;
let animatingNav = false;
const panels = Array.from(track.querySelectorAll('.swc-panel'));
const syncGripVisibility = (showAdjacent = false) => {
panels.forEach((panel) => {
const isCurrent = panel.dataset.panel === 'current';
panel.querySelectorAll('[data-swc-grip]').forEach((grip) => {
grip.style.opacity = (isCurrent || showAdjacent) ? '0.66' : '0';
});
});
};
const applyLayout = () => {
const vw = viewport.clientWidth || viewport.getBoundingClientRect().width;
if (!vw) return;
viewportWidth = vw;
const computedHandle = panelHandlePx == null
? Math.round(vw * panelHandleRatio)
: panelHandlePx;
panelHandle = Math.max(panelHandleMin, Math.min(panelHandleMax, computedHandle));
dragHandleWidth = panelHandle;
panelWidth = vw;
restOffset = -panelWidth;
panels.forEach((panel) => {
panel.style.width = `${panelWidth}px`;
panel.style.boxSizing = 'border-box';
panel.style.paddingLeft = `${panelHandle}px`;
panel.style.paddingRight = `${panelHandle}px`;
});
track.style.transition = 'none';
track.style.transform = `translate3d(${restOffset}px, 0, 0)`;
syncGripVisibility(false);
};
const resetTrackPosition = () => {
track.style.transition = 'none';
track.style.transform = `translate3d(${restOffset}px, 0, 0)`;
syncGripVisibility(false);
};
const setDragTranslate = (dx, ms) => {
track.style.transition = ms ? `transform ${ms}ms ease` : 'none';
track.style.transform = `translate3d(${restOffset + dx}px, 0, 0)`;
};
const getNavigationTarget = (monthDelta) => {
const anchor = normalizeMonth(getMonthAnchor());
return startOfMonth(new Date(anchor.getFullYear(), anchor.getMonth() + monthDelta, 1));
};
const canNavigate = (monthDelta) => {
if (typeof canNavigateToMonth !== 'function') return true;
const anchor = normalizeMonth(getMonthAnchor());
const target = getNavigationTarget(monthDelta);
return canNavigateToMonth(target, { currentMonth: anchor, monthDelta }) !== false;
};
const getAllowedDragDx = (dx) => {
if (dx === 0) return 0;
return canNavigate(dx > 0 ? -1 : 1) ? dx : 0;
};
const getSelectedSet = (previewSelection = null) => {
const raw = previewSelection ?? getSelectionKeys();
if (Array.isArray(raw)) return new Set(raw);
if (typeof raw === 'string' && raw) return new Set([raw]);
return new Set();
};
const renderMonthGrid = (targetGrid, monthAnchor, selectedSet) => {
if (!targetGrid) return;
const first = startOfMonth(monthAnchor);
const gridStart = startOfWeekMonday(first);
const cells = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
targetGrid.innerHTML = cells.map((day) => {
const dk = dateKeyLocal(day);
const inCurrentMonth = day.getMonth() === first.getMonth();
const isSelected = selectedSet.has(dk);
const resolved = (typeof resolveDayState === 'function'
? resolveDayState(day, { inCurrentMonth, isSelected })
: {}) || {};
const disabled = !!resolved.disabled;
const dimmed = !!resolved.dimmed;
const showDot = !!resolved.showDot;
let bg;
let borderColor;
let text;
let borderClass = 'border';
if (isSelected) {
bg = theme.selectedBg;
borderColor = theme.selectedBorder;
text = theme.selectedText;
} else if (dimmed) {
bg = theme.dimmedBg;
borderColor = 'transparent';
text = theme.dimText;
borderClass = 'border-0';
} else {
bg = theme.bg;
borderColor = theme.border;
text = theme.text;
}
const opacity = dimmed && !isSelected ? String(theme.dimOpacity ?? 0.58) : '1';
const dotColor = isSelected ? theme.selectedDot : theme.dot;
const tag = disabled ? 'div' : 'button';
const attrs = disabled ? '' : `type="button" data-dk="${dk}"`;
const dayClass = disabled ? '' : ' swc-day';
return `
<${tag} ${attrs}
class="mx-auto flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full ${borderClass}${dayClass} text-xs font-medium leading-tight overflow-hidden"
style="background:${bg}; border-color:${borderColor}; color:${text}; opacity:${opacity}; touch-action:none;">
${day.getDate()}
${showDot ? `` : ''}
`;
}).join('');
};
const render = (previewSelection = null) => {
const anchor = normalizeMonth(getMonthAnchor());
const selectedSet = getSelectedSet(previewSelection);
if (monthLabelEl) monthLabelEl.textContent = monthLabel(anchor, monthsLong);
renderMonthGrid(gridEl, anchor, selectedSet);
renderMonthGrid(prevGridEl, new Date(anchor.getFullYear(), anchor.getMonth() - 1, 1), selectedSet);
renderMonthGrid(nextGridEl, new Date(anchor.getFullYear(), anchor.getMonth() + 1, 1), selectedSet);
applyLayout();
};
const commitNavigation = (monthDelta) => {
if (!canNavigate(monthDelta)) {
setDragTranslate(0, ANIMATION_MS);
setTimeout(() => syncGripVisibility(false), ANIMATION_MS + 20);
return;
}
animatingNav = true;
const targetDx = monthDelta < 0 ? panelWidth : -panelWidth;
setDragTranslate(targetDx, ANIMATION_MS);
setTimeout(() => {
setMonthAnchor(getNavigationTarget(monthDelta));
render();
resetTrackPosition();
animatingNav = false;
}, ANIMATION_MS);
};
if (selectionMode === 'range') {
let dragStart = null;
let dragCurrent = null;
let dragging = false;
gridEl.addEventListener('pointerdown', (e) => {
if (animatingNav) return;
const btn = e.target.closest('.swc-day');
if (!btn) return;
e.stopPropagation();
dragStart = btn.dataset.dk;
dragCurrent = btn.dataset.dk;
dragging = true;
gridEl.setPointerCapture(e.pointerId);
render([dragStart]);
});
gridEl.addEventListener('pointermove', (e) => {
if (!dragging || animatingNav) return;
e.preventDefault();
const el = document.elementFromPoint(e.clientX, e.clientY);
const btn = el?.closest('.swc-day');
if (btn?.dataset.dk && btn.dataset.dk !== dragCurrent) {
dragCurrent = btn.dataset.dk;
render(dayRange(dragStart, dragCurrent));
}
});
gridEl.addEventListener('pointerup', () => {
if (!dragging) return;
dragging = false;
const range = dayRange(dragStart, dragCurrent);
dragStart = null;
dragCurrent = null;
if (typeof onSelectionCommit === 'function') onSelectionCommit(range);
render();
});
gridEl.addEventListener('pointercancel', () => {
dragging = false;
dragStart = null;
dragCurrent = null;
render();
});
} else {
gridEl.addEventListener('click', (e) => {
const btn = e.target.closest('.swc-day');
if (!btn) return;
if (typeof onSelectionCommit === 'function') onSelectionCommit(btn.dataset.dk);
render();
});
}
let ptrId = null;
let startX = 0;
let startY = 0;
let moved = false;
let axis = null;
viewport.addEventListener('pointerdown', (e) => {
if (animatingNav || ptrId !== null) return;
if (e.pointerType === 'mouse' && e.button !== 0) return;
if (!panelWidth) applyLayout();
const rect = viewport.getBoundingClientRect();
const localX = e.clientX - rect.left;
const inLeft = localX <= dragHandleWidth;
const inRight = localX >= (viewportWidth - dragHandleWidth);
if (!inLeft && !inRight) return;
ptrId = e.pointerId;
startX = e.clientX;
startY = e.clientY;
moved = false;
axis = null;
try { viewport.setPointerCapture(e.pointerId); } catch (_) {}
});
viewport.addEventListener('pointermove', (e) => {
if (e.pointerId !== ptrId || animatingNav) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
if (!moved && (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD)) {
moved = true;
axis = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
if (axis === 'x') syncGripVisibility(true);
}
if (axis === 'x') setDragTranslate(getAllowedDragDx(dx), 0);
});
const endGesture = (e) => {
if (e && e.pointerId !== ptrId) return;
ptrId = null;
if (!moved || axis !== 'x') return;
const dx = e ? e.clientX - startX : 0;
const monthDelta = dx > 0 ? -1 : 1;
if (Math.abs(dx) >= SWIPE_THRESHOLD && canNavigate(monthDelta)) commitNavigation(monthDelta);
else {
setDragTranslate(0, ANIMATION_MS);
setTimeout(() => syncGripVisibility(false), ANIMATION_MS + 20);
}
moved = false;
axis = null;
};
viewport.addEventListener('pointerup', endGesture);
viewport.addEventListener('pointercancel', endGesture);
window.addEventListener('resize', applyLayout);
return { render, reapplyLayout: applyLayout, resetTrackPosition };
}