75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
import { Injectable, EventEmitter } from '@angular/core';
|
|
import { safeParseObject } from 'app/core/utils/json';
|
|
import { Theme } from './theme.model';
|
|
import { ThemeManagerService } from './theme-manager.service';
|
|
|
|
@Injectable({
|
|
providedIn: 'root'
|
|
})
|
|
export class ThemeStorageService {
|
|
private themeStorageKey = 'mifosXTheme';
|
|
onThemeUpdate: EventEmitter<Theme>;
|
|
|
|
constructor(public themeManagerService: ThemeManagerService) {
|
|
this.onThemeUpdate = new EventEmitter<Theme>();
|
|
}
|
|
|
|
storeTheme(mifosXTheme: Theme) {
|
|
localStorage.setItem(this.themeStorageKey, JSON.stringify(mifosXTheme));
|
|
this.onThemeUpdate.emit(mifosXTheme);
|
|
}
|
|
|
|
getTheme(): Theme {
|
|
return safeParseObject<Theme | null>(localStorage.getItem(this.themeStorageKey), null);
|
|
}
|
|
|
|
clearTheme() {
|
|
localStorage.removeItem(this.themeStorageKey);
|
|
}
|
|
|
|
/**
|
|
* Dynamically installs the theme by adding a class to the body.
|
|
* @param {Theme} theme
|
|
*/
|
|
installTheme(theme: Theme) {
|
|
const body = document.body;
|
|
|
|
// Remove any previously applied theme classes
|
|
body.classList.remove(
|
|
'pictonblue-yellowgreen-theme',
|
|
'indigo-pink-theme',
|
|
'deeppurple-amber-theme',
|
|
'pink-bluegrey-theme',
|
|
'purple-green-theme'
|
|
);
|
|
|
|
if (!theme.isDefault) {
|
|
body.classList.add(this.getThemeClass(theme.href));
|
|
}
|
|
|
|
this.storeTheme(theme);
|
|
}
|
|
|
|
/**
|
|
* Maps theme file names to their respective CSS class.
|
|
* @param themeHref The theme file name.
|
|
* @returns The CSS class name for the theme.
|
|
*/
|
|
private getThemeClass(themeHref: string): string {
|
|
switch (themeHref) {
|
|
case 'pictonblue-yellowgreen.css':
|
|
return 'pictonblue-yellowgreen-theme';
|
|
case 'indigo-pink.css':
|
|
return 'indigo-pink-theme';
|
|
case 'deeppurple-amber.css':
|
|
return 'deeppurple-amber-theme';
|
|
case 'pink-bluegrey.css':
|
|
return 'pink-bluegrey-theme';
|
|
case 'purple-green.css':
|
|
return 'purple-green-theme';
|
|
default:
|
|
return '';
|
|
}
|
|
}
|
|
}
|