842 lines
31 KiB
JavaScript
842 lines
31 KiB
JavaScript
import {
|
||
addDays,
|
||
addMonths,
|
||
addWeeks,
|
||
sameDay,
|
||
sameMonth,
|
||
startOfDay,
|
||
startOfMonth,
|
||
startOfWeekMonday,
|
||
weekContains,
|
||
} from '../services/dateUtils.js';
|
||
|
||
export const CALENDAR_MONTHS_LONG = [
|
||
'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
|
||
'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień',
|
||
];
|
||
|
||
export const CALENDAR_MONTHS_SHORT = [
|
||
'sty', 'lut', 'mar', 'kwi', 'maj', 'cze',
|
||
'lip', 'sie', 'wrz', 'paź', 'lis', 'gru',
|
||
];
|
||
|
||
export const CALENDAR_WEEKDAYS_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'so', 'nd'];
|
||
export const CALENDAR_DAY_ATTR = 'data-calendar-day';
|
||
export const CALENDAR_HANDLE_CLASS = 'block h-1 w-10 rounded-full bg-[rgb(var(--text-subdued-rgb))]/75';
|
||
|
||
function escapeAttrValue(value) {
|
||
return String(value)
|
||
.replace(/&/g, '&')
|
||
.replace(/"/g, '"')
|
||
.replace(/</g, '<');
|
||
}
|
||
|
||
function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}, options = {}) {
|
||
const { mode, selectedDate } = meta;
|
||
const isSelected = typeof meta.isSelected === 'boolean'
|
||
? meta.isSelected
|
||
: !!(selectedDate && sameDay(day, selectedDate));
|
||
const showIndicator = !!(dayState.showIndicator || dayState.showDot);
|
||
const isDisabled = !!dayState.disabled;
|
||
const isDimmed = !!dayState.dimmed && !isSelected;
|
||
const defaultBg = 'rgb(var(--card-soft-rgb))';
|
||
const defaultBorder = 'rgb(var(--card-strong-rgb))';
|
||
const defaultText = 'rgb(var(--text-body-soft-rgb))';
|
||
|
||
let bg;
|
||
let borderColor;
|
||
let text;
|
||
let borderClass = theme.borderClass || 'border';
|
||
let shadow = theme.shadow || 'none';
|
||
|
||
if (isSelected) {
|
||
const keepDimmedBg = !!dayState.dimmed
|
||
&& theme.selectedBg == null
|
||
&& theme.selectedUsesDimmedBg !== false;
|
||
bg = theme.selectedBg
|
||
|| (keepDimmedBg ? (theme.dimmedBg ?? 'transparent') : null)
|
||
|| theme.bg
|
||
|| 'rgb(var(--card-rgb))';
|
||
borderColor = theme.selectedBorder || 'rgb(var(--border-input-rgb))';
|
||
text = theme.selectedText || 'rgb(var(--text-emphasis-rgb))';
|
||
shadow = theme.selectedShadow || shadow;
|
||
borderClass = theme.selectedBorderClass || 'border';
|
||
} else if (isDimmed) {
|
||
bg = theme.dimmedBg ?? 'transparent';
|
||
text = theme.dimText || 'rgb(var(--text-faint-rgb))';
|
||
borderClass = theme.dimmedBorderClass || 'border-0';
|
||
} else {
|
||
bg = theme.bg || defaultBg;
|
||
borderColor = theme.border || defaultBorder;
|
||
text = theme.text || defaultText;
|
||
}
|
||
|
||
const dot = isSelected ? (theme.selectedDot || 'rgb(var(--text-emphasis-rgb))') : (theme.dot || 'rgb(var(--text-faint-rgb))');
|
||
const opacity = isDimmed ? String(theme.dimOpacity ?? 0.72) : '1';
|
||
const borderStyle = borderColor ? `border-color:${borderColor};` : 'border:none;';
|
||
const extraClass = !isDisabled && options.dayClassName ? ` ${options.dayClassName}` : '';
|
||
const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full ${borderClass}${extraClass} text-xs font-medium transition-colors leading-tight overflow-hidden`;
|
||
const innerClass = mode === 'month'
|
||
? 'relative flex h-full w-full flex-col items-center justify-center'
|
||
: 'relative flex h-full w-full items-center justify-center';
|
||
const dotBottom = mode === 'month' ? '0.24rem' : '0.2rem';
|
||
const tagName = isDisabled ? 'div' : 'button';
|
||
const dayAttrValue = typeof options.getDayAttrValue === 'function'
|
||
? options.getDayAttrValue(day, meta)
|
||
: day.getTime();
|
||
const buttonAttrs = isDisabled ? '' : ` type="button" ${dayAttr}="${escapeAttrValue(dayAttrValue)}"`;
|
||
const dayStyle = options.dayStyle || '';
|
||
|
||
return `
|
||
<${tagName}${buttonAttrs}
|
||
class="${outerClass}"
|
||
style="background:${bg};${borderStyle}color:${text};opacity:${opacity};box-shadow:${shadow};${dayStyle}">
|
||
<span class="${innerClass}">
|
||
<span class="text-[13px] font-semibold leading-none ${showIndicator ? '-translate-y-[0.18rem]' : ''}">${day.getDate()}</span>
|
||
${showIndicator
|
||
? `<span class="absolute left-1/2 w-1 h-1 -translate-x-1/2 rounded-full opacity-75" style="bottom:${dotBottom};background:${dot};" aria-hidden="true"></span>`
|
||
: ''}
|
||
</span>
|
||
</${tagName}>
|
||
`;
|
||
}
|
||
|
||
export function getCalendarMonthCells(monthAnchor, { fixedWeekCount = null } = {}) {
|
||
const first = startOfMonth(monthAnchor);
|
||
const startGrid = startOfWeekMonday(first);
|
||
const cells = [];
|
||
const maxCells = fixedWeekCount ? fixedWeekCount * 7 : 42;
|
||
for (let i = 0; i < maxCells; i++) cells.push(addDays(startGrid, i));
|
||
while (!fixedWeekCount && cells.length > 35 && cells.slice(-7).every((day) => day.getMonth() !== first.getMonth())) {
|
||
cells.splice(-7);
|
||
}
|
||
return { cells, month: first.getMonth() };
|
||
}
|
||
|
||
function getDayState(day, meta, resolveDayState) {
|
||
if (typeof resolveDayState !== 'function') {
|
||
return {
|
||
disabled: false,
|
||
dimmed: meta.mode === 'month' && !meta.inCurrentMonth,
|
||
showIndicator: false,
|
||
};
|
||
}
|
||
|
||
const resolved = resolveDayState(day, meta) || {};
|
||
return {
|
||
disabled: !!resolved.disabled,
|
||
dimmed: !!resolved.dimmed,
|
||
showIndicator: !!(resolved.showIndicator || resolved.showDot),
|
||
};
|
||
}
|
||
|
||
export function createCalendarWeekdayHeaderHTML(labels = CALENDAR_WEEKDAYS_SHORT, {
|
||
wrapperClass = 'grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-gray-400 uppercase tracking-wide mb-1 leading-none',
|
||
} = {}) {
|
||
return `
|
||
<div class="${wrapperClass}">
|
||
${labels.map((label) => `<div>${label}</div>`).join('')}
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
export function createCalendarTopbarHTML({
|
||
todayId,
|
||
wrapperClass = 'px-4 pt-4 pb-3 flex items-center justify-end',
|
||
controlsStyle = 'background:transparent;border-color:rgb(var(--card-strong-rgb));',
|
||
todayButtonActiveClass = 'h-full shrink-0 inline-flex min-w-[7.25rem] max-w-[12.5rem] items-center justify-center rounded-full bg-transparent px-3 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap',
|
||
todayButtonDimClass = 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-3 text-[10px] font-semibold leading-none text-[rgb(var(--text-faint-rgb))] cursor-default',
|
||
}) {
|
||
return `
|
||
<div class="${wrapperClass}">
|
||
<div class="flex h-[2.05rem] min-w-0 max-w-[min(100%,20rem)] items-center justify-center rounded-full border" style="${controlsStyle}">
|
||
<button type="button" id="${todayId}"
|
||
class="${todayButtonActiveClass}"
|
||
data-cal-active-class="${todayButtonActiveClass}"
|
||
data-cal-dim-class="${todayButtonDimClass}">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
export function createCollapsibleCalendarHTML({
|
||
idPrefix = 'calendar',
|
||
swipeZoneId = `${idPrefix}-swipe-zone`,
|
||
weekWrapId = `${idPrefix}-week-wrap`,
|
||
weekGridId = `${idPrefix}-week-grid`,
|
||
monthWrapId = `${idPrefix}-month-wrap`,
|
||
monthGridId = `${idPrefix}-month-grid`,
|
||
toggleId = `${idPrefix}-mode-toggle`,
|
||
iconId = `${idPrefix}-handle-icon`,
|
||
wrapperClass = 'overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]',
|
||
wrapperStyle = 'touch-action: none',
|
||
weekWrapClass = 'px-3 overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]',
|
||
weekWrapStyle = 'overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.75rem',
|
||
monthWrapClass = 'px-3 bg-[rgb(var(--app-bg-rgb))]',
|
||
monthWrapStyle = 'overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 0',
|
||
weekGridClass = 'grid grid-cols-7 gap-1.5 max-w-full overflow-x-hidden',
|
||
monthGridClass = 'grid grid-cols-7 gap-1.5',
|
||
toggleClass = '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',
|
||
toggleLabel = 'Przełącz widok kalendarza',
|
||
weekdayLabels = CALENDAR_WEEKDAYS_SHORT,
|
||
weekdayHeaderOptions = {},
|
||
} = {}) {
|
||
return `
|
||
<div id="${swipeZoneId}" class="${wrapperClass}" style="${wrapperStyle}">
|
||
<div id="${weekWrapId}" class="${weekWrapClass}" style="${weekWrapStyle}">
|
||
${createCalendarWeekdayHeaderHTML(weekdayLabels, weekdayHeaderOptions)}
|
||
<div id="${weekGridId}" class="${weekGridClass}"></div>
|
||
</div>
|
||
<div id="${monthWrapId}" class="${monthWrapClass}" style="${monthWrapStyle}">
|
||
${createCalendarWeekdayHeaderHTML(weekdayLabels, weekdayHeaderOptions)}
|
||
<div id="${monthGridId}" class="${monthGridClass}"></div>
|
||
</div>
|
||
<button id="${toggleId}" type="button" class="${toggleClass}" aria-label="${toggleLabel}">
|
||
<i id="${iconId}" class="fas fa-chevron-down text-[10px]"></i>
|
||
</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
export function formatCalendarMonthYear(date) {
|
||
return `${CALENDAR_MONTHS_LONG[date.getMonth()]} ${date.getFullYear()}`;
|
||
}
|
||
|
||
export function formatCalendarSelectedDate(date) {
|
||
return `${date.getDate()} ${CALENDAR_MONTHS_SHORT[date.getMonth()]} ${date.getFullYear()}`;
|
||
}
|
||
|
||
export function formatCalendarWeekRange(weekAnchorDate) {
|
||
const start = startOfWeekMonday(weekAnchorDate);
|
||
const end = addDays(start, 6);
|
||
const sameYear = start.getFullYear() === end.getFullYear();
|
||
const sameMonth = sameYear && start.getMonth() === end.getMonth();
|
||
|
||
if (sameMonth) {
|
||
return `${start.getDate()}–${end.getDate()} ${CALENDAR_MONTHS_SHORT[end.getMonth()]} ${end.getFullYear()}`;
|
||
}
|
||
if (sameYear) {
|
||
return `${start.getDate()} ${CALENDAR_MONTHS_SHORT[start.getMonth()]} – ${end.getDate()} ${CALENDAR_MONTHS_SHORT[end.getMonth()]} ${end.getFullYear()}`;
|
||
}
|
||
return `${start.getDate()} ${CALENDAR_MONTHS_SHORT[start.getMonth()]} ${start.getFullYear()} – ${end.getDate()} ${CALENDAR_MONTHS_SHORT[end.getMonth()]} ${end.getFullYear()}`;
|
||
}
|
||
|
||
export function formatCalendarPeriodLabel(mode, weekAnchorDate, monthAnchorDate) {
|
||
return mode === 'week'
|
||
? formatCalendarWeekRange(weekAnchorDate)
|
||
: formatCalendarMonthYear(monthAnchorDate);
|
||
}
|
||
|
||
export function isCalendarOnToday(mode, weekStart, monthAnchor, selectedDate) {
|
||
const today = startOfDay(new Date());
|
||
if (!sameDay(selectedDate, today)) return false;
|
||
if (mode === 'week') return weekContains(weekStart, today);
|
||
return startOfMonth(monthAnchor).getTime() === startOfMonth(today).getTime();
|
||
}
|
||
|
||
/**
|
||
* Środkowy przycisk pokazuje wybraną datę; działa jak „Dziś” (skok do bieżącego okresu).
|
||
* Styl pozostaje jak aktywny — bez wyciszania przy isOnToday.
|
||
*/
|
||
export function syncCalendarTodayButton(buttonEl, isOnToday, selectedDate, options = {}) {
|
||
if (!buttonEl) return;
|
||
const {
|
||
ariaLabelGo = 'Przejdź do dzisiejszego dnia',
|
||
ariaLabelCurrent = 'Widok jest ustawiony na bieżący okres',
|
||
labelText,
|
||
} = options;
|
||
const active = buttonEl.dataset.calActiveClass
|
||
|| 'h-full shrink-0 inline-flex min-w-[7.25rem] max-w-[12.5rem] items-center justify-center rounded-full bg-transparent px-3 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap';
|
||
if (labelText != null) {
|
||
buttonEl.textContent = labelText;
|
||
} else if (selectedDate != null) {
|
||
buttonEl.textContent = formatCalendarSelectedDate(selectedDate);
|
||
}
|
||
buttonEl.className = active;
|
||
buttonEl.removeAttribute('disabled');
|
||
buttonEl.setAttribute('aria-disabled', isOnToday ? 'true' : 'false');
|
||
buttonEl.setAttribute('aria-label', isOnToday ? ariaLabelCurrent : ariaLabelGo);
|
||
}
|
||
|
||
export function renderCalendarGrid({
|
||
gridEl,
|
||
mode,
|
||
anchorDate,
|
||
selectedDate,
|
||
isSelectedDate,
|
||
resolveDayState,
|
||
dayAttr = CALENDAR_DAY_ATTR,
|
||
getDayAttrValue,
|
||
dayClassName = '',
|
||
dayStyle = '',
|
||
fixedWeekCount = null,
|
||
theme,
|
||
}) {
|
||
if (!gridEl) return;
|
||
|
||
if (mode === 'week') {
|
||
const weekStart = startOfWeekMonday(anchorDate);
|
||
const cells = [];
|
||
for (let i = 0; i < 7; i++) {
|
||
const day = addDays(weekStart, i);
|
||
const selected = typeof isSelectedDate === 'function'
|
||
? !!isSelectedDate(day, { mode, selectedDate, inCurrentMonth: true })
|
||
: !!(selectedDate && sameDay(day, selectedDate));
|
||
const meta = {
|
||
mode,
|
||
selectedDate,
|
||
inCurrentMonth: true,
|
||
isSelected: selected,
|
||
};
|
||
cells.push(getCalendarDayHTML(
|
||
day,
|
||
meta,
|
||
getDayState(day, meta, resolveDayState),
|
||
dayAttr,
|
||
theme,
|
||
{ getDayAttrValue, dayClassName, dayStyle },
|
||
));
|
||
}
|
||
gridEl.innerHTML = cells.join('');
|
||
return;
|
||
}
|
||
|
||
const { cells, month } = getCalendarMonthCells(anchorDate, { fixedWeekCount });
|
||
gridEl.innerHTML = cells.map((day) => {
|
||
const inCurrentMonth = day.getMonth() === month;
|
||
const selected = typeof isSelectedDate === 'function'
|
||
? !!isSelectedDate(day, { mode, selectedDate, inCurrentMonth })
|
||
: !!(selectedDate && sameDay(day, selectedDate));
|
||
const meta = {
|
||
mode,
|
||
selectedDate,
|
||
inCurrentMonth,
|
||
isSelected: selected,
|
||
};
|
||
return getCalendarDayHTML(
|
||
day,
|
||
meta,
|
||
getDayState(day, meta, resolveDayState),
|
||
dayAttr,
|
||
theme,
|
||
{ getDayAttrValue, dayClassName, dayStyle },
|
||
);
|
||
}).join('');
|
||
}
|
||
|
||
export function renderCollapsibleCalendar({
|
||
weekGridEl,
|
||
monthGridEl,
|
||
weekAnchorDate,
|
||
monthAnchorDate,
|
||
selectedDate,
|
||
resolveDayState,
|
||
dayAttr = CALENDAR_DAY_ATTR,
|
||
theme,
|
||
}) {
|
||
renderCalendarGrid({
|
||
gridEl: weekGridEl,
|
||
mode: 'week',
|
||
anchorDate: weekAnchorDate,
|
||
selectedDate,
|
||
resolveDayState,
|
||
dayAttr,
|
||
theme,
|
||
});
|
||
renderCalendarGrid({
|
||
gridEl: monthGridEl,
|
||
mode: 'month',
|
||
anchorDate: monthAnchorDate,
|
||
selectedDate,
|
||
resolveDayState,
|
||
dayAttr,
|
||
theme,
|
||
});
|
||
}
|
||
|
||
export function syncCollapsibleCalendarMode({
|
||
mode,
|
||
weekWrapEl,
|
||
monthWrapEl,
|
||
handleEl,
|
||
activePaddingBottom = '0.75rem',
|
||
weekMaxHeight = '10rem',
|
||
monthMaxHeight = '17.25rem',
|
||
}) {
|
||
if (weekWrapEl) {
|
||
weekWrapEl.style.maxHeight = mode === 'week' ? weekMaxHeight : '0';
|
||
weekWrapEl.style.opacity = mode === 'week' ? '1' : '0';
|
||
weekWrapEl.style.paddingBottom = mode === 'week' ? activePaddingBottom : '0';
|
||
}
|
||
if (monthWrapEl) {
|
||
monthWrapEl.style.maxHeight = mode === 'month' ? monthMaxHeight : '0';
|
||
monthWrapEl.style.opacity = mode === 'month' ? '1' : '0';
|
||
monthWrapEl.style.paddingBottom = mode === 'month' ? activePaddingBottom : '0';
|
||
}
|
||
if (handleEl) handleEl.className = CALENDAR_HANDLE_CLASS;
|
||
}
|
||
|
||
export function syncCollapsibleCalendarToggleIcon(iconEl, mode) {
|
||
if (iconEl) iconEl.className = mode === 'month' ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
|
||
}
|
||
|
||
export function bindCollapsibleCalendarSwipeGesture({
|
||
zoneEl,
|
||
weekWrapEl,
|
||
monthWrapEl,
|
||
getMode,
|
||
setMode,
|
||
getWeekAnchor,
|
||
setWeekAnchor,
|
||
getMonthAnchor,
|
||
setMonthAnchor,
|
||
getSelectedDate,
|
||
setSelectedDate,
|
||
rerender,
|
||
resolveDayState,
|
||
dayAttr = CALENDAR_DAY_ATTR,
|
||
theme,
|
||
selectOnNavigateOutside = true,
|
||
enableVerticalModeSwipe = true,
|
||
threshold = 40,
|
||
animationMs = 260,
|
||
} = {}) {
|
||
if (!zoneEl) return () => {};
|
||
|
||
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 = () => (getMode?.() === 'week' ? weekWrapEl : monthWrapEl);
|
||
|
||
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((grid) => {
|
||
if (!grid.classList.contains('text-center')) ghostGridEl = grid;
|
||
});
|
||
if (ghostGridEl) {
|
||
renderCalendarGrid({
|
||
gridEl: ghostGridEl,
|
||
mode,
|
||
anchorDate,
|
||
selectedDate: getSelectedDate?.(),
|
||
resolveDayState,
|
||
dayAttr,
|
||
theme,
|
||
});
|
||
}
|
||
return ghost;
|
||
};
|
||
|
||
const activateCarousel = () => {
|
||
const mode = getMode?.() || 'week';
|
||
dragWrap = getActiveWrap();
|
||
if (!dragWrap) return;
|
||
wrapWidth = dragWrap.getBoundingClientRect().width || zoneEl.getBoundingClientRect().width;
|
||
if (wrapWidth <= 0) return;
|
||
prevWrapPosition = dragWrap.style.position;
|
||
prevWrapOverflow = dragWrap.style.overflow;
|
||
dragWrap.style.position = 'relative';
|
||
dragWrap.style.overflow = 'visible';
|
||
|
||
const prevAnchor = mode === 'week'
|
||
? addWeeks(getWeekAnchor?.() || new Date(), -1)
|
||
: addMonths(getMonthAnchor?.() || new Date(), -1);
|
||
const nextAnchor = mode === 'week'
|
||
? addWeeks(getWeekAnchor?.() || new Date(), 1)
|
||
: addMonths(getMonthAnchor?.() || new Date(), 1);
|
||
|
||
prevGhost = buildGhost(prevAnchor, mode);
|
||
nextGhost = buildGhost(nextAnchor, 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)`;
|
||
};
|
||
|
||
const onPointerDown = (event) => {
|
||
if (ptrId !== null || animatingNav) return;
|
||
if (event.pointerType === 'mouse' && event.button !== 0) return;
|
||
startX = event.clientX;
|
||
startY = event.clientY;
|
||
ptrId = event.pointerId;
|
||
moved = false;
|
||
axisLocked = null;
|
||
try { zoneEl.setPointerCapture(event.pointerId); } catch (_) {}
|
||
};
|
||
|
||
const onPointerMove = (event) => {
|
||
if (event.pointerId !== ptrId) return;
|
||
const dx = event.clientX - startX;
|
||
const dy = event.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);
|
||
}
|
||
};
|
||
|
||
const onPointerUp = (event) => {
|
||
if (event.pointerId !== ptrId) return;
|
||
const dx = event.clientX - startX;
|
||
const dy = event.clientY - startY;
|
||
ptrId = null;
|
||
|
||
if (!moved) return;
|
||
const horizontal = axisLocked === 'x';
|
||
|
||
if (horizontal && dragWrap) {
|
||
if (Math.abs(dx) < threshold) {
|
||
setTranslate(0, animationMs);
|
||
setTimeout(clearCarousel, animationMs + 20);
|
||
return;
|
||
}
|
||
|
||
suppressClickUntil = performance.now() + 500;
|
||
animatingNav = true;
|
||
const targetX = dx > 0 ? wrapWidth : -wrapWidth;
|
||
setTranslate(targetX, animationMs);
|
||
setTimeout(() => {
|
||
const mode = getMode?.() || 'week';
|
||
const sign = dx > 0 ? -1 : 1;
|
||
const selected = getSelectedDate?.();
|
||
if (mode === 'week') {
|
||
const nextWeek = addWeeks(getWeekAnchor?.() || selected || new Date(), sign);
|
||
setWeekAnchor?.(nextWeek);
|
||
if (selectOnNavigateOutside && selected && !weekContains(nextWeek, selected)) {
|
||
setSelectedDate?.(new Date(nextWeek));
|
||
}
|
||
} else {
|
||
const nextMonth = addMonths(getMonthAnchor?.() || selected || new Date(), sign);
|
||
setMonthAnchor?.(nextMonth);
|
||
if (selectOnNavigateOutside && selected && !sameMonth(nextMonth, selected)) {
|
||
setSelectedDate?.(startOfMonth(nextMonth));
|
||
}
|
||
}
|
||
clearCarousel();
|
||
rerender?.();
|
||
animatingNav = false;
|
||
}, animationMs);
|
||
return;
|
||
}
|
||
|
||
if (enableVerticalModeSwipe && !horizontal && Math.abs(dy) >= 30) {
|
||
const mode = getMode?.() || 'week';
|
||
const selected = getSelectedDate?.() || new Date();
|
||
let triggered = false;
|
||
if (mode === 'week' && dy > 0) {
|
||
setMode?.('month');
|
||
setMonthAnchor?.(startOfMonth(selected));
|
||
triggered = true;
|
||
} else if (mode === 'month' && dy < 0) {
|
||
setMode?.('week');
|
||
setWeekAnchor?.(startOfWeekMonday(selected));
|
||
triggered = true;
|
||
}
|
||
if (triggered) {
|
||
suppressClickUntil = performance.now() + 350;
|
||
rerender?.();
|
||
}
|
||
}
|
||
};
|
||
|
||
const onClickCapture = (event) => {
|
||
if (performance.now() < suppressClickUntil) {
|
||
event.stopPropagation();
|
||
event.preventDefault();
|
||
suppressClickUntil = 0;
|
||
}
|
||
};
|
||
|
||
const onPointerCancel = () => {
|
||
ptrId = null;
|
||
moved = false;
|
||
if (dragWrap) {
|
||
setTranslate(0, animationMs);
|
||
setTimeout(clearCarousel, animationMs + 20);
|
||
}
|
||
};
|
||
|
||
zoneEl.addEventListener('pointerdown', onPointerDown);
|
||
zoneEl.addEventListener('pointermove', onPointerMove);
|
||
zoneEl.addEventListener('pointerup', onPointerUp);
|
||
zoneEl.addEventListener('click', onClickCapture, { capture: true });
|
||
zoneEl.addEventListener('pointercancel', onPointerCancel);
|
||
|
||
return () => {
|
||
zoneEl.removeEventListener('pointerdown', onPointerDown);
|
||
zoneEl.removeEventListener('pointermove', onPointerMove);
|
||
zoneEl.removeEventListener('pointerup', onPointerUp);
|
||
zoneEl.removeEventListener('click', onClickCapture, { capture: true });
|
||
zoneEl.removeEventListener('pointercancel', onPointerCancel);
|
||
if (dragWrap) clearCarousel();
|
||
};
|
||
}
|
||
|
||
export function bindCalendarDayClicks(containerEl, onSelect, dayAttr = CALENDAR_DAY_ATTR) {
|
||
if (!containerEl || typeof onSelect !== 'function') return;
|
||
containerEl.addEventListener('click', (event) => {
|
||
const button = event.target.closest(`[${dayAttr}]`);
|
||
if (!button || !containerEl.contains(button)) return;
|
||
const ts = Number(button.getAttribute(dayAttr));
|
||
if (!Number.isFinite(ts)) return;
|
||
onSelect(new Date(ts), button, event);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Binds a carousel-style horizontal swipe on zoneEl. Swipe right → onPrev,
|
||
* swipe left → onNext. Pass `renderGhost(ghostGridEl, direction)` to render
|
||
* adjacent periods that appear alongside the zone during the gesture. The
|
||
* callback can return `false` to block that direction (ghost not added).
|
||
* Returns an unbind function.
|
||
*/
|
||
export function bindCalendarHorizontalSwipe(zoneEl, {
|
||
onPrev,
|
||
onNext,
|
||
renderGhost,
|
||
threshold = 40,
|
||
animationMs = 260,
|
||
} = {}) {
|
||
if (!zoneEl) return () => {};
|
||
|
||
let ptrId = null;
|
||
let startX = 0;
|
||
let startY = 0;
|
||
let moved = false;
|
||
let axisLocked = null;
|
||
let suppressClickUntil = 0;
|
||
let animatingNav = false;
|
||
|
||
let wrapWidth = 0;
|
||
let prevGhost = null;
|
||
let nextGhost = null;
|
||
let savedStyles = null;
|
||
let carouselActive = false;
|
||
|
||
const prevTouchAction = zoneEl.style.touchAction;
|
||
const prevUserSelect = zoneEl.style.userSelect;
|
||
zoneEl.style.touchAction = 'pan-y';
|
||
zoneEl.style.userSelect = 'none';
|
||
|
||
const buildGhost = (direction) => {
|
||
if (typeof renderGhost !== 'function') return null;
|
||
const ghost = zoneEl.cloneNode(false);
|
||
ghost.removeAttribute('id');
|
||
ghost.style.position = 'absolute';
|
||
ghost.style.top = '0';
|
||
ghost.style.width = '100%';
|
||
ghost.style.pointerEvents = 'none';
|
||
ghost.setAttribute('aria-hidden', 'true');
|
||
let ok = true;
|
||
try {
|
||
const res = renderGhost(ghost, direction);
|
||
if (res === false) ok = false;
|
||
} catch (_) { ok = false; }
|
||
return ok ? ghost : null;
|
||
};
|
||
|
||
const activateCarousel = () => {
|
||
if (typeof renderGhost !== 'function') return;
|
||
wrapWidth = zoneEl.getBoundingClientRect().width;
|
||
if (wrapWidth <= 0) return;
|
||
const parentEl = zoneEl.parentElement;
|
||
savedStyles = {
|
||
position: zoneEl.style.position,
|
||
overflow: zoneEl.style.overflow,
|
||
parentEl,
|
||
parentOverflow: parentEl ? parentEl.style.overflow : '',
|
||
};
|
||
zoneEl.style.position = 'relative';
|
||
zoneEl.style.overflow = 'visible';
|
||
if (parentEl) parentEl.style.overflow = 'hidden';
|
||
|
||
prevGhost = buildGhost('prev');
|
||
if (prevGhost) {
|
||
prevGhost.style.left = `-${wrapWidth}px`;
|
||
zoneEl.appendChild(prevGhost);
|
||
}
|
||
nextGhost = buildGhost('next');
|
||
if (nextGhost) {
|
||
nextGhost.style.left = `${wrapWidth}px`;
|
||
zoneEl.appendChild(nextGhost);
|
||
}
|
||
|
||
zoneEl.style.willChange = 'transform';
|
||
zoneEl.style.transition = 'none';
|
||
carouselActive = true;
|
||
};
|
||
|
||
const clearCarousel = () => {
|
||
if (prevGhost?.parentNode) prevGhost.parentNode.removeChild(prevGhost);
|
||
if (nextGhost?.parentNode) nextGhost.parentNode.removeChild(nextGhost);
|
||
prevGhost = null;
|
||
nextGhost = null;
|
||
if (savedStyles) {
|
||
zoneEl.style.position = savedStyles.position;
|
||
zoneEl.style.overflow = savedStyles.overflow;
|
||
if (savedStyles.parentEl) savedStyles.parentEl.style.overflow = savedStyles.parentOverflow;
|
||
savedStyles = null;
|
||
}
|
||
zoneEl.style.transition = '';
|
||
zoneEl.style.transform = '';
|
||
zoneEl.style.willChange = '';
|
||
carouselActive = false;
|
||
};
|
||
|
||
const setTranslate = (x, ms) => {
|
||
zoneEl.style.transition = ms ? `transform ${ms}ms ease` : 'none';
|
||
zoneEl.style.transform = `translate3d(${x}px, 0, 0)`;
|
||
};
|
||
|
||
const onDown = (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 { zoneEl.setPointerCapture(e.pointerId); } catch (_) {}
|
||
if (e.pointerType === 'mouse') e.preventDefault();
|
||
};
|
||
|
||
const onMove = (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' && carouselActive) {
|
||
let tx = dx;
|
||
if (dx > 0 && !prevGhost) tx = dx * 0.15;
|
||
if (dx < 0 && !nextGhost) tx = dx * 0.15;
|
||
setTranslate(tx, 0);
|
||
}
|
||
};
|
||
|
||
const onUp = (e) => {
|
||
if (e.pointerId !== ptrId) return;
|
||
const dx = e.clientX - startX;
|
||
ptrId = null;
|
||
|
||
if (!moved || axisLocked !== 'x' || !carouselActive) {
|
||
if (carouselActive) {
|
||
setTranslate(0, animationMs);
|
||
setTimeout(clearCarousel, animationMs + 20);
|
||
}
|
||
return;
|
||
}
|
||
|
||
const directionGhost = dx > 0 ? prevGhost : nextGhost;
|
||
const handler = dx > 0 ? onPrev : onNext;
|
||
const passes = Math.abs(dx) >= threshold
|
||
&& directionGhost
|
||
&& typeof handler === 'function';
|
||
|
||
if (!passes) {
|
||
setTranslate(0, animationMs);
|
||
setTimeout(clearCarousel, animationMs + 20);
|
||
return;
|
||
}
|
||
|
||
suppressClickUntil = performance.now() + 500;
|
||
animatingNav = true;
|
||
const targetX = dx > 0 ? wrapWidth : -wrapWidth;
|
||
setTranslate(targetX, animationMs);
|
||
setTimeout(() => {
|
||
clearCarousel();
|
||
handler();
|
||
animatingNav = false;
|
||
}, animationMs);
|
||
};
|
||
|
||
const onClickCapture = (ev) => {
|
||
if (performance.now() < suppressClickUntil) {
|
||
ev.stopPropagation();
|
||
ev.preventDefault();
|
||
suppressClickUntil = 0;
|
||
}
|
||
};
|
||
|
||
const onCancel = () => {
|
||
ptrId = null;
|
||
moved = false;
|
||
if (carouselActive) {
|
||
setTranslate(0, animationMs);
|
||
setTimeout(clearCarousel, animationMs + 20);
|
||
}
|
||
};
|
||
|
||
zoneEl.addEventListener('pointerdown', onDown);
|
||
zoneEl.addEventListener('pointermove', onMove);
|
||
zoneEl.addEventListener('pointerup', onUp);
|
||
zoneEl.addEventListener('pointercancel', onCancel);
|
||
zoneEl.addEventListener('click', onClickCapture, { capture: true });
|
||
|
||
return () => {
|
||
zoneEl.removeEventListener('pointerdown', onDown);
|
||
zoneEl.removeEventListener('pointermove', onMove);
|
||
zoneEl.removeEventListener('pointerup', onUp);
|
||
zoneEl.removeEventListener('pointercancel', onCancel);
|
||
zoneEl.removeEventListener('click', onClickCapture, { capture: true });
|
||
zoneEl.style.touchAction = prevTouchAction;
|
||
zoneEl.style.userSelect = prevUserSelect;
|
||
if (carouselActive) clearCarousel();
|
||
};
|
||
}
|