Readme update

Updated Styling
Merge Display feature
2026-02-03 00:06:50 +08:00 · 2018-09-24 15:52:54 -04:00 · 2018-09-23 23:38:47 -04:00 · 2018-09-23 23:38:34 -04:00 · 2018-09-23 23:38:11 -04:00 · 2018-09-23 23:37:46 -04:00
23 changed files with 4581 additions and 2835 deletions
--- a/README.md
+++ b/README.md
@@ -1,16 +1,10 @@
-# simple-keyboard
+[![npm version](https://badge.fury.io/js/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard)
+[![](https://data.jsdelivr.com/v1/package/npm/simple-keyboard/badge)](https://www.jsdelivr.com/package/npm/simple-keyboard)

-[![npm](https://img.shields.io/npm/v/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard)
-
-<a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="src/demo/images/simple-keyboard.png" align="center"></a>
-> An easily customisable and responsive on-screen virtual keyboard for Javascript projects.
-
-> Want the React.js version? Get [react-simple-keyboard](https://www.npmjs.com/package/react-simple-keyboard) instead!
-
-<img src="src/demo/images/keyboard.PNG" align="center" width="100%">
-
-<b>[Live Demo](https://franciscohodge.com/simple-keyboard/demo)</b>
+<a href="https://franciscohodge.com/simple-keyboard/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simplekeyboard-banner_B.png" align="center" width="100%"></a>
+<a href="https://franciscohodge.com/simple-keyboard/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-240-demo-2.gif" align="center" width="100%"></a>

+> The easily customisable and responsive on-screen virtual keyboard for Javascript projects.

 ## Installation

@@ -22,7 +16,7 @@

 [Click here to download the latest release (zip format).](https://github.com/hodgef/simple-keyboard/zipball/master)

-> Want to use a CDN instead of self-host? Scroll down to the "Usage from CDN" instructions below.
+> Want to use a CDN instead of self-host? Scroll down to the "Usage with CDN" instructions below.

 ## Usage with npm

@@ -32,55 +26,75 @@
 import Keyboard from 'simple-keyboard';
 import 'simple-keyboard/build/css/index.css';

-class App {
-  constructor(){
-    document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
-  }
+let keyboard = new Keyboard({
+  onChange: input => onChange(input),
+  onKeyPress: button => onKeyPress(button)
+});

-  onDOMLoaded = () => {
-    this.keyboard = new Keyboard({
-      onChange: input => this.onChange(input),
-      onKeyPress: button => this.onKeyPress(button)
-    });
-  }
-
-  onChange = input => {
-    console.log("Input changed", input);
-  }
-
-  onKeyPress = button => {
-    console.log("Button pressed", button);
-  }
+function onChange(input){
+  document.querySelector(".input").value = input;
+  console.log("Input changed", input);
 }

-export default App;
+function onKeyPress(button){
+  console.log("Button pressed", button);
+}
 ````

 ### html

 ````html
+<input class="input" />
 <div class="simple-keyboard"></div>
 ````

+[![Edit krzkx19rr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/krzkx19rr)
+
 > Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js).

-## Usage from CDN
+## Usage with CDN

 ### html

 ````html
-<!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/css/index.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
 </head>
+
 <body>
-    <div class="simple-keyboard"></div>
-    <script src="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/index.js"></script>
+  <input class="input" placeholder="Tap on the virtual keyboard to start" />
+  <div class="simple-keyboard"></div>
+
+  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.min.js"></script>
+  <script src="src/index.js"></script>
 </body>
+
 </html>
 ````

+### js (index.js)
+
+````js
+let Keyboard = window.SimpleKeyboard.default;
+
+let myKeyboard = new Keyboard({
+  onChange: input => onChange(input),
+  onKeyPress: button => onKeyPress(button)
+});
+
+function onChange(input) {
+  document.querySelector(".input").value = input;
+  console.log("Input changed", input);
+}
+
+function onKeyPress(button) {
+  console.log("Button pressed", button);
+}
+````
+
+[![Edit 6n0wzxjmjk](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6n0wzxjmjk)
+
 ## Options

 You can customize the Keyboard by passing options to it.
@@ -109,6 +123,8 @@ layout: {
 }
 ```

+> Looking for keyboard layouts in other languages? **Check out [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts) !**
+
 ### layoutName

 > Specifies which layout should be used.
@@ -119,11 +135,11 @@ layoutName: "default"

 ### display

-> Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: "delete").
+> Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: "backspace").

 ```js
 display: {
-  '{bksp}': 'delete',
+  '{bksp}': 'backspace',
  '{enter}': '< enter',
  '{shift}': 'shift',
  '{s}': 'shift',
@@ -137,12 +153,33 @@ display: {

 ### theme

-> A prop to add your own css classes. You can add multiple classes separated by a space.
+> A prop to add your own css classes _to the keyboard wrapper_. You can add multiple classes separated by a space.

 ```js
 theme: "hg-theme-default"
 ```

+### buttonTheme
+
+> A prop to add your own css classes _to one or several buttons_. You can add multiple classes separated by a space.
+
+```js
+buttonTheme: [
+  {
+    class: "myCustomClass",
+    buttons: "Q W E R T Y q w e r t y"
+  },
+  {
+    class: "anotherCustomClass",
+    buttons: "Q q"
+  },
+  ...
+]
+```
+
+[![Edit simple-keyboard customization demo - npm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vj8jvz2q4l?module=%2Fsrc%2Findex.js)
+
+
 ### debug

 > Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
@@ -159,6 +196,46 @@ debug: false
 newLineOnEnter: false
 ```

+### inputName
+
+> Allows you to use a single simple-keyboard instance for several inputs. 
+
+```js
+inputName: "default"
+```
+
+### syncInstanceInputs
+
+> When set to true, this option synchronizes the internal input of every simple-keyboard instance.
+
+```js
+syncInstanceInputs: false
+```
+
+### onKeyPress
+
+> Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
+
+```js
+onKeyPress: (button) => console.log(button)
+```
+
+### onChange
+
+> Executes the callback function on input change. Returns the current input's string.
+
+```js
+onChange: (input) => console.log(input)
+```
+
+### onChangeAll
+
+> Executes the callback function on input change. Returns the input object with all defined inputs. This is useful if you're handling several inputs with simple-keyboard, as specified in the "*[Using several inputs](#using-several-inputs)*" guide.
+
+```js
+onChangeAll: (inputs) => console.log(inputs)
+```
+
 ## Methods

 simple-keyboard has a few methods you can use to further control it's behavior.
@@ -179,7 +256,12 @@ keyboard.methodName(params);
 > Clear the keyboard's input.

 ```js
+// For default input (i.e. if you have only one)
 keyboard.clearInput();
+
+// For specific input
+// Must have been previously set using the "inputName" prop.
+keyboard.clearInput("inputName");
 ```

 ### getInput
@@ -187,25 +269,202 @@ keyboard.clearInput();
 > Get the keyboard's input (You can also get it from the _onChange_ prop).

 ```js
+// For default input (i.e. if you have only one)
 let input = keyboard.getInput();
+
+// For specific input
+// Must have been previously set using the "inputName" prop.
+let input = keyboard.getInput("inputName");
 ```

 ### setInput

-> Set the keyboard's input. Useful if you want the keybord to initialize with a default value, for example.
+> Set the keyboard's input. Useful if you want to track input changes made outside simple-keyboard.

 ```js
+// For default input (i.e. if you have only one)
 keyboard.setInput("Hello World!");
+
+// For specific input
+// Must have been previously set using the "inputName" prop.
+keyboard.setInput("Hello World!", "inputName");
 ```

+### setOptions
+
+> Set new option or modify existing ones after initialization. The changes are applied immediately.
+
+```js
+keyboard.setOptions({
+  theme: "my-custom-theme"
+});
+```
+
+### dispatch
+
+> Send a command to all simple-keyboard instances at once (if you have multiple instances).
+
+```js
+keyboard.dispatch(instance => {
+  instance.setOptions({
+    buttonTheme: [
+      {
+        class: "myClass",
+        buttons: `a b c`
+      }
+    ]
+  })
+});
+```
+
+[![Edit simple-keyboard dispatch demo - npm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rjnlp4pp2q?module=%2Fsrc%2Findex.js)
+
+
+## Q&A / Use-cases
+
+### How to give a different base class to my keyboard?
+
+As you may have seen on the code samples, this is the default setup that simple-keyboard uses:
+
+```html
+  <div class="simple-keyboard"></div>
+```
+
+```js
+let keyboard = new Keyboard({
+  // Add options here
+});
+```
+
+You can however change this by setting up simple-keyboard like so:
+
+```html
+  <div class="myFavouriteClass"></div>
+```
+
+```js
+let keyboard = new Keyboard(".myFavouriteClass", {
+  // Add options here
+});
+```
+
+This can come in handy especially when dealing with multiple simple keyboard instances.
+
+### How to syncronize multiple instances of simple-keyboard
+
+As shown above, you can run multiple instances of simple-keyboard. To keep their internal inputs in sync, set the *[syncInstanceInputs](#syncInstanceInputs)* option to `true`. 
+
+If you want to send a command to all your simple-keyboard instances at once, you can use the *[dispatch](#syncInstanceInputs)* method.
+
+Here's a demo with both these features in action:
+
+[![Edit simple-keyboard dispatch demo - npm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rjnlp4pp2q?module=%2Fsrc%2Findex.js)
+
+Here's an example of a full keyboard made out of multiple simple-keyboard instances:
+
+[![Edit simple-keyboard extended keyboard demo - cdn (Experimental)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/nrxrn5kprp?module=%2Fsrc%2Findex.js)
+
+
+### Using several inputs
+
+Set the *[inputName](#inputname)* option for each input you want to handle with simple-keyboard.
+
+For example:
+
+```html
+  <input class="input" id="input1" value=""/>
+  <input class="input" id="input2" value=""/>
+```
+
+```js
+  // Here we'll store the input id that simple-keyboard will be using.
+  var selectedInput;
+
+  // Initialize simple-keyboard as usual
+  var keyboard = new Keyboard({
+    onChange: input => onChange(input)
+  });
+
+  // Add an event listener for the inputs to be tracked
+  document.querySelectorAll('.input')
+    .forEach(input => input.addEventListener('focus', onInputFocus));
+
+  /**
+   * When an input is focused, it will be marked as selected (selectedInput)
+   * This is so we can replace it's value on the onChange function
+   *
+   * Also, we will set the inputName option to a unique string identifying the input (id)
+   * simple-keyboard save the input in this key and report changes through onChange
+   */
+  onInputFocus = event => {
+    // Setting input as selected
+    selectedInput = `#${event.target.id}`;
+
+    // Set the inputName option on the fly !
+    keyboard.setOptions({
+      inputName: event.target.id
+    });
+  }
+
+  // When the current input is changed, this is called
+  onChange = input => {
+    // If the input is not defined, grabbing the first ".input".
+    let currentInput = selectedInput || '.input';
+
+    // Updating the selected input's value
+    document.querySelector(currentInput).value = input;
+  }
+
+```
+
+> [See full example](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/MultipleInputsDemo.js).
+
+[![Edit simple-keyboard multiple inputs demo - npm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/43nm6v4xyx?module=%2Fsrc%2Findex.js)
+
+### Having keys in a different language configuration
+
+There's a number of key layouts available. To apply them, check out [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts).
+
+If you'd like to contribute your own layouts, please submit your pull request at the simple-keyboard-layouts repository.
+
+
+### How to customize my keyboard layout?
+
+If you'd like to create a layout in a language not currently supported by [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts), you definitely can.
+
+Take following demo as an example:
+
+[![Edit Use-case: simple-keyboard layout customization demo - cdn](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/v388k9zvk0?module=%2Fsrc%2Findex.js)
+
+If you have issues displaying a character, you might need its unicode code to display it. Here an useful converter tool:
+
+[r12a Unicode converter](https://r12a.github.io/app-conversion/)
+
+### Why is the caps lock button working like shift button?
+
+For the sake of simplicity, caps lock and shift do the same action in the main demos.
+If you'd like to show a different layout when you press caps lock, check out the following demo:
+
+[![Edit simple-keyboard handling shift and caps lock demo - npm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l3n84qn5oq?module=%2Fsrc%2Findex.js)
+
+
+### How to display a full keyboard
+
+You can display a full keyboard by linking together multiple Simple Keyboard instances.
+This is because you might want different sections of your keyboard to have different spacing and styling.
+
+Please refer to the documentation on the *[syncInstanceInputs](#syncInstanceInputs)* option, which allows you to sync the input of all your simple-keyboard instances.
+
+Also, check out this demo:
+
+[![Edit simple-keyboard extended keyboard demo - cdn (Experimental)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0ywkn0k7pp?module=%2Fsrc%2Findex.js)
+
 ## Demo

-<img src="src/demo/images/demo.gif" align="center" width="600">
-
-### Live demo
-
 [https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo)

+[![Edit krzkx19rr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/krzkx19rr)
+
 ### To run demo on your own computer

 * Clone this repository
@@ -213,7 +472,11 @@ keyboard.setInput("Hello World!");
 * `npm start`
 * Visit [http://localhost:3000/](http://localhost:3000/)

-## Note
+### Other versions

-This is a work in progress. Feel free to submit any issues you have at:
+* ReactJS - [react-simple-keyboard](https://github.com/hodgef/react-simple-keyboard)
+
+## Contributing
+
+PR's and issues are welcome. Feel free to submit any issues you have at:
 [https://github.com/hodgef/simple-keyboard/issues](https://github.com/hodgef/simple-keyboard/issues)
--- a/bin/postinstall
+++ b/bin/postinstall
@@ -0,0 +1,10 @@
+console.log('\x1b[36m%s\x1b[0m', `
+______________________________________\n`);
+
+console.log('\x1b[33m%s\x1b[0m', `Thank you for installing simple-keyboard !`);
+
+console.log('\x1b[36m%s\x1b[0m', `
+Please consider starring the repository so others can also find it.
+https://github.com/hodgef/simple-keyboard/stargazers
+______________________________________
+`);
--- a/build/css/index.css
+++ b/build/css/index.css
@@ -1,2 +1,13 @@
-body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.simple-keyboard .hg-row{display:-ms-flexbox;display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;-ms-flex-positive:1;flex-grow:1;cursor:pointer}.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn{max-width:100px}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.2);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{-webkit-box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border:1px solid rgba(0,0,0,.25);border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid gray}.simple-keyboard.hg-theme-default .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}
+/*!
+ * 
+ *   simple-keyboard v2.4.1
+ *   https://github.com/hodgef/simple-keyboard
+ * 
+ *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
+ * 
+ *   This source code is licensed under the MIT license found in the
+ *   LICENSE file in the root directory of this source tree.
+ *   
+ */
+body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:manipulation;touch-action:manipulation}.simple-keyboard .hg-row{display:-ms-flexbox;display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;-ms-flex-positive:1;flex-grow:1;cursor:pointer}.hg-standardBtn{max-width:100px}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{-webkit-box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.simple-keyboard.hg-theme-default .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}
 /*# sourceMappingURL=index.css.map*/
--- a/build/css/index.css.map
+++ b/build/css/index.css.map
@@ -1 +1 @@
-{"version":3,"sources":["webpack:///./src/lib/components/Keyboard.css"],"names":[],"mappings":"AAAA,UACE,SACA,SAAW,CAGb,iBACE,6GACA,WACA,yBACG,sBACC,qBACI,iBACR,8BACQ,sBACR,eAAiB,CAGnB,yBACE,oBACA,YAAc,CAGhB,0CACE,iBAAmB,CAGrB,qDACE,gBAAkB,CAGpB,4BACE,qBACA,oBACI,YACJ,cAAgB,CAGlB,6DACE,eAAiB,CAMnB,kCACE,gCACA,YACA,iBAAmB,CAGrB,6CACE,+CACQ,uCACR,YACA,iCACA,kBACA,8BACQ,sBACR,YACA,gBACA,4BAA8B,CAG/B,oDACC,kBAAoB,CAGtB,+DACE,YACA,YACA,sBACI,mBACJ,oBACA,aACA,qBACI,sBAAwB","file":"css/index.css","sourcesContent":["body, html {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.simple-keyboard {\r\n  font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\r\n  width: 100%;\r\n  -webkit-user-select: none;\r\n     -moz-user-select: none;\r\n      -ms-user-select: none;\r\n          user-select: none;\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n  overflow: hidden;\r\n}\r\n\r\n.simple-keyboard .hg-row {\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n}\r\n\r\n.simple-keyboard .hg-row:not(:last-child) {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-row .hg-button:not(:last-child) {\r\n  margin-right: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-button {\r\n  display: inline-block;\r\n  -ms-flex-positive: 1;\r\n      flex-grow: 1;\r\n  cursor: pointer;\r\n}\r\n\r\n.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn {\r\n  max-width: 100px;\r\n}\r\n\r\n/**\r\n * hg-theme-default theme\r\n */\r\n.simple-keyboard.hg-theme-default {\r\n  background-color: rgba(0,0,0,0.2);\r\n  padding: 5px;\r\n  border-radius: 5px;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default .hg-button {\r\n  -webkit-box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n          box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n  height: 40px;\r\n  border: 1px solid rgba(0,0,0,0.25);\r\n  border-radius: 5px;\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n  padding: 5px;\r\n  background: white;\r\n  border-bottom: 1px solid gray;\r\n }\r\n\r\n .simple-keyboard.hg-theme-default .hg-button:active {\r\n  background: #e4e4e4;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {\r\n  width: 33.3%;\r\n  height: 60px;\r\n  -ms-flex-align: center;\r\n      align-items: center;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -ms-flex-pack: center;\r\n      justify-content: center;\r\n}\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Keyboard.css"],"sourceRoot":""}
+{"version":3,"sources":["webpack:///./src/lib/components/Keyboard.css"],"names":[],"mappings":";;;;;;;;;;;AAAA,UACE,SACA,SAAW,CAGb,iBACE,6GACA,WACA,yBACG,sBACC,qBACI,iBACR,8BACQ,sBACR,gBACA,8BACI,yBAA2B,CAGjC,yBACE,oBACA,YAAc,CAGhB,0CACE,iBAAmB,CAGrB,qDACE,gBAAkB,CAGpB,4BACE,qBACA,oBACI,YACJ,cAAgB,CAGlB,gBACE,eAAiB,CAMnB,kCACE,gCACA,YACA,iBAAmB,CAGrB,6CACE,+CACQ,uCACR,YACA,kBACA,8BACQ,sBACR,YACA,gBACA,gCACA,eACA,oBACA,aACA,sBACI,mBACJ,qBACI,sBAAwB,CAG7B,oDACC,kBAAoB,CAGtB,+DACE,YACA,YACA,sBACI,mBACJ,oBACA,aACA,qBACI,sBAAwB,CAO9B,oIACE,WAAa,CAGf,+DACE,WAAa,CAGf,2DACE,cAAgB,CAGlB,yEACE,cAAgB","file":"css/index.css","sourcesContent":["body, html {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.simple-keyboard {\r\n  font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\r\n  width: 100%;\r\n  -webkit-user-select: none;\r\n     -moz-user-select: none;\r\n      -ms-user-select: none;\r\n          user-select: none;\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n  overflow: hidden;\r\n  -ms-touch-action: manipulation;\r\n      touch-action: manipulation;\r\n}\r\n\r\n.simple-keyboard .hg-row {\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n}\r\n\r\n.simple-keyboard .hg-row:not(:last-child) {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-row .hg-button:not(:last-child) {\r\n  margin-right: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-button {\r\n  display: inline-block;\r\n  -ms-flex-positive: 1;\r\n      flex-grow: 1;\r\n  cursor: pointer;\r\n}\r\n\r\n.hg-standardBtn {\r\n  max-width: 100px;\r\n}\r\n\r\n/**\r\n * hg-theme-default theme\r\n */\r\n.simple-keyboard.hg-theme-default {\r\n  background-color: rgba(0,0,0,0.1);\r\n  padding: 5px;\r\n  border-radius: 5px;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default .hg-button {\r\n  -webkit-box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n          box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n  height: 40px;\r\n  border-radius: 5px;\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n  padding: 5px;\r\n  background: white;\r\n  border-bottom: 1px solid #b5b5b5;\r\n  cursor: pointer;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -ms-flex-align: center;\r\n      align-items: center;\r\n  -ms-flex-pack: center;\r\n      justify-content: center;\r\n }\r\n\r\n .simple-keyboard.hg-theme-default .hg-button:active {\r\n  background: #e4e4e4;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {\r\n  width: 33.3%;\r\n  height: 60px;\r\n  -ms-flex-align: center;\r\n      align-items: center;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -ms-flex-pack: center;\r\n      justify-content: center;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {\r\n  height: 85px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {\r\n  height: 85px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {\r\n  width: 105px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-com {\r\n  max-width: 85px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {\r\n  max-width: 45px;\r\n}\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Keyboard.css"],"sourceRoot":""}
--- a/build/index.js
+++ b/build/index.js
--- a/build/index.js.map
+++ b/build/index.js.map
--- a/config/getPackageJson.js
+++ b/config/getPackageJson.js
@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * A module to get package informations from package.json
+ * @module getPackageJson
+ * @param {...string} keys from package.json if no arguments passed it returns package.json content as object
+ * @returns {object} with given keys or content of package.json as object
+ */
+
+/**
+ * Returns package info
+ */
+const getPackageJson = function(...args) {
+  const packageJSON = JSON.parse(fs.readFileSync(path.join(__dirname, '../package.json')));
+  if (!args.length) {
+    return packageJSON;
+  }
+  return args.reduce((out, key) => {
+    out[key] = packageJSON[key];
+    return out;
+  }, {});
+};
+
+module.exports = getPackageJson;
--- a/config/webpack.config.demo.js
+++ b/config/webpack.config.demo.js
@@ -60,7 +60,8 @@ module.exports = {
    // CRL: Updated whole block with library specific info
    path: paths.appDemoBuild,
    filename: 'index.js',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    library: 'SimpleKeyboard'
  },
  resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -8,6 +8,7 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
+const getPackageJson = require('./getPackageJson');

 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
@@ -42,6 +43,24 @@ const extractTextPluginOptions = shouldUseRelativeAssetPaths
    { publicPath: Array(cssFilename.split('/').length).join('../') }
  : {};

+const {
+  version,
+  name,
+  license,
+  repository,
+  author,
+} = getPackageJson('version', 'name', 'license', 'repository', 'author');
+
+const banner = `
+  ${name} v${version}
+  ${repository.url}
+
+  Copyright (c) ${author.replace(/ *\<[^)]*\> */g, " ")}
+
+  This source code is licensed under the ${license} license found in the
+  LICENSE file in the root directory of this source tree.
+  `;
+
 // This is the production configuration.
 // It compiles slowly and is focused on producing a fast and minimal bundle.
 // The development configuration is different and lives in a separate file.
@@ -57,7 +76,8 @@ module.exports = {
    // CRL: Updated whole block with library specific info
    path: paths.appBuild,
    filename: 'index.js',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    library: 'SimpleKeyboard'
  },
  resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
@@ -246,6 +266,10 @@ module.exports = {
      },
      sourceMap: shouldUseSourceMap,
    }),
+    new webpack.BannerPlugin({ 
+      banner: banner, 
+      entryOnly: true 
+    }),
    // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
    new ExtractTextPlugin({
      filename: cssFilename,
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,13 +1,14 @@
 {
  "name": "simple-keyboard",
-  "version": "2.0.3",
-  "description": "On-screen Virtual Keyboard",
+  "version": "2.4.1",
+  "description": "On-screen Javascript Virtual Keyboard",
  "main": "build/index.js",
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "demo": "node scripts/demo.js",
    "test": "node scripts/test.js --env=jsdom",
+    "postinstall": "node bin/postinstall",
    "prepublish": "npm run build"
  },
  "repository": {
@@ -29,17 +30,18 @@
    "component",
    "virtual-keyboard",
    "touchscreen",
-    "touch-screen"
+    "touch-screen",
+    "osk"
  ],
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "7.1.6",
-    "babel-core": "6.26.0",
+    "babel-core": "^6.26.3",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
-    "babel-preset-react-app": "^3.1.0",
+    "babel-preset-react-app": "^3.1.2",
    "babel-runtime": "6.26.0",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
@@ -62,6 +64,7 @@
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.8",
    "promise": "8.0.1",
+    "prop-types": "^15.6.1",
    "raf": "3.4.0",
    "react": "^16.2.0",
    "react-dev-utils": "^4.2.1",
@@ -72,12 +75,7 @@
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.4",
    "webpack-manifest-plugin": "1.3.2",
-    "whatwg-fetch": "2.0.3",
-    "prop-types": "^15.6.1"
-  },
-  "peerDependencies": {
-    "react": ">=0.14",
-    "react-dom": ">=0.14"
+    "whatwg-fetch": "2.0.3"
  },
  "jest": {
    "collectCoverageFrom": [
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
@@ -20,6 +20,16 @@
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>simple-keyboard</title>
+    <style>
+      /**
+       * Disabling double-tap to zoom in iOS 10+
+       * as it interferes with simple-keyboard
+       */
+      body,
+      html {
+        touch-action: manipulation;
+      }
+    </style>
  </head>
  <body>
    <noscript>
--- a/src/demo/App.js
+++ b/src/demo/App.js
@@ -1,5 +1,5 @@
 import Keyboard from '../lib';
-import './App.css';
+import './css/App.css';

 class App {
  constructor(){
@@ -13,10 +13,20 @@ class App {
      debug: true,
      layoutName: this.layoutName,
      onChange: input => this.onChange(input),
-      onKeyPress: button => this.onKeyPress(button)
+      onKeyPress: button => this.onKeyPress(button),
+      newLineOnEnter: true
    });
  
    this.keyboard.setInput("Hello World!");
+
+    /**
+     * Adding preview (demo only)
+     */
+    document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
+    <div class="simple-keyboard-preview">
+      <textarea class="input" readonly>Hello World!</textarea>
+    </div>
+    `);
  
    console.log(this.keyboard);
  }
--- a/src/demo/FullKeyboardDemo.js
+++ b/src/demo/FullKeyboardDemo.js
@@ -0,0 +1,150 @@
+import Keyboard from '../lib';
+import './css/FullKeyboardDemo.css';
+
+class App {
+  constructor(){
+    document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+
+    this.keyboardSections = [];
+  }
+
+  onDOMLoaded = () => {
+    /**
+     * Adding preview (demo only)
+     * In production, this would be part of your HTML file
+     */
+    document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+
+    <div class="keyboardContainer">
+      <div class="simple-keyboard-main"></div>
+  
+      <div class="controlArrows">
+        <div class="simple-keyboard-control"></div>
+        <div class="simple-keyboard-arrows"></div>
+      </div>
+  
+      <div class="numPad">
+        <div class="simple-keyboard-numpad"></div>
+        <div class="simple-keyboard-numpadEnd"></div>
+      </div>
+      
+    </div>
+    `);
+    document.querySelector('.simple-keyboard').outerHTML = "";
+
+
+    /**
+     * Start of demo
+     */
+    this.commonKeyboardOptions = {
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      theme: "simple-keyboard hg-theme-default hg-layout-default",
+      physicalKeyboardHighlight: true,
+      syncInstanceInputs: true,
+      mergeDisplay: true
+    };
+    
+    this.keyboard = new Keyboard(".simple-keyboard-main", {
+      ...this.commonKeyboardOptions,
+      layout: {
+        default: [
+          "{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
+          "` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
+          "{tab} q w e r t y u i o p [ ] \\",
+          "{capslock} a s d f g h j k l ; ' {enter}",
+          "{shiftleft} z x c v b n m , . / {shiftright}",
+          ".com @ {space}"
+        ],
+        shift: [
+          "{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
+          "~ ! @ # $ % ^ & * ( ) _ + {backspace}",
+          "{tab} Q W E R T Y U I O P { } |",
+          '{capslock} A S D F G H J K L : " {enter}',
+          "{shiftleft} Z X C V B N M < > ? {shiftright}",
+          ".com @ {space}"
+        ]
+      }
+    });
+    
+    this.keyboardControlPad = new Keyboard(".simple-keyboard-control", {
+      ...this.commonKeyboardOptions,
+      layout: {
+        default: [
+          "{prtscr} {scrolllock} {pause}",
+          "{insert} {home} {pageup}",
+          "{delete} {end} {pagedown}"
+        ]
+      }
+    });
+    
+    this.keyboardArrows = new Keyboard(".simple-keyboard-arrows", {
+      ...this.commonKeyboardOptions,
+      layout: {
+        default: ["{arrowup}", "{arrowleft} {arrowdown} {arrowright}"]
+      }
+    });
+    
+    this.keyboardNumPad = new Keyboard(".simple-keyboard-numpad", {
+      ...this.commonKeyboardOptions,
+      layout: {
+        default: [
+          "{numlock} {numpaddivide} {numpadmultiply}",
+          "{numpad7} {numpad8} {numpad9}",
+          "{numpad4} {numpad5} {numpad6}",
+          "{numpad1} {numpad2} {numpad3}", "{numpad0} {numpaddecimal}"]
+      }
+    });
+    
+    this.keyboardNumPadEnd = new Keyboard(".simple-keyboard-numpadEnd", {
+      ...this.commonKeyboardOptions,
+      layout: {
+        default: ["{numpadsubtract}", "{numpadadd}", "{numpadenter}"]
+      }
+    });
+
+    /**
+     * Physical Keyboard support
+     * Whenever the input is changed with the keyboard, updating SimpleKeyboard's internal input
+     */
+    document.querySelector(".input").addEventListener("keyup", () => {
+      let input = document.querySelector(".input").value;
+      this.keyboard.setInput(input);
+    });
+
+    /*
+    // Uncomment this to test the function keys (f1-12)
+    document.addEventListener("keydown", (event) => {
+      event.preventDefault();
+    });*/
+  }
+
+  onChange = (input) => {
+    document.querySelector(".input").value = input;
+    this.keyboard.setInput(input);
+
+    console.log("Input changed", input);
+  }
+  
+  onKeyPress = (button) => {
+    console.log("Button pressed", button);
+  
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{shiftleft}" || button === "{shiftright}" || button === "{capslock}") this.handleShift();
+  }
+  
+  handleShift = () => {
+    let currentLayout = this.keyboard.options.layoutName;
+    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+  
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+
+}
+
+export default App;
--- a/src/demo/MultipleInputsDemo.js
+++ b/src/demo/MultipleInputsDemo.js
@@ -0,0 +1,77 @@
+import Keyboard from '../lib';
+import './css/MultipleInputsDemo.css';
+
+class App {
+  constructor(){
+    document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+
+    this.layoutName = "default";
+  }
+
+  onDOMLoaded = () => {
+    this.keyboard = new Keyboard({
+      debug: true,
+      layoutName: this.layoutName,
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button)
+    });
+
+    /**
+     * Adding preview (demo only)
+     * In production, this would be part of your HTML file
+     */
+    document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
+      <div>
+        <label>Input 1</label>
+        <input class="input" id="input1" value=""/>
+      </div>
+      <div>
+        <label>Input 2</label>
+        <input class="input" id="input2" value=""/>
+      </div>
+    `);
+
+    /**
+     * Changing active input onFocus
+     */
+    document.querySelectorAll('.input')
+      .forEach(input => input.addEventListener('focus', this.onInputFocus));
+  
+    console.log(this.keyboard);
+  }
+
+  onInputFocus = event => {
+    this.selectedInput = `#${event.target.id}`;
+    
+    this.keyboard.setOptions({
+      inputName: event.target.id
+    });
+  }
+
+  onChange = input => {
+    let currentInput = this.selectedInput || '.input';
+    document.querySelector(currentInput).value = input;
+  }
+
+  onKeyPress = button => {
+    console.log("Button pressed", button);
+  
+      /**
+       * Shift functionality
+       */
+      if(button === "{lock}" || button === "{shift}")
+        this.handleShiftButton();
+  }
+
+  handleShiftButton = () => {
+    let layoutName = this.layoutName;
+    let shiftToggle = this.layoutName = layoutName === "default" ? "shift" : "default";
+  
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+
+}
+
+export default App;
--- a/src/demo/css/App.css
+++ b/src/demo/css/App.css
@@ -1,14 +1,14 @@
 #root {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-  max-width: 1000px;
+  max-width: 850px;
  margin: 0 auto;
  padding-top: 20px;
 }

 #root .simple-keyboard-preview {
  background: rgba(0,0,0,0.8);
-  border: 20px solid;
-  height: 300px;
+  border: 20px solid rgba(0,0,0,0.1);
+  height: 260px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: 10px;
@@ -16,13 +16,14 @@
 }

 #root .input {
-  color: white;
+  color: rgba(255,255,255,0.9);
  background: transparent;
  border: none;
  outline: none;
  font-family: monospace;
  width: 100%;
  height: 100%;
+  font-size: 18px;
 }

 .simple-keyboard.hg-layout-custom {
--- a/src/demo/css/FullKeyboardDemo.css
+++ b/src/demo/css/FullKeyboardDemo.css
@@ -0,0 +1,116 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.keyboardContainer {
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.1);
+  justify-content: center;
+  width: 1024px;
+  margin: 0 auto;
+  border-radius: 5px;
+}
+
+.simple-keyboard.hg-theme-default {
+  display: inline-block;
+}
+
+.simple-keyboard-main.simple-keyboard {
+  width: 640px;
+  min-width: 640px;
+  background: none;
+}
+
+.simple-keyboard-main.simple-keyboard .hg-row:first-child {
+  margin-bottom: 10px;
+}
+
+.simple-keyboard-arrows.simple-keyboard {
+  align-self: flex-end;
+  background: none;
+}
+
+.simple-keyboard .hg-button.hg-selectedButton {
+  background: rgba(5, 25, 70, 0.53);
+  color: white;
+}
+
+.simple-keyboard .hg-button.emptySpace {
+  pointer-events: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+.simple-keyboard-arrows .hg-row {
+  justify-content: center;
+}
+
+.simple-keyboard-arrows .hg-button {
+  width: 50px;
+  flex-grow: 0;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.controlArrows {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column;
+}
+
+.simple-keyboard-control.simple-keyboard {
+  background: none;
+}
+
+.simple-keyboard-control.simple-keyboard .hg-row:first-child {
+  margin-bottom: 10px;
+}
+
+.simple-keyboard-control .hg-button {
+  width: 50px;
+  flex-grow: 0;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.numPad {
+  display: flex;
+  align-items: flex-end;
+}
+
+.simple-keyboard-numpad.simple-keyboard {
+  background: none;
+}
+
+.simple-keyboard-numpad.simple-keyboard {
+  width: 160px;
+}
+
+.simple-keyboard-numpad.simple-keyboard .hg-button {
+  width: 50px;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.simple-keyboard-numpadEnd.simple-keyboard {
+  width: 50px;
+  background: none;
+  margin: 0;
+  padding: 5px 5px 5px 0;
+}
+
+.simple-keyboard-numpadEnd.simple-keyboard .hg-button {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
--- a/src/demo/css/MultipleInputsDemo.css
+++ b/src/demo/css/MultipleInputsDemo.css
@@ -0,0 +1,42 @@
+#root {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  max-width: 850px;
+  margin: 0 auto;
+  padding-top: 20px;
+}
+
+#root .screenContainer {
+  background: rgba(0,0,0,0.8);
+  border: 20px solid;
+  height: 300px;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+#root .inputContainer {
+  color: white;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: monospace;
+  width: 100%;
+  height: 100%;
+}
+
+.simple-keyboard.hg-layout-custom {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+input {
+  padding: 10px;
+  margin: 10px 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+label {
+  display: block;
+}
--- a/src/demo/index.js
+++ b/src/demo/index.js
@@ -3,13 +3,4 @@ import App from './App';
 /**
 * Initializing demo
 */
-new App();
-
-/**
- * Adding preview (demo only)
- */
-document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
-  <div class="simple-keyboard-preview">
-    <textarea class="input" readonly>Hello World!</textarea>
-  </div>
-`);
+new App();
--- a/src/lib/components/Keyboard.css
+++ b/src/lib/components/Keyboard.css
@@ -9,6 +9,7 @@ body, html {
  user-select: none;
  box-sizing: border-box;
  overflow: hidden;
+  touch-action: manipulation;
 }

 .simple-keyboard .hg-row {
@@ -29,7 +30,7 @@ body, html {
  cursor: pointer;
 }

-.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn {
+.hg-standardBtn {
  max-width: 100px;
 }

@@ -37,7 +38,7 @@ body, html {
 * hg-theme-default theme
 */
 .simple-keyboard.hg-theme-default {
-  background-color: rgba(0,0,0,0.2);
+  background-color: rgba(0,0,0,0.1);
  padding: 5px;
  border-radius: 5px;
 }
@@ -45,12 +46,15 @@ body, html {
 .simple-keyboard.hg-theme-default .hg-button {
  box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);
  height: 40px;
-  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px;
  background: white;
-  border-bottom: 1px solid gray;
+  border-bottom: 1px solid #b5b5b5;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

 .simple-keyboard.hg-theme-default .hg-button:active {
@@ -63,4 +67,24 @@ body, html {
  align-items: center;
  display: flex;
  justify-content: center;
+}
+
+.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {
+  height: 85px;
+}
+
+.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {
+  height: 85px;
+}
+
+.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {
+  width: 105px;
+}
+
+.simple-keyboard.hg-theme-default .hg-button.hg-button-com {
+  max-width: 85px;
+}
+
+.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
+  max-width: 45px;
 }
--- a/src/lib/components/Keyboard.js
+++ b/src/lib/components/Keyboard.js
@@ -1,6 +1,7 @@
 import './Keyboard.css';

 // Services
+import PhysicalKeyboard from '../services/PhysicalKeyboard';
 import KeyboardLayout from '../services/KeyboardLayout';
 import Utilities from '../services/Utilities';

@@ -17,9 +18,13 @@ class SimpleKeyboard {
     */
    this.keyboardDOM = document.querySelector(keyboardDOMQuery);
    this.options = options;
-    this.input = '';
    this.options.layoutName = this.options.layoutName || "default";
    this.options.theme = this.options.theme || "hg-theme-default";
+    this.options.inputName = this.options.inputName || "default";
+    this.input = {};
+    this.input[this.options.inputName] = '';
+    this.keyboardDOMClass = keyboardDOMQuery.split('.').join("");
+    this.timers = {};

    /**
     * Rendering keyboard
@@ -28,6 +33,20 @@ class SimpleKeyboard {
      this.render();
    else
      console.error(`"${keyboardDOMQuery}" was not found in the DOM.`);
+
+    /**
+     * Saving instance
+     * This enables multiple simple-keyboard support with easier management
+     */
+    if(!window['SimpleKeyboardInstances'])
+      window['SimpleKeyboardInstances'] = {};
+      
+    window['SimpleKeyboardInstances'][Utilities.camelCase(this.keyboardDOMClass)] = this;
+
+    /**
+     * Physical Keyboard support
+     */
+    this.physicalKeyboardInterface = new PhysicalKeyboard(this);
  }

  handleButtonClicked = (button) => {
@@ -52,19 +71,28 @@ class SimpleKeyboard {
      newLineOnEnter: (this.options.newLineOnEnter === true)
    }
    
-    let updatedInput = Utilities.getUpdatedInput(button, this.input, options);
+    if(!this.input[this.options.inputName])
+      this.input[this.options.inputName] = '';

-    if(this.input !== updatedInput){
-      this.input = updatedInput;
+    let updatedInput = Utilities.getUpdatedInput(button, this.input[this.options.inputName], options);
+
+    if(this.input[this.options.inputName] !== updatedInput){
+      this.input[this.options.inputName] = updatedInput;

      if(debug)
        console.log('Input changed:', this.input);

+      /**
+       * syncInstanceInputs
+       */
+      if(this.options.syncInstanceInputs)
+        this.syncInstanceInputs(this.input);
+
      /**
       * Calling onChange
       */
      if(typeof this.options.onChange === "function")
-        this.options.onChange(this.input);
+        this.options.onChange(this.input[this.options.inputName]);
    }
    
    if(debug){
@@ -72,16 +100,48 @@ class SimpleKeyboard {
    }
  }

-  clearInput = () => {
-    this.input = '';
+  syncInstanceInputs = () => {
+    this.dispatch((section) => {
+      section.replaceInput(this.input);
+    });
  }

-  getInput = () => {
-    return this.input;
+  clearInput = (inputName) => {
+    inputName = inputName || this.options.inputName;
+    this.input[this.options.inputName] = '';
+
+    /**
+     * syncInstanceInputs
+     */
+    if(this.options.syncInstanceInputs)
+      this.syncInstanceInputs(this.input);
  }

-  setInput = input => {
-    this.input = input;
+  getInput = (inputName) => {
+    inputName = inputName || this.options.inputName;
+
+    /**
+     * syncInstanceInputs
+     */
+    if(this.options.syncInstanceInputs)
+      this.syncInstanceInputs(this.input);
+
+    return this.input[this.options.inputName];
+  }
+
+  setInput = (input, inputName) => {
+    inputName = inputName || this.options.inputName;
+    this.input[inputName] = input;
+
+    /**
+     * syncInstanceInputs
+     */
+    if(this.options.syncInstanceInputs)
+      this.syncInstanceInputs(this.input);
+  }
+
+  replaceInput = (inputObj) => {
+    this.input = inputObj;
  }

  setOptions = option => {
@@ -92,6 +152,18 @@ class SimpleKeyboard {

  clear = () => {
    this.keyboardDOM.innerHTML = '';
+    this.keyboardDOM.className = this.keyboardDOMClass;
+  }
+
+  dispatch = (callback) => {
+    if(!window['SimpleKeyboardInstances']){
+      console.error("SimpleKeyboardInstances is not defined. Dispatch cannot be called.")
+      return false;
+    }
+    
+    return Object.keys(window['SimpleKeyboardInstances']).forEach((key) => {
+      callback(window['SimpleKeyboardInstances'][key], key);
+    })
  }

  render = () => {
@@ -103,6 +175,32 @@ class SimpleKeyboard {
    let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
    let layout = this.options.layout || KeyboardLayout.getLayout(this.options.layoutName);

+    /**
+     * Account for buttonTheme, if set
+     */
+    let buttonThemesParsed = {};
+    if(Array.isArray(this.options.buttonTheme)){
+      this.options.buttonTheme.forEach(themeObj => {
+        if(themeObj.buttons && themeObj.class){
+          let themeButtons = themeObj.buttons.split(' ');
+
+          if(Array.isArray(themeButtons)){
+            themeButtons.forEach(themeButton => {
+              let themeParsed = buttonThemesParsed[themeButton];
+
+              // If the button has already been added
+              if(themeParsed)
+                buttonThemesParsed[themeButton] = `${themeParsed} ${themeObj.class}`;
+              else
+                buttonThemesParsed[themeButton] = themeObj.class;
+            });
+          }
+        } else {
+          console.warn(`buttonTheme row is missing the "buttons" or the "class". Please check the documentation.`)
+        }
+      });
+    }
+
    /**
     * Adding themeClass, layoutClass to keyboardDOM
     */
@@ -111,7 +209,7 @@ class SimpleKeyboard {
    /**
     * Iterating through each row
     */
-    layout[this.options.layoutName].forEach((row, index) => {
+    layout[this.options.layoutName].forEach((row) => {
      let rowArray = row.split(' ');

      /**
@@ -123,15 +221,16 @@ class SimpleKeyboard {
      /**
       * Iterating through each button in row
       */
-      rowArray.forEach((button, index) => {
+      rowArray.forEach((button) => {
        let fctBtnClass = Utilities.getButtonClass(button);
-        let buttonDisplayName = Utilities.getButtonDisplayName(button, this.options.display);
+        let buttonThemeClass = buttonThemesParsed[button];
+        let buttonDisplayName = Utilities.getButtonDisplayName(button, this.options.display, this.options.mergeDisplay);

        /**
         * Creating button
         */
        var buttonDOM = document.createElement('div');
-        buttonDOM.className += `hg-button ${fctBtnClass}`;
+        buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
        buttonDOM.onclick = () => this.handleButtonClicked(button);

        /**
--- a/src/lib/services/PhysicalKeyboard.js
+++ b/src/lib/services/PhysicalKeyboard.js
@@ -0,0 +1,77 @@
+class PhysicalKeyboard {
+  constructor(simpleKeyboardInstance){
+    this.simpleKeyboardInstance = simpleKeyboardInstance;
+
+    if(!window['SimpleKeyboardPhysicalKeyboardInit'])
+      window['SimpleKeyboardPhysicalKeyboardInit'] = true;
+    else
+      return false;
+
+    this.initKeyboardListener();
+  }
+
+  initKeyboardListener = () => {
+    // Normal Keyboard
+    document.addEventListener("keydown", (event) => {
+      if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
+        let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+
+        this.simpleKeyboardInstance.dispatch(section => {
+          section.setOptions({
+            buttonTheme: [
+              {
+                class: "hg-selectedButton",
+                buttons: `${buttonPressed} {${buttonPressed}}`
+              }
+            ]
+          })
+        });
+      }
+    });
+
+    // Removing button style on keyup
+    document.addEventListener("keyup", (event) => {
+      if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
+
+        this.simpleKeyboardInstance.dispatch(section => {
+          section.setOptions({
+            buttonTheme: []
+          })
+        });
+      }
+    });
+  }
+
+  getSimpleKeyboardLayoutKey = (event) => {
+    if(this.simpleKeyboardInstance.options.debug){
+      console.log(event);
+    }
+    
+    let output;
+
+    if(
+      event.code.includes("Numpad") ||
+      event.code.includes("Shift") ||
+      event.code.includes("Space") ||
+      event.code.includes("Backspace")
+    ){
+      output = event.code;
+    } else {
+      output = event.key;
+    }
+
+    /**
+     * If button is not uppercase, casting to lowercase
+     */
+    if (
+      output !== output.toUpperCase() ||
+      (event.code[0] === "F" && Number.isInteger(Number(event.code[1])) && event.code.length <= 3)
+    ) {
+      output = output.toLowerCase();
+    }
+
+    return output;
+  }
+}
+
+export default PhysicalKeyboard;
--- a/src/lib/services/Utilities.js
+++ b/src/lib/services/Utilities.js
@@ -34,6 +34,8 @@ class Utilities {
      output = 'closebracket';
    else if(string === "//")
      output = 'emptybutton';
+    else if(string === ".com")
+      output = 'com';
    else
      output = '';

@@ -53,20 +55,75 @@ class Utilities {

  static getDefaultDiplay(){
    return {
-      '{bksp}': 'delete',
+      '{bksp}': 'backspace',
+      '{backspace}': 'backspace',
      '{enter}': '< enter',
      '{shift}': 'shift',
+      '{shiftleft}': 'shift',
+      '{shiftright}': 'shift',
+      '{alt}': 'alt',
      '{s}': 'shift',
      '{tab}': 'tab',
      '{lock}': 'caps',
+      '{capslock}': 'caps',
      '{accept}': 'Submit',
      '{space}': ' ',
-      '{//}': ' '
+      '{//}': ' ',
+      "{esc}": "esc",
+      "{escape}": "esc",
+      "{f1}": "f1",
+      "{f2}": "f2",
+      "{f3}": "f3",
+      "{f4}": "f4",
+      "{f5}": "f5",
+      "{f6}": "f6",
+      "{f7}": "f7",
+      "{f8}": "f8",
+      "{f9}": "f9",
+      "{f10}": "f10",
+      "{f11}": "f11",
+      "{f12}": "f12",
+      '{numpaddivide}': '/',
+      '{numlock}': 'lock',
+      "{arrowup}": "↑",
+      "{arrowleft}": "←",
+      "{arrowdown}": "↓",
+      "{arrowright}": "→",
+      "{prtscr}": "print",
+      "{scrolllock}": "scroll",
+      "{pause}": "pause",
+      "{insert}": "ins",
+      "{home}": "home",
+      "{pageup}": "up",
+      "{delete}": "del",
+      "{end}": "end",
+      "{pagedown}": "down",
+      "{numpadmultiply}": "*",
+      "{numpadsubtract}": "-",
+      "{numpadadd}": "+",
+      "{numpadenter}": "enter",
+      "{period}": ".",
+      "{numpaddecimal}": ".",
+      "{numpad0}": "0",
+      "{numpad1}": "1",
+      "{numpad2}": "2",
+      "{numpad3}": "3",
+      "{numpad4}": "4",
+      "{numpad5}": "5",
+      "{numpad6}": "6",
+      "{numpad7}": "7",
+      "{numpad8}": "8",
+      "{numpad9}": "9",
    };
  }

-  static getButtonDisplayName = (button, display) => {
-    display = display || Utilities.getDefaultDiplay();
+  static getButtonDisplayName = (button, display, mergeDisplay) => {
+    if(mergeDisplay){
+      display = Object.assign({}, Utilities.getDefaultDiplay(), display);
+    } else {
+      display = display || Utilities.getDefaultDiplay();
+    }
+
    return display[button] || button;
  }

@@ -74,19 +131,50 @@ class Utilities {
    let output = input;
    let newLineOnEnter = options.newLineOnEnter;

-    if(button === "{bksp}" && output.length > 0)
-      output = output.slice(0, -1);
-    else if(button === "{space}")
+    if((button === "{bksp}" || button === "{backspace}") && output.length > 0){
+      /**
+       * Emojis are made out of two characters, so we must take a custom approach to trim them.
+       * For more info: https://mathiasbynens.be/notes/javascript-unicode
+       */
+      let lastTwoChars = output.slice(-2);
+      let emojiMatched = lastTwoChars.match(/([\uD800-\uDBFF][\uDC00-\uDFFF])/g);
+
+      if(emojiMatched){
+        output = output.slice(0, -2);
+      } else {
+        output = output.slice(0, -1);
+      }
+    } else if(button === "{space}")
      output = output + ' ';
    else if(button === "{tab}")
      output = output + "\t";
-    else if(button === "{enter}" && newLineOnEnter)
+    else if((button === "{enter}" || button === "{numpadenter}") && newLineOnEnter)
      output = output + "\n";
-    else if(!button.includes("{") && !button.includes("{"))
+    else if(button.includes("numpad") && Number.isInteger(Number(button[button.length - 2]))){
+      output = output + button[button.length - 2];
+    }
+    else if(button === "{numpaddivide}")
+      output = output + '/';
+    else if(button === "{numpadmultiply}")
+      output = output + '*';
+    else if(button === "{numpadsubtract}")
+      output = output + '-';
+    else if(button === "{numpadadd}")
+      output = output + '+';
+    else if(button === "{numpadadd}")
+      output = output + '+';
+    else if(button === "{numpaddecimal}")
+      output = output + '.';
+    else if(!button.includes("{") && !button.includes("}"))
      output = output + button;

    return output;
  }
+
+  static camelCase = (string) => {
+    return string.toLowerCase().trim().split(/[.\-_\s]/g).reduce((string, word) => string + word[0].toUpperCase() + word.slice(1));
+  };
+
 }

 export default Utilities;
Author	SHA1	Message	Date
Francisco Hodge	36df4e83cc	Readme update	2018-09-24 15:52:54 -04:00
Francisco Hodge	1c98cf85f6	Updated Styling	2018-09-23 23:38:47 -04:00
Francisco Hodge	a1d6bf4fe0	Merge Display feature	2018-09-23 23:38:34 -04:00
Francisco Hodge	345f22827b	Button definitions update	2018-09-23 23:38:11 -04:00
Francisco Hodge	f0ef1e8e7b	Physical Keyboard Highlighting support	2018-09-23 23:37:46 -04:00
Francisco Hodge	1cc5b9b0ee	Multiple Instance Sync Support	2018-09-23 23:36:01 -04:00
Francisco Hodge	7d6e933a4e	Update Keyboard Size	2018-09-23 23:32:53 -04:00
Francisco Hodge	3f4248737f	Adding Full Keyboard Demo	2018-09-23 23:32:30 -04:00
Francisco Hodge	572498022c	Adding build header	2018-09-09 22:47:01 -04:00
Francisco Hodge	8a85b92f8f	Readme update	2018-09-08 10:59:47 -04:00
Francisco Hodge	36123371fb	Readme update	2018-09-08 10:29:13 -04:00
Francisco Hodge	15c929316d	Readme update	2018-08-29 10:47:04 -04:00
Francisco Hodge	30603e76b5	Emoji backspace fix	2018-08-24 00:40:54 -04:00
Francisco Hodge	ad17363173	Fix README typo	2018-08-21 20:14:42 -04:00
Francisco Hodge	1fe93ba6dd	Readme update	2018-08-14 17:00:51 -04:00
Francisco Hodge	7e968e07b8	Readme update	2018-08-14 16:45:54 -04:00
Francisco Hodge	6c5026da34	Updating readme	2018-08-13 21:43:12 -04:00
Francisco Hodge	38f178cc18	Readme update	2018-08-13 21:26:34 -04:00
Francisco Hodge	8e3b0e18c0	Reset className on clear()	2018-08-13 14:48:21 -04:00
Francisco Hodge	c32a8a9568	maintenance: npm audit fix performed	2018-08-13 13:39:50 -04:00
Francisco Hodge	705b5acf53	npm bin update	2018-08-07 10:31:14 -04:00
Francisco Hodge	d4886c1f6f	npm update	2018-08-07 09:08:36 -04:00
Francisco Hodge	6ba68a21e6	npm version bump	2018-08-03 14:47:36 -04:00
Francisco Hodge	958019199a	Removing peer dependencies	2018-08-03 14:46:53 -04:00
Francisco Hodge	65bf9362bd	Dist update	2018-07-31 12:02:22 -04:00
Francisco Hodge	f4a5d946d6	npm version update	2018-07-31 12:00:02 -04:00
Francisco Hodge	12fcae865e	Changed key "delete" to "backspace" as per suggestion	2018-07-31 11:58:19 -04:00
Francisco Hodge	5b84982812	npm version bump	2018-07-19 10:13:27 -04:00
Francisco Hodge	be6d1b0f93	Update badges	2018-07-19 10:13:09 -04:00
Francisco Hodge	0f5dad0527	Switching to JSDelivr for CDN use case	2018-07-13 17:23:28 -04:00
Francisco Hodge	94c14df816	Disable tap to zoom on IOS10+	2018-07-13 17:08:35 -04:00
Francisco Hodge	4206e02ca2	Readme update	2018-07-05 17:24:26 -04:00
Francisco Hodge	3b1e9c131a	Updated README links	2018-07-05 17:20:58 -04:00
Francisco Hodge	e7b604f6b1	Added multiple inputs live demo	2018-07-03 19:10:47 -04:00
Francisco Hodge	66ae70f29a	update example links	2018-06-29 22:29:40 -04:00
Francisco Hodge	470bdc8e74	readme links update	2018-06-29 22:26:35 -04:00
Francisco Hodge	0533b4c2c2	npm bump	2018-06-29 21:43:44 -04:00
Francisco Hodge	5a7fef7643	Updated README with buttonTheme example	2018-06-29 21:43:22 -04:00
Francisco Hodge	d88912cd23	Build update	2018-06-29 20:43:07 -04:00
Francisco Hodge	e138f1fd6f	Support multiple classes for themeButtons	2018-06-29 20:41:14 -04:00
Francisco Hodge	0581247fbe	Build update	2018-06-29 20:17:44 -04:00
Francisco Hodge	d8d8d460c2	Updated dependencies, bump npm version	2018-06-29 20:17:04 -04:00
Francisco Hodge	8b8d90f248	Slightly updating demo css	2018-06-29 20:10:19 -04:00
Francisco Hodge	42e47ef8f9	Adding clearer colors for Keyboard	2018-06-29 20:04:31 -04:00
Francisco Hodge	1e16bde389	Single button styling support (buttonTheme)	2018-06-29 20:01:29 -04:00
Francisco Hodge	201542b189	Minor typo fix	2018-06-29 19:59:03 -04:00
Francisco Hodge	41b23cca89	README update	2018-06-08 10:59:11 -04:00
Francisco Hodge	b2df5cf09e	npm version bump	2018-06-08 10:40:30 -04:00
Francisco Hodge	10bbcdd89c	Updating README cdn usage example	2018-06-08 10:39:20 -04:00
Francisco Hodge	3b75d11b9c	Update build	2018-06-08 10:28:50 -04:00
Francisco Hodge	71136a0d5e	Webpack config adjustment	2018-06-08 10:15:21 -04:00
Francisco Hodge	1aafdeee0a	npm bump	2018-06-08 09:57:53 -04:00
Francisco Hodge	41c87430ff	npm bump	2018-05-30 23:16:41 -04:00
Francisco Hodge	ff2476a331	README typo fix	2018-05-30 23:15:01 -04:00
Francisco Hodge	894483e6a7	Adding editable CodeSandbox examples	2018-05-30 22:28:51 -04:00
Francisco Hodge	cbef48eb3c	npm version bump	2018-05-02 13:01:16 -04:00
Francisco Hodge	2769002ff6	Adding further comments on multiple input example	2018-05-02 12:41:29 -04:00
Francisco Hodge	04088f63c1	Fix image path	2018-04-30 15:33:15 -04:00
Francisco Hodge	69ed611788	Bump npm version	2018-04-30 12:47:31 -04:00
Francisco Hodge	dbed641621	Updating documentation	2018-04-30 12:47:18 -04:00
Francisco Hodge	d1e6630247	README cleanup	2018-04-30 11:11:31 -04:00
Francisco Hodge	d8e8b6076a	Updating dist	2018-04-30 11:07:21 -04:00
Francisco Hodge	7c292d04bf	Adding inputName, setOptions, Use-cases documentation	2018-04-30 11:05:55 -04:00
Francisco Hodge	f91e50a1b2	Bump npm version	2018-04-30 10:37:44 -04:00
Francisco Hodge	c7eb4ba4d3	Adding newLineOnEnter in demo	2018-04-30 10:37:09 -04:00
Francisco Hodge	d407413cce	Adding multiple input demo, per request	2018-04-30 10:36:05 -04:00
Francisco Hodge	f8ebb30d76	Adding Multiple Input support	2018-04-30 10:35:51 -04:00
Francisco Hodge	276a478eb6	Fix typo	2018-04-24 10:10:20 -04:00
Francisco Hodge	c239e21625	Updated examples	2018-04-24 10:06:23 -04:00