p5.js-web-editor/client/modules/IDE/components/Preferences.js

220 lines
7.8 KiB
JavaScript
Raw Normal View History

import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
import classNames from 'classnames';
// import { bindActionCreators } from 'redux';
// import { connect } from 'react-redux';
// import * as PreferencesActions from '../actions/preferences';
2016-06-24 00:29:55 +02:00
const exitUrl = require('../../../images/exit.svg');
const plusUrl = require('../../../images/plus.svg');
const minusUrl = require('../../../images/minus.svg');
class Preferences extends React.Component {
2016-08-09 22:15:28 +02:00
constructor(props) {
super(props);
this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this);
}
handleUpdateFont(event) {
this.props.setFontSize(parseInt(event.target.value, 10));
}
2016-07-06 17:27:39 +02:00
handleUpdateIndentation(event) {
this.props.setIndentation(parseInt(event.target.value, 10));
}
2016-07-06 17:27:39 +02:00
2016-08-09 22:15:28 +02:00
handleUpdateAutosave(event) {
const value = event.target.value === 'true';
this.props.setAutosave(value);
}
2016-08-11 20:09:59 +02:00
handleLintWarning(event) {
const value = event.target.value === 'true';
this.props.setLintWarning(value);
}
render() {
const preferencesContainerClass = classNames({
preferences: true,
'preferences--selected': this.props.isVisible
});
let preferencesTabOptionClass = classNames({
preference__option: true,
'preference__option--selected': this.props.isTabIndent
});
let preferencesSpaceOptionClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.isTabIndent
});
2016-08-09 23:29:17 +02:00
let autosaveOnClass = classNames({
preference__option: true,
'preference__option--selected': this.props.autosave
});
let autosaveOffClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.autosave
});
2016-08-11 20:09:59 +02:00
let lintWarningOnClass = classNames({
preference__option: true,
'preference__option--selected': this.props.lintWarning
});
let lintWarningOffClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.lintWarning
});
2016-08-12 21:50:33 +02:00
let textOutputOnClass = classNames({
preference__option: true,
'preference__option--selected': this.props.textOutput
});
let textOutputOffClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.textOutput
});
return (
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading">
<h2 className="preferences__title">Preferences</h2>
<button
className="preferences__exit-button"
onClick={this.props.closePreferences}
title="exit"
aria-label="exit preferences"
>
<InlineSVG src={exitUrl} alt="Exit Preferences" />
</button>
2016-07-11 14:44:27 +02:00
</div>
<div className="preference">
<h4 className="preference__title">Text Size</h4>
<button
className="preference__minus-button"
onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
aria-label="decrease font size"
>
<InlineSVG src={minusUrl} alt="Decrease Font Size" />
<h6 className="preference__label">Decrease</h6>
</button>
<input
className="preference__value"
aria-live="status"
aria-live="polite"
2016-08-12 02:26:14 +02:00
aria-atomic="true"
role="status"
value={this.props.fontSize}
onChange={this.handleUpdateFont}
>
</input>
<button
className="preference__plus-button"
onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
aria-label="increase font size"
>
<InlineSVG src={plusUrl} alt="Increase Font Size" />
<h6 className="preference__label">Increase</h6>
</button>
</div>
<div className="preference">
<h4 className="preference__title">Indentation Amount</h4>
<button
className="preference__minus-button"
onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
aria-label="decrease indentation amount"
>
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
<h6 className="preference__label">Decrease</h6>
</button>
<input
className="preference__value"
aria-live="status"
aria-live="polite"
2016-08-12 02:26:14 +02:00
aria-atomic="true"
role="status"
value={this.props.indentationAmount}
onChange={this.handleUpdateIndentation}
>
</input>
<button
className="preference__plus-button"
onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
aria-label="increase indentation amount"
>
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6>
</button>
<div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={this.props.indentWithSpace} aria-label="indentation with space">Spaces</button>
<button className={preferencesTabOptionClass} onClick={this.props.indentWithTab} aria-label="indentation with tab">Tabs</button>
</div>
</div>
2016-08-09 22:15:28 +02:00
<div className="preference">
<h4 className="preference__title">Autosave</h4>
2016-08-09 23:29:17 +02:00
<div className="preference__options">
<button
className={autosaveOnClass}
onClick={() => this.props.setAutosave(true)}
aria-label="autosave on"
>On</button>
<button
className={autosaveOffClass}
onClick={() => this.props.setAutosave(false)}
aria-label="autosave off"
>Off</button>
</div>
2016-08-09 22:15:28 +02:00
</div>
2016-08-12 20:19:23 +02:00
<div className="preference">
2016-08-11 20:09:59 +02:00
<h4 className="preference__title">Lint Warning Sound</h4>
<div className="preference__options">
<button
className={lintWarningOnClass}
onClick={() => this.props.setLintWarning(true)}
aria-label="lint warning on"
>On</button>
<button
className={lintWarningOffClass}
onClick={() => this.props.setLintWarning(false)}
aria-label="lint warning off"
>Off</button>
</div>
</div>
2016-08-12 21:50:33 +02:00
<div className="preference">
2016-08-19 21:51:41 +02:00
<h4 className="preference__title">Accessible Text-based Canvas</h4>
<h6 className="preference__subtitle">Used with screen reader</h6>
2016-08-12 21:50:33 +02:00
<div className="preference__options">
<button
className={textOutputOnClass}
onClick={() => this.props.setTextOutput(true)}
aria-label="text output on"
>On</button>
<button
className={textOutputOffClass}
onClick={() => this.props.setTextOutput(false)}
aria-label="text output off"
>Off</button>
</div>
</div>
</section>
);
}
2016-06-24 00:29:55 +02:00
}
Preferences.propTypes = {
isVisible: PropTypes.bool.isRequired,
closePreferences: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired,
2016-07-06 17:27:39 +02:00
indentationAmount: PropTypes.number.isRequired,
setIndentation: PropTypes.func.isRequired,
2016-07-11 04:52:48 +02:00
indentWithSpace: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
isTabIndent: PropTypes.bool.isRequired,
2016-08-09 22:15:28 +02:00
setFontSize: PropTypes.func.isRequired,
autosave: PropTypes.bool.isRequired,
2016-08-11 20:09:59 +02:00
setAutosave: PropTypes.func.isRequired,
2016-08-12 21:50:33 +02:00
textOutput: PropTypes.bool.isRequired,
setTextOutput: PropTypes.func.isRequired,
2016-08-11 20:09:59 +02:00
lintWarning: PropTypes.bool.isRequired,
setLintWarning: PropTypes.func.isRequired
};
export default Preferences;