f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 18:32:41 +00:00
Code Wiki Activity

Fix brew styles overwriting each other. (#1230)

Browse Source
This commit is contained in:
Trevor Buckner
2021-02-05 14:58:41 -05:00
committed by GitHub
parent 2fe353377b
commit c642a35fb3
3 changed files with 3 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -168,7 +168,7 @@ const BrewRenderer = createClass({
: null}
<Frame initialContent={this.state.initialContent} style={{ width: '100%', height: '100%', visibility: this.state.visibility }} contentDidMount={this.frameDidMount}>
<div className={cx('brewRenderer', this.state.renderer)}
<div className={'brewRenderer'}
onScroll={this.handleScroll}
style={{ height: this.state.height }}>

4
client/homebrew/brewRenderer/brewRenderer.less
View File

@@ -1,6 +1,6 @@
@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less';
@import (multiple, less) './client/homebrew/phbStyle/phb.style.less';
& {@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less';} //&{} keeps internal variables locally-scoped
& {@import (multiple, less) './client/homebrew/phbStyle/phb.style.less';}
.brewRenderer{
will-change : transform;

152
client/homebrew/brewRenderer/brewRendererLegacy.jsx
View File

@@ -1,152 +0,0 @@
const React = require('react');
const createClass = require('create-react-class');
const _ = require('lodash');
const cx = require('classnames');
const Markdown = require('naturalcrit/markdown.js');
const ErrorBar = require('./errorBar/errorBar.jsx');
//TODO: move to the brew renderer
const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
const PAGE_HEIGHT = 1056;
const PPR_THRESHOLD = 50;
const BrewRenderer = createClass({
getDefaultProps : function() {
return {
text : '',
errors : []
};
},
getInitialState : function() {
const pages = this.props.text.split('\\page');
return {
viewablePageNumber : 0,
height : 0,
isMounted : false,
pages : pages,
usePPR : pages.length >= PPR_THRESHOLD,
};
},
height : 0,
lastRender : <div></div>,
componentDidMount : function() {
this.updateSize();
window.addEventListener('resize', this.updateSize);
},
componentWillUnmount : function() {
window.removeEventListener('resize', this.updateSize);
},
componentWillReceiveProps : function(nextProps) {
const pages = nextProps.text.split('\\page');
this.setState({
pages : pages,
usePPR : pages.length >= PPR_THRESHOLD
});
},
updateSize : function() {
this.setState({
height : this.refs.main.parentNode.clientHeight,
isMounted : true
});
},
handleScroll : function(e){
const target = e.target;
this.setState((prevState)=>({
viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * prevState.pages.length)
}));
},
shouldRender : function(pageText, index){
if(!this.state.isMounted) return false;
const viewIndex = this.state.viewablePageNumber;
if(index == viewIndex - 3) return true;
if(index == viewIndex - 2) return true;
if(index == viewIndex - 1) return true;
if(index == viewIndex) return true;
if(index == viewIndex + 1) return true;
if(index == viewIndex + 2) return true;
if(index == viewIndex + 3) return true;
//Check for style tages
if(pageText.indexOf('<style>') !== -1) return true;
return false;
},
renderPageInfo : function(){
return <div className='pageInfo'>
{this.state.viewablePageNumber + 1} / {this.state.pages.length}
</div>;
},
renderPPRmsg : function(){
if(!this.state.usePPR) return;
return <div className='ppr_msg'>
Partial Page Renderer enabled, because your brew is so large. May effect rendering.
</div>;
},
renderDummyPage : function(index){
return <div className='phb' id={`p${index + 1}`} key={index}>
<i className='fas fa-spinner fa-spin' />
</div>;
},
renderPage : function(pageText, index){
return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
},
renderPages : function(){
if(this.state.usePPR){
return _.map(this.state.pages, (page, index)=>{
if(this.shouldRender(page, index)){
return this.renderPage(page, index);
} else {
return this.renderDummyPage(index);
}
});
}
if(this.props.errors && this.props.errors.length) return this.lastRender;
this.lastRender = _.map(this.state.pages, (page, index)=>{
return this.renderPage(page, index);
});
return this.lastRender;
},
render : function(){
return (
<React.Fragment>
<div className='brewRenderer'
onScroll={this.handleScroll}
ref='main'
style={{ height: this.state.height }}>
<ErrorBar errors={this.props.errors} />
<div className='popups'>
<RenderWarnings />
<NotificationPopup />
</div>
<div className='pages' ref='pages'>
{this.renderPages()}
</div>
</div>;
{this.renderPageInfo()}
{this.renderPPRmsg()}
</React.Fragment>
);
}
});
module.exports = BrewRenderer;