Some ignored filles was missing
This commit is contained in:
Janus C. H. Knudsen
parent
7db22245e2
commit
fd5ab6bc0d
268 changed files with 31970 additions and 4 deletions
188
wwwroot/js/managers/NavigationManager.js
Normal file
188
wwwroot/js/managers/NavigationManager.js
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
import { CoreEvents } from '../constants/CoreEvents';
|
||||
export class NavigationManager {
|
||||
constructor(eventBus, eventRenderer, gridRenderer, dateService, weekInfoRenderer) {
|
||||
this.animationQueue = 0;
|
||||
this.eventBus = eventBus;
|
||||
this.dateService = dateService;
|
||||
this.weekInfoRenderer = weekInfoRenderer;
|
||||
this.gridRenderer = gridRenderer;
|
||||
this.currentWeek = this.getISOWeekStart(new Date());
|
||||
this.targetWeek = new Date(this.currentWeek);
|
||||
this.init();
|
||||
}
|
||||
init() {
|
||||
this.setupEventListeners();
|
||||
}
|
||||
/**
|
||||
* Get the start of the ISO week (Monday) for a given date
|
||||
* @param date - Any date in the week
|
||||
* @returns The Monday of the ISO week
|
||||
*/
|
||||
getISOWeekStart(date) {
|
||||
const weekBounds = this.dateService.getWeekBounds(date);
|
||||
return this.dateService.startOfDay(weekBounds.start);
|
||||
}
|
||||
setupEventListeners() {
|
||||
// Listen for filter changes and apply to pre-rendered grids
|
||||
this.eventBus.on(CoreEvents.FILTER_CHANGED, (e) => {
|
||||
const detail = e.detail;
|
||||
this.weekInfoRenderer.applyFilterToPreRenderedGrids(detail);
|
||||
});
|
||||
// Listen for navigation button clicks from NavigationButtons
|
||||
this.eventBus.on(CoreEvents.NAV_BUTTON_CLICKED, (event) => {
|
||||
const { direction, newDate } = event.detail;
|
||||
// Navigate to the new date with animation
|
||||
this.navigateToDate(newDate, direction);
|
||||
});
|
||||
// Listen for external navigation requests
|
||||
this.eventBus.on(CoreEvents.DATE_CHANGED, (event) => {
|
||||
const customEvent = event;
|
||||
const dateFromEvent = customEvent.detail.currentDate;
|
||||
// Validate date before processing
|
||||
if (!dateFromEvent) {
|
||||
console.warn('NavigationManager: No date provided in DATE_CHANGED event');
|
||||
return;
|
||||
}
|
||||
const targetDate = new Date(dateFromEvent);
|
||||
// Use DateService validation
|
||||
const validation = this.dateService.validateDate(targetDate);
|
||||
if (!validation.valid) {
|
||||
console.warn('NavigationManager: Invalid date received:', validation.error);
|
||||
return;
|
||||
}
|
||||
this.navigateToDate(targetDate);
|
||||
});
|
||||
// Listen for event navigation requests
|
||||
this.eventBus.on(CoreEvents.NAVIGATE_TO_EVENT, (event) => {
|
||||
const customEvent = event;
|
||||
const { eventDate, eventStartTime } = customEvent.detail;
|
||||
if (!eventDate || !eventStartTime) {
|
||||
console.warn('NavigationManager: Invalid event navigation data');
|
||||
return;
|
||||
}
|
||||
this.navigateToEventDate(eventDate, eventStartTime);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Navigate to specific event date and emit scroll event after navigation
|
||||
*/
|
||||
navigateToEventDate(eventDate, eventStartTime) {
|
||||
const weekStart = this.getISOWeekStart(eventDate);
|
||||
this.targetWeek = new Date(weekStart);
|
||||
const currentTime = this.currentWeek.getTime();
|
||||
const targetTime = weekStart.getTime();
|
||||
// Store event start time for scrolling after navigation
|
||||
const scrollAfterNavigation = () => {
|
||||
// Emit scroll request after navigation is complete
|
||||
this.eventBus.emit('scroll:to-event-time', {
|
||||
eventStartTime
|
||||
});
|
||||
};
|
||||
if (currentTime < targetTime) {
|
||||
this.animationQueue++;
|
||||
this.animateTransition('next', weekStart);
|
||||
// Listen for navigation completion to trigger scroll
|
||||
this.eventBus.once(CoreEvents.NAVIGATION_COMPLETED, scrollAfterNavigation);
|
||||
}
|
||||
else if (currentTime > targetTime) {
|
||||
this.animationQueue++;
|
||||
this.animateTransition('prev', weekStart);
|
||||
// Listen for navigation completion to trigger scroll
|
||||
this.eventBus.once(CoreEvents.NAVIGATION_COMPLETED, scrollAfterNavigation);
|
||||
}
|
||||
else {
|
||||
// Already on correct week, just scroll
|
||||
scrollAfterNavigation();
|
||||
}
|
||||
}
|
||||
navigateToDate(date, direction) {
|
||||
const weekStart = this.getISOWeekStart(date);
|
||||
this.targetWeek = new Date(weekStart);
|
||||
const currentTime = this.currentWeek.getTime();
|
||||
const targetTime = weekStart.getTime();
|
||||
// Use provided direction or calculate based on time comparison
|
||||
let animationDirection;
|
||||
if (direction === 'next') {
|
||||
animationDirection = 'next';
|
||||
}
|
||||
else if (direction === 'previous') {
|
||||
animationDirection = 'prev';
|
||||
}
|
||||
else if (direction === 'today') {
|
||||
// For "today", determine direction based on current position
|
||||
animationDirection = currentTime < targetTime ? 'next' : 'prev';
|
||||
}
|
||||
else {
|
||||
// Fallback: calculate direction
|
||||
animationDirection = currentTime < targetTime ? 'next' : 'prev';
|
||||
}
|
||||
if (currentTime !== targetTime) {
|
||||
this.animationQueue++;
|
||||
this.animateTransition(animationDirection, weekStart);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Animation transition using pre-rendered containers when available
|
||||
*/
|
||||
animateTransition(direction, targetWeek) {
|
||||
const container = document.querySelector('swp-calendar-container');
|
||||
const currentGrid = document.querySelector('swp-calendar-container swp-grid-container:not([data-prerendered])');
|
||||
if (!container || !currentGrid) {
|
||||
return;
|
||||
}
|
||||
// Reset all-day height BEFORE creating new grid to ensure base height
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty('--all-day-row-height', '0px');
|
||||
let newGrid;
|
||||
console.group('🔧 NavigationManager.refactored');
|
||||
console.log('Calling GridRenderer instead of NavigationRenderer');
|
||||
console.log('Target week:', targetWeek);
|
||||
// Always create a fresh container for consistent behavior
|
||||
newGrid = this.gridRenderer.createNavigationGrid(container, targetWeek);
|
||||
console.groupEnd();
|
||||
// Clear any existing transforms before animation
|
||||
newGrid.style.transform = '';
|
||||
currentGrid.style.transform = '';
|
||||
// Animate transition using Web Animations API
|
||||
const slideOutAnimation = currentGrid.animate([
|
||||
{ transform: 'translateX(0)', opacity: '1' },
|
||||
{ transform: direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)', opacity: '0.5' }
|
||||
], {
|
||||
duration: 400,
|
||||
easing: 'ease-in-out',
|
||||
fill: 'forwards'
|
||||
});
|
||||
const slideInAnimation = newGrid.animate([
|
||||
{ transform: direction === 'next' ? 'translateX(100%)' : 'translateX(-100%)' },
|
||||
{ transform: 'translateX(0)' }
|
||||
], {
|
||||
duration: 400,
|
||||
easing: 'ease-in-out',
|
||||
fill: 'forwards'
|
||||
});
|
||||
// Handle animation completion
|
||||
slideInAnimation.addEventListener('finish', () => {
|
||||
// Cleanup: Remove all old grids except the new one
|
||||
const allGrids = container.querySelectorAll('swp-grid-container');
|
||||
for (let i = 0; i < allGrids.length - 1; i++) {
|
||||
allGrids[i].remove();
|
||||
}
|
||||
// Reset positioning
|
||||
newGrid.style.position = 'relative';
|
||||
newGrid.removeAttribute('data-prerendered');
|
||||
// Update state
|
||||
this.currentWeek = new Date(targetWeek);
|
||||
this.animationQueue--;
|
||||
// If this was the last queued animation, ensure we're in sync
|
||||
if (this.animationQueue === 0) {
|
||||
this.currentWeek = new Date(this.targetWeek);
|
||||
}
|
||||
// Emit navigation completed event
|
||||
this.eventBus.emit(CoreEvents.NAVIGATION_COMPLETED, {
|
||||
direction,
|
||||
newDate: this.currentWeek
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=NavigationManager.js.map
|
||||
Loading…
Add table
Add a link
Reference in a new issue