f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactored layout service

Browse Source
This commit is contained in:
Cagatay Civici 2022-08-23 12:36:54 +03:00
parent 71888a54e5
commit 104b40f85a
6 changed files with 38 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app-routing.module.ts
View File

@ -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]
})

52
src/app/layout/app.layout.component.ts
View File

@ -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');

20
src/app/layout/app.menuitem.component.ts
View File

@ -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() {

10
src/app/layout/app.topbar.component.html
View File

@ -17,15 +17,13 @@
<i class="pi pi-calendar"></i>
<span>Calendar</span>
</button>
<button class="p-link layout-topbar-button">
<i class="pi pi-cog"></i>
<span>Settings</span>
</button>
<button class="p-link layout-topbar-button">
<i class="pi pi-user"></i>
<span>Profile</span>
</button>
<button class="p-link layout-topbar-button" [routerLink]="'/documentation'">
<i class="pi pi-cog"></i>
<span>Settings</span>
</button>
</div>
</div>

3
src/app/layout/config/app.config.component.ts
View File

@ -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 {

4
src/app/layout/service/app.layout.service.ts
View File

@ -93,10 +93,6 @@ export class LayoutService {
return window.innerWidth > 991;
}
isSlim() {
return this.config.menuMode === 'slim';
}
isMobile() {
return !this.isDesktop();
}