]>
Commit | Line | Data |
---|---|---|
1 | import { first } from 'rxjs/operators' | |
2 | import { Injectable } from '@angular/core' | |
3 | import { UserLocalStorageKeys } from '@root-helpers/users' | |
4 | import { ServerConfig, ServerConfigTheme } from '@shared/models' | |
5 | import { environment } from '../../../environments/environment' | |
6 | import { AuthService } from '../auth' | |
7 | import { PluginService } from '../plugins/plugin.service' | |
8 | import { ServerService } from '../server' | |
9 | import { UserService } from '../users/user.service' | |
10 | import { LocalStorageService } from '../wrappers/storage.service' | |
11 | ||
12 | @Injectable() | |
13 | export class ThemeService { | |
14 | ||
15 | private oldThemeName: string | |
16 | private themes: ServerConfigTheme[] = [] | |
17 | ||
18 | private themeFromLocalStorage: ServerConfigTheme | |
19 | private themeDOMLinksFromLocalStorage: HTMLLinkElement[] = [] | |
20 | ||
21 | private serverConfig: ServerConfig | |
22 | ||
23 | constructor ( | |
24 | private auth: AuthService, | |
25 | private userService: UserService, | |
26 | private pluginService: PluginService, | |
27 | private server: ServerService, | |
28 | private localStorageService: LocalStorageService | |
29 | ) {} | |
30 | ||
31 | initialize () { | |
32 | // Try to load from local storage first, so we don't have to wait network requests | |
33 | this.loadAndSetFromLocalStorage() | |
34 | ||
35 | this.serverConfig = this.server.getTmpConfig() | |
36 | this.server.getConfig() | |
37 | .subscribe(config => { | |
38 | this.serverConfig = config | |
39 | ||
40 | const themes = this.serverConfig.theme.registered | |
41 | ||
42 | this.removeThemeFromLocalStorageIfNeeded(themes) | |
43 | this.injectThemes(themes) | |
44 | ||
45 | this.listenUserTheme() | |
46 | }) | |
47 | } | |
48 | ||
49 | private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) { | |
50 | this.themes = themes | |
51 | ||
52 | console.log('Injecting %d themes.', this.themes.length) | |
53 | ||
54 | const head = this.getHeadElement() | |
55 | ||
56 | for (const theme of this.themes) { | |
57 | // Already added this theme? | |
58 | if (fromLocalStorage === false && this.themeFromLocalStorage && this.themeFromLocalStorage.name === theme.name) continue | |
59 | ||
60 | for (const css of theme.css) { | |
61 | const link = document.createElement('link') | |
62 | ||
63 | const href = environment.apiUrl + `/themes/${theme.name}/${theme.version}/css/${css}` | |
64 | link.setAttribute('href', href) | |
65 | link.setAttribute('rel', 'alternate stylesheet') | |
66 | link.setAttribute('type', 'text/css') | |
67 | link.setAttribute('title', theme.name) | |
68 | link.setAttribute('disabled', '') | |
69 | ||
70 | if (fromLocalStorage === true) this.themeDOMLinksFromLocalStorage.push(link) | |
71 | ||
72 | head.appendChild(link) | |
73 | } | |
74 | } | |
75 | } | |
76 | ||
77 | private getCurrentTheme () { | |
78 | if (this.themeFromLocalStorage) return this.themeFromLocalStorage.name | |
79 | ||
80 | const theme = this.auth.isLoggedIn() | |
81 | ? this.auth.getUser().theme | |
82 | : this.userService.getAnonymousUser().theme | |
83 | ||
84 | if (theme !== 'instance-default') return theme | |
85 | ||
86 | const instanceTheme = this.serverConfig.theme.default | |
87 | if (instanceTheme !== 'default') return instanceTheme | |
88 | ||
89 | // Default to dark theme if available and wanted by the user | |
90 | if ( | |
91 | this.themes.find(t => t.name === 'dark') && | |
92 | window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches | |
93 | ) { | |
94 | return 'dark' | |
95 | } | |
96 | ||
97 | return instanceTheme | |
98 | } | |
99 | ||
100 | private loadTheme (name: string) { | |
101 | const links = document.getElementsByTagName('link') | |
102 | for (let i = 0; i < links.length; i++) { | |
103 | const link = links[ i ] | |
104 | if (link.getAttribute('rel').indexOf('style') !== -1 && link.getAttribute('title')) { | |
105 | link.disabled = link.getAttribute('title') !== name | |
106 | } | |
107 | } | |
108 | } | |
109 | ||
110 | private updateCurrentTheme () { | |
111 | if (this.oldThemeName) this.removeThemePlugins(this.oldThemeName) | |
112 | ||
113 | const currentTheme = this.getCurrentTheme() | |
114 | ||
115 | console.log('Enabling %s theme.', currentTheme) | |
116 | ||
117 | this.loadTheme(currentTheme) | |
118 | ||
119 | const theme = this.getTheme(currentTheme) | |
120 | if (theme) { | |
121 | console.log('Adding scripts of theme %s.', currentTheme) | |
122 | this.pluginService.addPlugin(theme, true) | |
123 | ||
124 | this.pluginService.reloadLoadedScopes() | |
125 | ||
126 | this.localStorageService.setItem(UserLocalStorageKeys.LAST_ACTIVE_THEME, JSON.stringify(theme), false) | |
127 | } else { | |
128 | this.localStorageService.removeItem(UserLocalStorageKeys.LAST_ACTIVE_THEME, false) | |
129 | } | |
130 | ||
131 | this.oldThemeName = currentTheme | |
132 | } | |
133 | ||
134 | private listenUserTheme () { | |
135 | // We don't need them anymore | |
136 | this.themeFromLocalStorage = undefined | |
137 | this.themeDOMLinksFromLocalStorage = [] | |
138 | ||
139 | if (!this.auth.isLoggedIn()) { | |
140 | this.updateCurrentTheme() | |
141 | ||
142 | this.localStorageService.watch([ UserLocalStorageKeys.THEME ]).subscribe( | |
143 | () => this.updateCurrentTheme() | |
144 | ) | |
145 | } | |
146 | ||
147 | this.auth.userInformationLoaded | |
148 | .pipe(first()) | |
149 | .subscribe(() => this.updateCurrentTheme()) | |
150 | } | |
151 | ||
152 | private loadAndSetFromLocalStorage () { | |
153 | const lastActiveThemeString = this.localStorageService.getItem(UserLocalStorageKeys.LAST_ACTIVE_THEME) | |
154 | if (!lastActiveThemeString) return | |
155 | ||
156 | try { | |
157 | const lastActiveTheme = JSON.parse(lastActiveThemeString) | |
158 | this.themeFromLocalStorage = lastActiveTheme | |
159 | ||
160 | this.injectThemes([ lastActiveTheme ], true) | |
161 | this.updateCurrentTheme() | |
162 | } catch (err) { | |
163 | console.error('Cannot parse last active theme.', err) | |
164 | return | |
165 | } | |
166 | } | |
167 | ||
168 | private removeThemePlugins (themeName: string) { | |
169 | const oldTheme = this.getTheme(themeName) | |
170 | if (oldTheme) { | |
171 | console.log('Removing scripts of old theme %s.', themeName) | |
172 | this.pluginService.removePlugin(oldTheme) | |
173 | } | |
174 | } | |
175 | ||
176 | private removeThemeFromLocalStorageIfNeeded (themes: ServerConfigTheme[]) { | |
177 | if (!this.themeFromLocalStorage) return | |
178 | ||
179 | const loadedTheme = themes.find(t => t.name === this.themeFromLocalStorage.name) | |
180 | if (!loadedTheme || loadedTheme.version !== this.themeFromLocalStorage.version) { | |
181 | // Need to remove this theme: we loaded an old version or a theme that does not exist anymore | |
182 | this.removeThemePlugins(this.themeFromLocalStorage.name) | |
183 | this.oldThemeName = undefined | |
184 | ||
185 | const head = this.getHeadElement() | |
186 | for (const htmlLinkElement of this.themeDOMLinksFromLocalStorage) { | |
187 | head.removeChild(htmlLinkElement) | |
188 | } | |
189 | ||
190 | this.themeFromLocalStorage = undefined | |
191 | this.themeDOMLinksFromLocalStorage = [] | |
192 | } | |
193 | } | |
194 | ||
195 | private getHeadElement () { | |
196 | return document.getElementsByTagName('head')[0] | |
197 | } | |
198 | ||
199 | private getTheme (name: string) { | |
200 | return this.themes.find(t => t.name === name) | |
201 | } | |
202 | } |