2018-01-30 16:59:27 +01:00
|
|
|
/**
|
|
|
|
* BetterDiscord Theme Manager Module
|
|
|
|
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
|
|
|
* All rights reserved.
|
|
|
|
* https://betterdiscord.net
|
|
|
|
*
|
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import ContentManager from './contentmanager';
|
2018-02-05 15:19:24 +01:00
|
|
|
import { DOM } from 'ui';
|
2018-02-11 16:42:24 +01:00
|
|
|
import { FileUtils, ClientIPC } from 'common';
|
2018-02-05 15:19:24 +01:00
|
|
|
|
|
|
|
class Theme {
|
|
|
|
|
|
|
|
constructor(themeInternals) {
|
|
|
|
this.__themeInternals = themeInternals;
|
2018-02-08 21:19:26 +01:00
|
|
|
this.hasSettings = this.themeConfig && this.themeConfig.length > 0;
|
|
|
|
this.saveSettings = this.saveSettings.bind(this);
|
2018-02-05 15:19:24 +01:00
|
|
|
this.enable = this.enable.bind(this);
|
|
|
|
this.disable = this.disable.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
get configs() { return this.__themeInternals.configs }
|
|
|
|
get info() { return this.__themeInternals.info }
|
|
|
|
get icon() { return this.info.icon }
|
|
|
|
get paths() { return this.__themeInternals.paths }
|
|
|
|
get main() { return this.__themeInternals.main }
|
|
|
|
get defaultConfig() { return this.configs.defaultConfig }
|
|
|
|
get userConfig() { return this.configs.userConfig }
|
|
|
|
get name() { return this.info.name }
|
|
|
|
get authors() { return this.info.authors }
|
|
|
|
get version() { return this.info.version }
|
|
|
|
get themePath() { return this.paths.contentPath }
|
|
|
|
get dirName() { return this.paths.dirName }
|
|
|
|
get enabled() { return this.userConfig.enabled }
|
|
|
|
get themeConfig() { return this.userConfig.config }
|
2018-02-11 20:31:24 +01:00
|
|
|
get css() { return this.userConfig.css }
|
2018-02-05 15:19:24 +01:00
|
|
|
get id() { return this.name.toLowerCase().replace(/\s+/g, '-') }
|
|
|
|
|
2018-02-08 21:19:26 +01:00
|
|
|
async saveSettings(newSettings) {
|
2018-02-11 20:31:24 +01:00
|
|
|
for (let category of newSettings) {
|
|
|
|
const oldCategory = this.themeConfig.find(c => c.category === category.category);
|
|
|
|
for (let setting of category.settings) {
|
|
|
|
const oldSetting = oldCategory.settings.find(s => s.id === setting.id);
|
|
|
|
if (oldSetting.value === setting.value) continue;
|
|
|
|
oldSetting.value = setting.value;
|
|
|
|
if (this.settingChanged) this.settingChanged(category.category, setting.id, setting.value);
|
2018-02-08 21:19:26 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-02-11 20:31:24 +01:00
|
|
|
// As the theme's configuration has changed it needs recompiling
|
|
|
|
// When the compiled CSS has been save it will also save the configuration
|
|
|
|
await this.recompile();
|
2018-02-08 21:19:26 +01:00
|
|
|
|
|
|
|
if (this.settingsChanged) this.settingsChanged(this.themeConfig);
|
|
|
|
|
|
|
|
return this.pluginConfig;
|
|
|
|
}
|
|
|
|
|
2018-02-11 20:31:24 +01:00
|
|
|
async saveConfiguration() {
|
|
|
|
try {
|
|
|
|
await FileUtils.writeFile(`${this.themePath}/user.config.json`, JSON.stringify({
|
|
|
|
enabled: this.enabled,
|
|
|
|
config: this.themeConfig,
|
|
|
|
css: this.css
|
|
|
|
}));
|
|
|
|
} catch (err) {
|
|
|
|
throw err;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-02-05 15:19:24 +01:00
|
|
|
enable() {
|
2018-02-11 20:31:24 +01:00
|
|
|
if (!this.enabled) {
|
|
|
|
this.userConfig.enabled = true;
|
|
|
|
this.saveConfiguration();
|
|
|
|
}
|
2018-02-05 15:19:24 +01:00
|
|
|
DOM.injectTheme(this.css, this.id);
|
|
|
|
}
|
|
|
|
|
|
|
|
disable() {
|
2018-02-05 17:48:03 +01:00
|
|
|
this.userConfig.enabled = false;
|
2018-02-11 20:31:24 +01:00
|
|
|
this.saveConfiguration();
|
2018-02-05 15:19:24 +01:00
|
|
|
DOM.deleteTheme(this.id);
|
|
|
|
}
|
|
|
|
|
2018-02-11 20:31:24 +01:00
|
|
|
async compile() {
|
|
|
|
console.log('Compiling CSS');
|
|
|
|
|
|
|
|
let css = '';
|
|
|
|
if (this.info.type === 'sass') {
|
|
|
|
css = await ClientIPC.send('bd-compileSass', {
|
|
|
|
scss: ThemeManager.getConfigAsSCSS(this.themeConfig),
|
|
|
|
path: this.paths.mainPath
|
|
|
|
});
|
|
|
|
console.log(css);
|
|
|
|
} else {
|
|
|
|
css = await FileUtils.readFile(this.paths.mainPath);
|
|
|
|
}
|
|
|
|
|
|
|
|
return css;
|
|
|
|
}
|
|
|
|
|
|
|
|
async recompile() {
|
|
|
|
const css = await this.compile();
|
|
|
|
this.userConfig.css = css;
|
|
|
|
|
|
|
|
await this.saveConfiguration();
|
|
|
|
|
|
|
|
if (this.enabled) {
|
|
|
|
DOM.deleteTheme(this.id);
|
|
|
|
DOM.injectTheme(this.css, this.id);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-02-05 15:19:24 +01:00
|
|
|
}
|
2018-01-30 16:59:27 +01:00
|
|
|
|
2018-02-11 20:31:24 +01:00
|
|
|
export default class ThemeManager extends ContentManager {
|
2018-01-30 16:59:27 +01:00
|
|
|
|
|
|
|
static get localThemes() {
|
|
|
|
return this.localContent;
|
|
|
|
}
|
|
|
|
|
|
|
|
static get pathId() {
|
|
|
|
return 'themes';
|
|
|
|
}
|
|
|
|
|
|
|
|
static get loadAllThemes() {
|
|
|
|
return this.loadAllContent;
|
|
|
|
}
|
|
|
|
|
2018-02-05 15:19:24 +01:00
|
|
|
static get loadContent() { return this.loadTheme }
|
|
|
|
static async loadTheme(paths, configs, info, main) {
|
|
|
|
try {
|
2018-02-11 20:31:24 +01:00
|
|
|
const instance = new Theme({
|
|
|
|
configs, info, main,
|
|
|
|
paths: {
|
|
|
|
contentPath: paths.contentPath,
|
|
|
|
dirName: paths.dirName,
|
|
|
|
mainPath: paths.mainPath
|
|
|
|
}
|
|
|
|
});
|
|
|
|
if (!instance.css) instance.recompile();
|
|
|
|
else if (instance.enabled) instance.enable();
|
2018-02-05 15:19:24 +01:00
|
|
|
return instance;
|
|
|
|
} catch (err) {
|
|
|
|
throw err;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-02-05 17:48:03 +01:00
|
|
|
static enableTheme(theme) {
|
|
|
|
theme.enable();
|
|
|
|
}
|
|
|
|
|
|
|
|
static disableTheme(theme) {
|
|
|
|
theme.disable();
|
|
|
|
}
|
|
|
|
|
2018-02-11 20:31:24 +01:00
|
|
|
static getConfigAsSCSS(config) {
|
|
|
|
const variables = [];
|
|
|
|
|
|
|
|
for (let category of config) {
|
|
|
|
for (let setting of category.settings) {
|
|
|
|
let scss_name = null;
|
|
|
|
let scss_value = null;
|
|
|
|
let scss_line = null;
|
|
|
|
|
|
|
|
if (typeof setting.value == 'string')
|
|
|
|
scss_value = setting.scss_raw ? setting.value : '\'' + setting.value.replace(/\\/g, '\\\\').replace(/'/g, '\\\'') + '\'';
|
|
|
|
else if (typeof setting.value === 'boolean' || typeof setting.value === 'number')
|
|
|
|
scss_value = setting.value.toString();
|
|
|
|
|
|
|
|
scss_name = setting.id.replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-');
|
|
|
|
|
|
|
|
scss_line = `$${scss_name}: ${scss_value};`;
|
|
|
|
variables.push(scss_line);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return variables.join('\n');
|
|
|
|
}
|
|
|
|
|
2018-01-30 16:59:27 +01:00
|
|
|
}
|