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

   1 import { Injectable } from '@angular/core'
   2 import { AuthService } from '@app/core/auth'
   3 import { ServerService } from '@app/core/server'
   4 import { environment } from '../../../environments/environment'
   5 import { PluginService } from '@app/core/plugins/plugin.service'
   6 import { ServerConfig, ServerConfigTheme } from '@shared/models'
   7 import { first } from 'rxjs/operators'
   8 import { User } from '@app/shared/users/user.model'
   9 import { UserService } from '@app/shared/users/user.service'
  10 import { LocalStorageService } from '@app/shared/misc/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     return this.serverConfig.theme.default
  86   }
  87
  88   private loadTheme (name: string) {
  89     const links = document.getElementsByTagName('link')
  90     for (let i = 0; i < links.length; i++) {
  91       const link = links[ i ]
  92       if (link.getAttribute('rel').indexOf('style') !== -1 && link.getAttribute('title')) {
  93         link.disabled = link.getAttribute('title') !== name
  94       }
  95     }
  96   }
  97
  98   private updateCurrentTheme () {
  99     if (this.oldThemeName) this.removeThemePlugins(this.oldThemeName)
 100
 101     const currentTheme = this.getCurrentTheme()
 102
 103     console.log('Enabling %s theme.', currentTheme)
 104
 105     this.loadTheme(currentTheme)
 106
 107     const theme = this.getTheme(currentTheme)
 108     if (theme) {
 109       console.log('Adding scripts of theme %s.', currentTheme)
 110       this.pluginService.addPlugin(theme, true)
 111
 112       this.pluginService.reloadLoadedScopes()
 113
 114       this.localStorageService.setItem(User.KEYS.THEME, JSON.stringify(theme), false)
 115     } else {
 116       this.localStorageService.removeItem(User.KEYS.THEME, false)
 117     }
 118
 119     this.oldThemeName = currentTheme
 120   }
 121
 122   private listenUserTheme () {
 123     // We don't need them anymore
 124     this.themeFromLocalStorage = undefined
 125     this.themeDOMLinksFromLocalStorage = []
 126
 127     if (!this.auth.isLoggedIn()) {
 128       this.updateCurrentTheme()
 129
 130       this.localStorageService.watch([User.KEYS.THEME]).subscribe(
 131         () => this.updateCurrentTheme()
 132       )
 133     }
 134
 135     this.auth.userInformationLoaded
 136       .pipe(first())
 137       .subscribe(() => this.updateCurrentTheme())
 138   }
 139
 140   private loadAndSetFromLocalStorage () {
 141     const lastActiveThemeString = this.localStorageService.getItem(User.KEYS.THEME)
 142     if (!lastActiveThemeString) return
 143
 144     try {
 145       const lastActiveTheme = JSON.parse(lastActiveThemeString)
 146       this.themeFromLocalStorage = lastActiveTheme
 147
 148       this.injectThemes([ lastActiveTheme ], true)
 149       this.updateCurrentTheme()
 150     } catch (err) {
 151       console.error('Cannot parse last active theme.', err)
 152       return
 153     }
 154   }
 155
 156   private removeThemePlugins (themeName: string) {
 157     const oldTheme = this.getTheme(themeName)
 158     if (oldTheme) {
 159       console.log('Removing scripts of old theme %s.', themeName)
 160       this.pluginService.removePlugin(oldTheme)
 161     }
 162   }
 163
 164   private removeThemeFromLocalStorageIfNeeded (themes: ServerConfigTheme[]) {
 165     if (!this.themeFromLocalStorage) return
 166
 167     const loadedTheme = themes.find(t => t.name === this.themeFromLocalStorage.name)
 168     if (!loadedTheme || loadedTheme.version !== this.themeFromLocalStorage.version) {
 169       // Need to remove this theme: we loaded an old version or a theme that does not exist anymore
 170       this.removeThemePlugins(this.themeFromLocalStorage.name)
 171       this.oldThemeName = undefined
 172
 173       const head = this.getHeadElement()
 174       for (const htmlLinkElement of this.themeDOMLinksFromLocalStorage) {
 175         head.removeChild(htmlLinkElement)
 176       }
 177
 178       this.themeFromLocalStorage = undefined
 179       this.themeDOMLinksFromLocalStorage = []
 180     }
 181   }
 182
 183   private getHeadElement () {
 184     return document.getElementsByTagName('head')[0]
 185   }
 186
 187   private getTheme (name: string) {
 188     return this.themes.find(t => t.name === name)
 189   }
 190 }