Updated header components to accept and render background images via a new `[background_image]` input property. Modified relevant templates to apply the background image dynamically and updated usage in `home` and `map` components.
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import {Component, HostListener, Input} from '@angular/core';
|
|
import {ALTITUDE_VERSION} from '../constant';
|
|
|
|
@Component({
|
|
standalone: false,
|
|
selector: 'app-header',
|
|
templateUrl: './header.component.html',
|
|
styleUrls: ['./header.component.scss']
|
|
})
|
|
export class HeaderComponent {
|
|
@Input() title: string = '';
|
|
@Input() sub_title: string = '';
|
|
@Input() current_page: string = '';
|
|
@Input() background_image: string = '';
|
|
|
|
public active: string = '';
|
|
|
|
@HostListener('window:scroll', [])
|
|
onWindowScroll(): void {
|
|
const scrollPosition = window.scrollY;
|
|
if (scrollPosition > 0) {
|
|
this.active = 'active';
|
|
} else {
|
|
this.active = '';
|
|
}
|
|
}
|
|
|
|
scrollToSection(): void {
|
|
const element = document.getElementById('scrollingpoint');
|
|
if (element) {
|
|
element.scrollIntoView({behavior: 'smooth', block: 'start'});
|
|
} else {
|
|
console.error('Element with id "scrollingpoint" not found.');
|
|
}
|
|
}
|
|
|
|
|
|
public getCurrentPageId(options: string[]) {
|
|
if (options.includes(this.current_page)) {
|
|
return 'current_page'
|
|
}
|
|
return null;
|
|
}
|
|
|
|
protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
|
|
}
|