Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves all-day event drag and drop

Browse source 
Handles dragging of both timed events (converting to all-day) and existing all-day events to different days.

Refactors all-day height recalculation to support animated transitions for a smoother user experience when all-day event counts change.

Uses event delegation for header mouseover detection.

Updates ScrollManager to listen for header height changes.
This commit is contained in:
Janus Knudsen 2025-08-25 21:20:51 +02:00
parent 6ede297bb5
commit f2763ad826
6 changed files with 186 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/renderers/HeaderRenderer.ts
View file

@ -1,6 +1,7 @@
// Header rendering strategy interface and implementations
import { CalendarConfig, ALL_DAY_CONSTANTS } from '../core/CalendarConfig';
import { eventBus } from '../core/EventBus';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { DateCalculator } from '../utils/DateCalculator';
@ -37,7 +38,7 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
private animateHeaderExpansion(calendarHeader: HTMLElement): void {
const root = document.documentElement;
const currentHeaderHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height') || '80');
const currentHeaderHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height'));
const targetHeight = currentHeaderHeight + ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT;
// Find header spacer
@ -49,7 +50,7 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
{ height: `${currentHeaderHeight}px` },
{ height: `${targetHeight}px` }
], {
duration: 300,
duration: 150,
easing: 'ease-out',
fill: 'forwards'
})
@ -61,7 +62,7 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
{ height: `${currentHeaderHeight}px` },
{ height: `${targetHeight}px` }
], {
duration: 300,
duration: 150,
easing: 'ease-out',
fill: 'forwards'
})
@ -72,8 +73,41 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
Promise.all(animations.map(anim => anim.finished)).then(() => {
// Set the CSS variable after animation
root.style.setProperty('--all-day-row-height', `${ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT}px`);
// Create empty all-day containers after animation
this.createEmptyAllDayContainers(calendarHeader);
// Notify ScrollManager about header height change
eventBus.emit('header:height-changed');
});
}
private createEmptyAllDayContainers(calendarHeader: HTMLElement): void {
const dayHeaders = calendarHeader.querySelectorAll('swp-day-header');
dayHeaders.forEach((dayHeader, index) => {
const date = (dayHeader as HTMLElement).dataset.date;
if (!date) return;
const columnIndex = index + 1; // 1-based grid index
const containerKey = `${columnIndex}-1`;
// Check if container already exists
let container = calendarHeader.querySelector(`swp-allday-container[data-container-key="${containerKey}"]`);
if (!container) {
// Create empty container
container = document.createElement('swp-allday-container');
container.setAttribute('data-container-key', containerKey);
container.setAttribute('data-date', date);
(container as HTMLElement).style.gridColumn = `${columnIndex}`;
(container as HTMLElement).style.gridRow = '2';
calendarHeader.appendChild(container);
}
});
console.log('Created empty all-day containers for all days');
}
}
/**