From 12c0581ee06413d4e6edecc9d8bea85c3a914b64 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Wed, 7 Sep 2016 21:48:45 -0400
Subject: [PATCH] add command + s for save, detect os for control + s, add to
 keyboard shortcut list

---
 .../IDE/components/KeyboardShortcutModal.js   | 70 +++++++++++--------
 client/modules/IDE/pages/IDEView.js           | 13 ++++
 2 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/client/modules/IDE/components/KeyboardShortcutModal.js b/client/modules/IDE/components/KeyboardShortcutModal.js
index 3fc62e3c..b0c05553 100644
--- a/client/modules/IDE/components/KeyboardShortcutModal.js
+++ b/client/modules/IDE/components/KeyboardShortcutModal.js
@@ -2,35 +2,47 @@ import React, { PropTypes } from 'react';
 import InlineSVG from 'react-inlinesvg';
 const exitUrl = require('../../../images/exit.svg');
 
-function KeyboardShortcutModal(props) {
-  return (
-    <section className="keyboard-shortcuts">
-      <header className="keyboard-shortcuts__header">
-        <h2>Keyboard Shortcuts</h2>
-        <button className="keyboard-shortcuts__close" onClick={props.closeModal}>
-          <InlineSVG src={exitUrl} alt="Close Keyboard Shortcuts Overlay" />
-        </button>
-      </header>
-      <ul>
-        <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">Shift + Tab</span>
-          <span>Tidy</span>
-        </li>
-        <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">Command + [</span>
-          <span>Indent Code Right</span>
-        </li>
-        <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">Command + ]</span>
-          <span>Indent Code Left</span>
-        </li>
-        <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">Command + /</span>
-          <span>Comment Line</span>
-        </li>
-      </ul>
-    </section>
-  );
+class KeyboardShortcutModal extends React.Component {
+  componentDidMount() {
+    this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
+  }
+
+  render() {
+    return (
+      <section className="keyboard-shortcuts">
+        <header className="keyboard-shortcuts__header">
+          <h2>Keyboard Shortcuts</h2>
+          <button className="keyboard-shortcuts__close" onClick={this.props.closeModal}>
+            <InlineSVG src={exitUrl} alt="Close Keyboard Shortcuts Overlay" />
+          </button>
+        </header>
+        <ul>
+          <li className="keyboard-shortcut-item">
+            <span className="keyboard-shortcut__command">Shift + Tab</span>
+            <span>Tidy</span>
+          </li>
+          <li className="keyboard-shortcut-item">
+            <span className="keyboard-shortcut__command">
+              {this.isMac ? 'Command + S' : 'Control + S'}
+            </span>
+            <span>Save</span>
+          </li>
+          <li className="keyboard-shortcut-item">
+            <span className="keyboard-shortcut__command">Command + [</span>
+            <span>Indent Code Right</span>
+          </li>
+          <li className="keyboard-shortcut-item">
+            <span className="keyboard-shortcut__command">Command + ]</span>
+            <span>Indent Code Left</span>
+          </li>
+          <li className="keyboard-shortcut-item">
+            <span className="keyboard-shortcut__command">Command + /</span>
+            <span>Comment Line</span>
+          </li>
+        </ul>
+      </section>
+    );
+  }
 }
 
 KeyboardShortcutModal.propTypes = {
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index f7bd2599..d4b54f42 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -32,6 +32,7 @@ class IDEView extends React.Component {
     super(props);
     this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
     this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
+    this.handleGlobalKeydown = this.handleGlobalKeydown.bind(this);
   }
 
   componentDidMount() {
@@ -51,6 +52,9 @@ class IDEView extends React.Component {
     this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29;
     this.sidebarSize = this.props.ide.sidebarIsExpanded ? 200 : 20;
     this.forceUpdate();
+
+    this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
+    document.addEventListener('keydown', this.handleGlobalKeydown, false);
   }
 
   componentWillUpdate(nextProps) {
@@ -113,6 +117,15 @@ class IDEView extends React.Component {
     });
   }
 
+  handleGlobalKeydown(e) {
+    if (e.key === 's' && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
+      console.log('about to save project');
+      e.preventDefault();
+      e.stopPropagation();
+      this.props.saveProject();
+    }
+  }
+
   render() {
     return (
       <div className="ide">