p5.js-web-editor/client/modules/IDE/components/Toolbar.jsx

222 lines
7.4 KiB
React
Raw Normal View History

2016-06-27 21:08:25 +02:00
import React, { PropTypes } from 'react';
2016-08-17 22:09:20 +02:00
import { Link } from 'react-router';
import classNames from 'classnames';
import InlineSVG from 'react-inlinesvg';
2016-06-24 00:29:55 +02:00
const playUrl = require('../../../images/play.svg');
const logoUrl = require('../../../images/p5js-logo.svg');
const stopUrl = require('../../../images/stop.svg');
const preferencesUrl = require('../../../images/preferences.svg');
const editProjectNameUrl = require('../../../images/pencil.svg');
const helpUrl = require('../../../images/help.svg');
2016-06-24 00:29:55 +02:00
class Toolbar extends React.Component {
constructor(props) {
super(props);
this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleProjectNameChange = this.handleProjectNameChange.bind(this);
}
2016-06-24 00:29:55 +02:00
handleKeyPress(event) {
if (event.key === 'Enter') {
this.props.hideEditProjectName();
}
}
2016-07-31 04:46:48 +02:00
handleProjectNameChange(event) {
this.props.setProjectName(event.target.value);
}
validateProjectName() {
if (this.props.project.name === '') {
this.props.setProjectName(this.originalProjectName);
}
}
2016-11-04 23:54:14 +01:00
canEditProjectName() {
return (this.props.owner && this.props.owner.username
&& this.props.owner.username === this.props.currentUser)
|| !this.props.owner || !this.props.owner.username;
}
render() {
const playButtonClass = classNames({
'toolbar__play-button': true,
'toolbar__play-button--selected': this.props.isPlaying
});
const stopButtonClass = classNames({
'toolbar__stop-button': true,
'toolbar__stop-button--selected': !this.props.isPlaying
});
const preferencesButtonClass = classNames({
'toolbar__preferences-button': true,
'toolbar__preferences-button--selected': this.props.preferencesIsVisible
});
const nameContainerClass = classNames({
'toolbar__project-name-container': true,
'toolbar__project-name-container--editing': this.props.project.isEditingName
});
return (
<div className="toolbar">
<InlineSVG className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
2016-08-16 03:09:47 +02:00
<button
className="toolbar__play-sketch-button"
onClick={() => {
2017-01-31 22:45:47 +01:00
this.props.clearConsole();
this.props.startAccessibleOutput();
this.props.startSketchAndRefresh();
}}
2016-08-25 23:59:02 +02:00
aria-label="play sketch"
disabled={this.props.infiniteLoop}
2016-08-16 03:09:47 +02:00
>
2016-08-25 23:59:02 +02:00
<InlineSVG src={playUrl} alt="Play Sketch" />
</button>
2017-01-31 22:45:47 +01:00
<button
className={playButtonClass}
onClick={() => {
this.props.clearConsole();
this.props.startSketchAndRefresh();
}}
aria-label="play only visual sketch"
disabled={this.props.infiniteLoop}
>
2016-08-25 23:59:02 +02:00
<InlineSVG src={playUrl} alt="Play only visual Sketch" />
2016-08-16 03:09:47 +02:00
</button>
<button
className={stopButtonClass}
onClick={() => { this.props.stopAccessibleOutput(); this.props.stopSketch(); }}
2016-08-16 03:09:47 +02:00
aria-label="stop sketch"
>
<InlineSVG src={stopUrl} alt="Stop Sketch" />
</button>
<div className="toolbar__autorefresh">
2016-09-28 19:15:50 +02:00
<input
id="autorefresh"
type="checkbox"
checked={this.props.autorefresh}
onChange={(event) => {
this.props.setAutorefresh(event.target.checked);
}}
2016-09-28 19:15:50 +02:00
/>
<label htmlFor="autorefresh" className="toolbar__autorefresh-label">
Auto-refresh
</label>
</div>
{
this.props.currentUser == null ?
null :
<div className="toolbar__serve-secure">
<input
id="serve-secure"
type="checkbox"
checked={this.props.project.serveSecure || false}
onChange={(event) => {
this.props.setServeSecure(event.target.checked);
}}
/>
<label htmlFor="serve-secure" className="toolbar__serve-secure-label">
HTTPS
</label>
<button
className="toolbar__serve-secure-help"
onClick={() => this.props.showHelpModal('serveSecure')}
aria-label="help"
>
<InlineSVG src={helpUrl} alt="Help" />
</button>
</div>
}
<div className={nameContainerClass}>
<a
className="toolbar__project-name"
href={this.props.owner ? `/${this.props.owner.username}/sketches/${this.props.project.id}` : ''}
2016-11-04 23:54:14 +01:00
onClick={(e) => {
if (this.canEditProjectName()) {
e.preventDefault();
this.originalProjectName = this.props.project.name;
this.props.showEditProjectName();
setTimeout(() => this.projectNameInput.focus(), 0);
2016-11-04 23:54:14 +01:00
}
}}
2016-11-04 23:54:14 +01:00
>
{this.props.project.name}&nbsp;
2017-06-06 04:33:32 +02:00
{
this.canEditProjectName() &&
<InlineSVG className="toolbar__edit-name-button" src={editProjectNameUrl} alt="Edit Project Name" />
}
2016-11-04 23:54:14 +01:00
</a>
<input
type="text"
className="toolbar__project-name-input"
value={this.props.project.name}
onChange={this.handleProjectNameChange}
ref={(element) => { this.projectNameInput = element; }}
onBlur={() => {
this.validateProjectName();
this.props.hideEditProjectName();
if (this.props.project.id) {
this.props.saveProject();
}
}}
onKeyPress={this.handleKeyPress}
/>
{(() => { // eslint-disable-line
if (this.props.owner) {
return (
2016-08-17 22:09:20 +02:00
<p className="toolbar__project-owner">
by <Link to={`/${this.props.owner.username}/sketches`}>{this.props.owner.username}</Link>
</p>
);
}
})()}
</div>
<button
className={preferencesButtonClass}
onClick={this.props.openPreferences}
2016-08-25 23:59:02 +02:00
aria-label="preferences"
2016-06-27 21:08:25 +02:00
>
2016-08-25 23:59:02 +02:00
<InlineSVG src={preferencesUrl} alt="Preferences" />
</button>
2016-06-24 00:29:55 +02:00
</div>
);
}
2016-06-24 00:29:55 +02:00
}
2016-06-27 21:08:25 +02:00
Toolbar.propTypes = {
isPlaying: PropTypes.bool.isRequired,
preferencesIsVisible: PropTypes.bool.isRequired,
2016-06-27 21:08:25 +02:00
stopSketch: PropTypes.func.isRequired,
startAccessibleOutput: PropTypes.func.isRequired,
stopAccessibleOutput: PropTypes.func.isRequired,
2016-06-27 21:08:25 +02:00
setProjectName: PropTypes.func.isRequired,
2016-07-15 17:54:47 +02:00
openPreferences: PropTypes.func.isRequired,
2016-07-15 19:11:50 +02:00
owner: PropTypes.shape({
username: PropTypes.string
}),
project: PropTypes.shape({
name: PropTypes.string.isRequired,
isEditingName: PropTypes.bool,
id: PropTypes.string,
serveSecure: PropTypes.bool,
}).isRequired,
showEditProjectName: PropTypes.func.isRequired,
hideEditProjectName: PropTypes.func.isRequired,
showHelpModal: PropTypes.func.isRequired,
infiniteLoop: PropTypes.bool.isRequired,
autorefresh: PropTypes.bool.isRequired,
setAutorefresh: PropTypes.func.isRequired,
setServeSecure: PropTypes.func.isRequired,
startSketchAndRefresh: PropTypes.func.isRequired,
2016-11-04 23:54:14 +01:00
saveProject: PropTypes.func.isRequired,
2017-01-31 22:45:47 +01:00
currentUser: PropTypes.string,
clearConsole: PropTypes.func.isRequired
2016-06-27 21:08:25 +02:00
};
Toolbar.defaultProps = {
owner: undefined,
currentUser: undefined
};
2016-06-24 00:29:55 +02:00
export default Toolbar;