dsrptlab/clientsflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

calendar: prevent zoom-in instant switch when anchor is offscreen

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-23 09:11:55 +07:00
parent 1b3b215bff
commit eb298e786e
1 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/app.vue
View File

@@ -2577,13 +2577,20 @@ function resolveMonthAnchor(event?: WheelEvent) {
return calendarCursor.value.getMonth(); return calendarCursor.value.getMonth();
} }
function fallbackMonthGridAnchorKey() {
if (monthCells.value.some((cell) => cell.key === selectedDateKey.value)) return selectedDateKey.value;
const middle = dayKey(new Date(calendarCursor.value.getFullYear(), calendarCursor.value.getMonth(), 15));
if (monthCells.value.some((cell) => cell.key === middle)) return middle;
return monthCells.value.find((cell) => cell.inMonth)?.key ?? monthCells.value[0]?.key ?? selectedDateKey.value;
}
function resolveWeekAnchor(event?: WheelEvent) { function resolveWeekAnchor(event?: WheelEvent) {
const target = event?.target as HTMLElement | null; const target = event?.target as HTMLElement | null;
const weekKey = target?.closest<HTMLElement>("[data-calendar-week-start-key]")?.dataset.calendarWeekStartKey; const weekKey = target?.closest<HTMLElement>("[data-calendar-week-start-key]")?.dataset.calendarWeekStartKey;
if (weekKey) return weekKey; if (weekKey) return weekKey;
if (calendarHoveredWeekStartKey.value) return calendarHoveredWeekStartKey.value; if (calendarHoveredWeekStartKey.value) return calendarHoveredWeekStartKey.value;
if (calendarHoveredDayKey.value) return calendarHoveredDayKey.value; if (calendarHoveredDayKey.value) return calendarHoveredDayKey.value;
return selectedDateKey.value; return fallbackMonthGridAnchorKey();
} }
function resolveDayAnchor(event?: WheelEvent) { function resolveDayAnchor(event?: WheelEvent) {
@@ -2591,14 +2598,16 @@ function resolveDayAnchor(event?: WheelEvent) {
const dayKeyAttr = target?.closest<HTMLElement>("[data-calendar-day-key]")?.dataset.calendarDayKey; const dayKeyAttr = target?.closest<HTMLElement>("[data-calendar-day-key]")?.dataset.calendarDayKey;
if (dayKeyAttr) return dayKeyAttr; if (dayKeyAttr) return dayKeyAttr;
if (calendarHoveredDayKey.value) return calendarHoveredDayKey.value; if (calendarHoveredDayKey.value) return calendarHoveredDayKey.value;
return selectedDateKey.value; return weekDays.value[0]?.key ?? selectedDateKey.value;
} }
async function zoomInCalendar(event?: Event) { async function zoomInCalendar(event?: Event) {
const wheelEvent = event instanceof WheelEvent ? event : undefined; const wheelEvent = event instanceof WheelEvent ? event : undefined;
if (calendarView.value === "year") { if (calendarView.value === "year") {
const monthIndex = resolveMonthAnchor(wheelEvent); const monthIndex = resolveMonthAnchor(wheelEvent);
const sourceElement = queryCalendarElement(`[data-calendar-month-index="${monthIndex}"]`); const sourceElement =
queryCalendarElement(`[data-calendar-month-index="${monthIndex}"]`) ??
queryCalendarElement("[data-calendar-month-index]");
if (maybePrimeWheelZoom(wheelEvent, calendarPrimeMonthToken(monthIndex))) return; if (maybePrimeWheelZoom(wheelEvent, calendarPrimeMonthToken(monthIndex))) return;
await animateCalendarZoomIn(sourceElement, zoomGhostForMonth(monthIndex), () => { await animateCalendarZoomIn(sourceElement, zoomGhostForMonth(monthIndex), () => {
openYearMonth(monthIndex); openYearMonth(monthIndex);
@@ -2611,7 +2620,9 @@ async function zoomInCalendar(event?: Event) {
const rowStartKey = weekRowStartForDate(anchorDayKey); const rowStartKey = weekRowStartForDate(anchorDayKey);
const sourceElement = const sourceElement =
queryCalendarElement(`[data-calendar-week-start-key="${rowStartKey}"]`) ?? queryCalendarElement(`[data-calendar-week-start-key="${rowStartKey}"]`) ??
queryCalendarElement(`[data-calendar-day-key="${anchorDayKey}"]`); queryCalendarElement(`[data-calendar-day-key="${anchorDayKey}"]`) ??
queryCalendarElement("[data-calendar-week-start-key]") ??
queryCalendarElement("[data-calendar-day-key]");
if (maybePrimeWheelZoom(wheelEvent, calendarPrimeWeekToken(rowStartKey))) return; if (maybePrimeWheelZoom(wheelEvent, calendarPrimeWeekToken(rowStartKey))) return;
await animateCalendarZoomIn( await animateCalendarZoomIn(
sourceElement, sourceElement,
@@ -2625,7 +2636,7 @@ async function zoomInCalendar(event?: Event) {
if (calendarView.value === "week") { if (calendarView.value === "week") {
const dayAnchor = resolveDayAnchor(wheelEvent); const dayAnchor = resolveDayAnchor(wheelEvent);
const sourceElement = queryCalendarElement(`[data-calendar-day-key="${dayAnchor}"]`); const sourceElement = queryCalendarElement(`[data-calendar-day-key="${dayAnchor}"]`) ?? queryCalendarElement("[data-calendar-day-key]");
if (maybePrimeWheelZoom(wheelEvent, calendarPrimeDayToken(dayAnchor))) return; if (maybePrimeWheelZoom(wheelEvent, calendarPrimeDayToken(dayAnchor))) return;
await animateCalendarZoomIn(sourceElement, zoomGhostForDay(dayAnchor), () => { await animateCalendarZoomIn(sourceElement, zoomGhostForDay(dayAnchor), () => {
openDayView(dayAnchor); openDayView(dayAnchor);