2019-09-16 22:57:56 +02:00
|
|
|
import { Events } from 'framework/events';
|
2019-09-15 14:16:32 +02:00
|
|
|
import { Features } from 'util/features';
|
|
|
|
import { Locale } from 'util/locale';
|
2020-12-19 12:14:32 +01:00
|
|
|
import { ThemeWatcher } from 'comp/browser/theme-watcher';
|
|
|
|
import { AppSettingsModel } from 'models/app-settings-model';
|
2021-01-07 20:38:55 +01:00
|
|
|
import { Launcher } from 'comp/launcher';
|
2020-12-19 12:14:32 +01:00
|
|
|
import { Logger } from 'util/logger';
|
|
|
|
|
|
|
|
const logger = new Logger('settings-manager');
|
2016-08-21 23:12:49 +02:00
|
|
|
|
|
|
|
const SettingsManager = {
|
|
|
|
neutralLocale: null,
|
2020-11-27 18:47:55 +01:00
|
|
|
activeLocale: 'en-US',
|
2020-05-22 11:44:49 +02:00
|
|
|
activeTheme: null,
|
2016-08-21 23:12:49 +02:00
|
|
|
|
2017-02-19 10:29:18 +01:00
|
|
|
allLocales: {
|
2020-11-27 18:47:55 +01:00
|
|
|
'en-US': 'English',
|
2017-05-05 20:27:06 +02:00
|
|
|
'de-DE': 'Deutsch',
|
2017-05-05 20:27:52 +02:00
|
|
|
'fr-FR': 'Français'
|
2017-02-19 10:29:18 +01:00
|
|
|
},
|
|
|
|
|
2017-02-21 22:05:18 +01:00
|
|
|
allThemes: {
|
2020-11-28 23:38:12 +01:00
|
|
|
dark: 'setGenThemeDark',
|
|
|
|
light: 'setGenThemeLight',
|
2017-02-21 22:05:18 +01:00
|
|
|
sd: 'setGenThemeSd',
|
|
|
|
sl: 'setGenThemeSl',
|
2020-12-19 12:14:32 +01:00
|
|
|
fb: 'setGenThemeFb',
|
2020-12-19 14:00:51 +01:00
|
|
|
bl: 'setGenThemeBl',
|
2020-12-19 12:14:32 +01:00
|
|
|
db: 'setGenThemeDb',
|
2020-12-19 14:00:51 +01:00
|
|
|
lb: 'setGenThemeLb',
|
2017-02-21 22:05:18 +01:00
|
|
|
te: 'setGenThemeTe',
|
2020-12-19 14:00:51 +01:00
|
|
|
lt: 'setGenThemeLt',
|
2020-12-19 14:05:56 +01:00
|
|
|
dc: 'setGenThemeDc',
|
|
|
|
hc: 'setGenThemeHc'
|
2017-02-21 22:05:18 +01:00
|
|
|
},
|
|
|
|
|
2020-12-19 16:39:18 +01:00
|
|
|
// changing something here? don't forget about desktop/app.js
|
2020-12-19 12:14:32 +01:00
|
|
|
autoSwitchedThemes: [
|
|
|
|
{
|
|
|
|
name: 'setGenThemeDefault',
|
|
|
|
dark: 'dark',
|
|
|
|
light: 'light'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'setGenThemeSol',
|
|
|
|
dark: 'sd',
|
|
|
|
light: 'sl'
|
2020-12-19 14:00:51 +01:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'setGenThemeBlue',
|
|
|
|
dark: 'fb',
|
|
|
|
light: 'bl'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'setGenThemeBrown',
|
|
|
|
dark: 'db',
|
|
|
|
light: 'lb'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'setGenThemeTerminal',
|
|
|
|
dark: 'te',
|
|
|
|
light: 'lt'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'setGenThemeHighContrast',
|
|
|
|
dark: 'dc',
|
|
|
|
light: 'hc'
|
2020-12-19 12:14:32 +01:00
|
|
|
}
|
|
|
|
],
|
|
|
|
|
2019-08-16 23:05:39 +02:00
|
|
|
customLocales: {},
|
2017-02-19 10:29:18 +01:00
|
|
|
|
2020-12-19 12:14:32 +01:00
|
|
|
init() {
|
|
|
|
Events.on('dark-mode-changed', () => this.darkModeChanged());
|
|
|
|
},
|
|
|
|
|
|
|
|
setBySettings() {
|
|
|
|
this.setTheme(AppSettingsModel.theme);
|
|
|
|
this.setFontSize(AppSettingsModel.fontSize);
|
|
|
|
const locale = AppSettingsModel.locale;
|
2017-02-01 22:27:08 +01:00
|
|
|
try {
|
|
|
|
if (locale) {
|
2020-12-19 12:14:32 +01:00
|
|
|
this.setLocale(AppSettingsModel.locale);
|
2017-02-01 22:27:08 +01:00
|
|
|
} else {
|
2017-01-29 10:04:18 +01:00
|
|
|
this.setLocale(this.getBrowserLocale());
|
2017-02-01 22:27:08 +01:00
|
|
|
}
|
|
|
|
} catch (ex) {}
|
2016-05-15 09:57:29 +02:00
|
|
|
},
|
|
|
|
|
2020-05-22 11:44:49 +02:00
|
|
|
getDefaultTheme() {
|
2020-11-28 23:38:12 +01:00
|
|
|
return 'dark';
|
2020-05-22 11:44:49 +02:00
|
|
|
},
|
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
setTheme(theme) {
|
2020-05-22 11:44:49 +02:00
|
|
|
if (!theme) {
|
|
|
|
if (this.activeTheme) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
theme = this.getDefaultTheme();
|
|
|
|
}
|
2019-09-17 22:17:40 +02:00
|
|
|
for (const cls of document.body.classList) {
|
|
|
|
if (/^th-/.test(cls)) {
|
2015-10-31 07:18:24 +01:00
|
|
|
document.body.classList.remove(cls);
|
|
|
|
}
|
2019-09-17 22:17:40 +02:00
|
|
|
}
|
2020-12-19 12:14:32 +01:00
|
|
|
if (AppSettingsModel.autoSwitchTheme) {
|
|
|
|
theme = this.selectDarkOrLightTheme(theme);
|
|
|
|
}
|
2016-07-24 19:11:25 +02:00
|
|
|
document.body.classList.add(this.getThemeClass(theme));
|
2017-01-31 07:50:28 +01:00
|
|
|
const metaThemeColor = document.head.querySelector('meta[name=theme-color]');
|
2016-04-03 11:32:38 +02:00
|
|
|
if (metaThemeColor) {
|
|
|
|
metaThemeColor.content = window.getComputedStyle(document.body).backgroundColor;
|
|
|
|
}
|
2021-01-07 20:38:55 +01:00
|
|
|
if (Features.isMac) {
|
|
|
|
const prevVibrancy = this.getThemeVibrancy(this.activeTheme);
|
|
|
|
const newVibrancy = this.getThemeVibrancy(theme);
|
|
|
|
if (prevVibrancy !== newVibrancy) {
|
|
|
|
// Launcher.getMainWindow().setBackgroundColor('#00000000'); // this doesn't work
|
|
|
|
Launcher.getMainWindow().setVibrancy(newVibrancy);
|
|
|
|
}
|
|
|
|
}
|
2020-05-22 11:44:49 +02:00
|
|
|
this.activeTheme = theme;
|
2020-12-19 12:14:32 +01:00
|
|
|
logger.debug('Theme changed', theme);
|
|
|
|
Events.emit('theme-applied');
|
2016-05-15 09:57:29 +02:00
|
|
|
},
|
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
getThemeClass(theme) {
|
2016-07-24 19:11:25 +02:00
|
|
|
return 'th-' + theme;
|
|
|
|
},
|
|
|
|
|
2021-01-07 20:38:55 +01:00
|
|
|
getThemeVibrancy(theme) {
|
|
|
|
return theme === 'dark' ? 'sidebar' : null;
|
|
|
|
},
|
|
|
|
|
2020-12-19 12:14:32 +01:00
|
|
|
selectDarkOrLightTheme(theme) {
|
|
|
|
for (const config of this.autoSwitchedThemes) {
|
|
|
|
if (config.light === theme || config.dark === theme) {
|
|
|
|
return ThemeWatcher.dark ? config.dark : config.light;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return theme;
|
|
|
|
},
|
|
|
|
|
|
|
|
darkModeChanged() {
|
|
|
|
if (AppSettingsModel.autoSwitchTheme) {
|
|
|
|
for (const config of this.autoSwitchedThemes) {
|
|
|
|
if (config.light === this.activeTheme || config.dark === this.activeTheme) {
|
|
|
|
const newTheme = ThemeWatcher.dark ? config.dark : config.light;
|
|
|
|
logger.debug('Setting theme triggered by system settings change', newTheme);
|
|
|
|
this.setTheme(newTheme);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
setFontSize(fontSize) {
|
2019-09-15 08:11:11 +02:00
|
|
|
const defaultFontSize = Features.isMobile ? 14 : 12;
|
2019-08-16 23:05:39 +02:00
|
|
|
document.documentElement.style.fontSize = defaultFontSize + (fontSize || 0) * 2 + 'px';
|
2016-08-21 23:12:49 +02:00
|
|
|
},
|
|
|
|
|
2017-01-29 10:04:18 +01:00
|
|
|
setLocale(loc) {
|
|
|
|
if (!loc || loc === this.activeLocale) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
let localeValues;
|
2020-11-27 18:47:55 +01:00
|
|
|
if (loc !== 'en-US') {
|
2017-02-19 10:29:18 +01:00
|
|
|
if (this.customLocales[loc]) {
|
|
|
|
localeValues = this.customLocales[loc];
|
|
|
|
} else {
|
2019-09-15 08:49:41 +02:00
|
|
|
localeValues = require('../../locales/' + loc + '.json');
|
2017-02-19 10:29:18 +01:00
|
|
|
}
|
2017-01-29 10:04:18 +01:00
|
|
|
}
|
2016-08-21 23:12:49 +02:00
|
|
|
if (!this.neutralLocale) {
|
2019-09-17 23:44:17 +02:00
|
|
|
this.neutralLocale = { ...Locale };
|
2016-08-21 23:12:49 +02:00
|
|
|
}
|
2019-09-17 22:17:40 +02:00
|
|
|
Object.assign(Locale, this.neutralLocale, localeValues);
|
2017-01-29 10:04:18 +01:00
|
|
|
this.activeLocale = loc;
|
2019-09-16 22:57:56 +02:00
|
|
|
Events.emit('set-locale', loc);
|
2017-01-29 10:04:18 +01:00
|
|
|
},
|
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
getBrowserLocale() {
|
2019-08-16 23:05:39 +02:00
|
|
|
const language = (navigator.languages && navigator.languages[0]) || navigator.language;
|
2020-11-27 18:47:55 +01:00
|
|
|
if (language && language.startsWith('en')) {
|
|
|
|
return 'en-US';
|
2017-02-02 21:49:27 +01:00
|
|
|
}
|
|
|
|
return language;
|
2015-10-31 07:18:24 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-09-15 14:16:32 +02:00
|
|
|
export { SettingsManager };
|