From 70b99b44c6a6f8006b054f82e0fbed367e7222a1 Mon Sep 17 00:00:00 2001
From: Francisco Hodge <hello@franciscohodge.com>
Date: Thu, 7 Nov 2019 11:26:19 -0500
Subject: [PATCH] Demo update

---
 src/demo/MultipleKeyboardsDestroyDemo.js      | 75 +++++++++++++++++++
 src/demo/css/MultipleKeyboardsDestroyDemo.css | 12 +++
 src/demo/index.js                             |  1 +
 3 files changed, 88 insertions(+)
 create mode 100644 src/demo/MultipleKeyboardsDestroyDemo.js
 create mode 100644 src/demo/css/MultipleKeyboardsDestroyDemo.css

diff --git a/src/demo/MultipleKeyboardsDestroyDemo.js b/src/demo/MultipleKeyboardsDestroyDemo.js
new file mode 100644
index 00000000..7ed85e19
--- /dev/null
+++ b/src/demo/MultipleKeyboardsDestroyDemo.js
@@ -0,0 +1,75 @@
+import Keyboard from "../lib";
+import "./css/MultipleKeyboardsDestroyDemo.css";
+
+const setDOM = () => {
+  document.querySelector("#root").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+
+    <input class="input2" placeholder="Tap on the virtual keyboard to start" />
+    <div class="keyboard2"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      debug: true
+    });
+
+    this.keyboard2 = new Keyboard(".keyboard2", {
+      theme: "simple-keyboard hg-theme-default",
+      onChange: input => this.onChange(input, "input2"),
+      onKeyPress: button => this.onKeyPress(button, "keyboard2"),
+      debug: true
+    });
+
+    console.log(this.keyboard);
+    setTimeout(this.keyboard.destroy, 10000);
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+
+    document.querySelector(".input2").addEventListener("input", event => {
+      this.keyboard2.setInput(event.target.value);
+    });
+  }
+
+  onChange(input, inputClass) {
+    document.querySelector(`.${inputClass || "input"}`).value = input;
+    console.log("Input changed", input);
+  }
+
+  onKeyPress(button, keyboardInstanceKey) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}")
+      this.handleShift(keyboardInstanceKey);
+  }
+
+  handleShift(keyboardInstanceKey) {
+    let keyboard = this[keyboardInstanceKey || "keyboard"];
+    let currentLayout = keyboard.options.layoutName;
+    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;
diff --git a/src/demo/css/MultipleKeyboardsDestroyDemo.css b/src/demo/css/MultipleKeyboardsDestroyDemo.css
new file mode 100644
index 00000000..575ed60e
--- /dev/null
+++ b/src/demo/css/MultipleKeyboardsDestroyDemo.css
@@ -0,0 +1,12 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}
diff --git a/src/demo/index.js b/src/demo/index.js
index 0a99005a..a5d917f1 100644
--- a/src/demo/index.js
+++ b/src/demo/index.js
@@ -6,6 +6,7 @@ import "./css/index.css";
 import BasicDemo from "./BasicDemo";
 //import FullKeyboardDemo from "./FullKeyboardDemo";
 //import ButtonThemeDemo from "./ButtonThemeDemo";
+//import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo";
 
 /**
  * Selected demo