94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
import { Injectable } from '@angular/core';
|
|
|
|
import { LoginDataService } from './login-data.service';
|
|
|
|
/**
|
|
* Service to set the theme for OpenSlides.
|
|
*/
|
|
@Injectable({
|
|
providedIn: 'root'
|
|
})
|
|
export class ThemeService {
|
|
/**
|
|
* Constant, that describes the default theme class.
|
|
*/
|
|
public static DEFAULT_THEME = 'openslides-theme';
|
|
|
|
/**
|
|
* Constant path of the logo with dark colors for bright themes.
|
|
*/
|
|
public static STANDARD_LOGO = '/assets/img/openslides-logo.svg';
|
|
|
|
/**
|
|
* Constant path of the logo with white colors for dark themes.
|
|
*/
|
|
public static STANDARD_LOGO_DARK_THEME = '/assets/img/openslides-logo-dark.svg';
|
|
|
|
/**
|
|
* Holds the current theme as member.
|
|
*/
|
|
private currentTheme: string;
|
|
|
|
/**
|
|
* Here it will subscribe to the observer from login data service. The stheme is part of
|
|
* the login data, so get it from there and not from the config. This service will
|
|
* also cache the theme and provide the right theme on login.
|
|
*
|
|
* @param loginDataService must be injected to get the theme.
|
|
*/
|
|
public constructor(loginDataService: LoginDataService) {
|
|
loginDataService.theme.subscribe(newTheme => {
|
|
if (!newTheme) {
|
|
return;
|
|
}
|
|
this.changeTheme(newTheme);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Function to change the theme and ensures, that old themes are removed.
|
|
*
|
|
* @param theme The theme which is applied.
|
|
*/
|
|
private changeTheme(theme: string): void {
|
|
this.currentTheme = theme;
|
|
|
|
const classList = document.getElementsByTagName('body')[0].classList; // Get the classlist of the body.
|
|
const toRemove = Array.from(classList).filter((item: string) => item.includes('theme'));
|
|
if (toRemove.length) {
|
|
classList.remove(...toRemove); // Remove all old themes.
|
|
}
|
|
classList.add(theme, ThemeService.DEFAULT_THEME); // Add the new theme.
|
|
}
|
|
|
|
/**
|
|
* Returns the logo relative to the used theme.
|
|
*
|
|
* @param shouldDefault If this method should return the default logo.
|
|
*
|
|
* @returns the path to the logo.
|
|
*/
|
|
public getLogoRelativeToTheme(shouldDefault?: boolean): string {
|
|
if (this.currentTheme) {
|
|
return this.currentTheme.includes('dark') && !shouldDefault
|
|
? ThemeService.STANDARD_LOGO_DARK_THEME
|
|
: ThemeService.STANDARD_LOGO;
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Function to ensure, that there is at least one theme set to define
|
|
* the colors of the components.
|
|
*
|
|
* If a theme is already set, nothing happens, otherwise the
|
|
* `DEFAULT_THEME` will be set.
|
|
*/
|
|
public checkTheme(): void {
|
|
if (!this.currentTheme || this.currentTheme === '') {
|
|
this.changeTheme(ThemeService.DEFAULT_THEME);
|
|
}
|
|
}
|
|
}
|