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

add css files to sketch

Browse source
This commit is contained in:
catarak 2016-07-11 21:54:08 -04:00
parent 61a6f7d4ac
commit 9249d496fa
4 changed files with 48 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,8 +3,6 @@ import ReactDOM from 'react-dom';
import escapeStringRegexp from 'escape-string-regexp';
import srcDoc from 'srcdoc-polyfill';
// sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
class PreviewFrame extends React.Component {
componentDidMount() {
@ -16,11 +14,6 @@ class PreviewFrame extends React.Component {
componentDidUpdate(prevProps) {
if (this.props.isPlaying !== prevProps.isPlaying) {
this.renderSketch();
// if (this.props.isPlaying) {
// this.renderSketch();
// } else {
// this.clearPreview();
// }
}
if (this.props.isPlaying && this.props.content !== prevProps.content) {
@ -46,12 +39,18 @@ class PreviewFrame extends React.Component {
htmlFile = htmlFile.replace(fileRegex, `<script>\n${jsFile.content}\n</script>`);
});
const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
const headRegex = new RegExp('head', 'i');
let htmlHeadContents = htmlHead[0].split(headRegex)[1];
htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2);
htmlHeadContents += '<link rel="stylesheet" type="text/css" href="/preview-styles.css" />\n';
htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
this.props.cssFiles.forEach(cssFile => {
const fileName = escapeStringRegexp(cssFile.name);
const fileRegex = new RegExp(`<link.*?href=('|")((\.\/)|\/)?${fileName}('|").*?>`, 'gmi');
htmlFile = htmlFile.replace(fileRegex, `<style>\n${cssFile.content}\n</style>`);
});
// const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
// const headRegex = new RegExp('head', 'i');
// let htmlHeadContents = htmlHead[0].split(headRegex)[1];
// htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2);
// htmlHeadContents += '<link rel="stylesheet" type="text/css" href="/preview-styles.css" />\n';
// htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
return htmlFile;
}
@ -69,17 +68,6 @@ class PreviewFrame extends React.Component {
doc.contentWindow.document.write('');
doc.contentWindow.document.close();
}
// 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() {
@ -110,7 +98,8 @@ PreviewFrame.propTypes = {
htmlFile: PropTypes.shape({
content: PropTypes.string.isRequired
}),
jsFiles: PropTypes.array.isRequired
jsFiles: PropTypes.array.isRequired,
cssFiles: PropTypes.array.isRequired
};
export default PreviewFrame;

7
client/modules/IDE/pages/IDEView.js
View file

@ -11,7 +11,7 @@ import * as FileActions from '../actions/files';
import * as IDEActions from '../actions/ide';
import * as PreferencesActions from '../actions/preferences';
import * as ProjectActions from '../actions/project';
import { getFile, getHTMLFile, getJSFiles } from '../reducers/files';
import { getFile, getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
class IDEView extends React.Component {
componentDidMount() {
@ -60,6 +60,7 @@ class IDEView extends React.Component {
<PreviewFrame
htmlFile={this.props.htmlFile}
jsFiles={this.props.jsFiles}
cssFiles={this.props.cssFiles}
files={this.props.files}
content={this.props.selectedFile.content}
head={
@ -105,7 +106,8 @@ IDEView.propTypes = {
}),
setSelectedFile: PropTypes.func.isRequired,
htmlFile: PropTypes.object.isRequired,
jsFiles: PropTypes.array.isRequired
jsFiles: PropTypes.array.isRequired,
cssFiles: PropTypes.array.isRequired
};
function mapStateToProps(state) {
@ -114,6 +116,7 @@ function mapStateToProps(state) {
selectedFile: getFile(state.files, state.ide.selectedFile),
htmlFile: getHTMLFile(state.files),
jsFiles: getJSFiles(state.files),
cssFiles: getCSSFiles(state.files),
ide: state.ide,
preferences: state.preferences,
user: state.user,

21
client/modules/IDE/reducers/files.js
View file

@ -9,11 +9,11 @@ function draw() {
}`;
const defaultHTML =
`
<!DOCTYPE html>
`<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
@ -21,6 +21,13 @@ const defaultHTML =
</html>
`;
const defaultCSS =
`html, body {
overflow: hidden;
margin: 0;
padding: 0;
}
`;
// if the project has never been saved,
const initialState = [
@ -33,6 +40,11 @@ const initialState = [
name: 'index.html',
content: defaultHTML,
id: '2'
},
{
name: 'style.css',
content: defaultCSS,
id: '3'
}];
@ -56,7 +68,8 @@ const files = (state = initialState, action) => {
};
export const getFile = (state, id) => state.filter(file => file.id === id)[0];
export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*html$/))[0];
export const getJSFiles = (state) => state.filter(file => file.name.match(/.*.js$/));
export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*\.html$/))[0];
export const getJSFiles = (state) => state.filter(file => file.name.match(/.*\.js$/));
export const getCSSFiles = (state) => state.filter(file => file.name.match(/.*\.css$/));
export default files;

15
server/models/project.js
View file

@ -12,17 +12,24 @@ function draw() {
}`
const defaultHTML =
`
<!DOCTYPE html>
`<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
`
const defaultCSS =
`html, body {
overflow: hidden;
margin: 0;
padding: 0;
}
`;
const fileSchema = new Schema({
name: { type: String, default: 'sketch.js' },
@ -40,7 +47,9 @@ fileSchema.set('toJSON', {
const projectSchema = new Schema({
name: { type: String, default: "Hello p5.js, it's the server" },
user: { type: Schema.Types.ObjectId, ref: 'User' },
files: {type: [ fileSchema ], default: [{ name: 'sketch.js', content: defaultSketch, _id: new ObjectId() }, { name: 'index.html', content: defaultHTML, _id: new ObjectId() }]},
files: { type: [ fileSchema ], default: [{ name: 'sketch.js', content: defaultSketch, _id: new ObjectId() },
{ name: 'index.html', content: defaultHTML, _id: new ObjectId() },
{ name: 'style.css', content: defaultCSS, _id: new ObjectId() }]},
_id: { type: String, default: shortid.generate },
selectedFile: Schema.Types.ObjectId
}, { timestamps: true });