npm version bump

Updating README cdn usage example
Update build
2026-02-03 00:06:50 +08:00 · 2018-06-08 10:40:30 -04:00 · 2018-06-08 10:39:20 -04:00 · 2018-06-08 10:28:50 -04:00 · 2018-06-08 10:15:21 -04:00 · 2018-06-08 09:57:53 -04:00
13 changed files with 321 additions and 63 deletions
--- a/README.md
+++ b/README.md
@@ -2,14 +2,10 @@

 [![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.
+<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.

-> 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>
+<img src="https://franciscohodge.com/project-pages/simple-keyboard/images/keyboard.png" align="center" width="100%">


 ## Installation
@@ -32,36 +28,30 @@
 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 => this.onChange(input),
+  onKeyPress: button => this.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
@@ -69,18 +59,44 @@ export default App;
 ### 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.rawgit.com/hodgef/simple-keyboard/d477c35c/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.rawgit.com/hodgef/simple-keyboard/3b75d11b9c1d782d92103d1df0970734e6d6df83/build/index.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.
@@ -159,6 +175,38 @@ debug: false
 newLineOnEnter: false
 ```

+### inputName
+
+> Allows you to use a single simple-keyboard instance for several inputs. 
+
+```js
+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.
@@ -179,7 +227,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,7 +240,12 @@ 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
@@ -195,17 +253,88 @@ let input = keyboard.getInput();
 > Set the keyboard's input. Useful if you want the keybord to initialize with a default value, for example.

 ```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"
+});
+```
+
+## Use-cases
+
+### 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).
+
 ## Demo

-<img src="src/demo/images/demo.gif" align="center" width="600">
-
-### Live demo
+<img src="https://franciscohodge.com/project-pages/simple-keyboard/images/demo.gif" align="center" width="600">

 [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
--- 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
@@ -1,6 +1,6 @@
 {
  "name": "simple-keyboard",
-  "version": "2.0.0",
+  "version": "2.1.5",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-keyboard",
-  "version": "2.0.3",
+  "version": "2.2.0",
  "description": "On-screen Virtual Keyboard",
  "main": "build/index.js",
  "scripts": {
--- 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/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
--- a/src/demo/css/MultipleInputsDemo.css
+++ b/src/demo/css/MultipleInputsDemo.css
@@ -0,0 +1,40 @@
+#root {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  max-width: 1000px;
+  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;
+}
+
+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.js
+++ b/src/lib/components/Keyboard.js
@@ -17,9 +17,12 @@ 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] = '';
+

    /**
     * Rendering keyboard
@@ -52,10 +55,13 @@ 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);
@@ -64,7 +70,7 @@ class SimpleKeyboard {
       * 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 +78,19 @@ class SimpleKeyboard {
    }
  }

-  clearInput = () => {
-    this.input = '';
+  clearInput = (inputName) => {
+    inputName = inputName || this.options.inputName;
+    this.input[this.options.inputName] = '';
  }

-  getInput = () => {
-    return this.input;
+  getInput = (inputName) => {
+    inputName = inputName || this.options.inputName;
+    return this.input[this.options.inputName];
  }

-  setInput = input => {
-    this.input = input;
+  setInput = (input, inputName) => {
+    inputName = inputName || this.options.inputName;
+    this.input[inputName] = input;
  }

  setOptions = option => {
Author	SHA1	Message	Date
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