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

Back to a single swp-allday-container

Browse source
This commit is contained in:
Janus Knudsen 2025-08-26 00:05:42 +02:00
parent 07402a07d9
commit f9b7686b22
7 changed files with 252 additions and 182 deletions
Download patch file Download diff file Expand all files Collapse all files

93
src/managers/ColumnDetector.ts
View file

@ -120,8 +120,8 @@ export class ColumnDetector {
});
this.lastLoggedPosition = { x: event.clientX, y: event.clientY };
// Snap klonens position til nærmeste 15-min interval
if (this.draggedClone && this.draggedClone.parentElement) {
// Snap klonens position til nærmeste 15-min interval (only for timed events)
if (this.draggedClone && this.draggedClone.parentElement && this.draggedClone.tagName !== 'SWP-ALLDAY-EVENT') {
const columnRect = this.draggedClone.parentElement.getBoundingClientRect();
const rawRelativeY = event.clientY - columnRect.top - this.mouseOffset.y;
@ -131,8 +131,8 @@ export class ColumnDetector {
}
}
// Kontinuerlig opdatering under auto-scroll for at sikre klonen følger musen
if (this.draggedClone && this.draggedClone.parentElement && this.autoScrollAnimationId !== null) {
// Kontinuerlig opdatering under auto-scroll for at sikre klonen følger musen (only for timed events)
if (this.draggedClone && this.draggedClone.parentElement && this.autoScrollAnimationId !== null && this.draggedClone.tagName !== 'SWP-ALLDAY-EVENT') {
const columnRect = this.draggedClone.parentElement.getBoundingClientRect();
const relativeY = event.clientY - columnRect.top - this.mouseOffset.y;
this.draggedClone.style.top = relativeY + 'px';
@ -176,8 +176,8 @@ export class ColumnDetector {
console.log('Entered column:', date);
this.currentColumn = date;
// Flyt klonen til ny kolonne ved kolonneskift
if (this.draggedClone && this.isMouseDown) {
// Flyt klonen til ny kolonne ved kolonneskift (only for timed events)
if (this.draggedClone && this.isMouseDown && this.draggedClone.tagName !== 'SWP-ALLDAY-EVENT') {
// Flyt klonen til den nye kolonne
const newColumnElement = document.querySelector(`swp-day-column[data-date="${date}"]`);
if (newColumnElement) {
@ -411,8 +411,8 @@ export class ColumnDetector {
const scrollAmount = direction === 'up' ? -this.scrollSpeed : this.scrollSpeed;
this.scrollContainer.scrollTop += scrollAmount;
// Update clone position based on current mouse position after scroll
if (this.draggedClone && this.draggedClone.parentElement) {
// Update clone position based on current mouse position after scroll (only for timed events)
if (this.draggedClone && this.draggedClone.parentElement && this.draggedClone.tagName !== 'SWP-ALLDAY-EVENT') {
const columnRect = this.draggedClone.parentElement.getBoundingClientRect();
const relativeY = this.currentMouseY - columnRect.top - this.mouseOffset.y;
this.draggedClone.style.top = relativeY + 'px';
@ -467,12 +467,33 @@ export class ColumnDetector {
const titleElement = clone.querySelector('swp-event-title');
const eventTitle = titleElement ? titleElement.textContent || 'Untitled Event' : 'Untitled Event';
// Calculate which column this date corresponds to
const dayHeaders = document.querySelectorAll('swp-day-header');
let columnIndex = 1; // Default to first column
dayHeaders.forEach((header, index) => {
if ((header as HTMLElement).dataset.date === targetDate) {
columnIndex = index + 1; // 1-based grid index
}
});
// 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;
// Position event in correct column and find available row
(allDayEvent as HTMLElement).style.gridColumn = columnIndex.toString();
// Find first available row (simple assignment to row 1 for dropped events)
(allDayEvent as HTMLElement).style.gridRow = '1';
// Clear any positioning styles from the original timed event (top, left, position, etc.)
(allDayEvent as HTMLElement).style.top = '';
(allDayEvent as HTMLElement).style.left = '';
(allDayEvent as HTMLElement).style.position = '';
// Remove the original clone from its current parent
if (clone.parentElement) {
clone.parentElement.removeChild(clone);
@ -530,19 +551,11 @@ export class ColumnDetector {
return null;
}
// Look for existing container for this single column
const containerKey = `${columnIndex}-1`; // single column span
let container = calendarHeader.querySelector(`swp-allday-container[data-container-key="${containerKey}"]`);
// Find the all-day container
const container = calendarHeader.querySelector('swp-allday-container');
if (!container) {
// Create new container
container = document.createElement('swp-allday-container');
container.setAttribute('data-container-key', containerKey);
container.setAttribute('data-date', targetDate);
(container as HTMLElement).style.gridColumn = `${columnIndex}`;
(container as HTMLElement).style.gridRow = '2'; // All-day row
calendarHeader.appendChild(container);
console.warn('ColumnDetector: No swp-allday-container found - HeaderRenderer should create this');
return null;
}
return container as HTMLElement;
@ -550,33 +563,39 @@ export class ColumnDetector {
/**
* Recalculate all-day row height based on maximum events in any container
* Recalculate all-day row height based on number of rows in use
*/
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;
// Find all-day container
const allDayContainer = calendarHeader.querySelector('swp-allday-container');
if (!allDayContainer) {
console.warn('ColumnDetector: No swp-allday-container found for height recalculation');
return;
}
// Count events in each container to find maximum
allDayContainers.forEach(container => {
const eventCount = container.querySelectorAll('swp-allday-event').length;
if (eventCount > maxStackHeight) {
maxStackHeight = eventCount;
// Count highest row used by any event
const events = allDayContainer.querySelectorAll('swp-allday-event');
let maxRow = 1;
events.forEach(event => {
const gridRow = (event as HTMLElement).style.gridRow;
if (gridRow) {
const rowNum = parseInt(gridRow);
if (rowNum > maxRow) {
maxRow = rowNum;
}
}
});
// 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
// Calculate new height
const root = document.documentElement;
const eventHeight = parseInt(getComputedStyle(root).getPropertyValue('--allday-event-height') || '26');
const calculatedHeight = maxRow * eventHeight;
// 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;
@ -620,7 +639,7 @@ export class ColumnDetector {
eventBus.emit('header:height-changed');
});
console.log(`Animated all-day height: ${currentAllDayHeight}px → ${calculatedHeight}px (max stack: ${maxStackHeight})`);
console.log(`Animated all-day height: ${currentAllDayHeight}px → ${calculatedHeight}px (max stack: ${maxRow})`);
}
}