From 3f4248737fe0afdd6b579c4aab6a3b5f15cde659 Mon Sep 17 00:00:00 2001
From: Francisco Hodge <hello@franciscohodge.com>
Date: Sun, 23 Sep 2018 23:32:30 -0400
Subject: [PATCH] Adding Full Keyboard Demo

---
 src/demo/FullKeyboardDemo.js      | 150 ++++++++++++++++++++++++++++++
 src/demo/css/FullKeyboardDemo.css | 116 +++++++++++++++++++++++
 2 files changed, 266 insertions(+)
 create mode 100644 src/demo/FullKeyboardDemo.js
 create mode 100644 src/demo/css/FullKeyboardDemo.css

diff --git a/src/demo/FullKeyboardDemo.js b/src/demo/FullKeyboardDemo.js
new file mode 100644
index 00000000..4715c081
--- /dev/null
+++ b/src/demo/FullKeyboardDemo.js
@@ -0,0 +1,150 @@
+import Keyboard from '../lib';
+import './css/FullKeyboardDemo.css';
+
+class App {
+  constructor(){
+    document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+
+    this.keyboardSections = [];
+  }
+
+  onDOMLoaded = () => {
+    /**
+     * Adding preview (demo only)
+     * In production, this would be part of your HTML file
+     */
+    document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+
+    <div class="keyboardContainer">
+      <div class="simple-keyboard-main"></div>
+  
+      <div class="controlArrows">
+        <div class="simple-keyboard-control"></div>
+        <div class="simple-keyboard-arrows"></div>
+      </div>
+  
+      <div class="numPad">
+        <div class="simple-keyboard-numpad"></div>
+        <div class="simple-keyboard-numpadEnd"></div>
+      </div>
+      
+    </div>
+    `);
+    document.querySelector('.simple-keyboard').outerHTML = "";
+
+
+    /**
+     * Start of demo
+     */
+    this.commonKeyboardOptions = {
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      theme: "simple-keyboard hg-theme-default hg-layout-default",
+      physicalKeyboardHighlight: true,
+      syncInstanceInputs: true,
+      mergeDisplay: true
+    };
+    
+    this.keyboard = new Keyboard(".simple-keyboard-main", {
+      ...this.commonKeyboardOptions,
+      layout: {
+        default: [
+          "{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
+          "` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
+          "{tab} q w e r t y u i o p [ ] \\",
+          "{capslock} a s d f g h j k l ; ' {enter}",
+          "{shiftleft} z x c v b n m , . / {shiftright}",
+          ".com @ {space}"
+        ],
+        shift: [
+          "{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
+          "~ ! @ # $ % ^ & * ( ) _ + {backspace}",
+          "{tab} Q W E R T Y U I O P { } |",
+          '{capslock} A S D F G H J K L : " {enter}',
+          "{shiftleft} Z X C V B N M < > ? {shiftright}",
+          ".com @ {space}"
+        ]
+      }
+    });
+    
+    this.keyboardControlPad = new Keyboard(".simple-keyboard-control", {
+      ...this.commonKeyboardOptions,
+      layout: {
+        default: [
+          "{prtscr} {scrolllock} {pause}",
+          "{insert} {home} {pageup}",
+          "{delete} {end} {pagedown}"
+        ]
+      }
+    });
+    
+    this.keyboardArrows = new Keyboard(".simple-keyboard-arrows", {
+      ...this.commonKeyboardOptions,
+      layout: {
+        default: ["{arrowup}", "{arrowleft} {arrowdown} {arrowright}"]
+      }
+    });
+    
+    this.keyboardNumPad = new Keyboard(".simple-keyboard-numpad", {
+      ...this.commonKeyboardOptions,
+      layout: {
+        default: [
+          "{numlock} {numpaddivide} {numpadmultiply}",
+          "{numpad7} {numpad8} {numpad9}",
+          "{numpad4} {numpad5} {numpad6}",
+          "{numpad1} {numpad2} {numpad3}", "{numpad0} {numpaddecimal}"]
+      }
+    });
+    
+    this.keyboardNumPadEnd = new Keyboard(".simple-keyboard-numpadEnd", {
+      ...this.commonKeyboardOptions,
+      layout: {
+        default: ["{numpadsubtract}", "{numpadadd}", "{numpadenter}"]
+      }
+    });
+
+    /**
+     * Physical Keyboard support
+     * Whenever the input is changed with the keyboard, updating SimpleKeyboard's internal input
+     */
+    document.querySelector(".input").addEventListener("keyup", () => {
+      let input = document.querySelector(".input").value;
+      this.keyboard.setInput(input);
+    });
+
+    /*
+    // Uncomment this to test the function keys (f1-12)
+    document.addEventListener("keydown", (event) => {
+      event.preventDefault();
+    });*/
+  }
+
+  onChange = (input) => {
+    document.querySelector(".input").value = input;
+    this.keyboard.setInput(input);
+
+    console.log("Input changed", input);
+  }
+  
+  onKeyPress = (button) => {
+    console.log("Button pressed", button);
+  
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{shiftleft}" || button === "{shiftright}" || button === "{capslock}") this.handleShift();
+  }
+  
+  handleShift = () => {
+    let currentLayout = this.keyboard.options.layoutName;
+    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+  
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/demo/css/FullKeyboardDemo.css b/src/demo/css/FullKeyboardDemo.css
new file mode 100644
index 00000000..b9ce1365
--- /dev/null
+++ b/src/demo/css/FullKeyboardDemo.css
@@ -0,0 +1,116 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.keyboardContainer {
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.1);
+  justify-content: center;
+  width: 1024px;
+  margin: 0 auto;
+  border-radius: 5px;
+}
+
+.simple-keyboard.hg-theme-default {
+  display: inline-block;
+}
+
+.simple-keyboard-main.simple-keyboard {
+  width: 640px;
+  min-width: 640px;
+  background: none;
+}
+
+.simple-keyboard-main.simple-keyboard .hg-row:first-child {
+  margin-bottom: 10px;
+}
+
+.simple-keyboard-arrows.simple-keyboard {
+  align-self: flex-end;
+  background: none;
+}
+
+.simple-keyboard .hg-button.hg-selectedButton {
+  background: rgba(5, 25, 70, 0.53);
+  color: white;
+}
+
+.simple-keyboard .hg-button.emptySpace {
+  pointer-events: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+.simple-keyboard-arrows .hg-row {
+  justify-content: center;
+}
+
+.simple-keyboard-arrows .hg-button {
+  width: 50px;
+  flex-grow: 0;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.controlArrows {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column;
+}
+
+.simple-keyboard-control.simple-keyboard {
+  background: none;
+}
+
+.simple-keyboard-control.simple-keyboard .hg-row:first-child {
+  margin-bottom: 10px;
+}
+
+.simple-keyboard-control .hg-button {
+  width: 50px;
+  flex-grow: 0;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.numPad {
+  display: flex;
+  align-items: flex-end;
+}
+
+.simple-keyboard-numpad.simple-keyboard {
+  background: none;
+}
+
+.simple-keyboard-numpad.simple-keyboard {
+  width: 160px;
+}
+
+.simple-keyboard-numpad.simple-keyboard .hg-button {
+  width: 50px;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.simple-keyboard-numpadEnd.simple-keyboard {
+  width: 50px;
+  background: none;
+  margin: 0;
+  padding: 5px 5px 5px 0;
+}
+
+.simple-keyboard-numpadEnd.simple-keyboard .hg-button {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
\ No newline at end of file