97 lines
No EOL
3.4 KiB
JavaScript
97 lines
No EOL
3.4 KiB
JavaScript
import { SwpAllDayEventElement } from '../elements/SwpEventElement';
|
|
export class AllDayEventRenderer {
|
|
constructor() {
|
|
this.container = null;
|
|
this.originalEvent = null;
|
|
this.draggedClone = null;
|
|
this.getContainer();
|
|
}
|
|
getContainer() {
|
|
const header = document.querySelector('swp-calendar-header');
|
|
if (header) {
|
|
this.container = header.querySelector('swp-allday-container');
|
|
if (!this.container) {
|
|
this.container = document.createElement('swp-allday-container');
|
|
header.appendChild(this.container);
|
|
}
|
|
}
|
|
return this.container;
|
|
}
|
|
getAllDayContainer() {
|
|
return document.querySelector('swp-calendar-header swp-allday-container');
|
|
}
|
|
/**
|
|
* Handle drag start for all-day events
|
|
*/
|
|
handleDragStart(payload) {
|
|
this.originalEvent = payload.originalElement;
|
|
;
|
|
this.draggedClone = payload.draggedClone;
|
|
if (this.draggedClone) {
|
|
const container = this.getAllDayContainer();
|
|
if (!container)
|
|
return;
|
|
this.draggedClone.style.gridColumn = this.originalEvent.style.gridColumn;
|
|
this.draggedClone.style.gridRow = this.originalEvent.style.gridRow;
|
|
console.log('handleDragStart:this.draggedClone', this.draggedClone);
|
|
container.appendChild(this.draggedClone);
|
|
// Add dragging style
|
|
this.draggedClone.classList.add('dragging');
|
|
this.draggedClone.style.zIndex = '1000';
|
|
this.draggedClone.style.cursor = 'grabbing';
|
|
// Make original semi-transparent
|
|
this.originalEvent.style.opacity = '0.3';
|
|
this.originalEvent.style.userSelect = 'none';
|
|
}
|
|
}
|
|
/**
|
|
* Render an all-day event with pre-calculated layout
|
|
*/
|
|
renderAllDayEventWithLayout(event, layout) {
|
|
const container = this.getContainer();
|
|
if (!container)
|
|
return null;
|
|
const dayEvent = SwpAllDayEventElement.fromCalendarEvent(event);
|
|
dayEvent.applyGridPositioning(layout.row, layout.startColumn, layout.endColumn);
|
|
// Apply highlight class to show events with highlight color
|
|
dayEvent.classList.add('highlight');
|
|
container.appendChild(dayEvent);
|
|
}
|
|
/**
|
|
* Remove an all-day event by ID
|
|
*/
|
|
removeAllDayEvent(eventId) {
|
|
const container = this.getContainer();
|
|
if (!container)
|
|
return;
|
|
const eventElement = container.querySelector(`swp-allday-event[data-event-id="${eventId}"]`);
|
|
if (eventElement) {
|
|
eventElement.remove();
|
|
}
|
|
}
|
|
/**
|
|
* Clear cache when DOM changes
|
|
*/
|
|
clearCache() {
|
|
this.container = null;
|
|
}
|
|
/**
|
|
* Render all-day events for specific period using AllDayEventRenderer
|
|
*/
|
|
renderAllDayEventsForPeriod(eventLayouts) {
|
|
this.clearAllDayEvents();
|
|
eventLayouts.forEach(layout => {
|
|
this.renderAllDayEventWithLayout(layout.calenderEvent, layout);
|
|
});
|
|
}
|
|
clearAllDayEvents() {
|
|
const allDayContainer = document.querySelector('swp-allday-container');
|
|
if (allDayContainer) {
|
|
allDayContainer.querySelectorAll('swp-allday-event:not(.max-event-indicator)').forEach(event => event.remove());
|
|
}
|
|
}
|
|
handleViewChanged(event) {
|
|
this.clearAllDayEvents();
|
|
}
|
|
}
|
|
//# sourceMappingURL=AllDayEventRenderer.js.map
|