Updating dist

Adding inputName, setOptions, Use-cases documentation
Bump npm version
2026-02-03 00:06:50 +08:00 · 2018-04-30 11:07:21 -04:00 · 2018-04-30 11:05:55 -04:00 · 2018-04-30 10:37:44 -04:00 · 2018-04-30 10:37:09 -04:00 · 2018-04-30 10:36:05 -04:00
10 changed files with 218 additions and 26 deletions
--- a/README.md
+++ b/README.md
@@ -77,6 +77,20 @@ export default App;
 <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);
+      }
+
+      function keyboard_onKeyPress(button){
+        console.log("Button pressed", button);
+      }
+
+      var myKeyboard = new Keyboard({
+        onChange: input => keyboard_onChange(input),
+        onKeyPress: button => keyboard_onKeyPress(button)
+      });
+    </script>
 </body>
 </html>
 ````
@@ -159,6 +173,14 @@ debug: false
 newLineOnEnter: false
 ```

+### inputName
+
+> Allows you to use a single simple-keyboard instance for several inputs. 
+
+```js
+inputName: "default"
+```
+
 ## Methods

 simple-keyboard has a few methods you can use to further control it's behavior.
@@ -198,6 +220,49 @@ let input = keyboard.getInput();
 keyboard.setInput("Hello World!");
 ```

+### 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
+  // Initialize simple-keyboard as usual
+  var keyboard = new Keyboard({
+    onChange: input => console.log(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));
+
+  // Set the inputName option on the fly !
+  function onInputFocus(event){
+    keyboard.setOptions({
+      inputName: event.target.id
+    });
+  }
+```
+
+[Using several inputs](#using-several-inputs)
+
 ## Demo

 <img src="src/demo/images/demo.gif" align="center" width="600">
--- a/build/index.js
+++ b/build/index.js
--- a/build/index.js.map
+++ b/build/index.js.map
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-keyboard",
-  "version": "2.0.3",
+  "version": "2.1.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	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