From f53c36bea46fe48dffbab90c643e259979ee28fc Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Mon, 22 Jul 2024 00:40:40 +0300 Subject: [PATCH] feat: search field --- apps/NwaifuAnime/src/app/app.component.html | 6 +- .../components/footer/footer.component.html | 4 +- .../components/header/header.component.html | 16 ++++- .../components/header/header.component.less | 3 + .../app/components/header/header.component.ts | 58 ++++++++++++------- .../search-field/search-field.component.html | 23 ++++++-- .../search-field/search-field.component.less | 3 + .../search-field/search-field.component.ts | 28 ++++++++- 8 files changed, 108 insertions(+), 33 deletions(-) diff --git a/apps/NwaifuAnime/src/app/app.component.html b/apps/NwaifuAnime/src/app/app.component.html index 36910c1..7bee83c 100644 --- a/apps/NwaifuAnime/src/app/app.component.html +++ b/apps/NwaifuAnime/src/app/app.component.html @@ -7,8 +7,10 @@ } } -
-
+
+
diff --git a/apps/NwaifuAnime/src/app/components/footer/footer.component.html b/apps/NwaifuAnime/src/app/components/footer/footer.component.html index c9b6300..19f7abb 100644 --- a/apps/NwaifuAnime/src/app/components/footer/footer.component.html +++ b/apps/NwaifuAnime/src/app/components/footer/footer.component.html @@ -1,6 +1,6 @@ -
+

DMCA Disclaimer

-
+

На русском:

diff --git a/apps/NwaifuAnime/src/app/components/header/header.component.html b/apps/NwaifuAnime/src/app/components/header/header.component.html index c10864d..c61e1d6 100644 --- a/apps/NwaifuAnime/src/app/components/header/header.component.html +++ b/apps/NwaifuAnime/src/app/components/header/header.component.html @@ -1,6 +1,20 @@

NwaifuAnime

 + +
+
+

