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 escapeStringRegexp from 'escape-string-regexp';
import srcDoc from 'srcdoc-polyfill'; 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 { class PreviewFrame extends React.Component {
componentDidMount() { componentDidMount() {
@ -16,11 +14,6 @@ class PreviewFrame extends React.Component {
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if (this.props.isPlaying !== prevProps.isPlaying) { if (this.props.isPlaying !== prevProps.isPlaying) {
this.renderSketch(); this.renderSketch();
// if (this.props.isPlaying) {
// this.renderSketch();
// } else {
// this.clearPreview();
// }
} }
if (this.props.isPlaying && this.props.content !== prevProps.content) { 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>`); htmlFile = htmlFile.replace(fileRegex, `<script>\n${jsFile.content}\n</script>`);
}); });
const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi); this.props.cssFiles.forEach(cssFile => {
const headRegex = new RegExp('head', 'i'); const fileName = escapeStringRegexp(cssFile.name);
let htmlHeadContents = htmlHead[0].split(headRegex)[1]; const fileRegex = new RegExp(`<link.*?href=('|")((\.\/)|\/)?${fileName}('|").*?>`, 'gmi');
htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2); htmlFile = htmlFile.replace(fileRegex, `<style>\n${cssFile.content}\n</style>`);
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>`);
// 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; return htmlFile;
} }
@ -69,17 +68,6 @@ class PreviewFrame extends React.Component {
doc.contentWindow.document.write(''); doc.contentWindow.document.write('');
doc.contentWindow.document.close(); 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() { renderFrameContents() {
@ -110,7 +98,8 @@ PreviewFrame.propTypes = {
htmlFile: PropTypes.shape({ htmlFile: PropTypes.shape({
content: PropTypes.string.isRequired content: PropTypes.string.isRequired
}), }),
jsFiles: PropTypes.array.isRequired jsFiles: PropTypes.array.isRequired,
cssFiles: PropTypes.array.isRequired
}; };
export default PreviewFrame; 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 IDEActions from '../actions/ide';
import * as PreferencesActions from '../actions/preferences'; import * as PreferencesActions from '../actions/preferences';
import * as ProjectActions from '../actions/project'; 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 { class IDEView extends React.Component {
componentDidMount() { componentDidMount() {
@ -60,6 +60,7 @@ class IDEView extends React.Component {
<PreviewFrame <PreviewFrame
htmlFile={this.props.htmlFile} htmlFile={this.props.htmlFile}
jsFiles={this.props.jsFiles} jsFiles={this.props.jsFiles}
cssFiles={this.props.cssFiles}
files={this.props.files} files={this.props.files}
content={this.props.selectedFile.content} content={this.props.selectedFile.content}
head={ head={
@ -105,7 +106,8 @@ IDEView.propTypes = {
}), }),
setSelectedFile: PropTypes.func.isRequired, setSelectedFile: PropTypes.func.isRequired,
htmlFile: PropTypes.object.isRequired, htmlFile: PropTypes.object.isRequired,
jsFiles: PropTypes.array.isRequired jsFiles: PropTypes.array.isRequired,
cssFiles: PropTypes.array.isRequired
}; };
function mapStateToProps(state) { function mapStateToProps(state) {
@ -114,6 +116,7 @@ function mapStateToProps(state) {
selectedFile: getFile(state.files, state.ide.selectedFile), selectedFile: getFile(state.files, state.ide.selectedFile),
htmlFile: getHTMLFile(state.files), htmlFile: getHTMLFile(state.files),
jsFiles: getJSFiles(state.files), jsFiles: getJSFiles(state.files),
cssFiles: getCSSFiles(state.files),
ide: state.ide, ide: state.ide,
preferences: state.preferences, preferences: state.preferences,
user: state.user, user: state.user,

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

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

15
server/models/project.js
View file

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