r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

add proptypes to previewframe

Browse source
This commit is contained in:
catarak 2016-06-27 15:47:48 -04:00
parent b9db744b99
commit 786753f1d3
1 changed files with 44 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
client/modules/IDE/components/PreviewFrame.js
View file

@ -1,4 +1,4 @@
import React from 'react'; import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
class PreviewFrame extends React.Component { class PreviewFrame extends React.Component {
@ -9,35 +9,7 @@ class PreviewFrame extends React.Component {
} }
} }
clearPreview() { componentDidUpdate(prevProps) {
const doc = ReactDOM.findDOMNode(this).contentDocument;
doc.write('');
doc.close();
}
renderFrameContents() {
const doc = ReactDOM.findDOMNode(this).contentDocument;
if (doc.readyState === 'complete') {
renderSketch();
} else {
setTimeout(this.renderFrameContents, 0);
}
}
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);
}
componentDidUpdate(prevProps, prevState) {
if (this.props.isPlaying !== prevProps.isPlaying) { if (this.props.isPlaying !== prevProps.isPlaying) {
if (this.props.isPlaying) { if (this.props.isPlaying) {
this.renderSketch(); this.renderSketch();
@ -55,13 +27,50 @@ class PreviewFrame extends React.Component {
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body); ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
} }
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);
}
renderFrameContents() {
const doc = ReactDOM.findDOMNode(this).contentDocument;
if (doc.readyState === 'complete') {
renderSketch();
} else {
setTimeout(this.renderFrameContents, 0);
}
}
render() { render() {
return <iframe return (
className="preview-frame" <iframe
frameBorder="0" className="preview-frame"
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms" frameBorder="0"
title="sketch output"></iframe>; sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
title="sketch output"
></iframe>
);
} }
} }
PreviewFrame.propTypes = {
isPlaying: PropTypes.bool.isRequired,
head: PropTypes.string.isRequired,
content: PropTypes.string.isRequired
};
export default PreviewFrame; export default PreviewFrame;