-
-
Notifications
You must be signed in to change notification settings - Fork 130
/
theme-picker.component.ts
48 lines (42 loc) · 1.65 KB
/
theme-picker.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, OnInit, OnDestroy } from '@angular/core';
import { StyleManagerService } from './style-manager.service';
import { Select, Store } from '@ngxs/store';
import { themes, PreferenceState, ThemeName, ChangeTheme } from '@ngx-starter-kit/core';
import { untilDestroy } from '@ngx-starter-kit/ngx-utils';
@Component({
selector: 'theme-picker',
templateUrl: './theme-picker.component.html',
styleUrls: ['./theme-picker.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
// host: { 'aria-hidden': 'true' }
})
export class ThemePickerComponent implements OnInit, OnDestroy {
@HostBinding('attr.aria-hidden') ariaHidden = true;
allThemes = themes;
@Select(PreferenceState.activeThemeName) activeThemeName$;
currentTheme: ThemeName;
constructor(private store: Store, public styleManager: StyleManagerService) {}
changeTheme(themeName: ThemeName) {
this.store.dispatch(new ChangeTheme(themeName));
}
ngOnInit(): void {
// this.installTheme(this.store.selectSnapshot(PreferenceState.activeThemeName));
this.activeThemeName$.pipe(untilDestroy(this)).subscribe(themeName => {
this.installTheme(themeName);
});
}
ngOnDestroy(): void {}
installTheme(themeName: ThemeName) {
console.log(`installing ${themeName}`);
if (themeName) {
this.currentTheme = themeName;
const theme = this.allThemes.get(themeName);
if (theme.isDefault) {
this.styleManager.removeStyle('theme');
} else {
this.styleManager.setStyle('theme', `assets/themes/${theme.href}`);
}
}
}
}