2018-02-07 19:06:07 +01:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React from 'react';
|
2018-11-15 20:37:44 +01:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { withRouter } from 'react-router';
|
2016-06-24 00:29:55 +02:00
|
|
|
import { Link } from 'react-router';
|
2017-07-17 23:09:46 +02:00
|
|
|
import InlineSVG from 'react-inlinesvg';
|
2017-08-28 17:19:10 +02:00
|
|
|
import classNames from 'classnames';
|
2018-11-15 20:37:44 +01:00
|
|
|
import * as IDEActions from '../modules/IDE/actions/ide';
|
2019-02-25 21:11:07 +01:00
|
|
|
import * as projectActions from '../modules/IDE/actions/project';
|
|
|
|
import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
|
|
|
|
import { logoutUser } from '../modules/User/actions';
|
2017-07-17 23:09:46 +02:00
|
|
|
|
2019-01-16 23:56:18 +01:00
|
|
|
import { metaKeyName, } from '../utils/metaKey';
|
2019-09-11 22:46:56 +02:00
|
|
|
import caretLeft from '../images/left-arrow.svg';
|
2017-09-01 19:38:40 +02:00
|
|
|
|
2017-07-17 23:09:46 +02:00
|
|
|
const triangleUrl = require('../images/down-filled-triangle.svg');
|
|
|
|
const logoUrl = require('../images/p5js-logo-small.svg');
|
2016-06-24 00:29:55 +02:00
|
|
|
|
2018-12-11 22:21:37 +01:00
|
|
|
const __process = (typeof global !== 'undefined' ? global : window).process;
|
|
|
|
|
2017-02-22 20:29:35 +01:00
|
|
|
class Nav extends React.PureComponent {
|
2017-08-28 17:19:10 +02:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
dropdownOpen: 'none'
|
|
|
|
};
|
2017-08-28 23:54:39 +02:00
|
|
|
this.handleFocus = this.handleFocus.bind(this);
|
|
|
|
this.handleBlur = this.handleBlur.bind(this);
|
|
|
|
this.clearHideTimeout = this.clearHideTimeout.bind(this);
|
2018-03-08 22:34:21 +01:00
|
|
|
this.handleClick = this.handleClick.bind(this);
|
|
|
|
this.handleClickOutside = this.handleClickOutside.bind(this);
|
2019-03-17 10:19:45 +01:00
|
|
|
this.handleSave = this.handleSave.bind(this);
|
|
|
|
this.handleNew = this.handleNew.bind(this);
|
|
|
|
this.handleDuplicate = this.handleDuplicate.bind(this);
|
|
|
|
this.handleShare = this.handleShare.bind(this);
|
|
|
|
this.handleDownload = this.handleDownload.bind(this);
|
|
|
|
this.handleFind = this.handleFind.bind(this);
|
|
|
|
this.handleAddFile = this.handleAddFile.bind(this);
|
|
|
|
this.handleAddFolder = this.handleAddFolder.bind(this);
|
|
|
|
this.handleFindNext = this.handleFindNext.bind(this);
|
|
|
|
this.handleRun = this.handleRun.bind(this);
|
|
|
|
this.handleFindPrevious = this.handleFindPrevious.bind(this);
|
|
|
|
this.handleStop = this.handleStop.bind(this);
|
2019-04-05 23:14:00 +02:00
|
|
|
this.handleStartAccessible = this.handleStartAccessible.bind(this);
|
2019-03-17 10:19:45 +01:00
|
|
|
this.handleStopAccessible = this.handleStopAccessible.bind(this);
|
|
|
|
this.handleKeyboardShortcuts = this.handleKeyboardShortcuts.bind(this);
|
|
|
|
this.handleLogout = this.handleLogout.bind(this);
|
2019-03-26 17:00:43 +01:00
|
|
|
this.toggleDropdownForFile = this.toggleDropdown.bind(this, 'file');
|
|
|
|
this.handleFocusForFile = this.handleFocus.bind(this, 'file');
|
|
|
|
this.setDropdownForNone = this.setDropdown.bind(this, 'none');
|
|
|
|
this.toggleDropdownForEdit = this.toggleDropdown.bind(this, 'edit');
|
|
|
|
this.handleFocusForEdit = this.handleFocus.bind(this, 'edit');
|
|
|
|
this.toggleDropdownForSketch = this.toggleDropdown.bind(this, 'sketch');
|
|
|
|
this.handleFocusForSketch = this.handleFocus.bind(this, 'sketch');
|
|
|
|
this.toggleDropdownForHelp = this.toggleDropdown.bind(this, 'help');
|
|
|
|
this.handleFocusForHelp = this.handleFocus.bind(this, 'help');
|
|
|
|
this.toggleDropdownForAccount = this.toggleDropdown.bind(this, 'account');
|
|
|
|
this.handleFocusForAccount = this.handleFocus.bind(this, 'account');
|
2019-03-27 17:50:55 +01:00
|
|
|
this.closeDropDown = this.closeDropDown.bind(this);
|
2018-03-08 22:34:21 +01:00
|
|
|
}
|
|
|
|
|
2019-03-27 17:50:55 +01:00
|
|
|
componentDidMount() {
|
2018-03-08 22:34:21 +01:00
|
|
|
document.addEventListener('mousedown', this.handleClick, false);
|
2019-03-27 17:50:55 +01:00
|
|
|
document.addEventListener('keydown', this.closeDropDown, false);
|
2018-03-08 22:34:21 +01:00
|
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
document.removeEventListener('mousedown', this.handleClick, false);
|
2019-03-27 17:50:55 +01:00
|
|
|
document.removeEventListener('keydown', this.closeDropDown, false);
|
2017-08-28 17:19:10 +02:00
|
|
|
}
|
|
|
|
|
2017-08-28 23:54:39 +02:00
|
|
|
setDropdown(dropdown) {
|
|
|
|
this.setState({
|
|
|
|
dropdownOpen: dropdown
|
|
|
|
});
|
2017-07-19 23:35:25 +02:00
|
|
|
}
|
|
|
|
|
2019-03-27 17:50:55 +01:00
|
|
|
closeDropDown(e) {
|
|
|
|
if (e.keyCode === 27) {
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-03-08 22:34:21 +01:00
|
|
|
handleClick(e) {
|
2019-03-27 17:50:55 +01:00
|
|
|
if (!this.node) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (this.node && this.node.contains(e.target)) {
|
2018-03-08 22:34:21 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.handleClickOutside();
|
|
|
|
}
|
|
|
|
|
2019-03-17 10:19:45 +01:00
|
|
|
handleNew() {
|
|
|
|
if (!this.props.unsavedChanges) {
|
|
|
|
this.props.newProject();
|
|
|
|
} else if (this.props.warnIfUnsavedChanges()) {
|
|
|
|
this.props.newProject();
|
|
|
|
}
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleSave() {
|
|
|
|
if (this.props.user.authenticated) {
|
|
|
|
this.props.saveProject(this.props.cmController.getContent());
|
|
|
|
} else {
|
|
|
|
this.props.showErrorModal('forceAuthentication');
|
|
|
|
}
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleFind() {
|
|
|
|
this.props.cmController.showFind();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleFindNext() {
|
|
|
|
this.props.cmController.findNext();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleFindPrevious() {
|
|
|
|
this.props.cmController.findPrev();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleAddFile() {
|
|
|
|
this.props.newFile();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleAddFolder() {
|
|
|
|
this.props.newFolder();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleRun() {
|
|
|
|
this.props.startSketch();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleStop() {
|
|
|
|
this.props.stopSketch();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleStartAccessible() {
|
|
|
|
this.props.setAllAccessibleOutput(true);
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleStopAccessible() {
|
|
|
|
this.props.setAllAccessibleOutput(false);
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleKeyboardShortcuts() {
|
|
|
|
this.props.showKeyboardShortcutModal();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleLogout() {
|
|
|
|
this.props.logoutUser();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleDownload() {
|
|
|
|
this.props.autosaveProject();
|
|
|
|
this.props.exportProjectAsZip(this.props.project.id);
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleDuplicate() {
|
|
|
|
this.props.cloneProject();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleShare() {
|
|
|
|
this.props.showShareModal();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}
|
|
|
|
|
2018-03-08 22:34:21 +01:00
|
|
|
handleClickOutside() {
|
|
|
|
this.setState({
|
|
|
|
dropdownOpen: 'none'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-08-28 17:19:10 +02:00
|
|
|
toggleDropdown(dropdown) {
|
|
|
|
if (this.state.dropdownOpen === 'none') {
|
|
|
|
this.setState({
|
|
|
|
dropdownOpen: dropdown
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.setState({
|
|
|
|
dropdownOpen: 'none'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-28 23:54:39 +02:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2019-09-11 20:11:20 +02:00
|
|
|
renderDashboardMenu(navDropdownState) {
|
|
|
|
return (
|
|
|
|
<ul className="nav__items-left" title="project-menu">
|
|
|
|
<li className="nav__item-logo">
|
|
|
|
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
|
|
|
|
</li>
|
|
|
|
<li className="nav__item nav__item--no-icon">
|
2019-09-11 22:46:56 +02:00
|
|
|
<Link to="/" className="nav__back-link">
|
|
|
|
<InlineSVG src={caretLeft} className="nav__back-icon" />
|
|
|
|
<span className="nav__item-header">
|
|
|
|
Back to Editor
|
|
|
|
</span>
|
2019-09-11 20:11:20 +02:00
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-09-11 19:06:30 +02:00
|
|
|
renderProjectMenu(navDropdownState) {
|
|
|
|
return (
|
|
|
|
<ul className="nav__items-left" title="project-menu">
|
|
|
|
<li className="nav__item-logo">
|
|
|
|
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
|
|
|
|
</li>
|
|
|
|
<li className={navDropdownState.file}>
|
|
|
|
<button
|
|
|
|
onClick={this.toggleDropdownForFile}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onFocus={this.clearHideTimeout}
|
|
|
|
onMouseOver={() => {
|
|
|
|
if (this.state.dropdownOpen !== 'none') {
|
|
|
|
this.setDropdown('file');
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<span className="nav__item-header">File</span>
|
|
|
|
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
|
|
|
</button>
|
|
|
|
<ul className="nav__dropdown">
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleNew}
|
|
|
|
onFocus={this.handleFocusForFile}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
New
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
{ __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleSave}
|
|
|
|
onFocus={this.handleFocusForFile}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Save
|
|
|
|
<span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
|
|
|
|
</button>
|
|
|
|
</li> }
|
|
|
|
{ this.props.project.id && this.props.user.authenticated &&
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleDuplicate}
|
|
|
|
onFocus={this.handleFocusForFile}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Duplicate
|
|
|
|
</button>
|
|
|
|
</li> }
|
|
|
|
{ this.props.project.id &&
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleShare}
|
|
|
|
onFocus={this.handleFocusForFile}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Share
|
|
|
|
</button>
|
|
|
|
</li> }
|
|
|
|
{ this.props.project.id &&
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleDownload}
|
|
|
|
onFocus={this.handleFocusForFile}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Download
|
|
|
|
</button>
|
|
|
|
</li> }
|
|
|
|
{ this.props.user.authenticated &&
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<Link
|
|
|
|
to={`/${this.props.user.username}/sketches`}
|
|
|
|
onFocus={this.handleFocusForFile}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onClick={this.setDropdownForNone}
|
|
|
|
>
|
|
|
|
Open
|
|
|
|
</Link>
|
|
|
|
</li> }
|
|
|
|
{ __process.env.EXAMPLES_ENABLED &&
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<Link
|
|
|
|
to="/p5/sketches"
|
|
|
|
onFocus={this.handleFocusForFile}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onClick={this.setDropdownForNone}
|
|
|
|
>
|
|
|
|
Examples
|
|
|
|
</Link>
|
|
|
|
</li> }
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li className={navDropdownState.edit}>
|
|
|
|
<button
|
|
|
|
onClick={this.toggleDropdownForEdit}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onFocus={this.clearHideTimeout}
|
|
|
|
onMouseOver={() => {
|
|
|
|
if (this.state.dropdownOpen !== 'none') {
|
|
|
|
this.setDropdown('edit');
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<span className="nav__item-header">Edit</span>
|
|
|
|
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
|
|
|
</button>
|
|
|
|
<ul className="nav__dropdown" >
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={() => {
|
|
|
|
this.props.cmController.tidyCode();
|
|
|
|
this.setDropdown('none');
|
|
|
|
}}
|
|
|
|
onFocus={this.handleFocusForEdit}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Tidy Code
|
|
|
|
<span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleFind}
|
|
|
|
onFocus={this.handleFocusForEdit}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Find
|
|
|
|
<span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleFindNext}
|
|
|
|
onFocus={this.handleFocusForEdit}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Find Next
|
|
|
|
<span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleFindPrevious}
|
|
|
|
onFocus={this.handleFocusForEdit}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Find Previous
|
|
|
|
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li className={navDropdownState.sketch}>
|
|
|
|
<button
|
|
|
|
onClick={this.toggleDropdownForSketch}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onFocus={this.clearHideTimeout}
|
|
|
|
onMouseOver={() => {
|
|
|
|
if (this.state.dropdownOpen !== 'none') {
|
|
|
|
this.setDropdown('sketch');
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<span className="nav__item-header">Sketch</span>
|
|
|
|
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
|
|
|
</button>
|
|
|
|
<ul className="nav__dropdown">
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleAddFile}
|
|
|
|
onFocus={this.handleFocusForSketch}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Add File
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleAddFolder}
|
|
|
|
onFocus={this.handleFocusForSketch}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Add Folder
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleRun}
|
|
|
|
onFocus={this.handleFocusForSketch}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Run
|
|
|
|
<span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleStop}
|
|
|
|
onFocus={this.handleFocusForSketch}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Stop
|
|
|
|
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
{/* <li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleStartAccessible}
|
|
|
|
onFocus={this.handleFocusForSketch}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Start Accessible
|
|
|
|
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+1</span>
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleStopAccessible}
|
|
|
|
onFocus={this.handleFocusForSketch}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Stop Accessible
|
|
|
|
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+2</span>
|
|
|
|
</button>
|
|
|
|
</li> */}
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li className={navDropdownState.help}>
|
|
|
|
<button
|
|
|
|
onClick={this.toggleDropdownForHelp}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onFocus={this.clearHideTimeout}
|
|
|
|
onMouseOver={() => {
|
|
|
|
if (this.state.dropdownOpen !== 'none') {
|
|
|
|
this.setDropdown('help');
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<span className="nav__item-header">Help & Feedback</span>
|
|
|
|
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
|
|
|
</button>
|
|
|
|
<ul className="nav__dropdown">
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onFocus={this.handleFocusForHelp}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onClick={this.handleKeyboardShortcuts}
|
|
|
|
>
|
|
|
|
Keyboard Shortcuts
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<a
|
|
|
|
href="https://p5js.org/reference/"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
onFocus={this.handleFocusForHelp}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onClick={this.setDropdownForNone}
|
|
|
|
>Reference
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<Link
|
|
|
|
to="/about"
|
|
|
|
onFocus={this.handleFocusForHelp}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onClick={this.setDropdownForNone}
|
|
|
|
>
|
|
|
|
About
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<Link
|
|
|
|
to="/feedback"
|
|
|
|
onFocus={this.handleFocusForHelp}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onClick={this.setDropdownForNone}
|
|
|
|
>
|
|
|
|
Feedback
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderUnauthenticatedUserMenu(navDropdownState) {
|
|
|
|
return (
|
|
|
|
<ul className="nav__items-right" title="user-menu">
|
|
|
|
<li>
|
|
|
|
<Link to="/login">
|
|
|
|
<span className="nav__item-header">Log in</span>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
<span className="nav__item-spacer">or</span>
|
|
|
|
<li>
|
|
|
|
<Link to="/signup">
|
|
|
|
<span className="nav__item-header">Sign up</span>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderAuthenticatedUserMenu(navDropdownState) {
|
|
|
|
return (
|
|
|
|
<ul className="nav__items-right" title="user-menu">
|
|
|
|
<li className="nav__item">
|
|
|
|
<span>Hello, {this.props.user.username}!</span>
|
|
|
|
</li>
|
|
|
|
<span className="nav__item-spacer">|</span>
|
|
|
|
<li className={navDropdownState.account}>
|
|
|
|
<button
|
|
|
|
className="nav__item-header"
|
|
|
|
onClick={this.toggleDropdownForAccount}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onFocus={this.clearHideTimeout}
|
|
|
|
onMouseOver={() => {
|
|
|
|
if (this.state.dropdownOpen !== 'none') {
|
|
|
|
this.setDropdown('account');
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
My Account
|
|
|
|
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
|
|
|
|
</button>
|
|
|
|
<ul className="nav__dropdown">
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<Link
|
|
|
|
to={`/${this.props.user.username}/sketches`}
|
|
|
|
onFocus={this.handleFocusForAccount}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onClick={this.setDropdownForNone}
|
|
|
|
>
|
|
|
|
My sketches
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<Link
|
|
|
|
to={`/${this.props.user.username}/assets`}
|
|
|
|
onFocus={this.handleFocusForAccount}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onClick={this.setDropdownForNone}
|
|
|
|
>
|
|
|
|
My assets
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<Link
|
|
|
|
to="/account"
|
|
|
|
onFocus={this.handleFocusForAccount}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
onClick={this.setDropdownForNone}
|
|
|
|
>
|
|
|
|
Settings
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
<li className="nav__dropdown-item">
|
|
|
|
<button
|
|
|
|
onClick={this.handleLogout}
|
|
|
|
onFocus={this.handleFocusForAccount}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
>
|
|
|
|
Log out
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderUserMenu(navDropdownState) {
|
|
|
|
const isLoginEnabled = __process.env.LOGIN_ENABLED;
|
|
|
|
const isAuthenticated = this.props.user.authenticated;
|
|
|
|
|
|
|
|
if (isLoginEnabled && isAuthenticated) {
|
|
|
|
return this.renderAuthenticatedUserMenu(navDropdownState);
|
|
|
|
} else if (isLoginEnabled && !isAuthenticated) {
|
|
|
|
return this.renderUnauthenticatedUserMenu(navDropdownState);
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2019-09-11 20:11:20 +02:00
|
|
|
renderLeftLayout(navDropdownState) {
|
|
|
|
switch (this.props.layout) {
|
|
|
|
case 'dashboard':
|
|
|
|
return this.renderDashboardMenu(navDropdownState);
|
|
|
|
case 'project':
|
|
|
|
default:
|
|
|
|
return this.renderProjectMenu(navDropdownState);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-02-22 20:29:35 +01:00
|
|
|
render() {
|
2017-08-28 17:19:10 +02:00
|
|
|
const navDropdownState = {
|
|
|
|
file: classNames({
|
|
|
|
'nav__item': true,
|
|
|
|
'nav__item--open': this.state.dropdownOpen === 'file'
|
|
|
|
}),
|
|
|
|
edit: classNames({
|
|
|
|
'nav__item': true,
|
|
|
|
'nav__item--open': this.state.dropdownOpen === 'edit'
|
|
|
|
}),
|
|
|
|
sketch: classNames({
|
|
|
|
'nav__item': true,
|
|
|
|
'nav__item--open': this.state.dropdownOpen === 'sketch'
|
|
|
|
}),
|
|
|
|
help: classNames({
|
|
|
|
'nav__item': true,
|
|
|
|
'nav__item--open': this.state.dropdownOpen === 'help'
|
|
|
|
}),
|
|
|
|
account: classNames({
|
|
|
|
'nav__item': true,
|
|
|
|
'nav__item--open': this.state.dropdownOpen === 'account'
|
|
|
|
})
|
|
|
|
};
|
2019-09-11 20:11:20 +02:00
|
|
|
|
2017-02-22 20:29:35 +01:00
|
|
|
return (
|
2018-05-05 02:43:31 +02:00
|
|
|
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
|
2019-09-11 20:11:20 +02:00
|
|
|
{this.renderLeftLayout(navDropdownState)}
|
2019-09-11 19:06:30 +02:00
|
|
|
{this.renderUserMenu(navDropdownState)}
|
2017-08-31 22:32:29 +02:00
|
|
|
{/*
|
2017-02-22 20:29:35 +01:00
|
|
|
<div className="nav__announce">
|
2017-05-03 17:57:33 +02:00
|
|
|
This is a preview version of the editor, that has not yet been officially released.
|
2017-06-06 04:33:32 +02:00
|
|
|
It is in development, you can report bugs <a
|
|
|
|
href="https://github.com/processing/p5.js-web-editor/issues"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>here</a>.
|
2017-02-22 20:29:35 +01:00
|
|
|
Please use with caution.
|
|
|
|
</div>
|
2017-08-31 22:32:29 +02:00
|
|
|
*/}
|
2017-02-22 20:29:35 +01:00
|
|
|
</nav>
|
|
|
|
);
|
|
|
|
}
|
2016-06-24 00:29:55 +02:00
|
|
|
}
|
|
|
|
|
2016-06-27 22:14:26 +02:00
|
|
|
Nav.propTypes = {
|
2016-08-12 18:45:26 +02:00
|
|
|
newProject: PropTypes.func.isRequired,
|
2016-06-27 22:14:26 +02:00
|
|
|
saveProject: PropTypes.func.isRequired,
|
2018-02-13 17:28:06 +01:00
|
|
|
autosaveProject: PropTypes.func.isRequired,
|
2016-07-15 19:11:50 +02:00
|
|
|
exportProjectAsZip: PropTypes.func.isRequired,
|
2016-07-15 19:36:33 +02:00
|
|
|
cloneProject: PropTypes.func.isRequired,
|
2016-06-27 22:14:26 +02:00
|
|
|
user: PropTypes.shape({
|
|
|
|
authenticated: PropTypes.bool.isRequired,
|
2016-09-07 21:21:22 +02:00
|
|
|
username: PropTypes.string,
|
|
|
|
id: PropTypes.string
|
2016-08-18 00:35:15 +02:00
|
|
|
}).isRequired,
|
|
|
|
project: PropTypes.shape({
|
2016-09-07 21:21:22 +02:00
|
|
|
id: PropTypes.string,
|
|
|
|
owner: PropTypes.shape({
|
|
|
|
id: PropTypes.string
|
|
|
|
})
|
2016-08-28 02:46:20 +02:00
|
|
|
}),
|
2016-08-28 03:52:00 +02:00
|
|
|
logoutUser: PropTypes.func.isRequired,
|
2016-11-29 21:51:16 +01:00
|
|
|
showShareModal: PropTypes.func.isRequired,
|
2017-02-22 20:29:35 +01:00
|
|
|
showErrorModal: PropTypes.func.isRequired,
|
|
|
|
unsavedChanges: PropTypes.bool.isRequired,
|
2017-08-30 23:22:36 +02:00
|
|
|
warnIfUnsavedChanges: PropTypes.func.isRequired,
|
2017-09-01 18:40:15 +02:00
|
|
|
showKeyboardShortcutModal: PropTypes.func.isRequired,
|
|
|
|
cmController: PropTypes.shape({
|
|
|
|
tidyCode: PropTypes.func,
|
2017-09-14 22:58:59 +02:00
|
|
|
showFind: PropTypes.func,
|
|
|
|
findNext: PropTypes.func,
|
2019-02-25 22:45:20 +01:00
|
|
|
findPrev: PropTypes.func,
|
|
|
|
getContent: PropTypes.func
|
2017-09-14 23:57:09 +02:00
|
|
|
}),
|
|
|
|
startSketch: PropTypes.func.isRequired,
|
2017-09-15 18:10:25 +02:00
|
|
|
stopSketch: PropTypes.func.isRequired,
|
2018-11-15 20:37:44 +01:00
|
|
|
setAllAccessibleOutput: PropTypes.func.isRequired,
|
|
|
|
newFile: PropTypes.func.isRequired,
|
2019-09-11 20:11:20 +02:00
|
|
|
newFolder: PropTypes.func.isRequired,
|
|
|
|
layout: PropTypes.oneOf(['dashboard', 'project'])
|
2017-02-22 20:29:35 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
Nav.defaultProps = {
|
|
|
|
project: {
|
|
|
|
id: undefined,
|
|
|
|
owner: undefined
|
2017-09-01 18:40:15 +02:00
|
|
|
},
|
2019-09-11 20:11:20 +02:00
|
|
|
cmController: {},
|
|
|
|
layout: 'project'
|
2016-06-27 22:14:26 +02:00
|
|
|
};
|
|
|
|
|
2019-02-25 21:11:07 +01:00
|
|
|
function mapStateToProps(state) {
|
|
|
|
return {
|
|
|
|
project: state.project,
|
|
|
|
user: state.user,
|
|
|
|
unsavedChanges: state.ide.unsavedChanges
|
|
|
|
};
|
2018-11-15 20:37:44 +01:00
|
|
|
}
|
|
|
|
|
2019-02-25 21:11:07 +01:00
|
|
|
const mapDispatchToProps = {
|
|
|
|
...IDEActions,
|
|
|
|
...projectActions,
|
|
|
|
logoutUser,
|
|
|
|
setAllAccessibleOutput
|
|
|
|
};
|
|
|
|
|
|
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav));
|
2019-02-10 01:45:29 +01:00
|
|
|
export { Nav as NavComponent };
|