Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 2x 2x 2x 11x 11x 23x 22x 11x 11x | import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { DeviceType } from 'ish-core/models/viewtype/viewtype.types';
type CollapsibleComponent = 'search' | 'navbar' | 'minibasket';
/**
* The Header Component displays the page header.
*
* It uses the {@link LoginStatusComponent} for rendering the users login status.
* It uses the {@link ProductCompareStatusComponent} for rendering the product compare button and count.
* It uses the {@link MobileBasketComponent} for rendering the mobile basket button and basket item count.
* It uses the {@link LanguageSwitchComponent} for rendering the language selection dropdown.
* It uses the {@link SearchBoxComponent} for rendering the search box.
* It uses the {@link HeaderNavigationComponent} for rendering the pages main navigation.
* It uses the {@link MiniBasketComponent} for rendering mini basket on desktop sized viewports.
*
* @example
* <ish-header></ish-header>
*/
@Component({
selector: 'ish-header-default',
templateUrl: './header-default.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeaderDefaultComponent implements OnChanges {
@Input() isSticky = false;
@Input() deviceType: DeviceType;
// not-dead-code
@Input() reset: unknown;
private activeComponent: CollapsibleComponent = 'search';
ngOnChanges(changes: SimpleChanges) {
Iif (changes.reset) {
this.activeComponent = 'search';
}
this.toggleSpecialStatusOfSearch();
}
get showSearch() {
return (
this.activeComponent === 'search' &&
// always show for sticky header
(this.deviceType === 'mobile' || this.isSticky)
);
}
get showNavBar() {
return (
this.activeComponent === 'navbar' ||
// always show for desktop
this.deviceType === 'desktop' ||
// always show for tablet on top
(this.deviceType === 'tablet' && !this.isSticky)
);
}
get showDesktopLogoLink() {
return (!this.isSticky && this.deviceType === 'tablet') || this.deviceType === 'desktop';
}
get showMobileLogoLink() {
return (this.isSticky && this.deviceType !== 'desktop') || this.deviceType === 'mobile';
}
private toggleSpecialStatusOfSearch() {
// deactivate search when switching to sticky header
Iif (this.isSticky && this.activeComponent === 'search') {
this.activeComponent = undefined;
}
// activate search when scrolling to top and no other is active
Iif (!this.isSticky && !this.activeComponent) {
this.activeComponent = 'search';
}
}
toggle(component: CollapsibleComponent) {
if (this.activeComponent === component) {
// activate search bar when on top and no other is active
this.activeComponent = !this.isSticky ? 'search' : undefined;
} else {
this.activeComponent = component;
}
}
}
|