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

145
src/managers/ColumnDetector.ts
View file

@ -78,18 +78,26 @@ export class ColumnDetector {
document.body.addEventListener('mousedown', this.handleMouseDown.bind(this));
document.body.addEventListener('mouseup', this.handleMouseUp.bind(this));
// Listen for header mouseover events
// Listen for header mouseover events (both day-headers and all-day-containers)
eventBus.on('header:mouseover', (event) => {
const { dayHeader, headerRenderer } = (event as CustomEvent).detail;
if (this.isMouseDown && this.draggedClone) {
console.log('Dragging clone over header - expanding and converting to all-day');
headerRenderer.addToAllDay(dayHeader);
// Convert clone to all-day format immediately
const targetDate = dayHeader.dataset.date;
if (targetDate) {
const { element, targetDate, headerRenderer } = (event as CustomEvent).detail;
if (this.isMouseDown && this.draggedClone && targetDate) {
// Scenario 1: Timed event being dragged to header - convert to all-day
if (this.draggedClone.tagName === 'SWP-EVENT') {
console.log('Converting timed event to all-day for date:', targetDate);
headerRenderer.addToAllDay(element);
this.convertToAllDayPreview(targetDate);
}
// Scenario 2: All-day event being moved to different day
else if (this.draggedClone.tagName === 'SWP-ALLDAY-EVENT') {
const currentDate = this.draggedClone.parentElement?.getAttribute('data-date');
if (currentDate !== targetDate) {
console.log('Moving all-day event from', currentDate, 'to', targetDate);
this.moveAllDayToNewDate(targetDate);
}
}
}
});
}
@ -442,56 +450,63 @@ export class ColumnDetector {
this.transformCloneToAllDay(this.draggedClone, targetDate);
// No need to recalculate height - addToAllDay already handles this
console.log(`Converted clone to all-day preview for date: ${targetDate}`);
}
/**
* Transform clone from timed event to all-day event format
*/
private transformCloneToAllDay(clone: HTMLElement, targetDate: string): void {
console.log('transformCloneToAllDay called with:', { clone, targetDate });
const calendarHeader = document.querySelector('swp-calendar-header');
if (!calendarHeader) {
console.error('No calendar header found');
return;
}
if (!calendarHeader) return;
// Find or create all-day container for target date
const container = this.findOrCreateAllDayContainer(calendarHeader as HTMLElement, targetDate);
if (!container) {
console.error('No container found/created');
return;
}
if (!container) return;
// Extract title from original clone (remove time info)
const titleElement = clone.querySelector('swp-event-title');
const eventTitle = titleElement ? titleElement.textContent || 'Untitled Event' : 'Untitled Event';
console.log('Creating all-day event with title:', eventTitle);
// Create new all-day event element
const allDayEvent = document.createElement('swp-allday-event');
allDayEvent.setAttribute('data-event-id', clone.dataset.eventId || '');
allDayEvent.setAttribute('data-type', clone.dataset.type || 'work');
allDayEvent.textContent = eventTitle;
console.log('All-day event created:', allDayEvent);
// Remove the original clone from its current parent
if (clone.parentElement) {
console.log('Removing original clone from parent:', clone.parentElement);
clone.parentElement.removeChild(clone);
}
// Add new all-day event to container
container.appendChild(allDayEvent);
console.log('All-day event added to container:', container);
// Update reference to point to new element
this.draggedClone = allDayEvent;
console.log(`Transformed clone to all-day event in container for date: ${targetDate}`);
// Recalculate height after adding new all-day event
this.recalculateAllDayHeight();
}
/**
* Move all-day event to a new date container
*/
private moveAllDayToNewDate(targetDate: string): void {
if (!this.draggedClone) return;
const calendarHeader = document.querySelector('swp-calendar-header');
if (!calendarHeader) return;
// Find or create container for new date
const newContainer = this.findOrCreateAllDayContainer(calendarHeader as HTMLElement, targetDate);
// Move the dragged clone to new container
if (newContainer && this.draggedClone.parentElement !== newContainer) {
newContainer.appendChild(this.draggedClone);
// Recalculate height after moving
this.recalculateAllDayHeight();
}
}
/**
@ -528,13 +543,87 @@ export class ColumnDetector {
(container as HTMLElement).style.gridRow = '2'; // All-day row
calendarHeader.appendChild(container);
console.log(`Created new all-day container for column ${columnIndex}, date: ${targetDate}`);
}
return container as HTMLElement;
}
/**
* Recalculate all-day row height based on maximum events in any container
*/
private recalculateAllDayHeight(): void {
const calendarHeader = document.querySelector('swp-calendar-header') as HTMLElement;
if (!calendarHeader) return;
// Find all all-day containers
const allDayContainers = calendarHeader.querySelectorAll('swp-allday-container');
let maxStackHeight = 0;
// Count events in each container to find maximum
allDayContainers.forEach(container => {
const eventCount = container.querySelectorAll('swp-allday-event').length;
if (eventCount > maxStackHeight) {
maxStackHeight = eventCount;
}
});
// Calculate new height using same formula as EventRenderer
const calculatedHeight = maxStackHeight > 0
? (maxStackHeight * ALL_DAY_CONSTANTS.EVENT_HEIGHT) +
((maxStackHeight - 1) * ALL_DAY_CONSTANTS.EVENT_GAP) +
ALL_DAY_CONSTANTS.CONTAINER_PADDING
: ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT; // Keep minimum height
// Get current heights for animation
const root = document.documentElement;
const headerHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height'));
const currentAllDayHeight = parseInt(getComputedStyle(root).getPropertyValue('--all-day-row-height') || '0');
const currentTotalHeight = headerHeight + currentAllDayHeight;
const targetTotalHeight = headerHeight + calculatedHeight;
// Only animate if height actually changes
if (currentAllDayHeight !== calculatedHeight) {
// Find header spacer
const headerSpacer = document.querySelector('swp-header-spacer') as HTMLElement;
// Animate both header and spacer simultaneously
const animations = [
calendarHeader.animate([
{ height: `${currentTotalHeight}px` },
{ height: `${targetTotalHeight}px` }
], {
duration: 150,
easing: 'ease-out',
fill: 'forwards'
})
];
if (headerSpacer) {
animations.push(
headerSpacer.animate([
{ height: `${currentTotalHeight}px` },
{ height: `${targetTotalHeight}px` }
], {
duration: 150,
easing: 'ease-out',
fill: 'forwards'
})
);
}
// Wait for all animations to finish before setting CSS variable
Promise.all(animations.map(anim => anim.finished)).then(() => {
root.style.setProperty('--all-day-row-height', `${calculatedHeight}px`);
// Notify ScrollManager about header height change
eventBus.emit('header:height-changed');
});
console.log(`Animated all-day height: ${currentAllDayHeight}px → ${calculatedHeight}px (max stack: ${maxStackHeight})`);
}
}
public destroy(): void {
this.stopAutoScroll();
document.body.removeEventListener('mousemove', this.handleMouseMove.bind(this));

4
src/managers/ScrollManager.ts
View file

@ -36,6 +36,10 @@ export class ScrollManager {
this.setupScrolling();
});
// Handle all-day row height changes
eventBus.on('header:height-changed', () => {
this.updateScrollableHeight();
});
// Handle window resize
window.addEventListener('resize', () => {