From 17a68aeaf1043483182144faeb563d6ea8277c92 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Mon, 9 Jul 2018 08:41:50 +1000
Subject: [PATCH] Added more keyboard options, testing some CTRL+ENTER

---
 public/index.jsx             |  4 ++
 public/input/Input.jsx       | 38 +++++++++++++++---
 public/input/form/Form.jsx   | 33 +++++++++++++---
 public/keyboard/Keyboard.jsx | 74 ++++++++++++++++++++++++++++++++----
 public/modal/Modal.jsx       | 10 ++---
 5 files changed, 134 insertions(+), 25 deletions(-)

diff --git a/public/index.jsx b/public/index.jsx
index 07d120e..fd9dd7c 100644
--- a/public/index.jsx
+++ b/public/index.jsx
@@ -28,6 +28,7 @@ import ReactDOM from 'react-dom';
 import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import RootReducer from './reducers/RootReducer'
+import Keyboard from './keyboard/Keyboard';
 
 //Import Stylesheet
 import Styles from './styles/index';
@@ -41,6 +42,9 @@ const unsubscribe = store.subscribe(() => {
   console.log(store.getState());
 });
 
+//Start listening for key events
+Keyboard.register();
+
 ReactDOM.render(
   (
     <Provider store={store}>
diff --git a/public/input/Input.jsx b/public/input/Input.jsx
index da14906..84907d0 100644
--- a/public/input/Input.jsx
+++ b/public/input/Input.jsx
@@ -28,17 +28,39 @@ import ButtonGroup from './button/ButtonGroup';
 import Form, { FormManager } from './form/Form';
 import InputGroup from './group/InputGroup';
 import Label from './label/Label';
-
+import Keyboard from './../keyboard/Keyboard';
 
 export default class Input extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      value: props.value
+      value: props.value,
+      focused: false
     };
   }
 
+  isFocused() {
+    return this.state && this.state.focused === true;
+  }
+
+  componentDidMount() {
+    if(this.props.manager) this.props.manager.addInput(this);
+    Keyboard.addListener(this);
+  }
+
+  componentWillUnmount() {
+    if(this.props.manager) this.props.manager.removeInput(this);
+    Keyboard.removeListener(this);
+  }
+
+  onKeyUp(e, k) {
+    if(!this.props.manager) return;
+    if(!this.isFocused()) return;
+    if(!k.isSubmit()) return;
+    this.props.manager.submit();
+  }
+
   onChange(e, a, b) {
     //Try my props
     if(this.props.onChange && this.props.onChange(e) === false) return false;
@@ -54,12 +76,12 @@ export default class Input extends React.Component {
     });
   }
 
