diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 157de43a..bb21e769 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -12,10 +12,15 @@ class Nav extends React.PureComponent {
this.state = {
dropdownOpen: 'none'
};
+ this.handleFocus = this.handleFocus.bind(this);
+ this.handleBlur = this.handleBlur.bind(this);
+ this.clearHideTimeout = this.clearHideTimeout.bind(this);
}
- isUserOwner() {
- return this.props.project.owner && this.props.project.owner.id === this.props.user.id;
+ setDropdown(dropdown) {
+ this.setState({
+ dropdownOpen: dropdown
+ });
}
toggleDropdown(dropdown) {
@@ -30,6 +35,26 @@ class Nav extends React.PureComponent {
}
}
+ isUserOwner() {
+ return this.props.project.owner && this.props.project.owner.id === this.props.user.id;
+ }
+
+ handleFocus(dropdown) {
+ this.clearHideTimeout();
+ this.setDropdown(dropdown);
+ }
+
+ clearHideTimeout() {
+ if (this.timer) {
+ clearTimeout(this.timer);
+ this.timer = null;
+ }
+ }
+
+ handleBlur() {
+ this.timer = setTimeout(this.setDropdown.bind(this, 'none'), 10);
+ }
+
render() {
const navDropdownState = {
file: classNames({
@@ -62,7 +87,8 @@ class Nav extends React.PureComponent {
@@ -95,37 +123,57 @@ class Nav extends React.PureComponent {
this.props.showErrorModal('forceAuthentication');
}
}}
+ onFocus={this.handleFocus.bind(this, 'file')}
+ onBlur={this.handleBlur}
>
Save
}
{ this.props.project.id && this.props.user.authenticated &&
- }
{ this.props.project.id &&
-
+
Share
}
{ this.props.project.id &&
- this.props.exportProjectAsZip(this.props.project.id)}>
+ this.props.exportProjectAsZip(this.props.project.id)}
+ onFocus={this.handleFocus.bind(this, 'file')}
+ onBlur={this.handleBlur}
+ >
Download
}
{ this.props.user.authenticated &&
-
+
Open
}
Examples
@@ -133,7 +181,11 @@ class Nav extends React.PureComponent {
-
+
Edit
@@ -151,7 +203,11 @@ class Nav extends React.PureComponent {
-
+
Sketch
@@ -169,7 +225,11 @@ class Nav extends React.PureComponent {
-
+
Help
@@ -186,10 +246,16 @@ class Nav extends React.PureComponent {
href="https://p5js.org/reference/"
target="_blank"
rel="noopener noreferrer"
+ onFocus={this.handleFocus.bind(this, 'help')}
+ onBlur={this.handleBlur}
>Reference
-
+
About
@@ -216,6 +282,8 @@ class Nav extends React.PureComponent {
My Account
@@ -226,22 +294,38 @@ class Nav extends React.PureComponent {
-
+
My sketches
-
+
My assets
-
+
Settings
-
+
Log out
diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx
index 27725fb6..66a80f4f 100644
--- a/client/modules/IDE/components/PreviewFrame.jsx
+++ b/client/modules/IDE/components/PreviewFrame.jsx
@@ -152,6 +152,14 @@ class PreviewFrame extends React.Component {
doc.srcDoc = '';
}
+ addLoopProtect(sketchDoc) {
+ const scriptsInHTML = sketchDoc.getElementsByTagName('script');
+ const scriptsInHTMLArray = Array.prototype.slice.call(scriptsInHTML);
+ scriptsInHTMLArray.forEach((script) => {
+ script.innerHTML = loopProtect(script.innerHTML); // eslint-disable-line
+ });
+ }
+
injectLocalFiles() {
const htmlFile = this.props.htmlFile.content;
let scriptOffs = [];
@@ -227,7 +235,7 @@ class PreviewFrame extends React.Component {
scriptOffs = getAllScriptOffsets(sketchDocString);
const consoleErrorsScript = sketchDoc.createElement('script');
consoleErrorsScript.innerHTML = hijackConsoleErrorsScript(JSON.stringify(scriptOffs));
- // sketchDoc.head.appendChild(consoleErrorsScript);
+ this.addLoopProtect(sketchDoc);
sketchDoc.head.insertBefore(consoleErrorsScript, sketchDoc.head.firstElement);
return `\n${sketchDoc.documentElement.outerHTML}`;