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
this.animator = new NavigationAnimator(
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

33
src/core/NavigationAnimator.ts
View file

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