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

Remove DragHoverManager and update hover styles

Browse source 
Replaces custom hover tracking with native CSS :hover pseudo-class
Simplifies event hover handling by removing dedicated manager

Reduces complexity of hover interactions
This commit is contained in:
Janus C. H. Knudsen 2025-11-06 21:11:45 +01:00
parent 3b6f0407fb
commit 04b6847f55
3 changed files with 6 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/index.ts
View file

@ -18,7 +18,6 @@ import { DragDropManager } from './managers/DragDropManager';
import { AllDayManager } from './managers/AllDayManager';
import { ResizeHandleManager } from './managers/ResizeHandleManager';
import { EdgeScrollManager } from './managers/EdgeScrollManager';
import { DragHoverManager } from './managers/DragHoverManager';
import { HeaderManager } from './managers/HeaderManager';
// Import repositories and storage
@ -129,7 +128,6 @@ async function initializeCalendar(): Promise<void> {
builder.registerType(AllDayManager).as<AllDayManager>();
builder.registerType(ResizeHandleManager).as<ResizeHandleManager>();
builder.registerType(EdgeScrollManager).as<EdgeScrollManager>();
builder.registerType(DragHoverManager).as<DragHoverManager>();
builder.registerType(HeaderManager).as<HeaderManager>();
builder.registerType(CalendarManager).as<CalendarManager>();
@ -148,7 +146,6 @@ async function initializeCalendar(): Promise<void> {
const viewManager = app.resolveType<ViewManager>();
const navigationManager = app.resolveType<NavigationManager>();
const edgeScrollManager = app.resolveType<EdgeScrollManager>();
const dragHoverManager = app.resolveType<DragHoverManager>();
const allDayManager = app.resolveType<AllDayManager>();
const urlManager = app.resolveType<URLManager>();

116
src/managers/DragHoverManager.ts
View file

@ -1,116 +0,0 @@
/**
* DragHoverManager - Handles event hover tracking
* Fully autonomous - listens to mouse events and manages hover state independently
*/
import { IEventBus } from '../types/CalendarTypes';
export class DragHoverManager {
private isHoverTrackingActive = false;
private currentHoveredEvent: HTMLElement | null = null;
private calendarContainer: HTMLElement | null = null;
constructor(private eventBus: IEventBus) {
this.init();
}
private init(): void {
// Wait for DOM to be ready
setTimeout(() => {
this.calendarContainer = document.querySelector('swp-calendar-container');
if (this.calendarContainer) {
this.setupEventListeners();
}
}, 100);
// Listen to drag start to deactivate hover tracking
this.eventBus.on('drag:start', () => {
this.deactivateTracking();
});
}
private setupEventListeners(): void {
if (!this.calendarContainer) return;
// Listen to mouseenter on events (using event delegation)
this.calendarContainer.addEventListener('mouseenter', (e) => {
const target = e.target as HTMLElement;
const eventElement = target.closest<HTMLElement>('swp-event');
if (eventElement) {
this.handleEventMouseEnter(e as MouseEvent, eventElement);
}
}, true); // Use capture phase
// Listen to mousemove globally to track when mouse leaves event bounds
document.body.addEventListener('mousemove', (e: MouseEvent) => {
if (this.isHoverTrackingActive && e.buttons === 0) {
this.checkEventHover(e);
}
});
}
/**
* Handle mouse enter on swp-event - activate hover tracking
*/
private handleEventMouseEnter(event: MouseEvent, eventElement: HTMLElement): void {
// Only handle hover if mouse button is up
if (event.buttons === 0) {
// Clear any previous hover first
if (this.currentHoveredEvent && this.currentHoveredEvent !== eventElement) {
this.currentHoveredEvent.classList.remove('hover');
}
this.isHoverTrackingActive = true;
this.currentHoveredEvent = eventElement;
eventElement.classList.add('hover');
this.eventBus.emit('event:hover:start', { element: eventElement });
}
}
/**
* Check if mouse is still over the currently hovered event
*/
private checkEventHover(event: MouseEvent): void {
// Only track hover when active and mouse button is up
if (!this.isHoverTrackingActive || !this.currentHoveredEvent) return;
const rect = this.currentHoveredEvent.getBoundingClientRect();
const mouseX = event.clientX;
const mouseY = event.clientY;
// Check if mouse is still within the current hovered event
const isStillInside = mouseX >= rect.left && mouseX <= rect.right &&
mouseY >= rect.top && mouseY <= rect.bottom;
// If mouse left the event
if (!isStillInside) {
// Only disable tracking and clear if mouse is NOT pressed (allow resize to work)
if (event.buttons === 0) {
this.isHoverTrackingActive = false;
this.clearEventHover();
}
}
}
/**
* Clear hover state
*/
private clearEventHover(): void {
if (this.currentHoveredEvent) {
this.currentHoveredEvent.classList.remove('hover');
this.eventBus.emit('event:hover:end', { element: this.currentHoveredEvent });
this.currentHoveredEvent = null;
}
}
/**
* Deactivate hover tracking and clear any current hover
* Called via event bus when drag starts
*/
private deactivateTracking(): void {
this.isHoverTrackingActive = false;
this.clearEventHover();
}
}

12
wwwroot/css/calendar-events-css.css
View file

@ -62,27 +62,27 @@ swp-day-columns swp-event {
}
/* Hover state - highlight colors */
&.hover[data-type="meeting"] {
&:hover[data-type="meeting"] {
background: var(--color-event-meeting-hl);
}
&.hover[data-type="meal"] {
&:hover[data-type="meal"] {
background: var(--color-event-meal-hl);
}
&.hover[data-type="work"] {
&:hover[data-type="work"] {
background: var(--color-event-work-hl);
}
&.hover[data-type="milestone"] {
&:hover[data-type="milestone"] {
background: var(--color-event-milestone-hl);
}
&.hover[data-type="personal"] {
&:hover[data-type="personal"] {
background: var(--color-event-personal-hl);
}
&.hover[data-type="deadline"] {
&:hover[data-type="deadline"] {
background: var(--color-event-milestone-hl);
}