Auth
diff --git a/apps/NwaifuAnime/src/app/components/header/header.component.less b/apps/NwaifuAnime/src/app/components/header/header.component.less index d618ea9..164bc11 100644 --- a/apps/NwaifuAnime/src/app/components/header/header.component.less +++ b/apps/NwaifuAnime/src/app/components/header/header.component.less @@ -5,3 +5,6 @@ z-index: 20; position: fixed; } +.profile-menu { + transition: max-height 0.3s ease-in-out; +} diff --git a/apps/NwaifuAnime/src/app/components/header/header.component.ts b/apps/NwaifuAnime/src/app/components/header/header.component.ts index eb8bc88..a5270d1 100644 --- a/apps/NwaifuAnime/src/app/components/header/header.component.ts +++ b/apps/NwaifuAnime/src/app/components/header/header.component.ts @@ -1,7 +1,14 @@ import { CommonModule } from "@angular/common"; -import { Component, OnDestroy } from "@angular/core"; -import { ActivatedRoute, NavigationEnd, Router, RouterLink } from "@angular/router"; -import { Subject, filter, takeUntil } from "rxjs"; +import { + AfterViewInit, + Component, + ElementRef, + HostListener, + OnDestroy, + ViewChild, +} from "@angular/core"; +import { RouterLink } from "@angular/router"; +import { Subject } from "rxjs"; import { SearchFieldComponent } from "../search-field/search-field.component"; @Component({ @@ -11,28 +18,37 @@ import { SearchFieldComponent } from "../search-field/search-field.component"; standalone: true, imports: [CommonModule, RouterLink, SearchFieldComponent], }) -export class HeaderComponent implements OnDestroy { +export class HeaderComponent implements AfterViewInit, OnDestroy { menuOpened = false; + @ViewChild("profileBtn") profileBtn: ElementRef | null = null; + @ViewChild("profileMenu") profileMenu: ElementRef | null = null; private destroy$ = new Subject(); - constructor( - private router: Router, - private route: ActivatedRoute, - ) { - this.router.events - .pipe( - filter((event) => event instanceof NavigationEnd), - takeUntil(this.destroy$), - ) - // eslint-disable-next-line @typescript-eslint/no-explicit-any - .subscribe((val: any) => { - if (val.url.startsWith("/detail") || val.url.startsWith("/reader")) { - this.menuOpened = false; - } - }); + + @HostListener("window:click", ["$event"]) + toggleProfileMenu(event: MouseEvent) { + if (this.profileBtn && this.profileBtn.nativeElement.contains(event.target as Node)) { + this.menuOpened = !this.menuOpened; + console.log(this.menuOpened); + } else { + this.menuOpened = false; + } } - changeMenu() { - this.menuOpened = !this.menuOpened; + ngAfterViewInit(): void { + this.moveProfileMenu(); + } + + @HostListener("window:resize") + moveProfileMenu() { + if (this.profileBtn && this.profileMenu) { + const btnRect = this.profileBtn.nativeElement.getBoundingClientRect(); + const menuRect = this.profileMenu.nativeElement.getBoundingClientRect(); + const menuWidth = menuRect.width; + const menuX = btnRect.left + btnRect.width / 2 - menuWidth * 0.8; + const menuY = btnRect.top + btnRect.height; + this.profileMenu.nativeElement.style.left = `${menuX}px`; + this.profileMenu.nativeElement.style.top = `calc(${menuY}px + 0.25rem)`; + } } get menuBtnClass(): string { diff --git a/apps/NwaifuAnime/src/app/components/search-field/search-field.component.html b/apps/NwaifuAnime/src/app/components/search-field/search-field.component.html index 5447448..e01b1bb 100644 --- a/apps/NwaifuAnime/src/app/components/search-field/search-field.component.html +++ b/apps/NwaifuAnime/src/app/components/search-field/search-field.component.html @@ -1,6 +1,21 @@ -
-
-
- +
+
+
+
diff --git a/apps/NwaifuAnime/src/app/components/search-field/search-field.component.less b/apps/NwaifuAnime/src/app/components/search-field/search-field.component.less index e69de29..b9bc65e 100644 --- a/apps/NwaifuAnime/src/app/components/search-field/search-field.component.less +++ b/apps/NwaifuAnime/src/app/components/search-field/search-field.component.less @@ -0,0 +1,3 @@ +:host { + width: 100%; +} diff --git a/apps/NwaifuAnime/src/app/components/search-field/search-field.component.ts b/apps/NwaifuAnime/src/app/components/search-field/search-field.component.ts index 14d215b..0bda1d3 100644 --- a/apps/NwaifuAnime/src/app/components/search-field/search-field.component.ts +++ b/apps/NwaifuAnime/src/app/components/search-field/search-field.component.ts @@ -1,7 +1,7 @@ import { CommonModule } from "@angular/common"; import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core"; -import { ActivatedRoute, Router } from "@angular/router"; -import { Subject, takeUntil } from "rxjs"; +import { ActivatedRoute, NavigationEnd, Router } from "@angular/router"; +import { Subject, filter, takeUntil } from "rxjs"; @Component({ selector: "app-search-field", @@ -12,6 +12,7 @@ import { Subject, takeUntil } from "rxjs"; }) export class SearchFieldComponent implements AfterViewInit, OnDestroy { @ViewChild("searchInput") searchInput: ElementRef | null = null; + openSearchField = false; private destroy$ = new Subject(); constructor( @@ -24,17 +25,38 @@ export class SearchFieldComponent implements AfterViewInit, OnDestroy { const search = params["search"]; if (search && this.searchInput) { this.searchInput.nativeElement.value = search; + this.openSearchField = true; } }); + this.router.events + .pipe( + filter((event) => event instanceof NavigationEnd), + takeUntil(this.destroy$), + ) + // eslint-disable-next-line @typescript-eslint/no-explicit-any + .subscribe((event: any) => { + if (event.url === "/" && this.searchInput) { + this.searchInput.nativeElement.value = ""; + this.openSearchField = false; + } + }); } search() { + console.log(this.searchInput); if (this.searchInput && this.searchInput.nativeElement.value) - this.router.navigate(["/", "search"], { + this.router.navigate(["/"], { queryParams: { search: this.searchInput.nativeElement.value }, }); } + toggleSearchField() { + this.openSearchField = !this.openSearchField; + if (this.openSearchField && this.searchInput) { + this.searchInput.nativeElement.focus(); + } + } + ngOnDestroy(): void { this.destroy$.next(); this.destroy$.complete();