import PropTypes from 'prop-types'; import React from 'react'; import { Helmet } from 'react-helmet'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import { withTranslation } from 'react-i18next'; // import { bindActionCreators } from 'redux'; // import { connect } from 'react-redux'; // import * as PreferencesActions from '../actions/preferences'; import PlusIcon from '../../../../images/plus.svg'; import MinusIcon from '../../../../images/minus.svg'; import beepUrl from '../../../../sounds/audioAlert.mp3'; class Preferences extends React.Component { constructor(props) { super(props); this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this); this.handleUpdateLinewrap = this.handleUpdateLinewrap.bind(this); this.handleLintWarning = this.handleLintWarning.bind(this); this.handleLineNumbers = this.handleLineNumbers.bind(this); this.onFontInputChange = this.onFontInputChange.bind(this); this.onFontInputSubmit = this.onFontInputSubmit.bind(this); this.increaseFontSize = this.increaseFontSize.bind(this); this.decreaseFontSize = this.decreaseFontSize.bind(this); this.setFontSize = this.setFontSize.bind(this); this.state = { fontSize: props.fontSize }; } onFontInputChange(event) { const INTEGER_REGEX = /^[0-9\b]+$/; if (event.target.value === '' || INTEGER_REGEX.test(event.target.value)) { this.setState({ fontSize: event.target.value }); } } onFontInputSubmit(event) { event.preventDefault(); let value = parseInt(this.state.fontSize, 10); if (Number.isNaN(value)) { value = 16; } if (value > 36) { value = 36; } if (value < 8) { value = 8; } this.setFontSize(value); } setFontSize(value) { this.setState({ fontSize: value }); this.props.setFontSize(value); } decreaseFontSize() { const newValue = this.state.fontSize - 2; this.setFontSize(newValue); } increaseFontSize() { const newValue = this.state.fontSize + 2; this.setFontSize(newValue); } handleUpdateAutosave(event) { const value = event.target.value === 'true'; this.props.setAutosave(value); } handleUpdateLinewrap(event) { const value = event.target.value === 'true'; this.props.setLinewrap(value); } handleLintWarning(event) { const value = event.target.value === 'true'; this.props.setLintWarning(value); } handleLineNumbers(event) { const value = event.target.value === 'true'; this.props.setLineNumbers(value); } render() { const beep = new Audio(beepUrl); return (
p5.js Web Editor | Preferences

{this.props.t('Preferences.GeneralSettings')}

{this.props.t('Preferences.Accessibility')}

{this.props.t('Preferences.Theme')}

this.props.setTheme('light')} aria-label={this.props.t('Preferences.LightThemeARIA')} name="light theme" id="light-theme-on" className="preference__radio-button" value="light" checked={this.props.theme === 'light'} /> this.props.setTheme('dark')} aria-label={this.props.t('Preferences.DarkThemeARIA')} name="dark theme" id="dark-theme-on" className="preference__radio-button" value="dark" checked={this.props.theme === 'dark'} /> this.props.setTheme('contrast')} aria-label={this.props.t('Preferences.HighContrastThemeARIA')} name="high contrast theme" id="high-contrast-theme-on" className="preference__radio-button" value="contrast" checked={this.props.theme === 'contrast'} />

{this.props.t('Preferences.TextSize')}

{ this.fontSizeInput = element; }} onClick={() => { this.fontSizeInput.select(); }} />

{this.props.t('Preferences.Autosave')}

this.props.setAutosave(true)} aria-label={this.props.t('Preferences.AutosaveOnARIA')} name="autosave" id="autosave-on" className="preference__radio-button" value="On" checked={this.props.autosave} /> this.props.setAutosave(false)} aria-label={this.props.t('Preferences.AutosaveOffARIA')} name="autosave" id="autosave-off" className="preference__radio-button" value="Off" checked={!this.props.autosave} />

{this.props.t('Preferences.WordWrap')}

this.props.setLinewrap(true)} aria-label={this.props.t('Preferences.LineWrapOnARIA')} name="linewrap" id="linewrap-on" className="preference__radio-button" value="On" checked={this.props.linewrap} /> this.props.setLinewrap(false)} aria-label={this.props.t('Preferences.LineWrapOffARIA')} name="linewrap" id="linewrap-off" className="preference__radio-button" value="Off" checked={!this.props.linewrap} />

{this.props.t('Preferences.LineNumbers')}

this.props.setLineNumbers(true)} aria-label={this.props.t('Preferences.LineNumbersOnARIA')} name="line numbers" id="line-numbers-on" className="preference__radio-button" value="On" checked={this.props.lineNumbers} /> this.props.setLineNumbers(false)} aria-label={this.props.t('Preferences.LineNumbersOffARIA')} name="line numbers" id="line-numbers-off" className="preference__radio-button" value="Off" checked={!this.props.lineNumbers} />

{this.props.t('Preferences.LintWarningSound')}

this.props.setLintWarning(true)} aria-label={this.props.t('Preferences.LintWarningOnARIA')} name="lint warning" id="lint-warning-on" className="preference__radio-button" value="On" checked={this.props.lintWarning} /> this.props.setLintWarning(false)} aria-label={this.props.t('Preferences.LintWarningOffARIA')} name="lint warning" id="lint-warning-off" className="preference__radio-button" value="Off" checked={!this.props.lintWarning} />

{this.props.t('Preferences.AccessibleTextBasedCanvas')}

{this.props.t('Preferences.UsedScreenReader')}
{ this.props.setTextOutput(event.target.checked); }} aria-label={this.props.t('Preferences.TextOutputARIA')} name="text output" id="text-output-on" value="On" checked={(this.props.textOutput)} /> { this.props.setGridOutput(event.target.checked); }} aria-label={this.props.t('Preferences.TableOutputARIA')} name="table output" id="table-output-on" value="On" checked={(this.props.gridOutput)} /> { this.props.setSoundOutput(event.target.checked); }} aria-label={this.props.t('Preferences.SoundOutputARIA')} name="sound output" id="sound-output-on" value="On" checked={(this.props.soundOutput)} />
); } } Preferences.propTypes = { fontSize: PropTypes.number.isRequired, lineNumbers: PropTypes.bool.isRequired, setFontSize: PropTypes.func.isRequired, autosave: PropTypes.bool.isRequired, linewrap: PropTypes.bool.isRequired, setLineNumbers: PropTypes.func.isRequired, setAutosave: PropTypes.func.isRequired, setLinewrap: PropTypes.func.isRequired, textOutput: PropTypes.bool.isRequired, gridOutput: PropTypes.bool.isRequired, soundOutput: PropTypes.bool.isRequired, setTextOutput: PropTypes.func.isRequired, setGridOutput: PropTypes.func.isRequired, setSoundOutput: PropTypes.func.isRequired, lintWarning: PropTypes.bool.isRequired, setLintWarning: PropTypes.func.isRequired, theme: PropTypes.string.isRequired, setTheme: PropTypes.func.isRequired, t: PropTypes.func.isRequired, }; export default withTranslation()(Preferences);