cavallium-website/src/app/gui/navbar/navbar.component.ts

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();
	}
}