From d567b3ac018b4f806f20ecd9a5a83887a83b3f03 Mon Sep 17 00:00:00 2001 From: Francisco Hodge Date: Tue, 30 Oct 2018 23:28:23 -0400 Subject: [PATCH] Enhancing add-on compatibility --- src/lib/components/Keyboard.js | 83 ++++++++++++++++++++++------ src/lib/services/KeyboardLayout.js | 3 +- src/lib/services/PhysicalKeyboard.js | 13 ++++- src/lib/services/Utilities.js | 25 ++++++--- 4 files changed, 97 insertions(+), 27 deletions(-) diff --git a/src/lib/components/Keyboard.js b/src/lib/components/Keyboard.js index f517e58d..833ab5a9 100644 --- a/src/lib/components/Keyboard.js +++ b/src/lib/components/Keyboard.js @@ -63,6 +63,31 @@ class SimpleKeyboard { this.options.theme = this.options.theme || "hg-theme-default"; this.options.inputName = this.options.inputName || "default"; + /** + * Module namespace + */ + this.modules = {}; + + /** + * Bindings + */ + this.handleButtonClicked = this.handleButtonClicked.bind(this); + this.syncInstanceInputs = this.syncInstanceInputs.bind(this); + this.clearInput = this.clearInput.bind(this); + this.getInput = this.getInput.bind(this); + this.setInput = this.setInput.bind(this); + this.replaceInput = this.replaceInput.bind(this); + this.clear = this.clear.bind(this); + this.dispatch = this.dispatch.bind(this); + this.addButtonTheme = this.addButtonTheme.bind(this); + this.removeButtonTheme = this.removeButtonTheme.bind(this); + this.getButtonElement = this.getButtonElement.bind(this); + this.handleCaret = this.handleCaret.bind(this); + this.caretEventHandler = this.caretEventHandler.bind(this); + this.onInit = this.onInit.bind(this); + this.onRender = this.onRender.bind(this); + this.render = this.render.bind(this); + /** * simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable `keyboard.input`). * This removes any dependency to input DOM elements. You can type and directly display the value in a div element, for example. @@ -118,7 +143,7 @@ class SimpleKeyboard { * Handles clicks made to keyboard buttons * @param {string} button The button's layout name. */ - handleButtonClicked = (button) => { + handleButtonClicked(button){ let debug = this.options.debug; /** @@ -173,7 +198,7 @@ class SimpleKeyboard { /** * Send a command to all simple-keyboard instances (if you have several instances). */ - syncInstanceInputs = () => { + syncInstanceInputs(){ this.dispatch((instance) => { instance.replaceInput(this.input); }); @@ -183,7 +208,7 @@ class SimpleKeyboard { * Clear the keyboard’s input. * @param {string} [inputName] optional - the internal input to select */ - clearInput = (inputName) => { + clearInput(inputName){ inputName = inputName || this.options.inputName; this.input[this.options.inputName] = ''; @@ -198,7 +223,7 @@ class SimpleKeyboard { * Get the keyboard’s input (You can also get it from the onChange prop). * @param {string} [inputName] optional - the internal input to select */ - getInput = (inputName) => { + getInput(inputName){ inputName = inputName || this.options.inputName; /** @@ -215,7 +240,7 @@ class SimpleKeyboard { * @param {string} input the input value * @param {string} inputName optional - the internal input to select */ - setInput = (input, inputName) => { + setInput(input, inputName){ inputName = inputName || this.options.inputName; this.input[inputName] = input; @@ -230,7 +255,7 @@ class SimpleKeyboard { * Replace the input object (`keyboard.input`) * @param {object} inputObj The input object */ - replaceInput = (inputObj) => { + replaceInput(inputObj){ this.input = inputObj; } @@ -248,7 +273,7 @@ class SimpleKeyboard { * Remove all keyboard rows and reset keyboard values. * Used interally between re-renders. */ - clear = () => { + clear(){ this.keyboardDOM.innerHTML = ''; this.keyboardDOM.className = this.keyboardDOMClass; this.buttonElements = {}; @@ -258,7 +283,7 @@ class SimpleKeyboard { * Send a command to all simple-keyboard instances at once (if you have multiple instances). * @param {function(instance: object, key: string)} callback Function to run on every instance */ - dispatch = (callback) => { + dispatch(callback){ if(!window['SimpleKeyboardInstances']){ console.warn(`SimpleKeyboardInstances is not defined. Dispatch cannot be called.`); throw new Error("INSTANCES_VAR_ERROR"); @@ -274,7 +299,7 @@ class SimpleKeyboard { * @param {string} buttons List of buttons to select (separated by a space). * @param {string} className Classes to give to the selected buttons (separated by space). */ - addButtonTheme = (buttons, className) => { + addButtonTheme(buttons, className){ if(!className || !buttons) return false; @@ -324,7 +349,7 @@ class SimpleKeyboard { * @param {string} buttons List of buttons to select (separated by a space). * @param {string} className Classes to give to the selected buttons (separated by space). */ - removeButtonTheme = (buttons, className) => { + removeButtonTheme(buttons, className){ /** * When called with empty parameters, remove all button themes */ @@ -376,7 +401,7 @@ class SimpleKeyboard { * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned. * @param {string} button The button layout name to select */ - getButtonElement = (button) => { + getButtonElement(button){ let output; let buttonArr = this.buttonElements[button]; @@ -394,7 +419,7 @@ class SimpleKeyboard { /** * Retrieves the current cursor position within a input or textarea (if any) */ - handleCaret = () => { + handleCaret(){ if(this.options.debug){ console.log("Caret handling started"); } @@ -407,7 +432,7 @@ class SimpleKeyboard { /** * Called by {@link handleCaret} when an event that warrants a cursor position update is triggered */ - caretEventHandler = (event) => { + caretEventHandler(event){ let targetTagName = event.target.tagName.toLowerCase(); if( @@ -429,7 +454,7 @@ class SimpleKeyboard { /** * Executes the callback function once simple-keyboard is rendered for the first time (on initialization). */ - onInit = () => { + onInit(){ if(this.options.debug){ console.log("Initialized"); } @@ -446,15 +471,41 @@ class SimpleKeyboard { /** * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts). */ - onRender = () => { + onRender(){ if(typeof this.options.onRender === "function") this.options.onRender(); } + /** + * Register module + */ + registerModule = (name, initCallback) => { + this.modules[name] = {}; + + initCallback(this.modules[name]); + } + + /** + * Get module prop + */ + getModuleProp = (name, prop) => { + if(!this.modules[name]) + return false; + + return this.modules[name][prop]; + } + + /** + * getModulesList + */ + getModulesList = () => { + return Object.keys(this.modules); + } + /** * Renders rows and buttons as per options */ - render = () => { + render(){ /** * Clear keyboard */ diff --git a/src/lib/services/KeyboardLayout.js b/src/lib/services/KeyboardLayout.js index 15d16efa..45aab690 100644 --- a/src/lib/services/KeyboardLayout.js +++ b/src/lib/services/KeyboardLayout.js @@ -2,12 +2,11 @@ * Keyboard Layout Service */ class KeyboardLayout { - /** * Get default simple-keyboard layout * @return {object} The default layout (US-QWERTY) */ - static getDefaultLayout = () => { + static getDefaultLayout(){ return { 'default': [ '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}', diff --git a/src/lib/services/PhysicalKeyboard.js b/src/lib/services/PhysicalKeyboard.js index f37f6873..4da7b9b5 100644 --- a/src/lib/services/PhysicalKeyboard.js +++ b/src/lib/services/PhysicalKeyboard.js @@ -11,13 +11,22 @@ class PhysicalKeyboard { */ this.simpleKeyboardInstance = simpleKeyboardInstance; + /** + * Bindings + */ + this.initKeyboardListener = this.initKeyboardListener.bind(this); + this.getSimpleKeyboardLayoutKey = this.getSimpleKeyboardLayoutKey.bind(this); + + /** + * Initialize key listeners + */ this.initKeyboardListener(); } /** * Initializes key event listeners */ - initKeyboardListener = () => { + initKeyboardListener(){ // Adding button style on keydown document.addEventListener("keydown", (event) => { if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){ @@ -54,7 +63,7 @@ class PhysicalKeyboard { * Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format * @param {object} event The KeyboardEvent */ - getSimpleKeyboardLayoutKey = (event) => { + getSimpleKeyboardLayoutKey(event){ let output; if( diff --git a/src/lib/services/Utilities.js b/src/lib/services/Utilities.js index c9fa76c3..b05a17cf 100644 --- a/src/lib/services/Utilities.js +++ b/src/lib/services/Utilities.js @@ -10,6 +10,17 @@ class Utilities { * @type {object} A simple-keyboard instance */ this.simpleKeyboardInstance = simpleKeyboardInstance; + + /** + * Bindings + */ + this.getButtonClass = this.getButtonClass.bind(this); + this.getButtonDisplayName = this.getButtonDisplayName.bind(this); + this.getUpdatedInput = this.getUpdatedInput.bind(this); + this.updateCaretPos = this.updateCaretPos.bind(this); + this.isMaxLengthReached = this.isMaxLengthReached.bind(this); + this.camelCase = this.camelCase.bind(this); + this.countInArray = this.countInArray.bind(this); } /** @@ -18,7 +29,7 @@ class Utilities { * @param {string} button The button's layout name * @return {string} The classes to be added to the button */ - getButtonClass = button => { + getButtonClass(button){ let buttonTypeClass = (button.includes("{") && button.includes("}") && button !== '{//}') ? "functionBtn" : "standardBtn"; let buttonWithoutBraces = button.replace("{", "").replace("}", ""); let buttonNormalized = ''; @@ -102,7 +113,7 @@ class Utilities { * @param {object} display The provided display option * @param {boolean} mergeDisplay Whether the provided param value should be merged with the default one. */ - getButtonDisplayName = (button, display, mergeDisplay) => { + getButtonDisplayName(button, display, mergeDisplay){ if(mergeDisplay){ display = Object.assign({}, this.getDefaultDiplay(), display); } else { @@ -121,7 +132,7 @@ class Utilities { * @param {object} options The simple-keyboard options object * @param {number} caretPos The cursor's current position */ - getUpdatedInput = (button, input, options, caretPos) => { + getUpdatedInput(button, input, options, caretPos){ let output = input; @@ -168,7 +179,7 @@ class Utilities { * @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. */ - updateCaretPos = (length, minus) => { + updateCaretPos(length, minus){ if(minus){ if(this.simpleKeyboardInstance.caretPosition > 0) this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition - length @@ -314,7 +325,7 @@ class Utilities { /** * Gets the current value of maxLengthReached */ - isMaxLengthReached = () => { + isMaxLengthReached(){ return Boolean(this.maxLengthReached); } @@ -323,7 +334,7 @@ class Utilities { * * @param {string} string The string to transform. */ - camelCase = (string) => { + camelCase(string){ return string.toLowerCase().trim().split(/[.\-_\s]/g).reduce((string, word) => string + word[0].toUpperCase() + word.slice(1)); }; @@ -333,7 +344,7 @@ class Utilities { * @param {Array} array The haystack to search in * @param {string} value The needle to search for */ - countInArray = (array, value) => { + countInArray(array, value){ return array.reduce((n, x) => n + (x === value), 0); }