diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index 0abec7f1..56a14393 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -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, ``); }); - const htmlHead = htmlFile.match(/(?:)([\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 += '\n'; - htmlFile = htmlFile.replace(/(?:)([\s\S]*?)(?:<\/head>)/gmi, `\n${htmlHeadContents}\n`); + this.props.cssFiles.forEach(cssFile => { + const fileName = escapeStringRegexp(cssFile.name); + const fileRegex = new RegExp(``, 'gmi'); + htmlFile = htmlFile.replace(fileRegex, ``); + }); + + // const htmlHead = htmlFile.match(/(?:)([\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 += '\n'; + // htmlFile = htmlFile.replace(/(?:)([\s\S]*?)(?:<\/head>)/gmi, `\n${htmlHeadContents}\n`); 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; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index ad78daa2..a3d71421 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -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 { +` + @@ -21,6 +21,13 @@ const defaultHTML = `; +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; diff --git a/server/models/project.js b/server/models/project.js index 94cf17d3..5927a3b7 100644 --- a/server/models/project.js +++ b/server/models/project.js @@ -12,17 +12,24 @@ function draw() { }` const defaultHTML = -` - +` + ` +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 });