Add layout components, remove unused service
This commit is contained in:
Çetin
@@ -1,135 +0,0 @@
|
||||
import { DOCUMENT, isPlatformBrowser } from '@angular/common';
|
||||
import { computed, effect, inject, Injectable, PLATFORM_ID, signal } from '@angular/core';
|
||||
|
||||
interface AppState {
|
||||
preset?: string;
|
||||
primary?: string;
|
||||
surface?: string;
|
||||
darkTheme?: boolean;
|
||||
menuActive?: boolean;
|
||||
designerKey?: string;
|
||||
RTL?: boolean;
|
||||
overlayMenuActive?: boolean;
|
||||
menuMode?: string;
|
||||
staticMenuDesktopInactive?: boolean;
|
||||
staticMenuMobileActive?: boolean;
|
||||
profileSidebarVisible?: boolean;
|
||||
configSidebarVisible?: boolean;
|
||||
menuHoverActive?: boolean;
|
||||
activeMenuItem?: boolean;
|
||||
}
|
||||
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AppConfigService {
|
||||
private readonly STORAGE_KEY = 'appConfigState';
|
||||
|
||||
appState = signal<AppState>(null);
|
||||
|
||||
document = inject(DOCUMENT);
|
||||
|
||||
platformId = inject(PLATFORM_ID);
|
||||
|
||||
theme = computed(() => (this.appState()?.darkTheme ? 'dark' : 'light'));
|
||||
|
||||
transitionComplete = signal<boolean>(false);
|
||||
|
||||
private initialized = false;
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
this.appState.set({ ...this.loadAppState() });
|
||||
const state = this.appState();
|
||||
|
||||
if (!this.initialized || !state) {
|
||||
this.initialized = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.saveAppState(state);
|
||||
this.handleDarkModeTransition(state);
|
||||
});
|
||||
}
|
||||
|
||||
private handleDarkModeTransition(state: AppState): void {
|
||||
if (isPlatformBrowser(this.platformId)) {
|
||||
if ((document as any).startViewTransition) {
|
||||
this.startViewTransition(state);
|
||||
} else {
|
||||
this.toggleDarkMode(state);
|
||||
this.onTransitionEnd();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private startViewTransition(state: AppState): void {
|
||||
const transition = (document as any).startViewTransition(() => {
|
||||
this.toggleDarkMode(state);
|
||||
});
|
||||
|
||||
transition.ready.then(() => this.onTransitionEnd());
|
||||
}
|
||||
|
||||
private toggleDarkMode(state: AppState): void {
|
||||
if (state.darkTheme) {
|
||||
this.document.documentElement.classList.add('app-dark');
|
||||
} else {
|
||||
this.document.documentElement.classList.remove('app-dark');
|
||||
}
|
||||
}
|
||||
|
||||
private toggleMenu () {
|
||||
const {menuMode, overlayMenuActive, staticMenuDesktopInactive, staticMenuMobileActive} = this.appState();
|
||||
|
||||
if (menuMode === 'overlay') {
|
||||
this.appState.update((prev) => ({...prev, overlayMenuActive: !overlayMenuActive}));
|
||||
}
|
||||
|
||||
if (window.innerWidth > 991) {
|
||||
this.appState.update((prev) => ({...prev, staticMenuDesktopInactive: !staticMenuDesktopInactive}));
|
||||
} else {
|
||||
this.appState.update((prev) => ({...prev, staticMenuMobileActive: !staticMenuMobileActive}));
|
||||
}
|
||||
};
|
||||
|
||||
isSidebarActive = computed(() => this.appState().overlayMenuActive || this.appState().staticMenuMobileActive);
|
||||
|
||||
isDarkTheme = computed(() => this.appState().darkTheme);
|
||||
|
||||
getPrimary = computed(() => this.appState().primary);
|
||||
|
||||
getSurface = computed(() => this.appState().surface);
|
||||
|
||||
private onTransitionEnd() {
|
||||
this.transitionComplete.set(true);
|
||||
setTimeout(() => {
|
||||
this.transitionComplete.set(false);
|
||||
});
|
||||
}
|
||||
|
||||
private loadAppState(): any {
|
||||
if (isPlatformBrowser(this.platformId)) {
|
||||
const storedState = localStorage.getItem(this.STORAGE_KEY);
|
||||
if (storedState) {
|
||||
return JSON.parse(storedState);
|
||||
}
|
||||
}
|
||||
return {
|
||||
preset: 'Aura',
|
||||
primary: 'noir',
|
||||
surface: null,
|
||||
darkTheme: false,
|
||||
menuActive: false,
|
||||
designerKey: 'primeng-designer-theme',
|
||||
RTL: false
|
||||
};
|
||||
}
|
||||
|
||||
private saveAppState(state: any): void {
|
||||
if (isPlatformBrowser(this.platformId)) {
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(state));
|
||||
}
|
||||
}
|
||||
}
|
||||
154
src/service/applayoutservice.ts
Normal file
154
src/service/applayoutservice.ts
Normal file
@@ -0,0 +1,154 @@
|
||||
import { Injectable, effect, signal, computed } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
export interface layoutConfig {
|
||||
preset?: string,
|
||||
primary?: string;
|
||||
surface?: string;
|
||||
darkTheme?: boolean;
|
||||
menuMode?: string;
|
||||
}
|
||||
|
||||
interface LayoutState {
|
||||
staticMenuDesktopInactive?: boolean;
|
||||
overlayMenuActive?: boolean;
|
||||
configSidebarVisible?: boolean;
|
||||
staticMenuMobileActive?: boolean;
|
||||
menuHoverActive?: boolean;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class LayoutService {
|
||||
_config: layoutConfig = {
|
||||
preset: 'Aura',
|
||||
primary: 'emerald',
|
||||
surface: null,
|
||||
darkTheme: false,
|
||||
menuMode: 'static'
|
||||
};
|
||||
|
||||
_state: LayoutState = {
|
||||
staticMenuDesktopInactive: false,
|
||||
overlayMenuActive: false,
|
||||
configSidebarVisible: false,
|
||||
staticMenuMobileActive: false,
|
||||
menuHoverActive: false,
|
||||
};
|
||||
|
||||
layoutConfig = signal<layoutConfig>(this._config);
|
||||
|
||||
layoutState = signal<LayoutState>(this._state)
|
||||
|
||||
private configUpdate = new Subject<layoutConfig>();
|
||||
|
||||
private overlayOpen = new Subject<any>();
|
||||
|
||||
configUpdate$ = this.configUpdate.asObservable();
|
||||
|
||||
overlayOpen$ = this.overlayOpen.asObservable();
|
||||
|
||||
theme = computed(() => this.layoutConfig()?.darkTheme ? 'light' : 'dark');
|
||||
|
||||
isSidebarActive = computed(() => this.layoutState().overlayMenuActive || this.layoutState().staticMenuMobileActive);
|
||||
|
||||
isDarkTheme = computed(() => this.layoutConfig().darkTheme);
|
||||
|
||||
getPrimary = computed(() => this.layoutConfig().primary);
|
||||
|
||||
getSurface = computed(() => this.layoutConfig().surface);
|
||||
|
||||
isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay')
|
||||
|
||||
transitionComplete = signal<boolean>(false);
|
||||
|
||||
private initialized = false;
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
const config = this.layoutConfig();
|
||||
if(config) {
|
||||
this.onConfigUpdate();
|
||||
}
|
||||
});
|
||||
|
||||
effect(() => {
|
||||
const config = this.layoutConfig();
|
||||
|
||||
if (!this.initialized || !config) {
|
||||
this.initialized = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.handleDarkModeTransition(config);
|
||||
})
|
||||
}
|
||||
|
||||
private handleDarkModeTransition(config: layoutConfig): void {
|
||||
if ((document as any).startViewTransition) {
|
||||
this.startViewTransition(config);
|
||||
} else {
|
||||
this.toggleDarkMode(config);
|
||||
this.onTransitionEnd();
|
||||
}
|
||||
}
|
||||
|
||||
private startViewTransition(config: layoutConfig): void {
|
||||
const transition = (document as any).startViewTransition(() => {
|
||||
this.toggleDarkMode(config);
|
||||
});
|
||||
|
||||
transition.ready.then(() => this.onTransitionEnd());
|
||||
}
|
||||
|
||||
toggleDarkMode(config?: layoutConfig): void {
|
||||
const _config = config || this.layoutConfig()
|
||||
if (_config.darkTheme) {
|
||||
document.documentElement.classList.add('app-dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('app-dark');
|
||||
}
|
||||
}
|
||||
|
||||
private onTransitionEnd() {
|
||||
this.transitionComplete.set(true);
|
||||
setTimeout(() => {
|
||||
this.transitionComplete.set(false);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onMenuToggle() {
|
||||
if (this.isOverlay()) {
|
||||
this.layoutState.update((prev) => ({...prev, overlayMenuActive: !this.layoutState().overlayMenuActive}));
|
||||
|
||||
if (this.layoutState().overlayMenuActive) {
|
||||
this.overlayOpen.next(null);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.isDesktop()) {
|
||||
this.layoutState.update((prev) => ({...prev, staticMenuDesktopInactive: !this.layoutState().staticMenuDesktopInactive}));
|
||||
} else {
|
||||
this.layoutState.update((prev) => ({...prev, staticMenuMobileActive: !this.layoutState().staticMenuMobileActive}));
|
||||
|
||||
if (this.layoutState().staticMenuMobileActive) {
|
||||
this.overlayOpen.next(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isDesktop() {
|
||||
return window.innerWidth > 991;
|
||||
}
|
||||
|
||||
isMobile() {
|
||||
return !this.isDesktop();
|
||||
}
|
||||
|
||||
onConfigUpdate() {
|
||||
this._config = { ...this.layoutConfig() };
|
||||
this.configUpdate.next(this.layoutConfig());
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user