f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-06 20:52:40 +00:00
Code Wiki Activity

Move loadAllBrewStylesAndSnippets to the parent page component

Browse Source 
Themes contain both CSS and Snippets. The brewRenderer only cares about the CSS, but other components need the Snippets. Better to have the parent "editPage", etc. load the theme bundles and pass them down to each child that needs it, rather than trying to pass from the child up.

This also fixes the `metadataEditor.jsx` not being able to change themes live; A new theme bundle is now loaded when a new theme is selected, instead of only the first time the BrewRenderer mounts.

Also renamed to "fetchThemeBundle"
This commit is contained in:
Trevor Buckner
2024-07-21 16:25:24 -04:00
parent 0a5ff213de
commit 45f7080afd
3 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
client/homebrew/pages/editPage/editPage.jsx
View File

@@ -55,7 +55,8 @@ const EditPage = createClass({
autoSaveWarning : false,
unsavedTime : new Date(),
currentEditorPage : 0,
displayLockMessage : this.props.brew.lock || false
displayLockMessage : this.props.brew.lock || false,
themeBundle : {}
};
},
@@ -87,6 +88,8 @@ const EditPage = createClass({
htmlErrors : Markdown.validate(prevState.brew.text)
}));
this.fetchThemeBundle(this.props.brew.renderer, this.props.brew.theme);
document.addEventListener('keydown', this.handleControlKeys);
},
componentWillUnmount : function() {
@@ -130,7 +133,10 @@ const EditPage = createClass({
}), ()=>{if(this.state.autoSave) this.trySave();});
},
handleMetaChange : function(metadata){
handleMetaChange : function(metadata, field=undefined){
if(field == "theme") // Fetch theme bundle only if theme was changed
this.fetchThemeBundle(metadata.renderer, metadata.theme);
this.setState((prevState)=>({
brew : {
...prevState.brew,
@@ -138,13 +144,24 @@ const EditPage = createClass({
},
isPending : true,
}), ()=>{if(this.state.autoSave) this.trySave();});
},
hasChanges : function(){
return !_.isEqual(this.state.brew, this.savedBrew);
},
// Loads the theme bundle and parses it out. Called when the iFrame is first mounted, and when a new theme is selected
fetchThemeBundle : function(renderer, theme) {
fetch(`${window.location.protocol}//${window.location.host}/theme/${renderer}/${theme}`).then((response)=>response.json()).then((themeBundle)=>{
themeBundle.joinedStyles = themeBundle.styles.map(style => `<style>${style}</style>`).join('\n\n'); //DOMPurify.sanitize(joinedStyles, purifyConfig);
this.setState((prevState)=>({ // MOVE TO MOUNT STEP OF SHARE / NEW / EDIT
...prevState,
themeBundle : themeBundle
}));
});
},
trySave : function(immediate=false){
if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
if(this.hasChanges()){
@@ -413,6 +430,7 @@ const EditPage = createClass({
style={this.state.brew.style}
renderer={this.state.brew.renderer}
theme={this.state.brew.theme}
themeBundle={this.state.themeBundle}
errors={this.state.htmlErrors}
lang={this.state.brew.lang}
userThemes={this.props.userThemes}