Merge branch 'master' of https://github.com/catarak/p5.js-web-editor into accessibility

client/constants.js

@@ -8,6 +8,12 @@ export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
 export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
 export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
 export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';
+export const UPDATE_FONTSIZE = 'UPDATE_FONTSIZE';
+export const INCREASE_INDENTATION = 'INCREASE_INDENTATION';
+export const DECREASE_INDENTATION = 'DECREASE_INDENTATION';
+export const UPDATE_INDENTATION = 'UPDATE_INDENTATION';
+export const INDENT_WITH_SPACE = 'INDENT_WITH_SPACE';
+export const INDENT_WITH_TAB = 'INDENT_WITH_TAB';
 
 export const AUTH_USER = 'AUTH_USER';
 export const UNAUTH_USER = 'UNAUTH_USER';

client/modules/IDE/actions/preferences.js

@@ -23,3 +23,43 @@ export function decreaseFont() {
     type: ActionTypes.DECREASE_FONTSIZE
   };
 }
+
+export function updateFont(event) {
+  const value = event.target.value;
+  return {
+    type: ActionTypes.UPDATE_FONTSIZE,
+    value
+  };
+}
+
+export function increaseIndentation() {
+  return {
+    type: ActionTypes.INCREASE_INDENTATION
+  };
+}
+
+export function decreaseIndentation() {
+  return {
+    type: ActionTypes.DECREASE_INDENTATION
+  };
+}
+
+export function updateIndentation() {
+  const value = event.target.value;
+  return {
+    type: ActionTypes.UPDATE_INDENTATION,
+    value
+  };
+}
+
+export function indentWithTab() {
+  return {
+    type: ActionTypes.INDENT_WITH_TAB
+  };
+}
+
+export function indentWithSpace() {
+  return {
+    type: ActionTypes.INDENT_WITH_SPACE
+  };
+}

client/modules/IDE/components/Editor.js

@@ -18,6 +18,8 @@ class Editor extends React.Component {
       this.props.updateFileContent(this.props.file.name, this._cm.getValue());
     });
     this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
+    this._cm.setOption('indentWithTabs', this.props.isTabIndent);
+    this._cm.setOption('tabSize', this.props.indentationAmount);
   }
 
   componentDidUpdate(prevProps) {
@@ -28,6 +30,12 @@ class Editor extends React.Component {
     if (this.props.fontSize !== prevProps.fontSize) {
       this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
     }
+    if (this.props.indentationAmount !== prevProps.indentationAmount) {
+      this._cm.setOption('tabSize', this.props.indentationAmount);
+    }
+    if (this.props.isTabIndent !== prevProps.isTabIndent) {
+      this._cm.setOption('indentWithTabs', this.props.isTabIndent);
+    }
   }
 
   componentWillUnmount() {
@@ -42,12 +50,14 @@ class Editor extends React.Component {
 }
 
 Editor.propTypes = {
+  indentationAmount: PropTypes.number.isRequired,
+  isTabIndent: PropTypes.bool.isRequired,
+  updateFileContent: PropTypes.func.isRequired,
+  fontSize: PropTypes.number.isRequired,
   file: PropTypes.shape({
     name: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired
-  }),
+  })
-  updateFileContent: PropTypes.func.isRequired,
-  fontSize: PropTypes.number.isRequired
 };
 
 export default Editor;

client/modules/IDE/components/Preferences.js

@@ -11,6 +11,14 @@ function Preferences(props) {
     preferences: true,
     'preferences--selected': props.isVisible
   });
+  let preferencesTabOptionClass = classNames({
+    preference__option: true,
+    'preference__option--selected': props.isTabIndent
+  });
+  let preferencesSpaceOptionClass = classNames({
+    preference__option: true,
+    'preference__option--selected': !props.isTabIndent
+  });
   return (
     <div className={preferencesContainerClass} tabIndex="0">
       <div className="preferences__heading">
@@ -19,16 +27,37 @@ function Preferences(props) {
           <Isvg src={exitUrl} alt="Exit Preferences" />
         </button>
       </div>
+
       <div className="preference">
-        <h3 className="preference__title">Text Size</h3>
+        <h4 className="preference__title">Text Size</h4>
         <button className="preference__plus-button" onClick={props.decreaseFont}>
           <Isvg src={minusUrl} alt="Decrease Font Size" />
+          <h6 className="preference__label">Decrease</h6>
         </button>
-        <p className="preference__value">{props.fontSize}</p>
+
+        <input className="preference__value" value={props.fontSize} onChange={props.updateFont}></input>
         <button className="preference__minus-button" onClick={props.increaseFont}>
           <Isvg 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__plus-button" onClick={props.decreaseIndentation}>
+          <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
+          <h6 className="preference__label">Decrease</h6>
+        </button>
+        <input className="preference__value" value={props.indentationAmount} onChange={props.updateIndentation}></input>
+        <button className="preference__minus-button" onClick={props.increaseIndentation}>
+          <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
+          <h6 className="preference__label">Increase</h6>
+        </button>
+        <div className="preference__vertical-list">
+          <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button>
+          <button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>
+        </div>
+      </div>
     </div>
   );
 }
