client/src/app/core/theme/theme.service.ts

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