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

switch div to sections

Browse source
This commit is contained in:
MathuraMG 2016-08-12 14:19:23 -04:00
parent 8f68b3aa58
commit be010b8ac0
7 changed files with 19 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/modules/IDE/components/Editor.js
View file

@ -99,14 +99,14 @@ class Editor extends React.Component {
render() { render() {
return ( return (
<div> <section title="code editor" role="main">
<div ref="container" className="editor-holder" tabIndex="0" title="code editor" role="main"> <div ref="container" className="editor-holder" tabIndex="0">
</div> </div>
<EditorAccessibility <EditorAccessibility
lintMessages={this.props.lintMessages} lintMessages={this.props.lintMessages}
lineNo={this.props.lineNo} lineNo={this.props.lineNo}
/> />
</div> </section>
); );
} }
} }

2
client/modules/IDE/components/Preferences.js
View file

@ -154,7 +154,7 @@ class Preferences extends React.Component {
>Off</button> >Off</button>
</div> </div>
</div> </div>
<div className="preference preference--hidden"> <div className="preference">
<h4 className="preference__title">Lint Warning Sound</h4> <h4 className="preference__title">Lint Warning Sound</h4>
<div className="preference__options"> <div className="preference__options">
<button <button

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

@ -135,7 +135,7 @@ class PreviewFrame extends React.Component {
htmlHeadContents += '<script src="/data.js"></script>\n'; htmlHeadContents += '<script src="/data.js"></script>\n';
htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n'; htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n';
htmlHeadContents += '<script src="/intercept-p5.js"></script>\n'; htmlHeadContents += '<script src="/intercept-p5.js"></script>\n';
htmlHeadContents += `<script type="text/javascript" src="http://chir.ag/projects/ntc/ntc.js"></script>`; htmlHeadContents += '<script type="text/javascript" src="http://chir.ag/projects/ntc/ntc.js"></script>';
htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`); htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
// const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi); // const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
@ -170,15 +170,15 @@ class PreviewFrame extends React.Component {
render() { render() {
return ( return (
<iframe <iframe
className="preview-frame" className="preview-frame"
aria-label="sketch output" aria-label="sketch output"
role="main" role="main"
tabIndex="0" tabIndex="0"
frameBorder="0" frameBorder="0"
title="sketch output" title="sketch output"
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
/> />
); );
} }
} }

4
client/modules/IDE/components/Toolbar.js
View file

@ -21,7 +21,7 @@ function Toolbar(props) {
}); });
return ( return (
<div className="toolbar"> <section className="toolbar" title="toolbar" role="main">
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" /> <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
<button className={playButtonClass} onClick={props.startSketch} aria-label="play sketch"> <button className={playButtonClass} onClick={props.startSketch} aria-label="play sketch">
<InlineSVG src={playUrl} alt="Play Sketch" /> <InlineSVG src={playUrl} alt="Play Sketch" />
@ -55,7 +55,7 @@ function Toolbar(props) {
> >
<InlineSVG src={preferencesUrl} alt="Show Preferences" /> <InlineSVG src={preferencesUrl} alt="Show Preferences" />
</button> </button>
</div> </section>
); );
} }

1
client/styles/abstracts/_placeholders.scss
View file

@ -71,6 +71,7 @@
color: $light-primary-text-color; color: $light-primary-text-color;
background-color: $light-modal-button-background-color; background-color: $light-modal-button-background-color;
padding: 0; padding: 0;
margin-bottom: #{20 / $base-font-size}rem;
line-height: #{50 / $base-font-size}rem; line-height: #{50 / $base-font-size}rem;
& g { & g {
fill: $light-primary-text-color; fill: $light-primary-text-color;

2
client/styles/components/_preferences.scss
View file

@ -35,7 +35,7 @@
.preference { .preference {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-bottom: #{40 / $base-font-size}rem; padding-bottom: #{12 / $base-font-size}rem;
& + & { & + & {
border-top: 2px dashed $light-button-border-color; border-top: 2px dashed $light-button-border-color;
} }

5
static/intercept-p5.js
View file

@ -1,9 +1,6 @@
var shadowDOMElement; var shadowDOMElement;
var canvasLocation =''; var canvasLocation ='';
//for object in setpu (??)
funcNames = refData["classitems"].map(function(x){ funcNames = refData["classitems"].map(function(x){
return { return {
name: x["name"], name: x["name"],
@ -15,7 +12,7 @@ funcNames = refData["classitems"].map(function(x){
}); });
funcNames = funcNames.filter(function(x) { funcNames = funcNames.filter(function(x) {
let className = x["class"]; var className = x["class"];
return (x["name"] && x["params"] && (className==='p5')); return (x["name"] && x["params"] && (className==='p5'));
}) })