npm version bump

Removing peer dependencies
Dist update
2026-07-14 00:00:06 +08:00 · 2018-08-03 14:47:36 -04:00 · 2018-08-03 14:46:53 -04:00 · 2018-07-31 12:02:22 -04:00 · 2018-07-31 12:00:02 -04:00 · 2018-07-31 11:58:19 -04:00
14 changed files with 3575 additions and 2337 deletions
@@ -1,15 +1,13 @@
 # simple-keyboard
-[![npm](https://img.shields.io/npm/v/simple-keyboard.svg)](https://www.npmjs.com/package/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)
 <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!
+<a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard.png" align="center"></a>
 > The easily customisable and responsive on-screen virtual keyboard for Javascript projects.
-<img src="src/demo/images/keyboard.PNG" align="center" width="100%">
+<a href="https://franciscohodge.com/simple-keyboard/demo" title="View Demo"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/k2.png" align="center" width="100%"></a>
 <b>[Live Demo](https://franciscohodge.com/simple-keyboard/demo)</b>
 ## Installation
@@ -22,7 +20,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 +30,75 @@
 import Keyboard from 'simple-keyboard';
 import 'simple-keyboard/build/css/index.css';
-class App {
+let keyboard = new Keyboard({
  constructor(){
    document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
  }
  onDOMLoaded = () => {
    this.keyboard = new Keyboard({
  onChange: input => this.onChange(input),
  onKeyPress: button => this.onKeyPress(button)
-    });
+});
  }
-  onChange = input => {
+function onChange(input){
  document.querySelector(".input").value = input;
  console.log("Input changed", input);
  }
  onKeyPress = button => {
    console.log("Button pressed", button);
  }
 }
-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>
 <html lang="en">
 <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>
  <input class="input" placeholder="Tap on the virtual keyboard to start" />
  <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);
      }
-      function keyboard_onKeyPress(button){
+  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.min.js"></script>
-        console.log("Button pressed", button);
+  <script src="src/index.js"></script>
      }
      var myKeyboard = new Keyboard({
        onChange: input => keyboard_onChange(input),
        onKeyPress: button => keyboard_onKeyPress(button)
      });
    </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.
@@ -133,11 +137,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 +155,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 +206,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 +250,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 +263,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 +301,63 @@ 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),
+    onChange: input => onChange(input)
    onKeyPress: button => console.log(button),
  });
  // 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 !
  function onInputFocus(event){
    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)
 ## 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 +365,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)
@@ -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}.simple-keyboard.hg-layout-default .hg-button.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*/
@@ -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,6DACE,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.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.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":""}
@@ -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.
@@ -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.
@@ -1,6 +1,6 @@
 {
  "name": "simple-keyboard",
-  "version": "2.1.0",
+  "version": "2.3.11",
  "description": "On-screen Virtual Keyboard",
  "main": "build/index.js",
  "scripts": {
@@ -35,11 +35,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 +62,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 +73,7 @@
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.4",
    "webpack-manifest-plugin": "1.3.2",
-    "whatwg-fetch": "2.0.3",
+    "whatwg-fetch": "2.0.3"
    "prop-types": "^15.6.1"
  },
  "peerDependencies": {
    "react": ">=0.14",
    "react-dom": ">=0.14"
  },
  "jest": {
    "collectCoverageFrom": [
@@ -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>
@@ -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 {
@@ -9,6 +9,7 @@ body, html {
  user-select: none;
  box-sizing: border-box;
  overflow: hidden;
  touch-action: manipulation;
 }
 .simple-keyboard .hg-row {
@@ -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 {
@@ -112,6 +112,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 +146,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 +158,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);
        /**
@@ -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	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
`@@ -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}.simple-keyboard.hg-layout-default .hg-button.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/`	`/# sourceMappingURL=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,6DACE,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.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.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":""}