2018-12-11 19:43:51 +01:00
//META{"name":"ThemeSettings"}*//
class ThemeSettings {
2019-01-05 23:53:38 +01:00
initConstructor ( ) {
this . patchModules = {
2019-01-07 20:50:24 +01:00
"V2C_ThemeCard" : "componentDidMount"
2019-01-05 23:53:38 +01:00
} ;
}
2018-12-11 19:43:51 +01:00
getName ( ) { return "ThemeSettings" ; }
2018-12-16 21:30:43 +01:00
getDescription ( ) { return "Allows you to change Theme Variables within BetterDiscord. Adds a Settings button (similar to Plugins) to customizable Themes in your Themes Page." ; }
2018-12-11 19:43:51 +01:00
2019-01-07 20:50:24 +01:00
getVersion ( ) { return "1.0.7" ; }
2018-12-11 19:43:51 +01:00
getAuthor ( ) { return "DevilBro" ; }
//legacy
load ( ) { }
start ( ) {
var libraryScript = null ;
if ( typeof BDFDB !== "object" || typeof BDFDB . isLibraryOutdated !== "function" || BDFDB . isLibraryOutdated ( ) ) {
libraryScript = document . querySelector ( 'head script[src="https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.js"]' ) ;
if ( libraryScript ) libraryScript . remove ( ) ;
libraryScript = document . createElement ( "script" ) ;
libraryScript . setAttribute ( "type" , "text/javascript" ) ;
libraryScript . setAttribute ( "src" , "https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.js" ) ;
document . head . appendChild ( libraryScript ) ;
}
this . startTimeout = setTimeout ( ( ) => { this . initialize ( ) ; } , 30000 ) ;
if ( typeof BDFDB === "object" && typeof BDFDB . isLibraryOutdated === "function" ) this . initialize ( ) ;
else libraryScript . addEventListener ( "load" , ( ) => { this . initialize ( ) ; } ) ;
}
initialize ( ) {
if ( typeof BDFDB === "object" ) {
BDFDB . loadMessage ( this ) ;
this . fs = require ( "fs" ) ;
this . path = require ( "path" ) ;
this . dir = BDFDB . getThemesFolder ( ) ;
2019-01-05 23:53:38 +01:00
BDFDB . WebModules . forceAllUpdates ( this ) ;
2018-12-11 19:43:51 +01:00
}
else {
console . error ( this . getName ( ) + ": Fatal Error: Could not load BD functions!" ) ;
}
}
stop ( ) {
if ( typeof BDFDB === "object" ) {
2019-01-05 23:53:38 +01:00
BDFDB . removeEles ( ".themes-settings-button" , ".themes-settings-footer" ) ;
2018-12-11 19:43:51 +01:00
BDFDB . unloadMessage ( this ) ;
}
}
2019-01-05 23:53:38 +01:00
2018-12-11 19:43:51 +01:00
// begin of own functions
2019-01-05 23:53:38 +01:00
processV2CThemeCard ( instance , wrapper ) {
if ( instance . props && instance . props . theme && ! wrapper . querySelector ( BDFDB . dotCN . _reposettingsbutton + ".themes-settings-button" ) ) {
let vars = this . getThemeVars ( instance . props . theme . css ) ;
if ( vars . length ) {
let footer = wrapper . querySelector ( BDFDB . dotCN . _repofooter ) ;
if ( ! footer ) {
footer = document . createElement ( "div" ) ;
footer . className = BDFDB . disCNS . _repofooter + "themes-settings-footer" ;
wrapper . appendChild ( footer ) ;
2018-12-11 19:43:51 +01:00
}
2019-01-05 23:53:38 +01:00
let button = document . createElement ( "button" ) ;
button . className = BDFDB . disCNS . _reposettingsbutton + "themes-settings-button" ;
button . innerText = "Settings" ;
footer . appendChild ( button ) ;
button . addEventListener ( "click" , ( ) => {
wrapper . classList . add ( BDFDB . disCN . _reposettingsopen ) ;
wrapper . classList . remove ( BDFDB . disCN . _reposettingsclosed ) ;
let children = [ ] ;
while ( wrapper . childElementCount ) {
children . push ( wrapper . firstChild ) ;
wrapper . firstChild . remove ( ) ;
2018-12-11 19:43:51 +01:00
}
2019-01-05 23:53:38 +01:00
let closebutton = $ ( ` <div style="float: right; cursor: pointer;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" style="width: 18px; height: 18px;"><g class="background" fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg></div> ` ) [ 0 ] ;
wrapper . appendChild ( closebutton ) ;
closebutton . addEventListener ( "click" , ( ) => {
wrapper . classList . remove ( BDFDB . disCN . _reposettingsopen ) ;
wrapper . classList . add ( BDFDB . disCN . _reposettingsclosed ) ;
while ( wrapper . childElementCount ) wrapper . firstChild . remove ( ) ;
while ( children . length ) wrapper . appendChild ( children . shift ( ) ) ;
} )
2019-01-07 20:50:24 +01:00
this . createThemeSettings ( wrapper , instance . props . theme , vars ) ;
2019-01-05 23:53:38 +01:00
} ) ;
2018-12-11 19:43:51 +01:00
}
}
}
getThemeVars ( css ) {
let vars = css . split ( ":root" ) ;
if ( vars . length > 1 ) {
2018-12-12 12:08:53 +01:00
vars = vars [ 1 ] . replace ( /\t| {2,}/g , "" ) . replace ( /\n\/\*.*?\*\//g , "" ) . replace ( /[\n\r]/g , "" ) ;
2018-12-11 19:43:51 +01:00
vars = vars . split ( "{" ) ;
vars . shift ( ) ;
2018-12-12 12:08:53 +01:00
vars = vars . join ( "{" ) . replace ( /\s*(:|;|--|\*)\s*/g , "$1" ) ;
2018-12-11 21:36:15 +01:00
vars = vars . split ( "}" ) [ 0 ] ;
2018-12-12 12:08:53 +01:00
return vars . slice ( 2 ) . split ( /;--|\*\/--/ ) ;
2018-12-11 19:43:51 +01:00
}
return [ ] ;
}
2019-01-07 20:50:24 +01:00
createThemeSettings ( wrapper , theme , vars ) {
2018-12-11 19:43:51 +01:00
if ( ! this . started || typeof BDFDB !== "object" ) return ;
2019-01-05 23:53:38 +01:00
var settingshtml = ` <div class="theme-settings" id="theme-settings- ${ theme . name } "><div class=" ${ theme . name } -settings DevilBro-settings"><div class=" ${ BDFDB . disCNS . titledefault + BDFDB . disCNS . title + BDFDB . disCNS . size18 + BDFDB . disCNS . height24 + BDFDB . disCNS . weightnormal + BDFDB . disCN . marginbottom8 } "> ${ BDFDB . encodeToHTML ( theme . name ) } </div><div class="DevilBro-settings-inner"><div class=" ${ BDFDB . disCNS . flex + BDFDB . disCNS . flex2 + BDFDB . disCNS . horizontal + BDFDB . disCNS . horizontal2 + BDFDB . disCNS . directionrow + BDFDB . disCNS . justifystart + BDFDB . disCNS . aligncenter + BDFDB . disCNS . nowrap + BDFDB . disCN . marginbottom8 } " style="flex: 0 0 auto;"><h3 class=" ${ BDFDB . disCNS . titledefault + BDFDB . disCNS . title + BDFDB . disCNS . marginreset + BDFDB . disCNS . weightmedium + BDFDB . disCNS . size16 + BDFDB . disCNS . height24 + BDFDB . disCN . flexchild } " style="flex: 1 1 auto;">Update all variables</h3><button type="button" class=" ${ BDFDB . disCNS . flexchild + BDFDB . disCNS . button + BDFDB . disCNS . buttonlookfilled + BDFDB . disCNS . buttoncolorgreen + BDFDB . disCNS . buttonsizemedium + BDFDB . disCN . buttongrow } update-button" style="flex: 0 0 auto;"><div class=" ${ BDFDB . disCN . buttoncontents } ">Update</div></button></div></div></div> ` ;
2018-12-11 21:36:15 +01:00
var settingspanel = $ ( settingshtml ) [ 0 ] ;
var settingspanelinner = settingspanel . querySelector ( ".DevilBro-settings-inner" ) ;
2019-01-07 20:50:24 +01:00
var maxwidth = wrapper . getBoundingClientRect ( ) . width - 80 ;
2018-12-11 19:43:51 +01:00
for ( let varstr of vars ) {
varstr = varstr . split ( ":" ) ;
2018-12-12 12:08:53 +01:00
let varname = varstr . shift ( ) . trim ( ) ;
varstr = varstr . join ( ":" ) . split ( /;|\/\*/ ) ;
let varvalue = varstr . shift ( ) . trim ( ) ;
let vardescription = varstr . join ( "" ) . replace ( /\*\/|\/\*/g , "" ) . replace ( /:/g , ": " ) . replace ( /: \//g , ":/" ) . replace ( /--/g , " --" ) . replace ( /\( --/g , "(--" ) . trim ( ) ;
2019-01-07 20:50:24 +01:00
$ ( ` <div class=" ${ BDFDB . disCNS . flex + BDFDB . disCNS . flex2 + BDFDB . disCNS . horizontal + BDFDB . disCNS . horizontal2 + BDFDB . disCNS . directioncolumn + BDFDB . disCNS . justifystart + BDFDB . disCNS . alignstretch + BDFDB . disCNS . nowrap + BDFDB . disCN . marginbottom20 } " style="flex: 1 1 auto;"><div class=" ${ BDFDB . disCNS . flex + BDFDB . disCNS . flex2 + BDFDB . disCNS . horizontal + BDFDB . disCNS . horizontal2 + BDFDB . disCNS . directionrow + BDFDB . disCNS . justifystart + BDFDB . disCNS . aligncenter + BDFDB . disCN . nowrap } " style="flex: 1 1 auto;"><h3 class=" ${ BDFDB . disCNS . titledefault + BDFDB . disCNS . title + BDFDB . disCNS . weightmedium + BDFDB . disCNS . size16 + BDFDB . disCN . flexchild } " style="flex: 0 0 50%; line-height: 38px;"> ${ varname [ 0 ] . toUpperCase ( ) + varname . slice ( 1 ) } :</h3><div class=" ${ BDFDB . disCNS . inputwrapper + BDFDB . disCNS . vertical + BDFDB . disCNS . flex + BDFDB . disCN . directioncolumn } " style="flex: 1 1 auto;"><input type="text" option=" ${ varname } " class=" ${ BDFDB . disCNS . inputdefault + BDFDB . disCNS . input + BDFDB . disCN . size16 } "></div></div> ${ vardescription ? '<div class="' + BDFDB . disCNS . description + BDFDB . disCNS . note + BDFDB . disCN . primary + ' DevilBro-textscrollwrapper" style="flex: 1 1 auto; max-width: ' + maxwidth + 'px !important;"><div class="DevilBro-textscroll">' + BDFDB . encodeToHTML ( vardescription ) + '</div></div>' : "" } <div class=" ${ BDFDB . disCNS . modaldivider + BDFDB . disCN . modaldividerdefault } "></div></div> ` )
2018-12-11 21:36:15 +01:00
. appendTo ( settingspanelinner )
. find ( BDFDB . dotCN . input )
. val ( varvalue )
. attr ( "placeholder" , varvalue ) ;
2018-12-11 19:43:51 +01:00
}
2018-12-12 12:08:53 +01:00
let dividers = settingspanelinner . querySelectorAll ( BDFDB . dotCN . modaldivider ) ;
2018-12-12 12:13:27 +01:00
if ( dividers . length ) {
dividers [ dividers . length - 1 ] . style . setProperty ( "visibility" , "hidden" , "important" ) ;
dividers [ dividers . length - 1 ] . style . setProperty ( "margin-top" , "0" , "important" ) ;
}
2018-12-12 12:08:53 +01:00
2018-12-11 19:43:51 +01:00
BDFDB . initElements ( settingspanel ) ;
2018-12-12 12:08:53 +01:00
$ ( settingspanel )
. on ( "click" , ".update-button" , ( ) => {
2019-01-05 23:53:38 +01:00
let path = this . path . join ( this . dir , theme . filename ) ;
2018-12-12 12:08:53 +01:00
let css = this . fs . readFileSync ( path ) . toString ( ) ;
if ( css ) {
let amount = 0 ;
for ( let input of settingspanel . querySelectorAll ( BDFDB . dotCN . input ) ) {
let oldvalue = input . getAttribute ( "placeholder" ) ;
let newvalue = input . value ;
if ( newvalue && newvalue . trim ( ) && newvalue != oldvalue ) {
let varname = input . getAttribute ( "option" ) ;
css = css . replace ( new RegExp ( ` -- ${ varname } ( \\ s*):( \\ s*) ${ oldvalue } ` , "g" ) , ` -- ${ varname } $ 1: $ 2 ${ newvalue } ` ) ;
amount ++ ;
}
2018-12-11 19:43:51 +01:00
}
2018-12-12 12:08:53 +01:00
if ( amount > 0 ) {
this . fs . writeFileSync ( path , css ) ;
2019-01-05 23:53:38 +01:00
BDFDB . showToast ( ` Updated ${ amount } variable ${ amount == 1 ? "" : "s" } in ${ theme . filename } ` , { type : "success" } ) ;
2018-12-12 12:08:53 +01:00
}
2019-01-05 23:53:38 +01:00
else BDFDB . showToast ( ` There are no changed variables to be updated in ${ theme . filename } ` , { type : "warning" } ) ;
2018-12-11 19:43:51 +01:00
}
2019-01-05 23:53:38 +01:00
else BDFDB . showToast ( ` Could not find themefile: ${ theme . filename } ` , { type : "error" } ) ;
2018-12-12 12:08:53 +01:00
} ) ;
2019-01-07 20:50:24 +01:00
wrapper . appendChild ( settingspanel ) ;
2018-12-11 19:43:51 +01:00
}
2019-01-05 23:53:38 +01:00
}