-  componentDidMount() {
-    if(this.props.manager) this.props.manager.addInput(this);
+  onFocus() {
+    this.setState({ focused: true });
   }
 
-  componentWillUnmount() {
-    if(this.props.manager) this.props.manager.removeInput(this);
+  onBlur() {
+    this.setState({ focused: false });
   }
 
   render() {
@@ -119,6 +141,8 @@ export default class Input extends React.Component {
           {...this.props}
           className={innerClazzes}
           onChange={this.onChange.bind(this)}
+          onFocus={this.onFocus.bind(this)}
+          onBlur={this.onBlur.bind(this)}
         >{ this.state.value }</textarea>
       );
 
@@ -126,6 +150,8 @@ export default class Input extends React.Component {
       element = (<ElementType
         {...this.props}
         onChange={this.onChange.bind(this)}
+        onFocus={this.onFocus.bind(this)}
+        onBlur={this.onBlur.bind(this)}
         type={type}
         value={ this.state.value }
         className={innerClazzes}
diff --git a/public/input/form/Form.jsx b/public/input/form/Form.jsx
index ea59ce0..1e2037a 100644
--- a/public/input/form/Form.jsx
+++ b/public/input/form/Form.jsx
@@ -57,13 +57,25 @@ export default class Form extends React.Component {
     this.state = s;
   }
 
+  componentDidMount() {
+    if(this.props.manager) this.props.manager.addForm(this);
+  }
+
+  componentWillUnmount() {
+    if(this.props.manager) this.props.manager.removeForm(this);
+  }
+
+  submit() {
+    this.onSubmit();
+  }
+
   onSubmit(e) {
     //Is Ajax?
     if(!this.state.ajax) {
       return this.state.onSubmit ? this.state.onSubmit(e) : true;
     }
 
-    e.preventDefault();
+    if(e) e.preventDefault();
     if(!this.state.action) return console.warning("This form has no action.");
     if(this.state.submitting) return false;//Already submitting?
 
@@ -166,6 +178,7 @@ export default class Form extends React.Component {
 
     return (
       <form
+        ref="formDOM"
         className={clazz}
         method={ this.state.method }
         autoComplete={ this.props.autoComplete }
@@ -186,17 +199,27 @@ class FormManager {
     this.inputs = [];
   }
 
-  addInput(input) {
-    this.inputs.push(input);
+  addForm(form) { this.forms.push(form); }
+  addInput(input) { this.inputs.push(input); }
+
+  removeForm(form) {
+    let i = this.forms.indexOf(form);
+    if(i === -1) return;
+    this.forms.splice(i, 1);
   }
 
   removeInput(input) {
-    let i = this.forms.indexOf(input);
+    let i = this.inputs.indexOf(input);
     if(i === -1) return;
     this.inputs.splice(i, 1);
   }
 
-  onChange(input, event) {
+  onChange(input, event) {}
+
+  submit() {
+    for(let i = 0; i < this.forms.length; i++) {
+      this.forms[i].submit();
+    }
   }
 
   getFormData() {
diff --git a/public/keyboard/Keyboard.jsx b/public/keyboard/Keyboard.jsx
index 1d2977d..6002cb9 100644
--- a/public/keyboard/Keyboard.jsx
+++ b/public/keyboard/Keyboard.jsx
@@ -22,19 +22,77 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 const KEY_ESCAPE = 27;
+const KEY_CTRL = 17;
+const KEY_ENTER = 13;
 
 class Keyboard {
-  constructor(){}
+  constructor(){
+    //Bound events
+    this.onKeyUpBound = this.onKeyUp.bind(this);
+    this.onKeyDownBound = this.onKeyDown.bind(this);
 
-  isKeyOrCode(evt, key, code) {
-    if (typeof evt.key !== typeof undefined) {
-      return evt.key.toLowerCase() === key.toLowerCase();
-    }
-    return evt.keyCode === code;
+    this.listeners = [];
+
+    this.states = {};
   }
 
-  isEscape(e) {
-    return this.isKeyOrCode(e, "Escape", KEY_ESCAPE);
+  isRegistered() {return this.registered === true;}
+
+  register() {
+    if(this.isRegistered()) return;
+    this.registered = true;
+    document.addEventListener('keyup', this.onKeyUpBound);
+    document.addEventListener('keydown', this.onKeyDownBound);
+  }
+
+  unregister() {
+    this.registered = false;
+    document.removeEventListener('keyup', this.onKeyUpBound);
+    document.removeEventListener('keydown', this.onKeyDownBound);
+  }
+
+  addListener(listener) {
+    this.listeners.push(listener);
+  }
+
+  removeListener(listener) {
+    let index = this.listeners.indexOf(listener);
+    if(index === -1) return;
+    this.listeners.splice(index,1);
+  }
+
+  tellListeners(keyCode, event) {
+    for(let i = 0; i < this.listeners.length; i++) {
+      let l = this.listeners[i];
+      if(typeof l[event] !== "function") continue;
+      l[event](keyCode, this);
+    }
+  }
+
+  onKeyUp(e) {
+    //console.log("Key " + e.keyCode); // FOR TESTING KEY COMBOS
+    this.tellListeners(e.keyCode, "onKeyUp");
+    this.states[e.keyCode] = false;
+    this.tellListeners(e.keyCode, "onKeyRelease");
+  }
+
+  onKeyDown(e) {
+    this.tellListeners(e.keyCode, "onKeyPress");
+    this.states[e.keyCode] = true;
+    this.tellListeners(e.keyCode, "onKeyRelease");
+  }
+
+  isKey(key) {
+    return typeof this.states[key] !== typeof undefined && this.states[key] === true;
+  }
+
+  //Now the submits
+  isEscape() {
+    return this.isKey(KEY_ESCAPE);
+  }
+
+  isSubmit() {
+    return this.isKey(KEY_CTRL) && this.isKey(KEY_ENTER);
   }
 }
 
diff --git a/public/modal/Modal.jsx b/public/modal/Modal.jsx
index 4091307..ba1686e 100644
--- a/public/modal/Modal.jsx
+++ b/public/modal/Modal.jsx
@@ -34,26 +34,24 @@ import Keyboard from './../keyboard/Keyboard';
 class Modal extends React.Component {
   constructor(props) {
     super(props);
-    this.onKeyDownBound = this.onKeyDown.bind(this);
   }
 
   componentDidMount() {
-    document.addEventListener('keydown', this.onKeyDownBound);
+    Keyboard.addListener(this);
   }
 
   componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeyDownBound);
+    Keyboard.removeListener(this);
   }
 
-  onKeyDown(e) {
-    if(!Keyboard.isEscape(e)) return;
+  onKeyUp(e) {
+    if(!Keyboard.isEscape()) return;
     e.preventDefault();
     e.stopPropagation();
     this.props.closeModal();
   }
 
   render() {
-
     //Add necessary buttons
     let buttons = [];
     if(this.props.buttons) {