p5.js-web-editor/client/modules/IDE/components/PreviewFrame.js

77 lines
1.9 KiB
JavaScript
Raw Normal View History

2016-06-27 19:47:48 +00:00
import React, { PropTypes } from 'react';
2016-06-23 22:29:55 +00:00
import ReactDOM from 'react-dom';
class PreviewFrame extends React.Component {
componentDidMount() {
if (this.props.isPlaying) {
this.renderFrameContents();
}
}
2016-06-27 19:47:48 +00:00
componentDidUpdate(prevProps) {
if (this.props.isPlaying !== prevProps.isPlaying) {
if (this.props.isPlaying) {
this.renderSketch();
} else {
this.clearPreview();
}
}
if (this.props.isPlaying && this.props.content !== prevProps.content) {
this.renderSketch();
}
}
componentWillUnmount() {
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
}
2016-06-23 22:29:55 +00:00
clearPreview() {
const doc = ReactDOM.findDOMNode(this).contentDocument;
doc.write('');
doc.close();
}
renderSketch() {
const doc = ReactDOM.findDOMNode(this).contentDocument;
this.clearPreview();
ReactDOM.render(this.props.head, doc.head);
const p5Script = doc.createElement('script');
p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
doc.body.appendChild(p5Script);
const sketchScript = doc.createElement('script');
sketchScript.textContent = this.props.content;
doc.body.appendChild(sketchScript);
}
2016-06-27 19:47:48 +00:00
renderFrameContents() {
const doc = ReactDOM.findDOMNode(this).contentDocument;
if (doc.readyState === 'complete') {
renderSketch();
} else {
setTimeout(this.renderFrameContents, 0);
2016-06-23 22:29:55 +00:00
}
}
render() {
2016-06-27 19:47:48 +00:00
return (
<iframe
className="preview-frame"
frameBorder="0"
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
title="sketch output"
></iframe>
);
2016-06-23 22:29:55 +00:00
}
}
2016-06-27 19:47:48 +00:00
PreviewFrame.propTypes = {
isPlaying: PropTypes.bool.isRequired,
head: PropTypes.object.isRequired,
2016-06-27 19:47:48 +00:00
content: PropTypes.string.isRequired
};
2016-06-23 22:29:55 +00:00
export default PreviewFrame;