Remove legacy files
This commit is contained in:
Çetin
@@ -1,4 +0,0 @@
|
||||
export interface MenuChangeEvent {
|
||||
key: string;
|
||||
routeEvent?: boolean;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
<div class="layout-footer">
|
||||
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Logo" height="20" class="mr-2"/>
|
||||
by
|
||||
<span class="font-medium ml-2">PrimeNG</span>
|
||||
</div>
|
||||
@@ -1,17 +0,0 @@
|
||||
import {Component, inject} from '@angular/core';
|
||||
import { LayoutService } from "./service/app.layout.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-footer',
|
||||
standalone: true,
|
||||
providers: [LayoutService],
|
||||
template: `
|
||||
<div class="layout-footer">
|
||||
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Logo" height="20" class="mr-2"/>
|
||||
by
|
||||
<span class="font-medium ml-2">PrimeNG</span>
|
||||
</div>`
|
||||
})
|
||||
export class AppFooterComponent {
|
||||
layoutService = inject(LayoutService);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<div class="layout-wrapper" [ngClass]="containerClass">
|
||||
<app-topbar></app-topbar>
|
||||
<div class="layout-sidebar">
|
||||
<app-sidebar></app-sidebar>
|
||||
</div>
|
||||
<div class="layout-main-container">
|
||||
<div class="layout-main">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
<app-config></app-config>
|
||||
<div class="layout-mask"></div>
|
||||
</div>
|
||||
@@ -1,126 +0,0 @@
|
||||
import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
|
||||
import {NavigationEnd, Router, RouterModule} from '@angular/router';
|
||||
import { filter, Subscription } from 'rxjs';
|
||||
import { LayoutService } from "./service/app.layout.service";
|
||||
import { AppSidebarComponent } from "./app.sidebar.component";
|
||||
import { AppTopBarComponent } from './app.topbar.component';
|
||||
import {AppConfigComponent} from './config/app.config.component';
|
||||
import {AppFooterComponent} from './app.footer.component';
|
||||
import {CommonModule} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterModule, AppTopBarComponent, AppSidebarComponent, AppConfigComponent, AppFooterComponent],
|
||||
templateUrl: './app.layout.component.html'
|
||||
})
|
||||
export class AppLayoutComponent implements OnDestroy {
|
||||
|
||||
overlayMenuOpenSubscription: Subscription;
|
||||
|
||||
menuOutsideClickListener: any;
|
||||
|
||||
profileMenuOutsideClickListener: any;
|
||||
|
||||
@ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
|
||||
|
||||
@ViewChild(AppTopBarComponent) appTopbar!: AppTopBarComponent;
|
||||
|
||||
constructor(public layoutService: LayoutService, public renderer: Renderer2, public router: Router) {
|
||||
this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
|
||||
if (!this.menuOutsideClickListener) {
|
||||
this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
|
||||
const isOutsideClicked = !(this.appSidebar.el.nativeElement.isSameNode(event.target) || this.appSidebar.el.nativeElement.contains(event.target)
|
||||
|| this.appTopbar.menuButton.nativeElement.isSameNode(event.target) || this.appTopbar.menuButton.nativeElement.contains(event.target));
|
||||
|
||||
if (isOutsideClicked) {
|
||||
this.hideMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!this.profileMenuOutsideClickListener) {
|
||||
this.profileMenuOutsideClickListener = this.renderer.listen('document', 'click', event => {
|
||||
const isOutsideClicked = !(this.appTopbar.menu.nativeElement.isSameNode(event.target) || this.appTopbar.menu.nativeElement.contains(event.target)
|
||||
|| this.appTopbar.topbarMenuButton.nativeElement.isSameNode(event.target) || this.appTopbar.topbarMenuButton.nativeElement.contains(event.target));
|
||||
|
||||
if (isOutsideClicked) {
|
||||
this.hideProfileMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (this.layoutService.state.staticMenuMobileActive) {
|
||||
this.blockBodyScroll();
|
||||
}
|
||||
});
|
||||
|
||||
this.router.events.pipe(filter(event => event instanceof NavigationEnd))
|
||||
.subscribe(() => {
|
||||
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');
|
||||
}
|
||||
else {
|
||||
document.body.className += ' blocked-scroll';
|
||||
}
|
||||
}
|
||||
|
||||
unblockBodyScroll(): void {
|
||||
if (document.body.classList) {
|
||||
document.body.classList.remove('blocked-scroll');
|
||||
}
|
||||
else {
|
||||
document.body.className = document.body.className.replace(new RegExp('(^|\\b)' +
|
||||
'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
}
|
||||
|
||||
get containerClass() {
|
||||
return {
|
||||
'layout-theme-light': this.layoutService.config().colorScheme === 'light',
|
||||
'layout-theme-dark': this.layoutService.config().colorScheme === 'dark',
|
||||
'layout-overlay': this.layoutService.config().menuMode === 'overlay',
|
||||
'layout-static': this.layoutService.config().menuMode === 'static',
|
||||
'layout-static-inactive': this.layoutService.state.staticMenuDesktopInactive && this.layoutService.config().menuMode === 'static',
|
||||
'layout-overlay-active': this.layoutService.state.overlayMenuActive,
|
||||
'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
|
||||
'p-input-filled': this.layoutService.config().inputStyle === 'filled',
|
||||
'p-ripple-disabled': !this.layoutService.config().ripple
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.overlayMenuOpenSubscription) {
|
||||
this.overlayMenuOpenSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
if (this.menuOutsideClickListener) {
|
||||
this.menuOutsideClickListener();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { SidebarModule } from 'primeng/sidebar';
|
||||
import { BadgeModule } from 'primeng/badge';
|
||||
import { RadioButtonModule } from 'primeng/radiobutton';
|
||||
import { InputSwitchModule } from 'primeng/inputswitch';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { AppMenuComponent } from './app.menu.component';
|
||||
import { AppMenuitemComponent } from './app.menuitem.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { AppTopBarComponent } from './app.topbar.component';
|
||||
import { AppFooterComponent } from './app.footer.component';
|
||||
import { AppConfigModule } from './config/config.module';
|
||||
import { AppSidebarComponent } from "./app.sidebar.component";
|
||||
import { AppLayoutComponent } from "./app.layout.component";
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppMenuitemComponent,
|
||||
AppTopBarComponent,
|
||||
AppFooterComponent,
|
||||
AppMenuComponent,
|
||||
AppSidebarComponent,
|
||||
AppLayoutComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
HttpClientModule,
|
||||
BrowserAnimationsModule,
|
||||
InputTextModule,
|
||||
SidebarModule,
|
||||
BadgeModule,
|
||||
RadioButtonModule,
|
||||
InputSwitchModule,
|
||||
RippleModule,
|
||||
RouterModule,
|
||||
AppConfigModule
|
||||
],
|
||||
exports: [AppLayoutComponent]
|
||||
})
|
||||
export class AppLayoutModule { }
|
||||
@@ -1,11 +0,0 @@
|
||||
<ul class="layout-menu">
|
||||
<ng-container *ngFor="let item of model; let i = index;">
|
||||
<li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
|
||||
<li *ngIf="item.separator" class="menu-separator"></li>
|
||||
</ng-container>
|
||||
<li>
|
||||
<a href="https://www.primefaces.org/primeblocks-ng/#/">
|
||||
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'banner-primeblocks' : 'banner-primeblocks-dark'}}.png" alt="Prime Blocks" class="w-full mt-3"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -1,171 +0,0 @@
|
||||
import { OnInit } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
import { LayoutService } from './service/app.layout.service';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {AppMenuitemComponent} from './app.menuitem.component';
|
||||
import { AppMenuItem } from '@/src/layout/appmenuitem';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu',
|
||||
standalone: true,
|
||||
imports: [RouterModule, CommonModule, AppMenuItem],
|
||||
templateUrl: './app.menu.component.html'
|
||||
})
|
||||
export class AppMenuComponent implements OnInit {
|
||||
|
||||
model: any[] = [];
|
||||
|
||||
constructor(public layoutService: LayoutService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.model = [
|
||||
{
|
||||
label: 'Home',
|
||||
items: [
|
||||
{ label: 'Dashboard', icon: 'pi pi-fw pi-home', routerLink: ['/'] }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'UI Components',
|
||||
items: [
|
||||
{ label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout'] },
|
||||
{ label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input'] },
|
||||
{ label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel'] },
|
||||
{ label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/uikit/invalidstate'] },
|
||||
{ label: 'Button', icon: 'pi pi-fw pi-box', routerLink: ['/uikit/button'] },
|
||||
{ label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table'] },
|
||||
{ label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list'] },
|
||||
{ label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree'] },
|
||||
{ label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel'] },
|
||||
{ label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay'] },
|
||||
{ label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media'] },
|
||||
{ label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu'], routerLinkActiveOptions: { paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' } },
|
||||
{ label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message'] },
|
||||
{ label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file'] },
|
||||
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts'] },
|
||||
{ label: 'Misc', icon: 'pi pi-fw pi-circle', routerLink: ['/uikit/misc'] }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Prime Blocks',
|
||||
items: [
|
||||
{ label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'], badge: 'NEW' },
|
||||
{ label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: ['https://www.primefaces.org/primeblocks-ng'], target: '_blank' },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Utilities',
|
||||
items: [
|
||||
{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', routerLink: ['/utilities/icons'] },
|
||||
{ label: 'PrimeFlex', icon: 'pi pi-fw pi-desktop', url: ['https://www.primefaces.org/primeflex/'], target: '_blank' },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Pages',
|
||||
icon: 'pi pi-fw pi-briefcase',
|
||||
items: [
|
||||
{
|
||||
label: 'Landing',
|
||||
icon: 'pi pi-fw pi-globe',
|
||||
routerLink: ['/landing']
|
||||
},
|
||||
{
|
||||
label: 'Auth',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Login',
|
||||
icon: 'pi pi-fw pi-sign-in',
|
||||
routerLink: ['/auth/login']
|
||||
},
|
||||
{
|
||||
label: 'Error',
|
||||
icon: 'pi pi-fw pi-times-circle',
|
||||
routerLink: ['/auth/error']
|
||||
},
|
||||
{
|
||||
label: 'Access Denied',
|
||||
icon: 'pi pi-fw pi-lock',
|
||||
routerLink: ['/auth/access']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Crud',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
routerLink: ['/pages/crud']
|
||||
},
|
||||
{
|
||||
label: 'Timeline',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
routerLink: ['/pages/timeline']
|
||||
},
|
||||
{
|
||||
label: 'Not Found',
|
||||
icon: 'pi pi-fw pi-exclamation-circle',
|
||||
routerLink: ['/notfound']
|
||||
},
|
||||
{
|
||||
label: 'Empty',
|
||||
icon: 'pi pi-fw pi-circle-off',
|
||||
routerLink: ['/pages/empty']
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Hierarchy',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 1.2', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' }
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' },
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Get Started',
|
||||
items: [
|
||||
{
|
||||
label: 'Documentation', icon: 'pi pi-fw pi-question', routerLink: ['/documentation']
|
||||
},
|
||||
{
|
||||
label: 'View Source', icon: 'pi pi-fw pi-search', url: ['https://github.com/primefaces/sakai-ng'], target: '_blank'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { MenuChangeEvent } from './api/menuchangeevent';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MenuService {
|
||||
|
||||
private menuSource = new Subject<MenuChangeEvent>();
|
||||
private resetSource = new Subject();
|
||||
|
||||
menuSource$ = this.menuSource.asObservable();
|
||||
resetSource$ = this.resetSource.asObservable();
|
||||
|
||||
onMenuStateChange(event: MenuChangeEvent) {
|
||||
this.menuSource.next(event);
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.resetSource.next(true);
|
||||
}
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
import { ChangeDetectorRef, Component, Host, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import {NavigationEnd, Router, RouterModule} from '@angular/router';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { filter } from 'rxjs/operators';
|
||||
import { MenuService } from './app.menu.service';
|
||||
import { LayoutService } from './service/app.layout.service';
|
||||
import {CommonModule} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
// eslint-disable-next-line @angular-eslint/component-selector
|
||||
selector: '[app-menuitem]',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterModule],
|
||||
template: `
|
||||
<ng-container>
|
||||
<div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{item.label}}</div>
|
||||
<a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" (click)="itemClick($event)"
|
||||
[ngClass]="item.class" [attr.target]="item.target" tabindex="0" pRipple>
|
||||
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span class="layout-menuitem-text">{{item.label}}</span>
|
||||
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
|
||||
</a>
|
||||
<a *ngIf="(item.routerLink && !item.items) && item.visible !== false" (click)="itemClick($event)" [ngClass]="item.class"
|
||||
[routerLink]="item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
|
||||
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment"
|
||||
[skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" [queryParams]="item.queryParams"
|
||||
[attr.target]="item.target" tabindex="0" pRipple>
|
||||
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span class="layout-menuitem-text">{{item.label}}</span>
|
||||
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
|
||||
</a>
|
||||
|
||||
<ul *ngIf="item.items && item.visible !== false" [@children]="submenuAnimation">
|
||||
<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
|
||||
<li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass"></li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</ng-container>
|
||||
`,
|
||||
animations: [
|
||||
trigger('children', [
|
||||
state('collapsed', style({
|
||||
height: '0'
|
||||
})),
|
||||
state('expanded', style({
|
||||
height: '*'
|
||||
})),
|
||||
transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
||||
])
|
||||
]
|
||||
})
|
||||
export class AppMenuitemComponent implements OnInit, OnDestroy {
|
||||
|
||||
@Input() item: any;
|
||||
|
||||
@Input() index!: number;
|
||||
|
||||
@Input() @HostBinding('class.layout-root-menuitem') root!: boolean;
|
||||
|
||||
@Input() parentKey!: string;
|
||||
|
||||
active = false;
|
||||
|
||||
menuSourceSubscription: Subscription;
|
||||
|
||||
menuResetSubscription: Subscription;
|
||||
|
||||
key: string = "";
|
||||
|
||||
constructor(public layoutService: LayoutService, private cd: ChangeDetectorRef, public router: Router, private menuService: MenuService) {
|
||||
this.menuSourceSubscription = this.menuService.menuSource$.subscribe(value => {
|
||||
Promise.resolve(null).then(() => {
|
||||
if (value.routeEvent) {
|
||||
this.active = (value.key === this.key || value.key.startsWith(this.key + '-')) ? true : false;
|
||||
}
|
||||
else {
|
||||
if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
|
||||
this.active = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
|
||||
this.active = false;
|
||||
});
|
||||
|
||||
this.router.events.pipe(filter(event => event instanceof NavigationEnd))
|
||||
.subscribe(params => {
|
||||
if (this.item.routerLink) {
|
||||
this.updateActiveStateFromRoute();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
|
||||
|
||||
if (this.item.routerLink) {
|
||||
this.updateActiveStateFromRoute();
|
||||
}
|
||||
}
|
||||
|
||||
updateActiveStateFromRoute() {
|
||||
let activeRoute = this.router.isActive(this.item.routerLink[0], { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' });
|
||||
|
||||
if (activeRoute) {
|
||||
this.menuService.onMenuStateChange({ key: this.key, routeEvent: true });
|
||||
}
|
||||
}
|
||||
|
||||
itemClick(event: Event) {
|
||||
// avoid processing disabled items
|
||||
if (this.item.disabled) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// execute command
|
||||
if (this.item.command) {
|
||||
this.item.command({ originalEvent: event, item: this.item });
|
||||
}
|
||||
|
||||
// toggle active state
|
||||
if (this.item.items) {
|
||||
this.active = !this.active;
|
||||
}
|
||||
|
||||
this.menuService.onMenuStateChange({ key: this.key });
|
||||
}
|
||||
|
||||
get submenuAnimation() {
|
||||
return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
|
||||
}
|
||||
|
||||
@HostBinding('class.active-menuitem')
|
||||
get activeClass() {
|
||||
return this.active && !this.root;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.menuSourceSubscription) {
|
||||
this.menuSourceSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
if (this.menuResetSubscription) {
|
||||
this.menuResetSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<app-menu></app-menu>
|
||||
@@ -1,14 +0,0 @@
|
||||
import { Component, ElementRef } from '@angular/core';
|
||||
import { LayoutService } from "./service/app.layout.service";
|
||||
import {AppMenuComponent} from './app.menu.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar',
|
||||
standalone: true,
|
||||
imports: [AppMenuComponent],
|
||||
templateUrl: './app.sidebar.component.html'
|
||||
})
|
||||
export class AppSidebarComponent {
|
||||
constructor(public layoutService: LayoutService, public el: ElementRef) { }
|
||||
}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
<div class="layout-topbar">
|
||||
<a class="layout-topbar-logo" routerLink="">
|
||||
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="logo">
|
||||
<span>SAKAI</span>
|
||||
</a>
|
||||
|
||||
<button #menubutton class="p-link layout-menu-button layout-topbar-button" (click)="layoutService.onMenuToggle()">
|
||||
<i class="pi pi-bars"></i>
|
||||
</button>
|
||||
|
||||
<button #topbarmenubutton class="p-link layout-topbar-menu-button layout-topbar-button" (click)="layoutService.showProfileSidebar()">
|
||||
<i class="pi pi-ellipsis-v"></i>
|
||||
</button>
|
||||
|
||||
<div #topbarmenu class="layout-topbar-menu" [ngClass]="{'layout-topbar-menu-mobile-active': layoutService.state.profileSidebarVisible}">
|
||||
<button class="p-link layout-topbar-button">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Calendar</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>
|
||||
@@ -1,24 +0,0 @@
|
||||
import { Component, ElementRef, ViewChild } from '@angular/core';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
import { LayoutService } from "./service/app.layout.service";
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {CommonModule} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-topbar',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterModule],
|
||||
templateUrl: './app.topbar.component.html'
|
||||
})
|
||||
export class AppTopBarComponent {
|
||||
|
||||
items!: MenuItem[];
|
||||
|
||||
@ViewChild('menubutton') menuButton!: ElementRef;
|
||||
|
||||
@ViewChild('topbarmenubutton') topbarMenuButton!: ElementRef;
|
||||
|
||||
@ViewChild('topbarmenu') menu!: ElementRef;
|
||||
|
||||
constructor(public layoutService: LayoutService) { }
|
||||
}
|
||||
@@ -1,242 +0,0 @@
|
||||
<button class="layout-config-button p-link" type="button" (click)="onConfigButtonClick()">
|
||||
<i class="pi pi-cog"></i>
|
||||
</button>
|
||||
|
||||
<p-sidebar [(visible)]="visible" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'" styleClass="layout-config-sidebar w-20rem">
|
||||
<h5>Scale</h5>
|
||||
<div class="flex align-items-center">
|
||||
<button icon="pi pi-minus" type="button" pButton (click)="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" [disabled]="scale === scales[0]"></button>
|
||||
<div class="flex gap-2 align-items-center">
|
||||
<i class="pi pi-circle-fill text-300" *ngFor="let s of scales" [ngClass]="{'text-primary-500': s === scale}"></i>
|
||||
</div>
|
||||
<button icon="pi pi-plus" type="button" pButton (click)="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" [disabled]="scale === scales[scales.length - 1]"></button>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="!minimal">
|
||||
<h5>Menu Type</h5>
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="menuMode" value="static" [(ngModel)]="menuMode" inputId="mode1"></p-radioButton>
|
||||
<label for="mode1">Static</label>
|
||||
</div>
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="menuMode" value="overlay" [(ngModel)]="menuMode" inputId="mode2"></p-radioButton>
|
||||
<label for="mode2">Overlay</label>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!minimal">
|
||||
<h5>Input Style</h5>
|
||||
<div class="flex">
|
||||
<div class="field-radiobutton flex-1">
|
||||
<p-radioButton name="inputStyle" value="outlined" [(ngModel)]="inputStyle" inputId="outlined_input"></p-radioButton>
|
||||
<label for="outlined_input">Outlined</label>
|
||||
</div>
|
||||
<div class="field-radiobutton flex-1">
|
||||
<p-radioButton name="inputStyle" value="filled" [(ngModel)]="inputStyle" inputId="filled_input"></p-radioButton>
|
||||
<label for="filled_input">Filled</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Ripple Effect</h5>
|
||||
<p-inputSwitch [(ngModel)]="ripple"></p-inputSwitch>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<h5>Bootstrap</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-light-blue', 'light')">
|
||||
<img src="assets/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-light-purple', 'light')">
|
||||
<img src="assets/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-dark-blue', 'dark')">
|
||||
<img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-dark-purple', 'dark')">
|
||||
<img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Material Design</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-light-indigo', 'light')">
|
||||
<img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-light-deeppurple', 'light')">
|
||||
<img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-dark-indigo', 'dark')">
|
||||
<img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-dark-deeppurple', 'dark')">
|
||||
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Material Design Compact</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-light-indigo', 'light')">
|
||||
<img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-light-deeppurple', 'light')">
|
||||
<img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-dark-indigo', 'dark')">
|
||||
<img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-dark-deeppurple', 'dark')">
|
||||
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Tailwind</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('tailwind-light', 'light')">
|
||||
<img src="assets/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Fluent UI</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('fluent-light', 'light')">
|
||||
<img src="assets/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>PrimeOne Design - 2022</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-indigo', 'light')">
|
||||
<img src="assets/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-blue', 'light')">
|
||||
<img src="assets/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-purple', 'light')">
|
||||
<img src="assets/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-teal', 'light')">
|
||||
<img src="assets/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-indigo', 'dark')">
|
||||
<img src="assets/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-blue', 'dark')">
|
||||
<img src="assets/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-purple', 'dark')">
|
||||
<img src="assets/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-teal', 'dark')">
|
||||
<img src="assets/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>PrimeOne Design - 2021</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-blue', 'light')">
|
||||
<img src="assets/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-green', 'light')">
|
||||
<img src="assets/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-orange', 'light')">
|
||||
<img src="assets/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-purple', 'light')">
|
||||
<img src="assets/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-blue', 'dark')">
|
||||
<img src="assets/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-green', 'dark')">
|
||||
<img src="assets/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-orange', 'dark')">
|
||||
<img src="assets/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-purple', 'dark')">
|
||||
<img src="assets/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-blue', 'dark')">
|
||||
<img src="assets/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-green', 'dark')">
|
||||
<img src="assets/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-orange', 'dark')">
|
||||
<img src="assets/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-purple', 'dark')">
|
||||
<img src="assets/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</p-sidebar>
|
||||
@@ -1,114 +0,0 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { LayoutService } from '../service/app.layout.service';
|
||||
import { MenuService } from '../app.menu.service';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {SidebarModule} from 'primeng/sidebar';
|
||||
import {RadioButtonModule} from 'primeng/radiobutton';
|
||||
import {ButtonModule} from 'primeng/button';
|
||||
import {InputSwitchModule} from 'primeng/inputswitch';
|
||||
|
||||
@Component({
|
||||
selector: 'app-config',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
SidebarModule,
|
||||
RadioButtonModule,
|
||||
ButtonModule,
|
||||
InputSwitchModule
|
||||
],
|
||||
templateUrl: './app.config.component.html',
|
||||
})
|
||||
export class AppConfigComponent {
|
||||
@Input() minimal: boolean = false;
|
||||
|
||||
scales: number[] = [12, 13, 14, 15, 16];
|
||||
|
||||
constructor(
|
||||
public layoutService: LayoutService,
|
||||
public menuService: MenuService
|
||||
) {}
|
||||
|
||||
get visible(): boolean {
|
||||
return this.layoutService.state.configSidebarVisible;
|
||||
}
|
||||
set visible(_val: boolean) {
|
||||
this.layoutService.state.configSidebarVisible = _val;
|
||||
}
|
||||
|
||||
get scale(): number {
|
||||
return this.layoutService.config().scale;
|
||||
}
|
||||
set scale(_val: number) {
|
||||
this.layoutService.config.update((config) => ({
|
||||
...config,
|
||||
scale: _val,
|
||||
}));
|
||||
}
|
||||
|
||||
get menuMode(): string {
|
||||
return this.layoutService.config().menuMode;
|
||||
}
|
||||
set menuMode(_val: string) {
|
||||
this.layoutService.config.update((config) => ({
|
||||
...config,
|
||||
menuMode: _val,
|
||||
}));
|
||||
}
|
||||
|
||||
get inputStyle(): string {
|
||||
return this.layoutService.config().inputStyle;
|
||||
}
|
||||
set inputStyle(_val: string) {
|
||||
this.layoutService.config().inputStyle = _val;
|
||||
}
|
||||
|
||||
get ripple(): boolean {
|
||||
return this.layoutService.config().ripple;
|
||||
}
|
||||
set ripple(_val: boolean) {
|
||||
this.layoutService.config.update((config) => ({
|
||||
...config,
|
||||
ripple: _val,
|
||||
}));
|
||||
}
|
||||
|
||||
set theme(val: string) {
|
||||
this.layoutService.config.update((config) => ({
|
||||
...config,
|
||||
theme: val,
|
||||
}));
|
||||
}
|
||||
get theme(): string {
|
||||
return this.layoutService.config().theme;
|
||||
}
|
||||
|
||||
set colorScheme(val: string) {
|
||||
this.layoutService.config.update((config) => ({
|
||||
...config,
|
||||
colorScheme: val,
|
||||
}));
|
||||
}
|
||||
get colorScheme(): string {
|
||||
return this.layoutService.config().colorScheme;
|
||||
}
|
||||
|
||||
onConfigButtonClick() {
|
||||
this.layoutService.showConfigSidebar();
|
||||
}
|
||||
|
||||
changeTheme(theme: string, colorScheme: string) {
|
||||
this.theme = theme;
|
||||
this.colorScheme = colorScheme;
|
||||
}
|
||||
|
||||
decrementScale() {
|
||||
this.scale--;
|
||||
}
|
||||
|
||||
incrementScale() {
|
||||
this.scale++;
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { AppConfigComponent } from './app.config.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
AppConfigComponent,
|
||||
],
|
||||
exports: [
|
||||
AppConfigComponent
|
||||
]
|
||||
})
|
||||
export class AppConfigModule { }
|
||||
@@ -1,159 +0,0 @@
|
||||
import { Injectable, effect, signal } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
export interface AppConfig {
|
||||
inputStyle: string;
|
||||
colorScheme: string;
|
||||
theme: string;
|
||||
ripple: boolean;
|
||||
menuMode: string;
|
||||
scale: number;
|
||||
}
|
||||
|
||||
interface LayoutState {
|
||||
staticMenuDesktopInactive: boolean;
|
||||
overlayMenuActive: boolean;
|
||||
profileSidebarVisible: boolean;
|
||||
configSidebarVisible: boolean;
|
||||
staticMenuMobileActive: boolean;
|
||||
menuHoverActive: boolean;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class LayoutService {
|
||||
_config: AppConfig = {
|
||||
ripple: false,
|
||||
inputStyle: 'outlined',
|
||||
menuMode: 'static',
|
||||
colorScheme: 'light',
|
||||
theme: 'lara-light-indigo',
|
||||
scale: 14,
|
||||
};
|
||||
|
||||
config = signal<AppConfig>(this._config);
|
||||
|
||||
state: LayoutState = {
|
||||
staticMenuDesktopInactive: false,
|
||||
overlayMenuActive: false,
|
||||
profileSidebarVisible: false,
|
||||
configSidebarVisible: false,
|
||||
staticMenuMobileActive: false,
|
||||
menuHoverActive: false,
|
||||
};
|
||||
|
||||
private configUpdate = new Subject<AppConfig>();
|
||||
|
||||
private overlayOpen = new Subject<any>();
|
||||
|
||||
configUpdate$ = this.configUpdate.asObservable();
|
||||
|
||||
overlayOpen$ = this.overlayOpen.asObservable();
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
const config = this.config();
|
||||
if (this.updateStyle(config)) {
|
||||
this.changeTheme();
|
||||
}
|
||||
this.changeScale(config.scale);
|
||||
this.onConfigUpdate();
|
||||
});
|
||||
}
|
||||
|
||||
updateStyle(config: AppConfig) {
|
||||
return (
|
||||
config.theme !== this._config.theme ||
|
||||
config.colorScheme !== this._config.colorScheme
|
||||
);
|
||||
}
|
||||
|
||||
onMenuToggle() {
|
||||
if (this.isOverlay()) {
|
||||
this.state.overlayMenuActive = !this.state.overlayMenuActive;
|
||||
if (this.state.overlayMenuActive) {
|
||||
this.overlayOpen.next(null);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.isDesktop()) {
|
||||
this.state.staticMenuDesktopInactive =
|
||||
!this.state.staticMenuDesktopInactive;
|
||||
} else {
|
||||
this.state.staticMenuMobileActive =
|
||||
!this.state.staticMenuMobileActive;
|
||||
|
||||
if (this.state.staticMenuMobileActive) {
|
||||
this.overlayOpen.next(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showProfileSidebar() {
|
||||
this.state.profileSidebarVisible = !this.state.profileSidebarVisible;
|
||||
if (this.state.profileSidebarVisible) {
|
||||
this.overlayOpen.next(null);
|
||||
}
|
||||
}
|
||||
|
||||
showConfigSidebar() {
|
||||
this.state.configSidebarVisible = true;
|
||||
}
|
||||
|
||||
isOverlay() {
|
||||
return this.config().menuMode === 'overlay';
|
||||
}
|
||||
|
||||
isDesktop() {
|
||||
return window.innerWidth > 991;
|
||||
}
|
||||
|
||||
isMobile() {
|
||||
return !this.isDesktop();
|
||||
}
|
||||
|
||||
onConfigUpdate() {
|
||||
this._config = { ...this.config() };
|
||||
this.configUpdate.next(this.config());
|
||||
}
|
||||
|
||||
changeTheme() {
|
||||
const config = this.config();
|
||||
const themeLink = <HTMLLinkElement>document.getElementById('theme-css');
|
||||
const themeLinkHref = themeLink.getAttribute('href')!;
|
||||
const newHref = themeLinkHref
|
||||
.split('/')
|
||||
.map((el) =>
|
||||
el == this._config.theme
|
||||
? (el = config.theme)
|
||||
: el == `theme-${this._config.colorScheme}`
|
||||
? (el = `theme-${config.colorScheme}`)
|
||||
: el
|
||||
)
|
||||
.join('/');
|
||||
|
||||
this.replaceThemeLink(newHref);
|
||||
}
|
||||
replaceThemeLink(href: string) {
|
||||
const id = 'theme-css';
|
||||
let themeLink = <HTMLLinkElement>document.getElementById(id);
|
||||
const cloneLinkElement = <HTMLLinkElement>themeLink.cloneNode(true);
|
||||
|
||||
cloneLinkElement.setAttribute('href', href);
|
||||
cloneLinkElement.setAttribute('id', id + '-clone');
|
||||
|
||||
themeLink.parentNode!.insertBefore(
|
||||
cloneLinkElement,
|
||||
themeLink.nextSibling
|
||||
);
|
||||
cloneLinkElement.addEventListener('load', () => {
|
||||
themeLink.remove();
|
||||
cloneLinkElement.setAttribute('id', id);
|
||||
});
|
||||
}
|
||||
|
||||
changeScale(value: number) {
|
||||
document.documentElement.style.fontSize = `${value}px`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user