From ec26e6ddac35c7c39a57023821158b06ad7b827f Mon Sep 17 00:00:00 2001 From: MathuraMG Date: Fri, 5 Aug 2016 12:53:16 -0400 Subject: [PATCH 01/22] add printing of lint messages --- client/modules/IDE/components/Editor.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index a7f5ab5e..2c18f869 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -36,6 +36,8 @@ class Editor extends React.Component { }); this._cm.on('change', debounce(200, () => { this.props.updateFileContent(this.props.file.name, this._cm.getValue()); + let annotations = this._cm.state.lint.marked; + annotations.forEach(function (x) { console.log(x.__annotation.severity + ' in line number ' + (x.__annotation.from.line + 1) + ' : ' + x.__annotation.message); }); })); // this._cm.on('change', () => { // eslint-disable-line // // this.props.updateFileContent('sketch.js', this._cm.getValue()); From 6d7c9873b355369a35fc00325152edd028702a68 Mon Sep 17 00:00:00 2001 From: MathuraMG Date: Fri, 5 Aug 2016 16:58:59 -0400 Subject: [PATCH 02/22] add fn --- client/modules/IDE/components/Editor.js | 22 ++++++++++++++++++---- client/modules/IDE/pages/IDEView.js | 2 ++ 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index 2c18f869..ce565e62 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -10,6 +10,7 @@ import 'codemirror/addon/lint/css-lint'; import 'codemirror/addon/lint/html-lint'; import 'codemirror/addon/comment/comment'; import 'codemirror/keymap/sublime'; +import 'codemirror/addon/search/jump-to-line'; import { JSHINT } from 'jshint'; window.JSHINT = JSHINT; import { CSSLint } from 'csslint'; @@ -32,13 +33,21 @@ class Editor extends React.Component { lineWrapping: true, gutters: ['CodeMirror-lint-markers'], lint: true, - keyMap: 'sublime' + keyMap: 'sublime', + lint: { + onUpdateLinting: (annotations) => { + document.getElementById('editor-lintmessages').innerHTML=''; + annotations.forEach(function (x) { + document.getElementById('editor-lintmessages').innerHTML += (x.severity + ' in line number ' + (x.from.line + 1) + ' : ' + x.message); }); // eslint-disable-line + } + } }); this._cm.on('change', debounce(200, () => { this.props.updateFileContent(this.props.file.name, this._cm.getValue()); - let annotations = this._cm.state.lint.marked; - annotations.forEach(function (x) { console.log(x.__annotation.severity + ' in line number ' + (x.__annotation.from.line + 1) + ' : ' + x.__annotation.message); }); })); + this._cm.on('keyup', () => { + document.getElementById('editor-linenumber').innerHTML = parseInt((this._cm.getCursor().line) + 1, 10); + }); // this._cm.on('change', () => { // eslint-disable-line // // this.props.updateFileContent('sketch.js', this._cm.getValue()); // throttle(1000, () => console.log('debounce is working!')); @@ -50,6 +59,8 @@ class Editor extends React.Component { } componentDidUpdate(prevProps) { + const annotations = this._cm.state.lint.marked; + annotations.forEach(function (x) { console.log(x.__annotation.severity + ' in line number ' + (x.__annotation.from.line + 1) + ' : ' + x.__annotation.message); }); // eslint-disable-line if (this.props.file.content !== prevProps.file.content && this.props.file.content !== this._cm.getValue()) { this._cm.setValue(this.props.file.content); // eslint-disable-line no-underscore-dangle @@ -81,7 +92,10 @@ class Editor extends React.Component { _cm: CodeMirror.Editor render() { - return
; + return ( +
+
+ ); } } diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index c5dfd30f..d62903f5 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -58,6 +58,8 @@ class IDEView extends React.Component { collapseSidebar={this.props.collapseSidebar} />
+
+
Date: Fri, 5 Aug 2016 23:08:44 -0400 Subject: [PATCH 03/22] add audio tone --- client/modules/IDE/components/Editor.js | 22 +++++++++++++++------- client/modules/IDE/pages/IDEView.js | 2 +- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index ce565e62..c2fb565e 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -23,6 +23,7 @@ import { debounce } from 'throttle-debounce'; class Editor extends React.Component { componentDidMount() { + this.beep = new Audio('data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU='); this._cm = CodeMirror(this.refs.container, { // eslint-disable-line theme: 'p5-widget', value: this.props.file.content, @@ -32,21 +33,28 @@ class Editor extends React.Component { mode: 'javascript', lineWrapping: true, gutters: ['CodeMirror-lint-markers'], - lint: true, keyMap: 'sublime', lint: { - onUpdateLinting: (annotations) => { - document.getElementById('editor-lintmessages').innerHTML=''; - annotations.forEach(function (x) { - document.getElementById('editor-lintmessages').innerHTML += (x.severity + ' in line number ' + (x.from.line + 1) + ' : ' + x.message); }); // eslint-disable-line - } + onUpdateLinting: (annotations) => { + let isVisible = false; + document.getElementById('editor-lintmessages').innerHTML = ''; + annotations.forEach((x) => { + if (x.from.line > -1) { + document.getElementById('editor-lintmessages').innerHTML += (x.severity + ' in line number ' + (x.from.line + 1) + ' : ' + x.message); // eslint-disable-line + isVisible = true; + } + }); + if (isVisible) { + this.beep.play(); + } + } } }); this._cm.on('change', debounce(200, () => { this.props.updateFileContent(this.props.file.name, this._cm.getValue()); })); this._cm.on('keyup', () => { - document.getElementById('editor-linenumber').innerHTML = parseInt((this._cm.getCursor().line) + 1, 10); + document.getElementById('editor-linenumber').innerHTML = 'line ' + parseInt((this._cm.getCursor().line) + 1, 10); }); // this._cm.on('change', () => { // eslint-disable-line // // this.props.updateFileContent('sketch.js', this._cm.getValue()); diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index d62903f5..fe9eadbc 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -58,7 +58,7 @@ class IDEView extends React.Component { collapseSidebar={this.props.collapseSidebar} />
-
+
Date: Mon, 8 Aug 2016 13:49:45 -0400 Subject: [PATCH 04/22] debounce the beep --- client/modules/IDE/components/Editor.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index c2fb565e..4469af07 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -35,7 +35,7 @@ class Editor extends React.Component { gutters: ['CodeMirror-lint-markers'], keyMap: 'sublime', lint: { - onUpdateLinting: (annotations) => { + onUpdateLinting: debounce(2000, (annotations) => { let isVisible = false; document.getElementById('editor-lintmessages').innerHTML = ''; annotations.forEach((x) => { @@ -47,7 +47,8 @@ class Editor extends React.Component { if (isVisible) { this.beep.play(); } - } + }) + } }); this._cm.on('change', debounce(200, () => { From bb5ba484c7ee5b7efca7923618145a5ff8617ed2 Mon Sep 17 00:00:00 2001 From: MathuraMG Date: Tue, 9 Aug 2016 13:39:40 -0400 Subject: [PATCH 05/22] fix clone link --- client/components/Nav.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/Nav.js b/client/components/Nav.js index 87ef80ec..07456387 100644 --- a/client/components/Nav.js +++ b/client/components/Nav.js @@ -33,8 +33,8 @@ function Nav(props) { Export (zip) -
  • - +
  • + Clone
    • From 703f9ff820ebeadf54eb97c48808e0741ecd740d Mon Sep 17 00:00:00 2001 From: MathuraMG Date: Wed, 10 Aug 2016 11:13:17 -0400 Subject: [PATCH 06/22] add basic button functionality to linting --- client/constants.js | 2 ++ client/modules/IDE/actions/editorHidden.js | 7 +++++++ client/modules/IDE/actions/ide.js | 1 - client/modules/IDE/components/Editor.js | 3 ++- client/modules/IDE/components/EditorHidden.js | 0 client/modules/IDE/pages/IDEView.js | 9 +++++++++ client/modules/IDE/reducers/editorHidden.js | 16 ++++++++++++++++ client/reducers.js | 4 +++- 8 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 client/modules/IDE/actions/editorHidden.js create mode 100644 client/modules/IDE/components/EditorHidden.js create mode 100644 client/modules/IDE/reducers/editorHidden.js diff --git a/client/constants.js b/client/constants.js index 50ca8f8e..d99a9784 100644 --- a/client/constants.js +++ b/client/constants.js @@ -42,5 +42,7 @@ export const CONSOLE_EVENT = 'CONSOLE_EVENT'; export const EXPAND_CONSOLE = 'EXPAND_CONSOLE'; export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE'; +export const TOGGLE_BEEP = 'TOGGLE_BEEP'; + // eventually, handle errors more specifically and better export const ERROR = 'ERROR'; diff --git a/client/modules/IDE/actions/editorHidden.js b/client/modules/IDE/actions/editorHidden.js new file mode 100644 index 00000000..d5cc4a92 --- /dev/null +++ b/client/modules/IDE/actions/editorHidden.js @@ -0,0 +1,7 @@ +import * as ActionTypes from '../../../constants'; + +export function toggleBeep() { + return { + type: ActionTypes.TOGGLE_BEEP + }; +} diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index 7628ff3f..1b8b18d8 100644 --- a/client/modules/IDE/actions/ide.js +++ b/client/modules/IDE/actions/ide.js @@ -79,4 +79,3 @@ export function closePreferences() { type: ActionTypes.CLOSE_PREFERENCES }; } - diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index 4469af07..2a7bbc28 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -44,7 +44,7 @@ class Editor extends React.Component { isVisible = true; } }); - if (isVisible) { + if (isVisible && this.props.enableBeep) { this.beep.play(); } }) @@ -109,6 +109,7 @@ class Editor extends React.Component { } Editor.propTypes = { + enableBeep: PropTypes.bool.isRequired, indentationAmount: PropTypes.number.isRequired, isTabIndent: PropTypes.bool.isRequired, updateFileContent: PropTypes.func.isRequired, diff --git a/client/modules/IDE/components/EditorHidden.js b/client/modules/IDE/components/EditorHidden.js new file mode 100644 index 00000000..e69de29b diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index fe9eadbc..6edb48d6 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -12,6 +12,7 @@ import { connect } from 'react-redux'; import * as FileActions from '../actions/files'; import * as IDEActions from '../actions/ide'; import * as ProjectActions from '../actions/project'; +import * as EditorHiddenActions from '../actions/editorHidden'; import { getFile, getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files'; class IDEView extends React.Component { @@ -60,7 +61,9 @@ class IDEView extends React.Component {
    + { + switch (action.type) { + case ActionTypes.TOGGLE_BEEP: + return Object.assign({}, state, { enableBeep: !state.enableBeep }); + default: + return state; + } +}; + +export default editorHidden; diff --git a/client/reducers.js b/client/reducers.js index 1dfafa9e..f689c860 100644 --- a/client/reducers.js +++ b/client/reducers.js @@ -3,6 +3,7 @@ import files from './modules/IDE/reducers/files'; import ide from './modules/IDE/reducers/ide'; import preferences from './modules/IDE/reducers/preferences'; import project from './modules/IDE/reducers/project'; +import editorHidden from './modules/IDE/reducers/editorHidden'; import user from './modules/User/reducers'; import sketches from './modules/Sketch/reducers'; import { reducer as form } from 'redux-form'; @@ -14,7 +15,8 @@ const rootReducer = combineReducers({ preferences, user, project, - sketches + sketches, + editorHidden }); export default rootReducer; From 1a45e4cb91fe981368e6d179ec20b4917760ea6d Mon Sep 17 00:00:00 2001 From: MathuraMG Date: Wed, 10 Aug 2016 15:49:03 -0400 Subject: [PATCH 07/22] change file modal structure --- client/modules/IDE/components/NewFileModal.js | 62 ++++++++++--------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/client/modules/IDE/components/NewFileModal.js b/client/modules/IDE/components/NewFileModal.js index 91a37740..b070ab9f 100644 --- a/client/modules/IDE/components/NewFileModal.js +++ b/client/modules/IDE/components/NewFileModal.js @@ -12,36 +12,40 @@ import FileUploader from './FileUploader'; // At some point this will probably be generalized to a generic modal // in which you can insert different content // but for now, let's just make this work -function NewFileModal(props) { - const modalClass = classNames({ - modal: true, - 'modal--reduced': !props.canUploadMedia - }); - - return ( -
    -
    -
    -

    Add File

    - +class NewFileModal extends React.Component { + componentDidMount() { + document.getElementById('name').focus(); + } + render() { + const modalClass = classNames({ + modal: true, + 'modal--reduced': !this.props.canUploadMedia + }); + return ( +
    +
    +
    +

    Add File

    + +
    + + {(() => { + if (this.props.canUploadMedia) { + return ( +
    +

    OR

    + +
    + ); + } + return ''; + })()}
    - - {(() => { - if (props.canUploadMedia) { - return ( -
    -

    OR

    - -
    - ); - } - return ''; - })()} -
    -
    - ); + + ); + } } NewFileModal.propTypes = { From 6e74ef03c4d5c351a30efdb7723e1c1f452213e9 Mon Sep 17 00:00:00 2001 From: MathuraMG Date: Wed, 10 Aug 2016 16:20:15 -0400 Subject: [PATCH 08/22] add aria-tags --- client/modules/IDE/components/Sidebar.js | 2 +- client/modules/IDE/components/SidebarItem.js | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js index 47300f48..f472189b 100644 --- a/client/modules/IDE/components/Sidebar.js +++ b/client/modules/IDE/components/Sidebar.js @@ -49,7 +49,7 @@ class Sidebar extends React.Component {
    -