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

238 lines
7.7 KiB
React
Raw Normal View History

import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
2016-08-17 22:09:20 +02:00
import { Link } from 'react-router';
import classNames from 'classnames';
import { withTranslation } from 'react-i18next';
import * as IDEActions from '../actions/ide';
import * as preferenceActions from '../actions/preferences';
import * as projectActions from '../actions/project';
2020-04-30 00:34:37 +02:00
import PlayIcon from '../../../images/play.svg';
import StopIcon from '../../../images/stop.svg';
import PreferencesIcon from '../../../images/preferences.svg';
import EditProjectNameIcon from '../../../images/pencil.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);
this.handleProjectNameSave = this.handleProjectNameSave.bind(this);
this.state = {
projectNameInputValue: props.project.name,
};
}
2016-06-24 00:29:55 +02:00
handleKeyPress(event) {
if (event.key === 'Enter') {
this.props.hideEditProjectName();
this.projectNameInput.blur();
}
}
2016-07-31 04:46:48 +02:00
handleProjectNameChange(event) {
this.setState({ projectNameInputValue: event.target.value });
}
handleProjectNameSave() {
const newProjectName = this.state.projectNameInputValue.trim();
if (newProjectName.length === 0) {
this.setState({
projectNameInputValue: this.props.project.name,
});
} else {
this.props.setProjectName(newProjectName);
this.props.hideEditProjectName();
if (this.props.project.id) {
this.props.saveProject();
}
}
}
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 canEditProjectName = this.canEditProjectName();
const playButtonClass = classNames({
'toolbar__play-button': true,
'toolbar__play-button--selected': this.props.isPlaying,
'toolbar__play-button--saved': this.props.isSaved,
'toolbar__play-button--unsaved': !this.props.isSaved,
'toolbar__play-button--clone': this.props.unsavedChanges && !canEditProjectName
});
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">
2016-08-16 03:09:47 +02:00
<button
className="toolbar__play-sketch-button"
Remove accessibility CSS; Auto focus (#583) * Change accessibility example links * added library to iframe * changed preview to add accessible elements to iframe * add library only when accesible output is seleceted * focus on iframe when plaing * css * deleted accessibleOutput.jsx and edited IDEView to integrate accessibility library * deleted comments * fix package * Moved CSS to library and removed section from file.js (#2) * Remove gitmodule (#509) * remove git modules * removed submodule and replaced interceptor for library * removed submodule and replaced interceptor for library (#510) * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * Fixes #508 (#539) * removed submodule and replaced interceptor for library * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * remove empty divs from files.js * fix merge error * remove empty divs from files.js * Fixes #508 (#545) * removed submodule and replaced interceptor for library * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * remove empty divs from files.js * fix merge error * remove empty divs from files.js * moved accessible output css * removed css, added aria-label, preliminary cdn update * removed section from iframe * updated cdn * add autofocus; remove CSS
2018-03-01 19:28:43 +01:00
onClick={() => {
this.props.startAccessibleSketch();
this.props.setTextOutput(true);
this.props.setGridOutput(true);
}}
aria-label={this.props.t('Toolbar.PlaySketchARIA')}
disabled={this.props.infiniteLoop}
2016-08-16 03:09:47 +02:00
>
<PlayIcon focusable="false" aria-hidden="true" />
2016-08-25 23:59:02 +02:00
</button>
2017-01-31 22:45:47 +01:00
<button
className={playButtonClass}
onClick={this.props.startSketch}
aria-label={this.props.t('Toolbar.PlayOnlyVisualSketchARIA')}
2017-01-31 22:45:47 +01:00
disabled={this.props.infiniteLoop}
>
<PlayIcon focusable="false" aria-hidden="true" />
2016-08-16 03:09:47 +02:00
</button>
<button
className={stopButtonClass}
onClick={this.props.stopSketch}
aria-label={this.props.t('Toolbar.StopSketchARIA')}
2016-08-16 03:09:47 +02:00
>
<StopIcon focusable="false" aria-hidden="true" />
</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">
{this.props.t('Toolbar.Auto-refresh')}
2016-09-28 19:15:50 +02:00
</label>
</div>
<div className={nameContainerClass}>
<button
className="toolbar__project-name"
onClick={() => {
if (canEditProjectName) {
2016-11-04 23:54:14 +01:00
this.props.showEditProjectName();
setTimeout(() => this.projectNameInput.focus(), 0);
2016-11-04 23:54:14 +01:00
}
}}
disabled={!canEditProjectName}
aria-label={this.props.t('Toolbar.EditSketchARIA')}
2016-11-04 23:54:14 +01:00
>
<span>{this.props.project.name}</span>
2017-06-06 04:33:32 +02:00
{
canEditProjectName &&
<EditProjectNameIcon
className="toolbar__edit-name-button"
focusable="false"
aria-hidden="true"
/>
2017-06-06 04:33:32 +02:00
}
</button>
<input
type="text"
2019-10-08 23:16:21 +02:00
maxLength="128"
className="toolbar__project-name-input"
aria-label={this.props.t('Toolbar.NewSketchNameARIA')}
value={this.state.projectNameInputValue}
onChange={this.handleProjectNameChange}
ref={(element) => { this.projectNameInput = element; }}
onBlur={this.handleProjectNameSave}
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}
aria-label={this.props.t('Toolbar.OpenPreferencesARIA')}
2016-06-27 21:08:25 +02:00
>
<PreferencesIcon focusable="false" aria-hidden="true" />
</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,
unsavedChanges: PropTypes.bool.isRequired,
isSaved: PropTypes.bool.isRequired,
preferencesIsVisible: PropTypes.bool.isRequired,
2016-06-27 21:08:25 +02:00
stopSketch: PropTypes.func.isRequired,
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,
}).isRequired,
showEditProjectName: PropTypes.func.isRequired,
hideEditProjectName: PropTypes.func.isRequired,
infiniteLoop: PropTypes.bool.isRequired,
autorefresh: PropTypes.bool.isRequired,
setAutorefresh: PropTypes.func.isRequired,
Remove accessibility CSS; Auto focus (#583) * Change accessibility example links * added library to iframe * changed preview to add accessible elements to iframe * add library only when accesible output is seleceted * focus on iframe when plaing * css * deleted accessibleOutput.jsx and edited IDEView to integrate accessibility library * deleted comments * fix package * Moved CSS to library and removed section from file.js (#2) * Remove gitmodule (#509) * remove git modules * removed submodule and replaced interceptor for library * removed submodule and replaced interceptor for library (#510) * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * Fixes #508 (#539) * removed submodule and replaced interceptor for library * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * remove empty divs from files.js * fix merge error * remove empty divs from files.js * Fixes #508 (#545) * removed submodule and replaced interceptor for library * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * remove empty divs from files.js * fix merge error * remove empty divs from files.js * moved accessible output css * removed css, added aria-label, preliminary cdn update * removed section from iframe * updated cdn * add autofocus; remove CSS
2018-03-01 19:28:43 +01:00
setTextOutput: PropTypes.func.isRequired,
setGridOutput: PropTypes.func.isRequired,
startSketch: PropTypes.func.isRequired,
startAccessibleSketch: PropTypes.func.isRequired,
2016-11-04 23:54:14 +01:00
saveProject: PropTypes.func.isRequired,
currentUser: PropTypes.string,
t: PropTypes.func.isRequired
2016-06-27 21:08:25 +02:00
};
Toolbar.defaultProps = {
owner: undefined,
currentUser: undefined
};
function mapStateToProps(state) {
return {
autorefresh: state.preferences.autorefresh,
currentUser: state.user.username,
infiniteLoop: state.ide.infiniteLoop,
isPlaying: state.ide.isPlaying,
owner: state.project.owner,
isSaved: state.project.updatedAt !== '',
preferencesIsVisible: state.ide.preferencesIsVisible,
project: state.project,
unsavedChanges: state.ide.unsavedChanges,
};
}
const mapDispatchToProps = {
...IDEActions,
...preferenceActions,
...projectActions,
};
export const ToolbarComponent = withTranslation()(Toolbar);
export default connect(mapStateToProps, mapDispatchToProps)(ToolbarComponent);