Docs update

docs/file/src/demo/App.js.html

@@ -68,12 +68,16 @@ class App {
      * Creates a new simple-keyboard instance
      */
     this.keyboard = new Keyboard({
-      //debug: true,
+      debug: true,
       layoutName: this.layoutName,
       onChange: input => this.onChange(input),
       onKeyPress: button => this.onKeyPress(button),
       newLineOnEnter: true,
       physicalKeyboardHighlight: true,
+      inputName: "inputPhone",
+      maxLength: {
+        inputPhone: 11
+      }
     });
   
     /**
@@ -81,7 +85,7 @@ class App {
      */
     document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
     <div class="simple-keyboard-preview">
-      <textarea class="input"></textarea>
+      <textarea class="input" maxlength="11"></textarea>
     </div>
     `);
   

docs/file/src/lib/components/Keyboard.js.html

@@ -215,7 +215,9 @@ class SimpleKeyboard {
     if(!this.input[this.options.inputName])
       this.input[this.options.inputName] = '';
 
-    let updatedInput = this.utilities.getUpdatedInput(button, this.input[this.options.inputName], this.options, this.caretPosition);
+    let updatedInput = this.utilities.getUpdatedInput(
+      button, this.input[this.options.inputName], this.options, this.caretPosition
+    );
 
     if(this.input[this.options.inputName] !== updatedInput){
 
@@ -226,7 +228,9 @@ class SimpleKeyboard {
         return false;
       }
 
-      this.input[this.options.inputName] = updatedInput;
+      this.input[this.options.inputName]  = this.utilities.getUpdatedInput(
+        button, this.input[this.options.inputName], this.options, this.caretPosition, true
+      );
 
       if(debug)
         console.log('Input changed:', this.input);
@@ -301,12 +305,19 @@ class SimpleKeyboard {
    */
   /* istanbul ignore next */
   handleButtonHold(button){
+    if(this.holdInteractionTimeout)
+      clearTimeout(this.holdInteractionTimeout);
+
     /**
      * @type {object} Timeout dictating the speed of key hold iterations
      */
     this.holdInteractionTimeout = setTimeout(() => {
-      this.handleButtonClicked(button);
-      this.handleButtonHold(button);
+      if(this.isMouseHold){
+        this.handleButtonClicked(button);
+        this.handleButtonHold(button);
+      } else {
+        clearTimeout(this.holdInteractionTimeout);
+      }
     }, 100);
   }
 
@@ -551,8 +562,9 @@ class SimpleKeyboard {
     let targetTagName = event.target.tagName.toLowerCase();
 
     if(
-      targetTagName === "textarea" ||
-      targetTagName === "input"
+      (targetTagName === "textarea" ||
+      targetTagName === "input") &&
+      !this.options.disableCaretPositioning
     ){
       /**
        * Tracks current cursor position
@@ -726,7 +738,10 @@ class SimpleKeyboard {
          */
         var buttonDOM = document.createElement('div');
         buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
-        buttonDOM.onclick = () => this.handleButtonClicked(button);
+        buttonDOM.onclick = () => {
+          this.isMouseHold = false;
+          this.handleButtonClicked(button);
+        }
         buttonDOM.onmousedown = (e) => this.handleButtonMouseDown(button, e);
 
         /**
@@ -779,17 +794,17 @@ class SimpleKeyboard {
      */
     this.onRender();
 
+    /**
+     * Handling mouseup
+     */
+    document.onmouseup = () => this.handleButtonMouseUp();
+
     if(!this.initialized){
       /**
        * Ensures that onInit is only called once per instantiation
        */
       this.initialized = true;
 
-      /**
-       * Handling mouseup
-       */
-      document.onmouseup = () => this.handleButtonMouseUp();
-
       /**
        * Calling onInit
        */

docs/file/src/lib/services/Utilities.js.html

@@ -173,48 +173,51 @@ class Utilities {
    * @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){
+  getUpdatedInput(button, input, options, caretPos, moveCaret){
     
     let output = input;
 
     if((button === "{bksp}" || button === "{backspace}") && output.length > 0){
-      output = this.removeAt(output, caretPos);
+      output = this.removeAt(output, caretPos, moveCaret);
 
     } else if(button === "{space}")
-      output = this.addStringAt(output, " ", caretPos);
+      output = this.addStringAt(output, " ", caretPos, moveCaret);
 
     else if(button === "{tab}" && !(typeof options.tabCharOnTab === "boolean" && options.tabCharOnTab === false)){
-      output = this.addStringAt(output, "\t", caretPos);
+      output = this.addStringAt(output, "\t", caretPos, moveCaret);
 
     } else if((button === "{enter}" || button === "{numpadenter}") && options.newLineOnEnter)
-      output = this.addStringAt(output, "\n", caretPos);
+      output = this.addStringAt(output, "\n", caretPos, moveCaret);
 
     else if(button.includes("numpad") && Number.isInteger(Number(button[button.length - 2]))){
       output = this.addStringAt(output, button[button.length - 2], caretPos);
     }
     else if(button === "{numpaddivide}")
-      output = this.addStringAt(output, '/', caretPos);
+      output = this.addStringAt(output, '/', caretPos, moveCaret);
 
     else if(button === "{numpadmultiply}")
-      output = this.addStringAt(output, '*', caretPos);
+      output = this.addStringAt(output, '*', caretPos, moveCaret);
+
     else if(button === "{numpadsubtract}")
-      output = this.addStringAt(output, '-', caretPos);
+      output = this.addStringAt(output, '-', caretPos, moveCaret);
 
     else if(button === "{numpadadd}")
-      output = this.addStringAt(output, '+', caretPos);
+      output = this.addStringAt(output, '+', caretPos, moveCaret);
 
     else if(button === "{numpaddecimal}")
-      output = this.addStringAt(output, '.', caretPos);
+      output = this.addStringAt(output, '.', caretPos, moveCaret);
 
     else if(button === "{" || button === "}")
-      output = this.addStringAt(output, button, caretPos);
+      output = this.addStringAt(output, button, caretPos, moveCaret);
 
     else if(!button.includes("{") && !button.includes("}"))
-      output = this.addStringAt(output, button, caretPos);
+      output = this.addStringAt(output, button, caretPos, moveCaret);
 
     return output;
   }
+
   /**
    * Moves the cursor position by a given amount
    * 
@@ -224,7 +227,7 @@ class Utilities {
   updateCaretPos(length, minus){
     if(minus){
       if(this.simpleKeyboardInstance.caretPosition > 0)
-        this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition - length
+        this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition - length;
     } else {
       this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition + length;
     }
@@ -236,14 +239,11 @@ class Utilities {
    * @param  {string} source The source input
    * @param  {string} string The string to add
    * @param  {number} position The (cursor) position where the string should be added
+   * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
    */
-  addStringAt(source, string, position){
+  addStringAt(source, string, position, moveCaret){
     let output;
 
-    if(this.simpleKeyboardInstance.options.debug){
-      console.log("Caret at:", position);
-    }
-
     if(!position && position !== 0){
       output = source + string;
     } else {
@@ -253,11 +253,15 @@ class Utilities {
        * Avoid caret position change when maxLength is set
        */
       if(!this.isMaxLengthReached()){
-        this.updateCaretPos(string.length);
+        if(moveCaret) this.updateCaretPos(string.length);
       }
 
     }
 
+    if(this.simpleKeyboardInstance.options.debug && moveCaret){
+      console.log("Caret at:", position);
+    }
+
     return output;
   }
 
@@ -266,8 +270,9 @@ class Utilities {
    * 
    * @param  {string} source The source input
    * @param  {number} position The (cursor) position from where the characters should be removed
+   * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
    */
-  removeAt(source, position){
+  removeAt(source, position, moveCaret){
     if(this.simpleKeyboardInstance.caretPosition === 0){
       return source;
     }
@@ -287,10 +292,10 @@ class Utilities {
 
       if(emojiMatched){
         output = source.substr(0, (position - 2)) + source.substr(position);
-        this.updateCaretPos(2, true);
+        if(moveCaret) this.updateCaretPos(2, true);
       } else {
         output = source.substr(0, (position - 1)) + source.substr(position);
-        this.updateCaretPos(1, true);
+        if(moveCaret) this.updateCaretPos(1, true);
       }
     } else {
       prevTwoChars = source.slice(-2);
@@ -298,13 +303,17 @@ class Utilities {
 
       if(emojiMatched){
         output = source.slice(0, -2);
-        this.updateCaretPos(2, true);
+        if(moveCaret) this.updateCaretPos(2, true);
       } else {
         output = source.slice(0, -1);
-        this.updateCaretPos(1, true);
+        if(moveCaret) this.updateCaretPos(1, true);
       }
     }
 
+    if(this.simpleKeyboardInstance.options.debug && moveCaret){
+      console.log("Caret at:", this.simpleKeyboardInstance.caretPosition);
+    }
+
     return output;
   }
   /**
@@ -319,7 +328,6 @@ class Utilities {
     let currentInput = inputObj[options.inputName];
     let condition = currentInput.length === maxLength;
 
-
     if(
       /**
        * If pressing this button won't add more characters