@@ -37,8 +66,16 @@ Preferences.propTypes = {
   isVisible: PropTypes.bool.isRequired,
   closePreferences: PropTypes.func.isRequired,
   decreaseFont: PropTypes.func.isRequired,
+  updateFont: PropTypes.func.isRequired,
   fontSize: PropTypes.number.isRequired,
-  increaseFont: PropTypes.func.isRequired
+  increaseFont: PropTypes.func.isRequired,
+  indentationAmount: PropTypes.number.isRequired,
+  decreaseIndentation: PropTypes.func.isRequired,
+  increaseIndentation: PropTypes.func.isRequired,
+  updateIndentation: PropTypes.func.isRequired,
+  indentWithSpace: PropTypes.func.isRequired,
+  indentWithTab: PropTypes.func.isRequired,
+  isTabIndent: PropTypes.bool.isRequired
 };
 
 export default Preferences;

client/modules/IDE/pages/IDEView.js

@@ -44,7 +44,15 @@ class IDEView extends React.Component {
           closePreferences={this.props.closePreferences}
           increaseFont={this.props.increaseFont}
           decreaseFont={this.props.decreaseFont}
+          updateFont={this.props.updateFont}
           fontSize={this.props.preferences.fontSize}
+          increaseIndentation={this.props.increaseIndentation}
+          decreaseIndentation={this.props.decreaseIndentation}
+          updateIndentation={this.props.updateIndentation}
+          indentationAmount={this.props.preferences.indentationAmount}
+          isTabIndent={this.props.preferences.isTabIndent}
+          indentWithSpace={this.props.indentWithSpace}
+          indentWithTab={this.props.indentWithTab}
         />
         <Sidebar
           files={this.props.files}
@@ -55,6 +63,8 @@ class IDEView extends React.Component {
           file={this.props.selectedFile}
           updateFileContent={this.props.updateFileContent}
           fontSize={this.props.preferences.fontSize}
+          indentationAmount={this.props.preferences.indentationAmount}
+          isTabIndent={this.props.preferences.isTabIndent}
           files={this.props.files}
         />
         <PreviewFrame
@@ -93,11 +103,19 @@ IDEView.propTypes = {
   openPreferences: PropTypes.func.isRequired,
   preferences: PropTypes.shape({
     isVisible: PropTypes.bool.isRequired,
-    fontSize: PropTypes.number.isRequired
+    fontSize: PropTypes.number.isRequired,
+    indentationAmount: PropTypes.number.isRequired,
+    isTabIndent: PropTypes.bool.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
   increaseFont: PropTypes.func.isRequired,
   decreaseFont: PropTypes.func.isRequired,
+  updateFont: PropTypes.func.isRequired,
+  increaseIndentation: PropTypes.func.isRequired,
+  decreaseIndentation: PropTypes.func.isRequired,
+  updateIndentation: PropTypes.func.isRequired,
+  indentWithSpace: PropTypes.func.isRequired,
+  indentWithTab: PropTypes.func.isRequired,
   files: PropTypes.array.isRequired,
   updateFileContent: PropTypes.func.isRequired,
   selectedFile: PropTypes.shape({

client/modules/IDE/reducers/files.js

@@ -12,7 +12,9 @@ const defaultHTML =
 `<!DOCTYPE html>
 <html>
   <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>

client/modules/IDE/reducers/preferences.js

@@ -2,31 +2,53 @@ import * as ActionTypes from '../../../constants';
 
 const initialState = {
   isVisible: false,
-  fontSize: 18
+  fontSize: 18,
+  indentationAmount: 2,
+  isTabIndent: true
 };
 
 const preferences = (state = initialState, action) => {
   switch (action.type) {
     case ActionTypes.OPEN_PREFERENCES:
-      return {
+      return Object.assign({}, state, {
-        isVisible: true,
+        isVisible: true
-        fontSize: state.fontSize
+      });
-      };
     case ActionTypes.CLOSE_PREFERENCES:
-      return {
+      return Object.assign({}, state, {
-        isVisible: false,
+        isVisible: false
-        fontSize: state.fontSize
+      });
-      };
     case ActionTypes.INCREASE_FONTSIZE:
-      return {
+      return Object.assign({}, state, {
-        isVisible: state.isVisible,
         fontSize: state.fontSize + 2
-      };
+      });
     case ActionTypes.DECREASE_FONTSIZE:
-      return {
+      return Object.assign({}, state, {
-        isVisible: state.isVisible,
         fontSize: state.fontSize - 2
-      };
+      });
+    case ActionTypes.UPDATE_FONTSIZE:
+      return Object.assign({}, state, {
+        fontSize: action.value
+      });
+    case ActionTypes.INCREASE_INDENTATION:
+      return Object.assign({}, state, {
+        indentationAmount: state.indentationAmount + 2
+      });
+    case ActionTypes.DECREASE_INDENTATION:
+      return Object.assign({}, state, {
+        indentationAmount: state.indentationAmount - 2
+      });
+    case ActionTypes.UPDATE_INDENTATION:
+      return Object.assign({}, state, {
+        indentationAmount: action.value
+      });
+    case ActionTypes.INDENT_WITH_TAB:
+      return Object.assign({}, state, {
+        isTabIndent: true
+      });
+    case ActionTypes.INDENT_WITH_SPACE:
+      return Object.assign({}, state, {
+        isTabIndent: false
+      });
     default:
       return state;
   }

client/styles/abstracts/_placeholders.scss

@@ -69,6 +69,8 @@
 	@extend %toolbar-button;
 	color: $light-primary-text-color;
 	background-color: $light-modal-button-background-color;
+	padding: 0;
+	line-height: #{50 / $base-font-size}rem;
 	& g {
 		fill: $light-primary-text-color;
 	}
@@ -88,3 +90,19 @@
 		color: $light-primary-text-color;
 	}
 }
+
+%preference-option {
+	background-color: $light-button-background-color;
+	color: $light-inactive-text-color;
+	font-size: #{14 / $base-font-size}rem;
+	cursor: pointer;
+	text-align: left;
+	margin-bottom: #{5 / $base-font-size}rem;
+	border: 0px;
+	&:hover {
+		color: $light-primary-text-color;
+	}
+	&--selected {
+    color: $light-primary-text-color;
+  }
+}

client/styles/base/_base.scss

@@ -46,7 +46,12 @@ h2 {
 h3 {
 	font-weight: normal;
 }
-
+h4 {
+	font-weight: normal;
+}
+h6 {
+	font-weight: normal;
+}
 thead {
 	text-align: left;
-}
+}

client/styles/components/_preferences.scss

@@ -2,7 +2,7 @@
 	position: absolute;
 	top: #{66 / $base-font-size}rem;
 	right: #{40 / $base-font-size}rem;
-	width: #{276 / $base-font-size}rem;
+	width: #{332 / $base-font-size}rem;
 	background-color: $light-button-background-color;
 	display: none;
 	padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
@@ -35,7 +35,10 @@
 .preference {
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: space-between;
+	padding-bottom: #{40 / $base-font-size}rem;
+	& + & {
+  	border-top: 2px dashed $light-button-border-color;
+	}
 }
 
 .preference__title {
@@ -44,8 +47,35 @@
 }
 
 .preference__value {
-	border: 1px solid $light-button-border-color;
+	border: 2px solid $light-button-border-color;
 	text-align: center;
-	line-height: #{48 / $base-font-size}rem;
+	border-radius: 0%;
 	width: #{48 / $base-font-size}rem;
+	height: #{44 / $base-font-size}rem;
+	margin: 0 #{28 / $base-font-size}rem;
+	padding: 0;
+	background-color: $light-button-background-color;
+}
+
+.preference__label {
+	margin: 0;
+	line-height: #{20 / $base-font-size}rem;
+	color: $light-inactive-text-color;
+	&:hover {
+		color: $light-inactive-text-color;
+	}
+}
+
+.preference__vertical-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.preference__option {
+	@extend %preference-option;
+	list-style-type: none;
+	padding-left: #{28 / $base-font-size}rem;
+	&--selected {
+		@extend %preference-option--selected;
+	}
 }