85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import { Component, OnInit, HostListener, Input, ElementRef, ViewChild, AfterViewInit } from "@angular/core";
|
|
import { NavigationLink } from "src/app/symbols/NavigationLink";
|
|
import { ActivatedRoute, UrlSegment } from "@angular/router";
|
|
import { map } from "rxjs/operators";
|
|
import { CurrentDocumentService } from "src/app/services/current-document.service";
|
|
|
|
@Component({
|
|
selector: "app-navbar",
|
|
templateUrl: "./navbar.component.html",
|
|
styleUrls: ["./navbar.component.scss"]
|
|
})
|
|
export class NavbarComponent implements OnInit, AfterViewInit {
|
|
|
|
public navigationLinks: NavigationLink[] = [
|
|
{
|
|
text: "Cardboard bug",
|
|
address: "/article/software"
|
|
},
|
|
{
|
|
text: "Midi23D",
|
|
address: "/article/software/midi23d"
|
|
},
|
|
{
|
|
text: "Calculator",
|
|
address: "/article/calculator",
|
|
newtab: false
|
|
},
|
|
{
|
|
text: "Github",
|
|
address: "https://github.com/Cavallium/WarpPI",
|
|
external: true,
|
|
newtab: true
|
|
},
|
|
];
|
|
stickedOnTop = false;
|
|
overflowLogo = false;
|
|
overflowMax = false;
|
|
@ViewChild("navlogo") navLogo: ElementRef<HTMLElement>;
|
|
@ViewChild("navbuttons") navButtons: ElementRef<HTMLElement>;
|
|
|
|
constructor(private elRef: ElementRef<HTMLElement>, public currentDocument: CurrentDocumentService) { }
|
|
|
|
ngOnInit() {
|
|
// TODO: fare la parte dei percorsi preselezionati
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
setTimeout(() => {
|
|
this.updateSticked();
|
|
this.updateSize();
|
|
});
|
|
}
|
|
|
|
@Input()
|
|
public onParentScroll(event: Event) {
|
|
this.updateSticked();
|
|
}
|
|
|
|
private updateSticked() {
|
|
this.stickedOnTop = this.elRef.nativeElement.getBoundingClientRect().top <= 0;
|
|
}
|
|
|
|
private updateSize() {
|
|
if (this.overflowLogo === false
|
|
&& (this.navButtons.nativeElement.offsetWidth + this.navLogo.nativeElement.offsetWidth) > this.elRef.nativeElement.offsetWidth) {
|
|
this.overflowLogo = true;
|
|
} else if (this.overflowLogo === true
|
|
&& this.navButtons.nativeElement.offsetWidth + this.navLogo.nativeElement.offsetWidth < this.elRef.nativeElement.offsetWidth - 30) {
|
|
this.overflowLogo = false;
|
|
}
|
|
if (this.overflowMax === false
|
|
&& this.navButtons.nativeElement.offsetWidth > this.elRef.nativeElement.offsetWidth) {
|
|
this.overflowMax = true;
|
|
} else if (this.overflowMax === true
|
|
&& this.navButtons.nativeElement.offsetWidth < this.elRef.nativeElement.offsetWidth) {
|
|
this.overflowMax = false;
|
|
}
|
|
}
|
|
|
|
@HostListener("window:resize", ["$event"])
|
|
handleResize(event: Event) {
|
|
this.updateSize();
|
|
}
|
|
}
|