Files
AltitudeWeb/frontend/src/app/header/header.component.ts
T
auto c2c81de9d0 Convert components to standalone and implement route-based loading
Refactored Angular components to standalone modules, enhancing modularity and reducing dependency on `AppModule`. Updated routes to facilitate lazy loading for improved performance and maintainability. Replaced `platformBrowserDynamic` with `bootstrapApplication` for modern bootstrapping.
2025-04-08 21:45:44 +02:00

62 lines
1.5 KiB
TypeScript

import {Component, HostListener, Input} from '@angular/core';
import {CommonModule, NgOptimizedImage} from '@angular/common';
import {ThemeComponent} from '../theme/theme.component';
import {RouterLink} from '@angular/router';
@Component({
standalone: true,
imports: [
CommonModule,
ThemeComponent,
RouterLink,
NgOptimizedImage
],
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
@Input() current_page: string = '';
@Input() background_image: string = '';
@Input() height: string = '';
@Input() overlay_gradient: number = 0;
public active: string = '';
public inverseYPos: number = 0;
@HostListener('window:scroll', [])
onWindowScroll(): void {
const scrollPosition = window.scrollY;
if (scrollPosition > 0) {
this.active = 'active';
this.inverseYPos = (scrollPosition / 4) * -1;
} else {
this.active = '';
}
}
public getBackgroundImage() {
if (this.overlay_gradient) {
return `linear-gradient(rgba(0, 0, 0, ${this.overlay_gradient}), rgba(0, 0, 0, ${this.overlay_gradient})), url(${this.background_image})`;
} else {
return `url(${this.background_image})`;
}
}
public getCurrentPageId(options: string[]) {
if (options.includes(this.current_page)) {
return 'current_page'
}
return null;
}
public getBackgroundPosition() {
if (this.current_page === 'home') {
return 'center ' + this.inverseYPos + 'px'
} else {
return '';
}
}
}