Fix README typo

Readme update
2026-02-03 00:06:50 +08:00 · 2018-08-21 20:14:42 -04:00 · 2018-08-14 17:00:51 -04:00 · 2018-08-14 16:45:54 -04:00 · 2018-08-13 21:43:12 -04:00 · 2018-08-13 21:26:34 -04:00
15 changed files with 3681 additions and 2819 deletions
--- a/README.md
+++ b/README.md
@@ -1,16 +1,9 @@
-# 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"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-banner2.png" align="center" width="100%"></a>

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

 ## Installation

@@ -22,7 +15,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,69 +25,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>
-    <script>
-      function keyboard_onChange(input){
-        console.log("Input changed", input);
-      }
+  <input class="input" placeholder="Tap on the virtual keyboard to start" />
+  <div class="simple-keyboard"></div>

-      function keyboard_onKeyPress(button){
-        console.log("Button pressed", button);
-      }
-
-      var myKeyboard = new Keyboard({
-        onChange: input => keyboard_onChange(input),
-        onKeyPress: button => keyboard_onKeyPress(button)
-      });
-    </script>
+  <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.
@@ -123,6 +122,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.
@@ -133,11 +134,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',
@@ -151,12 +152,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.
@@ -181,6 +203,30 @@ newLineOnEnter: false
 inputName: "default"
 ```

+### 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.
@@ -201,7 +247,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
@@ -209,15 +260,25 @@ 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
@@ -237,40 +298,71 @@ keyboard.setOptions({
 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 => console.log(input),
-    onKeyPress: button => console.log(button),
+    onChange: input => onChange(input)
  });

  // Add an event listener for the inputs to be tracked
  document.querySelectorAll('.input')
    .forEach(input => input.addEventListener('focus', onInputFocus));

-  // Set the inputName option on the fly !
-  function onInputFocus(event){
+  /**
+   * 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;
+  }
+
 ```

-[Using several inputs](#using-several-inputs)
+> [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).
+
+<a href="https://github.com/hodgef/simple-keyboard-layouts" title="simple-keyboard-layouts repository"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-banner3layouts.png" align="center"></a>
+
+If you'd like to contribute your own layouts, please submit your pull request at the simple-keyboard-layouts repository.

 ## 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
@@ -278,7 +370,11 @@ For example:
 * `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,2 @@
-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}
+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}.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}
 /*# 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,+BAAiC,CAGlC,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  -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 }\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":""}
--- a/build/index.js
+++ b/build/index.js
--- a/build/index.js.map
+++ b/build/index.js.map
--- 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
@@ -57,7 +57,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.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-keyboard",
-  "version": "2.1.0",
+  "version": "2.3.22",
  "description": "On-screen Virtual Keyboard",
  "main": "build/index.js",
  "scripts": {
@@ -8,6 +8,7 @@
    "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": {
@@ -35,11 +36,11 @@
  "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 +63,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 +74,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/css/App.css
+++ b/src/demo/css/App.css
@@ -7,7 +7,7 @@

 #root .simple-keyboard-preview {
  background: rgba(0,0,0,0.8);
-  border: 20px solid;
+  border: 20px solid rgba(0,0,0,0.1);
  height: 300px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
@@ -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/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,11 @@ 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;
 }

 .simple-keyboard.hg-theme-default .hg-button:active {
--- a/src/lib/components/Keyboard.js
+++ b/src/lib/components/Keyboard.js
@@ -22,7 +22,7 @@ class SimpleKeyboard {
    this.options.inputName = this.options.inputName || "default";
    this.input = {};
    this.input[this.options.inputName] = '';
-
+    this.keyboardDOMClass = keyboardDOMQuery.split('.').join("");

    /**
     * Rendering keyboard
@@ -101,6 +101,7 @@ class SimpleKeyboard {

  clear = () => {
    this.keyboardDOM.innerHTML = '';
+    this.keyboardDOM.className = this.keyboardDOMClass;
  }

  render = () => {
@@ -112,6 +113,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
     */
@@ -120,7 +147,7 @@ class SimpleKeyboard {
    /**
     * Iterating through each row
     */
-    layout[this.options.layoutName].forEach((row, index) => {
+    layout[this.options.layoutName].forEach((row) => {
      let rowArray = row.split(' ');

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

        /**
         * 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/Utilities.js
+++ b/src/lib/services/Utilities.js
@@ -53,7 +53,7 @@ class Utilities {

  static getDefaultDiplay(){
    return {
-      '{bksp}': 'delete',
+      '{bksp}': 'backspace',
      '{enter}': '< enter',
      '{shift}': 'shift',
      '{s}': 'shift',
@@ -82,7 +82,7 @@ class Utilities {
      output = output + "\t";
    else if(button === "{enter}" && newLineOnEnter)
      output = output + "\n";
-    else if(!button.includes("{") && !button.includes("{"))
+    else if(!button.includes("{") && !button.includes("}"))
      output = output + button;

    return output;
Author	SHA1	Message	Date
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