Unifies all-day event element tag

Removes the `swp-allday-event` custom element, using `swp-event` for all-day events instead. All-day events are now distinguished by their parent `swp-allday-container`. Simplifies element management and CSS selectors.
This commit is contained in:
Janus C. H. Knudsen 2025-09-21 16:03:34 +02:00
parent c7dcfbbaed
commit 2cdbc8f1a3
5 changed files with 12 additions and 12 deletions

View file

@ -225,7 +225,7 @@ export class SwpEventElement extends BaseEventElement {
}
/**
* All-day event element (swp-allday-event)
* All-day event element (now using unified swp-event tag)
*/
export class SwpAllDayEventElement extends BaseEventElement {
private columnIndex: number;
@ -239,7 +239,7 @@ export class SwpAllDayEventElement extends BaseEventElement {
}
protected createElement(): HTMLElement {
return document.createElement('swp-allday-event');
return document.createElement('swp-event');
}
/**
@ -295,7 +295,7 @@ export class SwpAllDayEventElement extends BaseEventElement {
const finalColumnSpan = targetDate ? 1 : columnSpan;
// Find occupied rows in the spanned columns using computedStyle
const existingEvents = document.querySelectorAll('swp-allday-event');
const existingEvents = document.querySelectorAll('swp-allday-container swp-event');
const occupiedRows = new Set<number>();
console.log('🔍 SwpAllDayEventElement: Checking grid row for new event', {

View file

@ -84,7 +84,7 @@ export class AllDayManager {
if (!isAllDayEvent) return;
const eventId = draggedElement.dataset.eventId;
const dragClone = document.querySelector(`swp-allday-container swp-allday-event[data-event-id="clone-${eventId}"]`);
const dragClone = document.querySelector(`swp-allday-container swp-event[data-event-id="clone-${eventId}"]`);
if (dragClone) {
this.handleDragMove(dragClone as HTMLElement, mousePosition);
}
@ -101,8 +101,8 @@ export class AllDayManager {
eventId: eventId,
finalPosition
});
const dragClone = document.querySelector(`swp-allday-container swp-event[data-event-id="clone-${eventId}"]`);
const dragClone = document.querySelector(`swp-allday-container swp-allday-event[data-event-id="clone-${eventId}"]`);
console.log('🎯 AllDayManager: Ending drag for all-day event', { eventId });
this.handleDragEnd(draggedElement, dragClone as HTMLElement, finalPosition.column);
@ -191,8 +191,8 @@ export class AllDayManager {
public checkAndAnimateAllDayHeight(): void {
const container = this.getAllDayContainer();
if (!container) return;
const allDayEvents = container.querySelectorAll('swp-event');
const allDayEvents = container.querySelectorAll('swp-allday-event');
// Calculate required rows - 0 if no events (will collapse)
let maxRows = 0;
@ -339,7 +339,7 @@ export class AllDayManager {
};
// Check if all-day clone already exists for this event ID
const existingAllDayEvent = document.querySelector(`swp-allday-container swp-allday-event[data-event-id="${eventId}"]`);
const existingAllDayEvent = document.querySelector(`swp-allday-container swp-event[data-event-id="${eventId}"]`);
if (existingAllDayEvent) {
// All-day event already exists, just ensure clone is hidden
const dragClone = document.querySelector(`swp-event[data-event-id="clone-${eventId}"]`);

View file

@ -42,7 +42,7 @@ export class DragDropManager {
private initialMousePosition: Position = { x: 0, y: 0 };
// Drag state
private draggedElement: HTMLElement | null = null ;
private draggedElement!: HTMLElement | null;
private currentColumn: string | null = null;
private isDragStarted = false;
@ -134,7 +134,7 @@ export class DragDropManager {
let eventElement = target;
while (eventElement && eventElement.tagName !== 'SWP-EVENTS-LAYER') {
if (eventElement.tagName === 'SWP-EVENT' || eventElement.tagName === 'SWP-ALLDAY-EVENT') {
if (eventElement.tagName === 'SWP-EVENT') {
break;
}
eventElement = eventElement.parentElement as HTMLElement;

View file

@ -60,7 +60,7 @@ export class AllDayEventRenderer {
const container = this.getContainer();
if (!container) return;
const eventElement = container.querySelector(`swp-allday-event[data-event-id="${eventId}"]`);
const eventElement = container.querySelector(`swp-event[data-event-id="${eventId}"]`);
if (eventElement) {
eventElement.remove();
}