carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor appConfig component, update layoutService and implement Angular signals

Browse Source
This commit is contained in:
Mehmet Çetin
2023-12-22 10:16:50 +03:00
parent 1787a3d6a5
commit 890d69af02
12 changed files with 107 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout/app.footer.component.html
View File

@@ -1,5 +1,5 @@
<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"/>
<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>

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

@@ -97,15 +97,15 @@ export class AppLayoutComponent implements OnDestroy {
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-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
'p-input-filled': this.layoutService.config().inputStyle === 'filled',
'p-ripple-disabled': !this.layoutService.config().ripple
}
}

2
src/app/layout/app.menu.component.html
View File

@@ -5,7 +5,7 @@
</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"/>
<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>

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

@@ -1,6 +1,6 @@
<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">
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="logo">
<span>SAKAI</span>
</a>

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

@@ -23,35 +23,44 @@ export class AppConfigComponent {
}
get scale(): number {
return this.layoutService.config.scale;
return this.layoutService.config().scale;
}
set scale(_val: number) {
this.layoutService.config.scale = _val;
this.layoutService.config.update((config) => ({
...config,
scale: _val,
}));
}
get menuMode(): string {
return this.layoutService.config.menuMode;
return this.layoutService.config().menuMode;
}
set menuMode(_val: string) {
this.layoutService.config.menuMode = _val;
this.layoutService.config.update((config) => ({
...config,
menuMode: _val,
}));
}
get inputStyle(): string {
return this.layoutService.config.inputStyle;
return this.layoutService.config().inputStyle;
}
set inputStyle(_val: string) {
this.layoutService.config.inputStyle = _val;
this.layoutService.config().inputStyle = _val;
}
get ripple(): boolean {
return this.layoutService.config.ripple;
return this.layoutService.config().ripple;
}
set ripple(_val: boolean) {
this.layoutService.config.ripple = _val;
this.layoutService.config.update((config) => ({
...config,
ripple: _val,
}));
}
onConfigButtonClick() {
@@ -59,32 +68,9 @@ export class AppConfigComponent {
}
changeTheme(theme: string, colorScheme: string) {
const themeLink = <HTMLLinkElement>document.getElementById('theme-css');
const newHref = themeLink.getAttribute('href')!.replace(this.layoutService.config.theme, theme);
this.layoutService.config.colorScheme
this.replaceThemeLink(newHref, () => {
this.layoutService.config.theme = theme;
this.layoutService.config.colorScheme = colorScheme;
this.layoutService.onConfigUpdate();
});
this.layoutService.config.update((config) => ({ ...config, theme:theme,colorScheme:colorScheme }));
}
replaceThemeLink(href: string, onComplete: Function) {
const id = 'theme-css';
const themeLink = <HTMLLinkElement>document.getElementById('theme-css');
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);
onComplete();
});
}
decrementScale() {
this.scale--;
@@ -97,6 +83,9 @@ export class AppConfigComponent {
}
applyScale() {
document.documentElement.style.fontSize = this.scale + 'px';
this.layoutService.config.update((config) => ({
...config,
scale: this.scale,
}));
}
}

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

@@ -1,4 +1,4 @@
import { Injectable } from '@angular/core';
import { Injectable, effect, signal } from '@angular/core';
import { Subject } from 'rxjs';
export interface AppConfig {
@@ -24,7 +24,7 @@ interface LayoutState {
})
export class LayoutService {
config: AppConfig = {
_config: AppConfig = {
ripple: false,
inputStyle: 'outlined',
menuMode: 'static',
@@ -33,6 +33,8 @@ export class LayoutService {
scale: 14,
};
config = signal<AppConfig>(this._config);
state: LayoutState = {
staticMenuDesktopInactive: false,
overlayMenuActive: false,
@@ -82,7 +84,7 @@ export class LayoutService {
}
isOverlay() {
return this.config.menuMode === 'overlay';
return this.config().menuMode === 'overlay';
}
isDesktop() {
@@ -94,7 +96,58 @@ export class LayoutService {
}
onConfigUpdate() {
this.configUpdate.next(this.config);
this._config = { ...this.config() };
this.configUpdate.next(this.config());
}
constructor() {
effect(() => {
const config = this.config();
this.changeTheme();
this.changeScale(config.scale);
this.onConfigUpdate();
});
}
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`;
}
}