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