fix(calendar): scope zoom selectors by layer and stretch week days to full height

This commit is contained in:
Ruslan Bakiev
2026-02-23 15:32:52 +07:00
parent df8c06d313
commit 0bbeef5594
2 changed files with 21 additions and 10 deletions

View File

@@ -2765,10 +2765,10 @@ async function zoomInCalendar(event?: Event) {
const anchorDayKey = resolveWeekAnchor(wheelEvent);
const rowStartKey = weekRowStartForDate(anchorDayKey);
const sourceElement =
queryCalendarElement(`[data-calendar-week-start-key="${rowStartKey}"]`) ??
queryCalendarElement(`[data-calendar-day-key="${anchorDayKey}"]`) ??
queryCalendarElement("[data-calendar-week-start-key]") ??
queryCalendarElement("[data-calendar-day-key]");
queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key="${rowStartKey}"]`) ??
queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key="${anchorDayKey}"]`) ??
queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key]`) ??
queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key]`);
if (maybePrimeWheelZoom(wheelEvent, calendarPrimeWeekToken(rowStartKey))) return;
await animateCalendarZoomIntoSource(sourceElement, () => {
openWeekView(anchorDayKey);
@@ -2778,7 +2778,9 @@ async function zoomInCalendar(event?: Event) {
if (calendarView.value === "week") {
const dayAnchor = resolveDayAnchor(wheelEvent);
const sourceElement = queryCalendarElement(`[data-calendar-day-key="${dayAnchor}"]`) ?? queryCalendarElement("[data-calendar-day-key]");
const sourceElement =
queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key="${dayAnchor}"]`) ??
queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key]`);
if (maybePrimeWheelZoom(wheelEvent, calendarPrimeDayToken(dayAnchor))) return;
await animateCalendarZoomIntoSource(sourceElement, () => {
openDayView(dayAnchor);
@@ -2803,7 +2805,9 @@ async function zoomOutCalendar() {
() => {
calendarView.value = "week";
},
() => queryCalendarElement(`[data-calendar-day-key="${targetDayKey}"]`),
() =>
queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key="${targetDayKey}"]`) ??
queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key]`),
);
return;
}
@@ -2816,8 +2820,10 @@ async function zoomOutCalendar() {
calendarView.value = "month";
},
() =>
queryCalendarElement(`[data-calendar-week-start-key="${targetRowKey}"]`) ??
queryCalendarElement(`[data-calendar-day-key="${selectedDateKey.value}"]`),
queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key="${targetRowKey}"]`) ??
queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key="${selectedDateKey.value}"]`) ??
queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key]`) ??
queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key]`),
);
return;
}