mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-03 12:42:41 +00:00
Move fetchThemeBundle into /shared/helpers
This might not be the best rework - I was unsure if the *this* that would be available when called would see the appropriate object so I assumed not and pass it as a parameter. Works, but may be bad form.
This commit is contained in:
@@ -25,7 +25,7 @@ const LockNotification = require('./lockNotification/lockNotification.jsx');
|
|||||||
const Markdown = require('naturalcrit/markdown.js');
|
const Markdown = require('naturalcrit/markdown.js');
|
||||||
|
|
||||||
const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
|
const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
|
||||||
const { printCurrentBrew } = require('../../../../shared/helpers.js');
|
const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
|
||||||
|
|
||||||
const googleDriveIcon = require('../../googleDrive.svg');
|
const googleDriveIcon = require('../../googleDrive.svg');
|
||||||
|
|
||||||
@@ -88,7 +88,7 @@ const EditPage = createClass({
|
|||||||
htmlErrors : Markdown.validate(prevState.brew.text)
|
htmlErrors : Markdown.validate(prevState.brew.text)
|
||||||
}));
|
}));
|
||||||
|
|
||||||
this.fetchThemeBundle(this.props.brew.renderer, this.props.brew.theme);
|
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
|
||||||
|
|
||||||
document.addEventListener('keydown', this.handleControlKeys);
|
document.addEventListener('keydown', this.handleControlKeys);
|
||||||
},
|
},
|
||||||
@@ -135,7 +135,7 @@ const EditPage = createClass({
|
|||||||
|
|
||||||
handleMetaChange : function(metadata, field=undefined){
|
handleMetaChange : function(metadata, field=undefined){
|
||||||
if(field == 'theme' || field == 'renderer') // Fetch theme bundle only if theme or renderer was changed
|
if(field == 'theme' || field == 'renderer') // Fetch theme bundle only if theme or renderer was changed
|
||||||
this.fetchThemeBundle(metadata.renderer, metadata.theme);
|
fetchThemeBundle(this, metadata.renderer, metadata.theme);
|
||||||
|
|
||||||
this.setState((prevState)=>({
|
this.setState((prevState)=>({
|
||||||
brew : {
|
brew : {
|
||||||
@@ -150,17 +150,6 @@ const EditPage = createClass({
|
|||||||
return !_.isEqual(this.state.brew, this.savedBrew);
|
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){
|
trySave : function(immediate=false){
|
||||||
if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
|
if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
|
||||||
if(this.hasChanges()){
|
if(this.hasChanges()){
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ const HelpNavItem = require('../../navbar/help.navitem.jsx');
|
|||||||
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
||||||
const AccountNavItem = require('../../navbar/account.navitem.jsx');
|
const AccountNavItem = require('../../navbar/account.navitem.jsx');
|
||||||
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
const ErrorNavItem = require('../../navbar/error-navitem.jsx');
|
||||||
|
const { fetchThemeBundle } = require('../../../../shared/helpers.js');
|
||||||
|
|
||||||
|
|
||||||
const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
|
const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
|
||||||
@@ -42,18 +43,7 @@ const HomePage = createClass({
|
|||||||
editor : React.createRef(null),
|
editor : React.createRef(null),
|
||||||
|
|
||||||
componentDidMount : function() {
|
componentDidMount : function() {
|
||||||
this.fetchThemeBundle(this.props.brew.renderer, this.props.brew.theme);
|
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
|
||||||
},
|
|
||||||
|
|
||||||
// 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
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSave : function(){
|
handleSave : function(){
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ const Editor = require('../../editor/editor.jsx');
|
|||||||
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||||
|
|
||||||
const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
|
const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
|
||||||
const { printCurrentBrew } = require('../../../../shared/helpers.js');
|
const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
|
||||||
|
|
||||||
const BREWKEY = 'homebrewery-new';
|
const BREWKEY = 'homebrewery-new';
|
||||||
const STYLEKEY = 'homebrewery-new-style';
|
const STYLEKEY = 'homebrewery-new-style';
|
||||||
@@ -78,7 +78,7 @@ const NewPage = createClass({
|
|||||||
saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle)
|
saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle)
|
||||||
});
|
});
|
||||||
|
|
||||||
this.fetchThemeBundle(this.props.brew.renderer, this.props.brew.theme);
|
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
|
||||||
|
|
||||||
localStorage.setItem(BREWKEY, brew.text);
|
localStorage.setItem(BREWKEY, brew.text);
|
||||||
if(brew.style)
|
if(brew.style)
|
||||||
@@ -89,17 +89,6 @@ const NewPage = createClass({
|
|||||||
document.removeEventListener('keydown', this.handleControlKeys);
|
document.removeEventListener('keydown', this.handleControlKeys);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 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
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
handleControlKeys : function(e){
|
handleControlKeys : function(e){
|
||||||
if(!(e.ctrlKey || e.metaKey)) return;
|
if(!(e.ctrlKey || e.metaKey)) return;
|
||||||
const S_KEY = 83;
|
const S_KEY = 83;
|
||||||
@@ -138,7 +127,7 @@ const NewPage = createClass({
|
|||||||
|
|
||||||
handleMetaChange : function(metadata, field=undefined){
|
handleMetaChange : function(metadata, field=undefined){
|
||||||
if(field == 'theme' || field == 'renderer') // Fetch theme bundle only if theme or renderer was changed
|
if(field == 'theme' || field == 'renderer') // Fetch theme bundle only if theme or renderer was changed
|
||||||
this.fetchThemeBundle(metadata.renderer, metadata.theme);
|
fetchThemeBundle(this, metadata.renderer, metadata.theme);
|
||||||
|
|
||||||
this.setState((prevState)=>({
|
this.setState((prevState)=>({
|
||||||
brew : { ...prevState.brew, ...metadata },
|
brew : { ...prevState.brew, ...metadata },
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ const Account = require('../../navbar/account.navitem.jsx');
|
|||||||
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||||
|
|
||||||
const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
|
const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
|
||||||
const { printCurrentBrew } = require('../../../../shared/helpers.js');
|
const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
|
||||||
|
|
||||||
const SharePage = createClass({
|
const SharePage = createClass({
|
||||||
displayName : 'SharePage',
|
displayName : 'SharePage',
|
||||||
@@ -31,24 +31,13 @@ const SharePage = createClass({
|
|||||||
componentDidMount : function() {
|
componentDidMount : function() {
|
||||||
document.addEventListener('keydown', this.handleControlKeys);
|
document.addEventListener('keydown', this.handleControlKeys);
|
||||||
|
|
||||||
this.fetchThemeBundle(this.props.brew.renderer, this.props.brew.theme);
|
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillUnmount : function() {
|
componentWillUnmount : function() {
|
||||||
document.removeEventListener('keydown', this.handleControlKeys);
|
document.removeEventListener('keydown', this.handleControlKeys);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 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
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
handleControlKeys : function(e){
|
handleControlKeys : function(e){
|
||||||
if(!(e.ctrlKey || e.metaKey)) return;
|
if(!(e.ctrlKey || e.metaKey)) return;
|
||||||
const P_KEY = 80;
|
const P_KEY = 80;
|
||||||
|
|||||||
@@ -33,7 +33,18 @@ const printCurrentBrew = ()=>{
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const fetchThemeBundle = (obj, 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);
|
||||||
|
obj.setState((prevState)=>({ // MOVE TO MOUNT STEP OF SHARE / NEW / EDIT
|
||||||
|
...prevState,
|
||||||
|
themeBundle : themeBundle
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
splitTextStyleAndMetadata,
|
splitTextStyleAndMetadata,
|
||||||
printCurrentBrew
|
printCurrentBrew,
|
||||||
|
fetchThemeBundle,
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user