Code optimization, added onKeyReleased. Fixes #144, #145

src/lib/services/PhysicalKeyboard.js

@@ -1,3 +1,5 @@
+import Utilities from "../services/Utilities";
+
 /**
  * Physical Keyboard Service
  */
@@ -5,66 +7,47 @@ class PhysicalKeyboard {
   /**
    * Creates an instance of the PhysicalKeyboard service
    */
-  constructor(simpleKeyboardInstance) {
+  constructor({ dispatch, getOptions }) {
     /**
      * @type {object} A simple-keyboard instance
      */
-    this.simpleKeyboardInstance = simpleKeyboardInstance;
+    this.dispatch = dispatch;
+    this.getOptions = getOptions;
 
     /**
      * Bindings
      */
-    this.initKeyboardListener = this.initKeyboardListener.bind(this);
-    this.getSimpleKeyboardLayoutKey = this.getSimpleKeyboardLayoutKey.bind(
-      this
-    );
-
-    /**
-     * Initialize key listeners
-     */
-    this.initKeyboardListener();
+    Utilities.bindMethods(PhysicalKeyboard, this);
   }
 
-  /**
-   * Initializes key event listeners
-   */
-  initKeyboardListener() {
-    // Adding button style on keydown
-    document.addEventListener("keydown", event => {
-      if (this.simpleKeyboardInstance.options.physicalKeyboardHighlight) {
-        let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+  handleHighlightKeyDown(event) {
+    let options = this.getOptions();
+    let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
 
-        this.simpleKeyboardInstance.dispatch(instance => {
-          let buttonDOM =
-            instance.getButtonElement(buttonPressed) ||
-            instance.getButtonElement(`{${buttonPressed}}`);
+    this.dispatch(instance => {
+      let buttonDOM =
+        instance.getButtonElement(buttonPressed) ||
+        instance.getButtonElement(`{${buttonPressed}}`);
 
-          if (buttonDOM) {
-            buttonDOM.style.backgroundColor =
-              this.simpleKeyboardInstance.options
-                .physicalKeyboardHighlightBgColor || "#9ab4d0";
-            buttonDOM.style.color =
-              this.simpleKeyboardInstance.options
-                .physicalKeyboardHighlightTextColor || "white";
-          }
-        });
+      if (buttonDOM) {
+        buttonDOM.style.backgroundColor =
+          options.physicalKeyboardHighlightBgColor || "#9ab4d0";
+        buttonDOM.style.color =
+          options.physicalKeyboardHighlightTextColor || "white";
       }
     });
+  }
 
-    // Removing button style on keyup
-    document.addEventListener("keyup", event => {
-      if (this.simpleKeyboardInstance.options.physicalKeyboardHighlight) {
-        let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+  handleHighlightKeyUp(event) {
+    let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
 
-        this.simpleKeyboardInstance.dispatch(instance => {
-          let buttonDOM =
-            instance.getButtonElement(buttonPressed) ||
-            instance.getButtonElement(`{${buttonPressed}}`);
+    this.dispatch(instance => {
+      let buttonDOM =
+        instance.getButtonElement(buttonPressed) ||
+        instance.getButtonElement(`{${buttonPressed}}`);
 
-          if (buttonDOM && buttonDOM.removeAttribute) {
-            buttonDOM.removeAttribute("style");
-          }
-        });
+      if (buttonDOM && buttonDOM.removeAttribute) {
+        buttonDOM.removeAttribute("style");
       }
     });
   }

src/lib/services/Utilities.js

@@ -5,11 +5,10 @@ class Utilities {
   /**
    * Creates an instance of the Utility service
    */
-  constructor(simpleKeyboardInstance) {
-    /**
-     * @type {object} A simple-keyboard instance
-     */
-    this.simpleKeyboardInstance = simpleKeyboardInstance;
+  constructor({ getOptions, getCaretPosition, dispatch }) {
+    this.getOptions = getOptions;
+    this.getCaretPosition = getCaretPosition;
+    this.dispatch = dispatch;
 
     /**
      * Bindings
@@ -125,11 +124,11 @@ class Utilities {
    *
    * @param  {string} button The button's layout name
    * @param  {string} input The input string
-   * @param  {object} options The simple-keyboard options object
    * @param  {number} caretPos The cursor's current position
    * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
    */
-  getUpdatedInput(button, input, options, caretPos, moveCaret) {
+  getUpdatedInput(button, input, caretPos, moveCaret) {
+    let options = this.getOptions();
     let output = input;
 
     if (
@@ -187,43 +186,34 @@ class Utilities {
    * @param  {boolean} minus Whether the cursor should be moved to the left or not.
    */
   updateCaretPos(length, minus) {
-    let newCaretPos = this.updateCaretPosAction(
-      this.simpleKeyboardInstance,
-      length,
-      minus
-    );
+    let newCaretPos = this.updateCaretPosAction(length, minus);
 
-    if (this.simpleKeyboardInstance.options.syncInstanceInputs) {
-      this.simpleKeyboardInstance.dispatch(instance => {
-        instance.caretPosition = newCaretPos;
-      });
-    }
+    this.dispatch(instance => {
+      instance.caretPosition = newCaretPos;
+    });
   }
 
   /**
    * Action method of updateCaretPos
    *
-   * @param  {object} instance The instance whose position should be updated
    * @param  {number} length Represents by how many characters the input should be moved
    * @param  {boolean} minus Whether the cursor should be moved to the left or not.
    */
-  updateCaretPosAction(instance, length, minus) {
+  updateCaretPosAction(length, minus) {
+    let options = this.getOptions();
+    let caretPosition = this.getCaretPosition();
+
     if (minus) {
-      if (instance.caretPosition > 0)
-        instance.caretPosition = instance.caretPosition - length;
+      if (caretPosition > 0) caretPosition = caretPosition - length;
     } else {
-      instance.caretPosition = instance.caretPosition + length;
+      caretPosition = caretPosition + length;
     }
 
-    if (this.simpleKeyboardInstance.options.debug) {
-      console.log(
-        "Caret at:",
-        instance.caretPosition,
-        `(${instance.keyboardDOMClass})`
-      );
+    if (options.debug) {
+      console.log("Caret at:", caretPosition, `(${this.keyboardDOMClass})`);
     }
 
-    return instance.caretPosition;
+    return caretPosition;
   }
 
   /**
@@ -263,7 +253,9 @@ class Utilities {
    * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
    */
   removeAt(source, position, moveCaret) {
-    if (this.simpleKeyboardInstance.caretPosition === 0) {
+    let caretPosition = this.getCaretPosition();
+
+    if (caretPosition === 0) {
       return source;
     }
 
@@ -306,10 +298,10 @@ class Utilities {
    * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
    *
    * @param  {object} inputObj
-   * @param  {object} options
    * @param  {string} updatedInput
    */
-  handleMaxLength(inputObj, options, updatedInput) {
+  handleMaxLength(inputObj, updatedInput) {
+    let options = this.getOptions();
     let maxLength = options.maxLength;
     let currentInput = inputObj[options.inputName];
     let condition = currentInput.length === maxLength;
@@ -399,6 +391,8 @@ class Utilities {
    * @param  {string} string The string to transform.
    */
   camelCase(string) {
+    if (!string) return false;
+
     return string
       .toLowerCase()
       .trim()

src/lib/services/tests/Utilities.test.js

@@ -31,7 +31,7 @@ it('Keyboard {bksp} button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{bksp}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{bksp}", "test");
   
   expect(output).toBe("tes");
 });
@@ -41,7 +41,7 @@ it('Keyboard {space} button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{space}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{space}", "test");
   
   expect(output).toBe("test ");
 });
@@ -51,7 +51,7 @@ it('Keyboard {tab} button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{tab}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{tab}", "test");
   
   expect(output).toBe("test\t");
 });
@@ -63,7 +63,7 @@ it('Keyboard {tab} button will work with tabCharOnTab:false', () => {
     tabCharOnTab: false
   });
 
-  let output = keyboard.utilities.getUpdatedInput("{tab}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{tab}", "test");
   
   expect(output).toBe("test");
 });
@@ -73,7 +73,7 @@ it('Keyboard {enter} button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{enter}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{enter}", "test");
   
   expect(output).toBe("test");
 });
@@ -85,7 +85,7 @@ it('Keyboard {enter} button will work with newLineOnEnter:true', () => {
     newLineOnEnter: true
   });
 
-  let output = keyboard.utilities.getUpdatedInput("{enter}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{enter}", "test");
   
   expect(output).toBe("test\n");
 });
@@ -96,7 +96,7 @@ it('Keyboard {numpadX} buttons will work', () => {
   let keyboard = new Keyboard();
 
   for(let i = 0;i<=9;i++){
-    let output = keyboard.utilities.getUpdatedInput(`{numpad${i}}`, "test", keyboard.options);
+    let output = keyboard.utilities.getUpdatedInput(`{numpad${i}}`, "test");
     expect(output).toBe(`test${i}`);
   }
 });
@@ -106,7 +106,7 @@ it('Keyboard {numpaddivide} button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpaddivide}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{numpaddivide}", "test");
   
   expect(output).toBe("test/");
 });
@@ -116,7 +116,7 @@ it('Keyboard {numpadmultiply} button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadmultiply}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{numpadmultiply}", "test");
   
   expect(output).toBe("test*");
 });
@@ -126,7 +126,7 @@ it('Keyboard {numpadsubtract} button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadsubtract}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{numpadsubtract}", "test");
   
   expect(output).toBe("test-");
 });
@@ -136,7 +136,7 @@ it('Keyboard {numpadadd} button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
   
   expect(output).toBe("test+");
 });
@@ -146,7 +146,7 @@ it('Keyboard {numpadadd} button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
   
   expect(output).toBe("test+");
 });
@@ -156,7 +156,7 @@ it('Keyboard {numpaddecimal} button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpaddecimal}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{numpaddecimal}", "test");
   
   expect(output).toBe("test.");
 });
@@ -172,7 +172,7 @@ it('Keyboard custom function buttons will work', () => {
     }
   });
 
-  let output = keyboard.utilities.getUpdatedInput("{randombuttontest}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{randombuttontest}", "test");
   
   expect(output).toBe("test");
   expect(keyboard.getButtonElement("{randombuttontest}").onclick).toBeTruthy();
@@ -183,7 +183,7 @@ it('Keyboard "{" button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("{", "test");
   
   expect(output).toBe("test{");
 });
@@ -193,7 +193,7 @@ it('Keyboard "}" button will work', () => {
 
   let keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("}", "test", keyboard.options);
+  let output = keyboard.utilities.getUpdatedInput("}", "test");
   
   expect(output).toBe("test}");
 });
@@ -205,7 +205,7 @@ it('Keyboard standard button will affect input', () => {
 
   for (let i = 65; i <= 90; i++) {
     let char = String.fromCharCode(i);
-    let output = keyboard.utilities.getUpdatedInput(char, "test", keyboard.options);
+    let output = keyboard.utilities.getUpdatedInput(char, "test");
     expect(output).toBe(`test${char}`);
   }
 });
@@ -213,8 +213,9 @@ it('Keyboard standard button will affect input', () => {
 it('Keyboard updateCaretPos will work with minus', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
-  keyboard.options.syncInstanceInputs = true;
+  let keyboard = new Keyboard({
+    syncInstanceInputs: true
+  });
 
   keyboard.caretPosition = 5;
   keyboard.utilities.updateCaretPos(2, true);
@@ -282,7 +283,7 @@ it('Keyboard addStringAt will respect maxLength', () => {
   keyboard.setInput("test");
   keyboard.caretPosition = 4;
 
-  keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq")
+  keyboard.utilities.handleMaxLength(keyboard.input, "testq")
   keyboard.utilities.addStringAt("test", "q", 4);
 
   expect(keyboard.caretPosition).toBe(4);
@@ -297,7 +298,7 @@ it('Keyboard handleMaxLength will exit out on same updatedInput', () => {
 
   keyboard.setInput("test");
 
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "test")
+  let output = keyboard.utilities.handleMaxLength(keyboard.input, "test")
 
   expect(output).toBeFalsy();
 });
@@ -313,7 +314,7 @@ it('Keyboard handleMaxLength will work with object maxLength', () => {
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
+  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeTruthy();
 });
@@ -330,7 +331,7 @@ it('Keyboard handleMaxLength will work with object maxLength and debug', () => {
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
+  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeTruthy();
 });
@@ -346,7 +347,7 @@ it('Keyboard handleMaxLength will return false if obj maxLength not reached', ()
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
+  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeFalsy();
 });
@@ -361,7 +362,7 @@ it('Keyboard handleMaxLength will work without debug', () => {
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
+  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeTruthy();
 });
@@ -376,7 +377,7 @@ it('Keyboard handleMaxLength will work with numeric maxLength', () => {
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
+  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeFalsy();
 });
@@ -390,7 +391,7 @@ it('Keyboard handleMaxLength wont work with non numeric or object maxLength', ()
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
+  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeFalsy();
 });
@@ -405,7 +406,7 @@ it('Keyboard handleMaxLength wont work with non numeric or object maxLength (wit
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
+  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeFalsy();
 });
@@ -483,4 +484,10 @@ it('Keyboard will work with custom (and weird) class', () => {
   testUtil.setDOM("my--weird--class");
   let keyboard = new Keyboard(".my--weird--class");
   expect(keyboard.keyboardDOMClass).toBe("my--weird--class");
+});
+
+it('Keyboard camelCase will work with empty strings', () => {
+  testUtil.setDOM();
+  let keyboard = new Keyboard();
+  expect(keyboard.utilities.camelCase()).toBeFalsy();
 });