add help overlay

Author: monteslu

package.json

@@ -12,7 +12,7 @@
     "codemirror": "^4.13.0",
     "frylord": "^0.7.1",
     "holovisor": "^0.2.0",
-    "iggins": "^0.3.0",
+    "iggins": "^0.4.0",
     "irken": "^0.8.0",
     "lodash": "^3.9.1",
     "react": "^0.13.1",

src/constants/overlay-states.js

@@ -2,6 +2,7 @@
 
 const overlayStates = {
   NO_OVERLAY: 'NO_OVERLAY',
+  HELP_OVERLAY: 'HELP_OVERLAY',
   SAVE_OVERLAY: 'SAVE_OVERLAY',
   DOWNLOAD_OVERLAY: 'DOWNLOAD_OVERLAY',
   PROJECTS_OVERLAY: 'PROJECTS_OVERLAY',

src/creators/index.js

@@ -8,6 +8,7 @@ const creators = {
   showDownloadOverlay: require('./show-download-overlay'),
   showProjectsOverlay: require('./show-projects-overlay'),
   showSaveOverlay: require('./show-save-overlay'),
+  showHelpOverlay: require('./show-help-overlay'),
   hideOverlay: require('./hide-overlay'),
   // terminal creators
   rxOn: require('./rx-on'),

src/creators/show-help-overlay.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const {
+  SHOW_OVERLAY
+} = require('../constants/action-types');
+
+const {
+  HELP_OVERLAY
+} = require('../constants/overlay-states');
+
+function showHelpOverlay(){
+  return {
+    type: SHOW_OVERLAY,
+    payload: {
+      state: HELP_OVERLAY
+    }
+  };
+}
+
+module.exports = showHelpOverlay;

src/plugins/handlers.js

@@ -225,6 +225,10 @@ function handlers(app, opts, done){
     store.dispatch(creators.showDeleteProjectOverlay());
   }
 
+  function showHelpOverlay(){
+    store.dispatch(creators.showHelpOverlay());
+  }
+
   function showSaveOverlay(){
     store.dispatch(creators.showSaveOverlay());
   }
@@ -572,6 +576,7 @@ function handlers(app, opts, done){
     deleteProject,
     deleteProjectConfirm,
     // overlay methods
+    showHelpOverlay,
     showSaveOverlay,
     showDownloadOverlay,
     showProjectsOverlay,

src/plugins/keyboard-shortcuts.js

@@ -14,6 +14,7 @@ function keyboardShortcuts(app, opts, done){
   const { keypress, handlers } = app;
 
   const {
+    F1,
     F3,
     F6,
     F7,
@@ -36,6 +37,7 @@ function keyboardShortcuts(app, opts, done){
   } = keypress;
 
   const {
+    showHelpOverlay,
     newFile,
     saveFile,
     hideOverlay,
@@ -81,6 +83,11 @@ function keyboardShortcuts(app, opts, done){
     hideOverlay();
   });
 
+  keypress(F1, function(evt){
+    evt.preventDefault();
+    showHelpOverlay();
+  });
+
   keypress(F3, function(evt){
     evt.preventDefault();
     findNext();

src/plugins/overlays.js

@@ -2,6 +2,7 @@
 
 const React = require('react');
 
+const HelpOverlay = require('../views/help-overlay');
 const SaveOverlay = require('../views/save-overlay');
 const ProjectOverlay = require('../views/project-overlay');
 const DownloadOverlay = require('../views/download-overlay');
@@ -12,6 +13,7 @@ const store = require('../store');
 
 const {
   NO_OVERLAY,
+  HELP_OVERLAY,
   SAVE_OVERLAY,
   DOWNLOAD_OVERLAY,
   PROJECTS_OVERLAY,
@@ -35,6 +37,9 @@ function overlays(app, opts, done){
     const { overlayState } = store.getState();
 
     switch(overlayState){
+      case HELP_OVERLAY:
+        renderOverlay(<HelpOverlay workspace={workspace} handlers={handlers} />);
+        break;
       case SAVE_OVERLAY:
         renderOverlay(<SaveOverlay workspace={workspace} handlers={handlers} />);
         break;

src/views/help-overlay.js

@@ -0,0 +1,61 @@
+'use strict';
+
+const React = require('react');
+const { createContainer } = require('sovereign');
+const Button = require('react-material/components/Button');
+
+const Overlay = require('../components/overlay');
+const OverlayTitle = require('../components/overlay-title');
+const OverlayFooter = require('../components/overlay-footer');
+
+const helpStyle = {
+  position: 'relative'
+};
+
+const helpLink = 'http://www.parallax.com/go/PBASICHelp';
+
+class HelpOverlay extends React.Component {
+
+  constructor(...args){
+    super(...args);
+  }
+
+  render(){
+    const {
+      handlers
+    } = this.props;
+
+    const {
+      hideOverlay
+    } = handlers;
+
+    return (
+      <Overlay>
+        <OverlayTitle>Help</OverlayTitle>
+        <div style={helpStyle}>
+          For help with PBASIC go here: <a href={helpLink} target="_blank">{helpLink}</a>
+        </div>
+        <OverlayFooter>
+          <Button onClick={hideOverlay}>OK</Button>
+        </OverlayFooter>
+      </Overlay>
+    );
+  }
+}
+
+module.exports = createContainer(HelpOverlay, {
+  getStores({ workspace }){
+    return {
+      workspace
+    };
+  },
+
+  getPropsFromStores({ workspace }){
+    const { cwd, projects } = workspace.getState();
+
+    return {
+      cwd,
+      projects
+    };
+  }
+});