131 lines
No EOL
3.9 KiB
JavaScript
131 lines
No EOL
3.9 KiB
JavaScript
import { CoreEvents } from '../constants/CoreEvents';
|
|
/**
|
|
* NavigationButtons - Manages navigation button UI and navigation logic
|
|
*
|
|
* RESPONSIBILITY:
|
|
* ===============
|
|
* This manager owns all logic related to the <swp-nav-group> UI element
|
|
* and performs the actual navigation calculations.
|
|
*
|
|
* RESPONSIBILITIES:
|
|
* - Handles button clicks on swp-nav-button elements
|
|
* - Validates navigation actions (prev, next, today)
|
|
* - Calculates next/previous dates based on current view
|
|
* - Emits NAVIGATION_COMPLETED events with new date
|
|
* - Manages button UI listeners
|
|
*
|
|
* EVENT FLOW:
|
|
* ===========
|
|
* User clicks button → calculateNewDate() → emit NAVIGATION_COMPLETED → GridManager re-renders
|
|
*/
|
|
export class NavigationButtons {
|
|
constructor(eventBus, dateService, config) {
|
|
this.buttonListeners = new Map();
|
|
this.currentDate = new Date();
|
|
this.currentView = 'week';
|
|
this.eventBus = eventBus;
|
|
this.dateService = dateService;
|
|
this.config = config;
|
|
this.setupButtonListeners();
|
|
this.subscribeToEvents();
|
|
}
|
|
/**
|
|
* Subscribe to events
|
|
*/
|
|
subscribeToEvents() {
|
|
// Listen for view changes
|
|
this.eventBus.on(CoreEvents.VIEW_CHANGED, (e) => {
|
|
const detail = e.detail;
|
|
this.currentView = detail.currentView;
|
|
});
|
|
}
|
|
/**
|
|
* Setup click listeners on all navigation buttons
|
|
*/
|
|
setupButtonListeners() {
|
|
const buttons = document.querySelectorAll('swp-nav-button[data-action]');
|
|
buttons.forEach(button => {
|
|
const clickHandler = (event) => {
|
|
event.preventDefault();
|
|
const action = button.getAttribute('data-action');
|
|
if (action && this.isValidAction(action)) {
|
|
this.handleNavigation(action);
|
|
}
|
|
};
|
|
button.addEventListener('click', clickHandler);
|
|
this.buttonListeners.set(button, clickHandler);
|
|
});
|
|
}
|
|
/**
|
|
* Handle navigation action
|
|
*/
|
|
handleNavigation(action) {
|
|
switch (action) {
|
|
case 'prev':
|
|
this.navigatePrevious();
|
|
break;
|
|
case 'next':
|
|
this.navigateNext();
|
|
break;
|
|
case 'today':
|
|
this.navigateToday();
|
|
break;
|
|
}
|
|
}
|
|
/**
|
|
* Navigate in specified direction
|
|
*/
|
|
navigate(direction) {
|
|
const offset = direction === 'next' ? 1 : -1;
|
|
let newDate;
|
|
switch (this.currentView) {
|
|
case 'week':
|
|
newDate = this.dateService.addWeeks(this.currentDate, offset);
|
|
break;
|
|
case 'month':
|
|
newDate = this.dateService.addMonths(this.currentDate, offset);
|
|
break;
|
|
case 'day':
|
|
newDate = this.dateService.addDays(this.currentDate, offset);
|
|
break;
|
|
default:
|
|
newDate = this.dateService.addWeeks(this.currentDate, offset);
|
|
}
|
|
this.currentDate = newDate;
|
|
const payload = {
|
|
direction: direction,
|
|
newDate: newDate
|
|
};
|
|
this.eventBus.emit(CoreEvents.NAV_BUTTON_CLICKED, payload);
|
|
}
|
|
/**
|
|
* Navigate to next period
|
|
*/
|
|
navigateNext() {
|
|
this.navigate('next');
|
|
}
|
|
/**
|
|
* Navigate to previous period
|
|
*/
|
|
navigatePrevious() {
|
|
this.navigate('previous');
|
|
}
|
|
/**
|
|
* Navigate to today
|
|
*/
|
|
navigateToday() {
|
|
this.currentDate = new Date();
|
|
const payload = {
|
|
direction: 'today',
|
|
newDate: this.currentDate
|
|
};
|
|
this.eventBus.emit(CoreEvents.NAV_BUTTON_CLICKED, payload);
|
|
}
|
|
/**
|
|
* Validate if string is a valid navigation action
|
|
*/
|
|
isValidAction(action) {
|
|
return ['prev', 'next', 'today'].includes(action);
|
|
}
|
|
}
|
|
//# sourceMappingURL=NavigationButtons.js.map
|