85 lines
3.5 KiB
JavaScript
85 lines
3.5 KiB
JavaScript
|
/**
|
||
|
|
* AllDayHeightService - Manages all-day row height calculations and animations
|
||
|
|
*
|
||
|
|
* STATELESS SERVICE - Reads all data from DOM via AllDayDomReader
|
||
|
|
* - No persistent state
|
||
|
|
* - Calculates required rows by reading DOM elements
|
||
|
|
* - Animates header height based on DOM state
|
||
|
|
*/
|
||
|
|
import { ALL_DAY_CONSTANTS } from '../../configurations/CalendarConfig';
|
||
|
|
import { eventBus } from '../../core/EventBus';
|
||
|
|
import { AllDayDomReader } from './AllDayDomReader';
|
||
|
|
export class AllDayHeightService {
|
||
|
|
/**
|
||
|
|
* Main entry point - recalculate and animate header height based on DOM
|
||
|
|
*/
|
||
|
|
recalculateAndAnimate() {
|
||
|
|
const requiredRows = AllDayDomReader.getMaxRowFromEvents();
|
||
|
|
this.animateToRows(requiredRows);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Animate all-day container to specific number of rows
|
||
|
|
*/
|
||
|
|
animateToRows(targetRows) {
|
||
|
|
const { targetHeight, currentHeight, heightDifference } = this.calculateAllDayHeight(targetRows);
|
||
|
|
if (targetHeight === currentHeight)
|
||
|
|
return; // No animation needed
|
||
|
|
console.log(`🎬 All-day height animation: ${currentHeight}px → ${targetHeight}px (${Math.ceil(currentHeight / ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT)} → ${targetRows} rows)`);
|
||
|
|
// Get elements
|
||
|
|
const calendarHeader = AllDayDomReader.getCalendarHeader();
|
||
|
|
const headerSpacer = AllDayDomReader.getHeaderSpacer();
|
||
|
|
const allDayContainer = AllDayDomReader.getAllDayContainer();
|
||
|
|
if (!calendarHeader || !allDayContainer)
|
||
|
|
return;
|
||
|
|
// Get current parent height for animation
|
||
|
|
const currentParentHeight = parseFloat(getComputedStyle(calendarHeader).height);
|
||
|
|
const targetParentHeight = currentParentHeight + heightDifference;
|
||
|
|
const animations = [
|
||
|
|
calendarHeader.animate([
|
||
|
|
{ height: `${currentParentHeight}px` },
|
||
|
|
{ height: `${targetParentHeight}px` }
|
||
|
|
], {
|
||
|
|
duration: 150,
|
||
|
|
easing: 'ease-out',
|
||
|
|
fill: 'forwards'
|
||
|
|
})
|
||
|
|
];
|
||
|
|
// Add spacer animation if spacer exists
|
||
|
|
if (headerSpacer) {
|
||
|
|
const root = document.documentElement;
|
||
|
|
const headerHeightStr = root.style.getPropertyValue('--header-height');
|
||
|
|
const headerHeight = parseInt(headerHeightStr);
|
||
|
|
const currentSpacerHeight = headerHeight + currentHeight;
|
||
|
|
const targetSpacerHeight = headerHeight + targetHeight;
|
||
|
|
animations.push(headerSpacer.animate([
|
||
|
|
{ height: `${currentSpacerHeight}px` },
|
||
|
|
{ height: `${targetSpacerHeight}px` }
|
||
|
|
], {
|
||
|
|
duration: 150,
|
||
|
|
easing: 'ease-out'
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
// Update CSS variable after animation
|
||
|
|
Promise.all(animations.map(anim => anim.finished)).then(() => {
|
||
|
|
const root = document.documentElement;
|
||
|
|
root.style.setProperty('--all-day-row-height', `${targetHeight}px`);
|
||
|
|
eventBus.emit('header:height-changed');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Calculate all-day height based on number of rows
|
||
|
|
*/
|
||
|
|
calculateAllDayHeight(targetRows) {
|
||
|
|
const targetHeight = targetRows * ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT;
|
||
|
|
const currentHeight = AllDayDomReader.getCurrentHeight();
|
||
|
|
const heightDifference = targetHeight - currentHeight;
|
||
|
|
return { targetHeight, currentHeight, heightDifference };
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Collapse all-day row (animate to 0 rows)
|
||
|
|
*/
|
||
|
|
collapseAllDayRow() {
|
||
|
|
this.animateToRows(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=AllDayHeightService.js.map
|