68 lines
1.7 KiB
JavaScript
68 lines
1.7 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import ReactDOM from 'react-dom';
|
||
|
|
|
||
|
|
class PreviewFrame extends React.Component {
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
if (this.props.isPlaying) {
|
||
|
|
this.renderFrameContents();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
clearPreview() {
|
||
|
|
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) {
|
||
|
|
this.renderSketch();
|
||
|
|
} else {
|
||
|
|
this.clearPreview();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.props.isPlaying && this.props.content !== prevProps.content) {
|
||
|
|
this.renderSketch();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillUnmount() {
|
||
|
|
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
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>;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default PreviewFrame;
|