From 104b40f85a2b0acc1ae9e8779029dee161fcd4e9 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 23 Aug 2022 12:36:54 +0300 Subject: [PATCH] Refactored layout service --- src/app/app-routing.module.ts | 2 +- src/app/layout/app.layout.component.ts | 52 ++++++++++++------- src/app/layout/app.menuitem.component.ts | 20 +------ src/app/layout/app.topbar.component.html | 10 ++-- src/app/layout/config/app.config.component.ts | 3 -- src/app/layout/service/app.layout.service.ts | 4 -- 6 files changed, 38 insertions(+), 53 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index ec43067..c2abf5f 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -21,7 +21,7 @@ import { AppLayoutComponent } from "./layout/app.layout.component"; { path: 'landing', loadChildren: () => import('./demo/components/landing/landing.module').then(m => m.LandingModule) }, { path: 'pages/notfound', component: NotfoundComponent }, { path: '**', redirectTo: 'pages/notfound' }, - ], { scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled' }) + ], { scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', onSameUrlNavigation: 'reload' }) ], exports: [RouterModule] }) diff --git a/src/app/layout/app.layout.component.ts b/src/app/layout/app.layout.component.ts index 2b313bf..6ffab31 100644 --- a/src/app/layout/app.layout.component.ts +++ b/src/app/layout/app.layout.component.ts @@ -28,43 +28,55 @@ export class AppLayoutComponent implements OnDestroy { this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => { const isOutsideClicked = !(this.appSidebar.el.nativeElement.isSameNode(event.target) || this.appSidebar.el.nativeElement.contains(event.target) || event.target.classList.contains('p-trigger') || event.target.parentNode.classList.contains('p-trigger')); - + if (isOutsideClicked) { - this.layoutService.state.overlayMenuActive = false; - this.layoutService.state.staticMenuMobileActive = false; - this.layoutService.state.menuHoverActive = false; - this.menuService.reset(); - this.menuOutsideClickListener(); - this.menuOutsideClickListener = null; - this.unblockBodyScroll(); - } - else { - if (this.layoutService.state.staticMenuMobileActive) { - this.blockBodyScroll(); - } + this.hideMenu(); } }); } if (!this.profileMenuOutsideClickListener) { this.profileMenuOutsideClickListener = this.renderer.listen('document', 'click', event => { - const shouldCloseProfileMenu = !(this.appTopbar.menu.nativeElement.isSameNode(event.target) || event.target.classList.contains('p-trigger') || event.target.parentNode.classList.contains('p-trigger')); + const isOutsideClicked = !(this.appTopbar.menu.nativeElement.isSameNode(event.target) || this.appTopbar.menu.nativeElement.contains(event.target) + || event.target.classList.contains('p-trigger') || event.target.parentNode.classList.contains('p-trigger')); - if (shouldCloseProfileMenu) { - this.layoutService.state.profileSidebarVisible = false; - this.profileMenuOutsideClickListener(); - this.profileMenuOutsideClickListener = null; - } + if (isOutsideClicked) { + this.hideProfileMenu(); + } }); } + + if (this.layoutService.state.staticMenuMobileActive) { + this.blockBodyScroll(); + } }); this.router.events.pipe(filter(event => event instanceof NavigationEnd)) .subscribe(() => { - this.unblockBodyScroll(); + this.hideMenu(); + this.hideProfileMenu(); }); } + hideMenu() { + this.layoutService.state.overlayMenuActive = false; + this.layoutService.state.staticMenuMobileActive = false; + this.layoutService.state.menuHoverActive = false; + if (this.menuOutsideClickListener) { + this.menuOutsideClickListener(); + this.menuOutsideClickListener = null; + } + this.unblockBodyScroll(); + } + + hideProfileMenu() { + this.layoutService.state.profileSidebarVisible = false; + if (this.profileMenuOutsideClickListener) { + this.profileMenuOutsideClickListener(); + this.profileMenuOutsideClickListener = null; + } + } + blockBodyScroll(): void { if (document.body.classList) { document.body.classList.add('blocked-scroll'); diff --git a/src/app/layout/app.menuitem.component.ts b/src/app/layout/app.menuitem.component.ts index 4e81a7e..76b7ff0 100644 --- a/src/app/layout/app.menuitem.component.ts +++ b/src/app/layout/app.menuitem.component.ts @@ -48,12 +48,6 @@ import { LayoutService } from './service/app.layout.service'; state('expanded', style({ height: '*' })), - state('hidden', style({ - display: 'none' - })), - state('visible', style({ - display: 'block' - })), transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')) ]) ] @@ -133,25 +127,13 @@ export class AppMenuitemComponent implements OnInit, OnDestroy { // toggle active state if (this.item.items) { this.active = !this.active; - - if (this.root && this.active) { - this.layoutService.onOverlaySubmenuOpen(); - } - } - else { - if (this.layoutService.isMobile()) { - this.layoutService.state.staticMenuMobileActive = false; - } } this.menuService.onMenuStateChange({ key: this.key }); } get submenuAnimation() { - if (this.layoutService.isDesktop() && this.layoutService.isSlim()) - return this.active ? 'visible' : 'hidden'; - else - return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed'); + return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed'); } ngOnDestroy() { diff --git a/src/app/layout/app.topbar.component.html b/src/app/layout/app.topbar.component.html index 4ab69bd..efc269a 100644 --- a/src/app/layout/app.topbar.component.html +++ b/src/app/layout/app.topbar.component.html @@ -17,15 +17,13 @@ Calendar - - - + \ No newline at end of file diff --git a/src/app/layout/config/app.config.component.ts b/src/app/layout/config/app.config.component.ts index 9e700f8..fb3bb7b 100644 --- a/src/app/layout/config/app.config.component.ts +++ b/src/app/layout/config/app.config.component.ts @@ -36,9 +36,6 @@ export class AppConfigComponent { set menuMode(_val: string) { this.layoutService.config.menuMode = _val; - if (this.layoutService.isSlim()) { - this.menuService.reset(); - } } get inputStyle(): string { diff --git a/src/app/layout/service/app.layout.service.ts b/src/app/layout/service/app.layout.service.ts index bc2c407..bba0a31 100644 --- a/src/app/layout/service/app.layout.service.ts +++ b/src/app/layout/service/app.layout.service.ts @@ -93,10 +93,6 @@ export class LayoutService { return window.innerWidth > 991; } - isSlim() { - return this.config.menuMode === 'slim'; - } - isMobile() { return !this.isDesktop(); }