f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-03 23:32:58 +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 # 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 ### Monday, 19/10/2020 - v2.10.2
- Fixed issue with "recent" item links not updating when transferring between Google Drive. - 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 //TODO: move to the brew renderer
const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx'); const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
const NotificationPopup = require('./notificationPopup/notificationPopup.jsx'); const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
const Frame = require('react-frame-component').default;
const PAGE_HEIGHT = 1056; const PAGE_HEIGHT = 1056;
const PPR_THRESHOLD = 50; const PPR_THRESHOLD = 50;
@@ -29,17 +30,19 @@ const BrewRenderer = createClass({
height : 0, height : 0,
isMounted : false, isMounted : false,
pages : pages, pages : pages,
usePPR : pages.length >= PPR_THRESHOLD, 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, height : 0,
lastRender : <div></div>, lastRender : <div></div>,
componentDidMount : function() {
this.updateSize();
window.addEventListener('resize', this.updateSize);
},
componentWillUnmount : function() { componentWillUnmount : function() {
window.removeEventListener('resize', this.updateSize); window.removeEventListener('resize', this.updateSize);
}, },
@@ -54,8 +57,9 @@ const BrewRenderer = createClass({
updateSize : function() { updateSize : function() {
this.setState({ this.setState({
height : this.refs.main.parentNode.clientHeight, height : this.refs.main.parentNode.clientHeight,
isMounted : true isMounted : true,
visibility : 'visible'
}); });
}, },
@@ -85,7 +89,7 @@ const BrewRenderer = createClass({
}, },
renderPageInfo : function(){ renderPageInfo : function(){
return <div className='pageInfo'> return <div className='pageInfo' ref='main'>
{this.state.viewablePageNumber + 1} / {this.state.pages.length} {this.state.viewablePageNumber + 1} / {this.state.pages.length}
</div>; </div>;
}, },
@@ -125,24 +129,33 @@ const BrewRenderer = createClass({
return this.lastRender; 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 : function(){
//render in iFrame so broken code doesn't crash the site.
return ( return (
<React.Fragment> <React.Fragment>
<div className='brewRenderer' <Frame initialContent={this.state.initialContent} style={{ width: '100%', height: '100%', visibility: this.state.visibility }} contentDidMount={this.frameDidMount}>
onScroll={this.handleScroll} <div className='brewRenderer'
ref='main' onScroll={this.handleScroll}
style={{ height: this.state.height }}> style={{ height: this.state.height }}>
<ErrorBar errors={this.props.errors} /> <ErrorBar errors={this.props.errors} />
<div className='popups'> <div className='popups'>
<RenderWarnings /> <RenderWarnings />
<NotificationPopup /> <NotificationPopup />
</div> </div>
<div className='pages' ref='pages'> <div className='pages' ref='pages'>
{this.renderPages()} {this.renderPages()}
</div>
</div> </div>
</div>; </Frame>
{this.renderPageInfo()} {this.renderPageInfo()}
{this.renderPPRmsg()} {this.renderPPRmsg()}
</React.Fragment> </React.Fragment>

7
package-lock.json generated
View File

@@ -1,6 +1,6 @@
{ {
"name": "homebrewery", "name": "homebrewery",
"version": "2.10.2", "version": "2.10.3",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "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": { "react-is": {
"version": "16.12.0", "version": "16.12.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",

3
package.json
View File

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

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

@@ -54,7 +54,7 @@ const SplitPane = createClass({
}, },
*/ */
renderDivider : function(){ renderDivider : function(){
return <div className='divider' onMouseDown={this.handleDown}> return <div className='divider' onMouseDown={this.handleDown} >
<div className='dots'> <div className='dots'>
<i className='fa fa-circle' /> <i className='fa fa-circle' />
<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}> return <div className='splitPane' onMouseMove={this.handleMove} onMouseUp={this.handleUp}>
<Pane ref='pane1' width={this.state.size}>{this.props.children[0]}</Pane> <Pane ref='pane1' width={this.state.size}>{this.props.children[0]}</Pane>
{this.renderDivider()} {this.renderDivider()}
<Pane ref='pane2'>{this.props.children[1]}</Pane> <Pane ref='pane2' isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
</div>; </div>;
} }
}); });
const Pane = createClass({ const Pane = createClass({
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -90,12 +85,16 @@ const Pane = createClass({
flex : 'none', flex : 'none',
width : `${this.props.width}px` 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}> return <div className={cx('pane', this.props.className)} style={styles}>
{this.props.children} {this.props.children}
</div>; </div>;
} }
}); });
module.exports = SplitPane; module.exports = SplitPane;