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 { ServerConfigTheme } from '@shared/models'
   7
   8 @Injectable()
   9 export class ThemeService {
  10
  11   private oldThemeName: string
  12   private themes: ServerConfigTheme[] = []
  13
  14   constructor (
  15     private auth: AuthService,
  16     private pluginService: PluginService,
  17     private server: ServerService
  18   ) {}
  19
  20   initialize () {
  21     this.server.configLoaded
  22         .subscribe(() => {
  23           this.injectThemes()
  24
  25           this.listenUserTheme()
  26         })
  27   }
  28
  29   private injectThemes () {
  30     this.themes = this.server.getConfig().theme.registered
  31
  32     console.log('Injecting %d themes.', this.themes.length)
  33
  34     const head = document.getElementsByTagName('head')[0]
  35
  36     for (const theme of this.themes) {
  37
  38       for (const css of theme.css) {
  39         const link = document.createElement('link')
  40
  41         const href = environment.apiUrl + `/themes/${theme.name}/${theme.version}/css/${css}`
  42         link.setAttribute('href', href)
  43         link.setAttribute('rel', 'alternate stylesheet')
  44         link.setAttribute('type', 'text/css')
  45         link.setAttribute('title', theme.name)
  46         link.setAttribute('disabled', '')
  47
  48         head.appendChild(link)
  49       }
  50     }
  51   }
  52
  53   private getCurrentTheme () {
  54     if (this.auth.isLoggedIn()) {
  55       const theme = this.auth.getUser().theme
  56       if (theme !== 'instance-default') return theme
  57     }
  58
  59     return this.server.getConfig().theme.default
  60   }
  61
  62   private loadTheme (name: string) {
  63     const links = document.getElementsByTagName('link')
  64     for (let i = 0; i < links.length; i++) {
  65       const link = links[ i ]
  66       if (link.getAttribute('rel').indexOf('style') !== -1 && link.getAttribute('title')) {
  67         link.disabled = link.getAttribute('title') !== name
  68       }
  69     }
  70   }
  71
  72   private updateCurrentTheme () {
  73     if (this.oldThemeName) {
  74       const oldTheme = this.getTheme(this.oldThemeName)
  75       if (oldTheme) {
  76         console.log('Removing scripts of old theme %s.', this.oldThemeName)
  77         this.pluginService.removePlugin(oldTheme)
  78       }
  79     }
  80
  81     const currentTheme = this.getCurrentTheme()
  82
  83     console.log('Enabling %s theme.', currentTheme)
  84
  85     this.loadTheme(currentTheme)
  86     const theme = this.getTheme(currentTheme)
  87     if (theme) {
  88       console.log('Adding scripts of theme %s.', currentTheme)
  89       this.pluginService.addPlugin(theme)
  90
  91       this.pluginService.reloadLoadedScopes()
  92     }
  93
  94     this.oldThemeName = currentTheme
  95   }
  96
  97   private listenUserTheme () {
  98     this.auth.userInformationLoaded
  99       .subscribe(() => this.updateCurrentTheme())
 100   }
 101
 102   private getTheme (name: string) {
 103     return this.themes.find(t => t.name === name)
 104   }
 105 }