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

Enhances navigation animation with header drawer support

Browse source 
Updates NavigationAnimator to animate header drawer during slide transitions

Adds optional header drawer animation to improve UI consistency when navigating between views
This commit is contained in:
Janus C. H. Knudsen 2025-12-18 00:19:43 +01:00
parent fa2eb66fb2
commit d976d31f14
2 changed files with 30 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/core/CalendarApp.ts
View file

@ -59,7 +59,8 @@ export class CalendarApp {
// Create NavigationAnimator with DOM elements // Create NavigationAnimator with DOM elements
this.animator = new NavigationAnimator( this.animator = new NavigationAnimator(
container.querySelector('swp-header-track') as HTMLElement, container.querySelector('swp-header-track') as HTMLElement,
container.querySelector('swp-content-track') as HTMLElement container.querySelector('swp-content-track') as HTMLElement,
container.querySelector('swp-header-drawer')
); );
// Render time axis from settings // Render time axis from settings

33
src/core/NavigationAnimator.ts
View file

@ -1,7 +1,8 @@
export class NavigationAnimator { export class NavigationAnimator {
constructor( constructor(
private headerTrack: HTMLElement, private headerTrack: HTMLElement,
private contentTrack: HTMLElement private contentTrack: HTMLElement,
private headerDrawer: HTMLElement | null
) {} ) {}
async slide(direction: 'left' | 'right', renderFn: () => Promise<void>): Promise<void> { async slide(direction: 'left' | 'right', renderFn: () => Promise<void>): Promise<void> {
@ -14,7 +15,7 @@ export class NavigationAnimator {
} }
private async animateOut(translate: string): Promise<void> { private async animateOut(translate: string): Promise<void> {
await Promise.all([ const animations = [
this.headerTrack.animate( this.headerTrack.animate(
[{ transform: 'translateX(0)' }, { transform: `translateX(${translate})` }], [{ transform: 'translateX(0)' }, { transform: `translateX(${translate})` }],
{ duration: 200, easing: 'ease-in' } { duration: 200, easing: 'ease-in' }
@ -23,11 +24,22 @@ export class NavigationAnimator {
[{ transform: 'translateX(0)' }, { transform: `translateX(${translate})` }], [{ transform: 'translateX(0)' }, { transform: `translateX(${translate})` }],
{ duration: 200, easing: 'ease-in' } { duration: 200, easing: 'ease-in' }
).finished ).finished
]); ];
if (this.headerDrawer) {
animations.push(
this.headerDrawer.animate(
[{ transform: 'translateX(0)' }, { transform: `translateX(${translate})` }],
{ duration: 200, easing: 'ease-in' }
).finished
);
}
await Promise.all(animations);
} }
private async animateIn(translate: string): Promise<void> { private async animateIn(translate: string): Promise<void> {
await Promise.all([ const animations = [
this.headerTrack.animate( this.headerTrack.animate(
[{ transform: `translateX(${translate})` }, { transform: 'translateX(0)' }], [{ transform: `translateX(${translate})` }, { transform: 'translateX(0)' }],
{ duration: 200, easing: 'ease-out' } { duration: 200, easing: 'ease-out' }
@ -36,6 +48,17 @@ export class NavigationAnimator {
[{ transform: `translateX(${translate})` }, { transform: 'translateX(0)' }], [{ transform: `translateX(${translate})` }, { transform: 'translateX(0)' }],
{ duration: 200, easing: 'ease-out' } { duration: 200, easing: 'ease-out' }
).finished ).finished
]); ];
if (this.headerDrawer) {
animations.push(
this.headerDrawer.animate(
[{ transform: `translateX(${translate})` }, { transform: 'translateX(0)' }],
{ duration: 200, easing: 'ease-out' }
).finished
);
}
await Promise.all(animations);
} }
} }