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 &&
  • -
  • } { this.props.project.id &&
  • -
  • } { this.props.user.authenticated &&
  • - + Open
  • }
  • Examples @@ -133,7 +181,11 @@ class Nav extends React.PureComponent {
  • - @@ -151,7 +203,11 @@ class Nav extends React.PureComponent {
  • - @@ -169,7 +225,11 @@ class Nav extends React.PureComponent {
  • - @@ -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 { @@ -226,22 +294,38 @@ class Nav extends React.PureComponent {
  • - + My sketches
  • - + My assets
  • - + Settings
  • -
  • 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}`;