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

Merge pull request #1074 from naturalcrit/BrewRendererIframe

Browse Source 
Brew renderer iframe
This commit is contained in:
Trevor Buckner
2020-10-24 23:27:17 -04:00
committed by GitHub
parent ac2d6fe9a8 aa2d1f3bc9
commit 7d9e1aad83
5 changed files with 52 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
changelog.md
View File

@@ -1,5 +1,8 @@
# changelog
### Thursday, 22/10/2020 - v2.10.3
- Fixed brews with broken code crashing the edit page when loaded (the "blue screen of death" bug).
### Monday, 19/10/2020 - v2.10.2
- Fixed issue with "recent" item links not updating when transferring between Google Drive.

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

@@ -10,6 +10,7 @@ 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 Frame = require('react-frame-component').default;
const PAGE_HEIGHT = 1056;
const PPR_THRESHOLD = 50;
@@ -29,17 +30,19 @@ const BrewRenderer = createClass({
height : 0,
isMounted : false,
pages : pages,
usePPR : pages.length >= PPR_THRESHOLD,
pages : pages,
usePPR : pages.length >= PPR_THRESHOLD,
visibility : 'hidden',
initialContent : `<!DOCTYPE html><html><head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<link href='/homebrew/bundle.css' rel='stylesheet' />
</head><body style='overflow: hidden'><div></div></body></html>`
};
},
height : 0,
lastRender : <div></div>,
componentDidMount : function() {
this.updateSize();
window.addEventListener('resize', this.updateSize);
},
componentWillUnmount : function() {
window.removeEventListener('resize', this.updateSize);
},
@@ -54,8 +57,9 @@ const BrewRenderer = createClass({
updateSize : function() {
this.setState({
height : this.refs.main.parentNode.clientHeight,
isMounted : true
height : this.refs.main.parentNode.clientHeight,
isMounted : true,
visibility : 'visible'
});
},
@@ -85,7 +89,7 @@ const BrewRenderer = createClass({
},
renderPageInfo : function(){
return <div className='pageInfo'>
return <div className='pageInfo' ref='main'>
{this.state.viewablePageNumber + 1} / {this.state.pages.length}
</div>;
},
@@ -125,24 +129,33 @@ const BrewRenderer = createClass({
return this.lastRender;
},
frameDidMount : function(){ //This triggers when iFrame finishes internal "componentDidMount"
setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
this.updateSize();
window.addEventListener('resize', this.updateSize);
}, 100);
},
render : function(){
//render in iFrame so broken code doesn't crash the site.
return (
<React.Fragment>
<div className='brewRenderer'
onScroll={this.handleScroll}
ref='main'
style={{ height: this.state.height }}>
<Frame initialContent={this.state.initialContent} style={{ width: '100%', height: '100%', visibility: this.state.visibility }} contentDidMount={this.frameDidMount}>
<div className='brewRenderer'
onScroll={this.handleScroll}
style={{ height: this.state.height }}>
<ErrorBar errors={this.props.errors} />
<div className='popups'>
<RenderWarnings />
<NotificationPopup />
</div>
<ErrorBar errors={this.props.errors} />
<div className='popups'>
<RenderWarnings />
<NotificationPopup />
</div>
<div className='pages' ref='pages'>
{this.renderPages()}
<div className='pages' ref='pages'>
{this.renderPages()}
</div>
</div>
</div>;
</Frame>
{this.renderPageInfo()}
{this.renderPPRmsg()}
</React.Fragment>

7
package-lock.json generated
View File

@@ -1,6 +1,6 @@
{
"name": "homebrewery",
"version": "2.10.2",
"version": "2.10.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -5829,6 +5829,11 @@
}
}
},
"react-frame-component": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.3.tgz",
"integrity": "sha512-4PurhctiqnmC1F5prPZ+LdsalH7pZ3SFA5xoc0HBe8mSHctdLLt4Cr2WXfXOoajHBYq/yiipp9zOgx+vy8GiEA=="
},
"react-is": {
"version": "16.12.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",

3
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "homebrewery",
"description": "Create authentic looking D&D homebrews using only markdown",
"version": "2.10.2",
"version": "2.10.3",
"engines": {
"node": "12.16.x"
},
@@ -63,6 +63,7 @@
"query-string": "6.13.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-frame-component": "4.1.3",
"react-router-dom": "5.2.0",
"superagent": "^6.1.0",
"vitreum": "github:calculuschild/vitreum#21a8e1c9421f1d3a3b474c12f480feb2fbd28c5b"

15
shared/naturalcrit/splitPane/splitPane.jsx
View File

@@ -54,7 +54,7 @@ const SplitPane = createClass({
},
*/
renderDivider : function(){
return <div className='divider' onMouseDown={this.handleDown}>
return <div className='divider' onMouseDown={this.handleDown} >
<div className='dots'>
<i className='fa fa-circle' />
<i className='fa fa-circle' />
@@ -67,16 +67,11 @@ const SplitPane = createClass({
return <div className='splitPane' onMouseMove={this.handleMove} onMouseUp={this.handleUp}>
<Pane ref='pane1' width={this.state.size}>{this.props.children[0]}</Pane>
{this.renderDivider()}
<Pane ref='pane2'>{this.props.children[1]}</Pane>
<Pane ref='pane2' isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
</div>;
}
});
const Pane = createClass({
getDefaultProps : function() {
return {
@@ -90,12 +85,16 @@ const Pane = createClass({
flex : 'none',
width : `${this.props.width}px`
};
} else {
styles = {
pointerEvents : this.props.isDragging ? 'none' : 'auto' //Disable mouse capture in the rightmost pane; dragging into the iframe drops the divider otherwise
};
}
return <div className={cx('pane', this.props.className)} style={styles}>
{this.props.children}
</div>;
}
});
module.exports = SplitPane;