src/demo/App.js
+
import Keyboard from '../lib';
+import './css/App.css';
+
+/**
+ * simple-keyboard demo
+ */
+class App {
+ /**
+ * Instantiates the demo class
+ */
+ constructor(){
+ document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+
+ /**
+ * Default input name
+ * @type {string}
+ */
+ this.layoutName = "default";
+ }
+
+ /**
+ * Executed when the DOM is ready
+ */
+ onDOMLoaded = () => {
+ /**
+ * Creates a new simple-keyboard instance
+ */
+ this.keyboard = new Keyboard({
+ debug: true,
+ layoutName: this.layoutName,
+ onChange: input => this.onChange(input),
+ onKeyPress: button => this.onKeyPress(button),
+ newLineOnEnter: true,
+ physicalKeyboardHighlight: true,
+ });
+
+ /**
+ * Adding preview (demo only)
+ */
+ document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
+ <div class="simple-keyboard-preview">
+ <textarea class="input"></textarea>
+ </div>
+ `);
+
+ document.querySelector('.input').addEventListener('change', (event) => {
+ this.keyboard.setInput(event.target.value);
+ });
+
+ console.log(this.keyboard);
+ }
+
+ /**
+ *
+ */
+ handleShiftButton = () => {
+ let layoutName = this.layoutName;
+ let shiftToggle = this.layoutName = layoutName === "default" ? "shift" : "default";
+
+ this.keyboard.setOptions({
+ layoutName: shiftToggle
+ });
+ }
+
+ /**
+ * Called when simple-keyboard input has changed
+ */
+ onChange = input => {
+ document.querySelector('.input').value = input;
+ }
+
+ /**
+ * Called when a simple-keyboard key is pressed
+ */
+ onKeyPress = button => {
+ console.log("Button pressed", button);
+
+ /**
+ * Shift functionality
+ */
+ if(button === "{lock}" || button === "{shift}")
+ this.handleShiftButton();
+ }
+
+}
+
+export default App;
+
+
src/demo/index.js
+
import App from './App';
+
+/**
+ * Initializing demo
+ */
+new App();
+
+
src/lib/components/Keyboard.js
+
import './Keyboard.css';
+
+// Services
+import PhysicalKeyboard from '../services/PhysicalKeyboard';
+import KeyboardLayout from '../services/KeyboardLayout';
+import Utilities from '../services/Utilities';
+
+/**
+ * Root class for simple-keyboard
+ * This class:
+ * - Parses the options
+ * - Renders the rows and buttons
+ * - Handles button functionality
+ */
+class SimpleKeyboard {
+ /**
+ * Creates an instance of SimpleKeyboard
+ * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
+ */
+ constructor(...params){
+ let keyboardDOMQuery = typeof params[0] === "string" ? params[0] : '.simple-keyboard';
+ let options = typeof params[0] === "object" ? params[0] : params[1];
+
+ if(!options)
+ options = {};
+
+ /**
+ * Initializing Utilities
+ */
+ this.utilities = new Utilities(this);
+
+ /**
+ * Processing options
+ */
+ this.keyboardDOM = document.querySelector(keyboardDOMQuery);
+
+ /**
+ * @type {object}
+ * @property {object} layout Modify the keyboard layout.
+ * @property {string} layoutName Specifies which layout should be used.
+ * @property {object} display Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: “backspace”).
+ * @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.
+ * @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
+ * @property {Array} buttonTheme A prop to add your own css classes to one or several buttons.
+ * @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
+ * @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\n) or not.
+ * @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\t) or not.
+ * @property {string} inputName Allows you to use a single simple-keyboard instance for several inputs.
+ * @property {number} maxLength Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
+ * @property {object} maxLength Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
+ * @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.
+ * @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.
+ * @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.
+ * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.
+ * @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).
+ * @property {function(input: string):string} onChange Executes the callback function on input change. Returns the current input’s string.
+ * @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
+ * @property {function} onInit Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
+ * @property {function(inputs: object):object} onChangeAll Executes the callback function on input change. Returns the input object with all defined inputs.
+ */
+ this.options = options;
+ this.options.layoutName = this.options.layoutName || "default";
+ this.options.theme = this.options.theme || "hg-theme-default";
+ this.options.inputName = this.options.inputName || "default";
+
+ /**
+ * 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.
+ * @example
+ * // To get entered input
+ * let input = keyboard.getInput();
+ *
+ * // To clear entered input.
+ * keyboard.clearInput();
+ *
+ * @type {object}
+ * @property {object} default Default SimpleKeyboard internal input.
+ * @property {object} myInputName Example input that can be set through `options.inputName:"myInputName"`.
+ */
+ this.input = {};
+ this.input[this.options.inputName] = '';
+
+ /**
+ * @type {string} DOM class of the keyboard wrapper, normally "simple-keyboard" by default.
+ */
+ this.keyboardDOMClass = keyboardDOMQuery.split('.').join("");
+
+ /**
+ * @type {object} Contains the DOM elements of every rendered button, the key being the button's layout name (e.g.: "{enter}").
+ */
+ this.buttonElements = {};
+
+ /**
+ * Rendering keyboard
+ */
+ if(this.keyboardDOM)
+ this.render();
+ else {
+ console.warn(`"${keyboardDOMQuery}" was not found in the DOM.`);
+ throw new Error("KEYBOARD_DOM_ERROR");
+ }
+
+ /**
+ * Saving instance
+ * This enables multiple simple-keyboard support with easier management
+ */
+ if(!window['SimpleKeyboardInstances'])
+ window['SimpleKeyboardInstances'] = {};
+
+ window['SimpleKeyboardInstances'][this.utilities.camelCase(this.keyboardDOMClass)] = this;
+
+ /**
+ * Physical Keyboard support
+ */
+ this.physicalKeyboardInterface = new PhysicalKeyboard(this);
+ }
+ /**
+ * Handles clicks made to keyboard buttons
+ * @param {string} button The button's layout name.
+ */
+ handleButtonClicked = (button) => {
+ let debug = this.options.debug;
+
+ /**
+ * Ignoring placeholder buttons
+ */
+ if(button === '{//}')
+ return false;
+
+ /**
+ * Calling onKeyPress
+ */
+ if(typeof this.options.onKeyPress === "function")
+ this.options.onKeyPress(button);
+
+ 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);
+
+ if(this.input[this.options.inputName] !== updatedInput){
+
+ /**
+ * If maxLength and handleMaxLength yield true, halting
+ */
+ if(this.options.maxLength && this.utilities.handleMaxLength(this.input, this.options, updatedInput)){
+ return false;
+ }
+
+ this.input[this.options.inputName] = updatedInput;
+
+ if(debug)
+ console.log('Input changed:', this.input);
+
+ /**
+ * Enforce syncInstanceInputs, if set
+ */
+ if(this.options.syncInstanceInputs)
+ this.syncInstanceInputs(this.input);
+
+ /**
+ * Calling onChange
+ */
+ if(typeof this.options.onChange === "function")
+ this.options.onChange(this.input[this.options.inputName]);
+ }
+
+ if(debug){
+ console.log("Key pressed:", button);
+ }
+ }
+
+ /**
+ * Send a command to all simple-keyboard instances (if you have several instances).
+ */
+ syncInstanceInputs = () => {
+ this.dispatch((instance) => {
+ instance.replaceInput(this.input);
+ });
+ }
+
+ /**
+ * Clear the keyboard’s input.
+ * @param {string} [inputName] optional - the internal input to select
+ */
+ clearInput = (inputName) => {
+ inputName = inputName || this.options.inputName;
+ this.input[this.options.inputName] = '';
+
+ /**
+ * Enforce syncInstanceInputs, if set
+ */
+ if(this.options.syncInstanceInputs)
+ this.syncInstanceInputs(this.input);
+ }
+
+ /**
+ * 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) => {
+ inputName = inputName || this.options.inputName;
+
+ /**
+ * Enforce syncInstanceInputs, if set
+ */
+ if(this.options.syncInstanceInputs)
+ this.syncInstanceInputs(this.input);
+
+ return this.input[this.options.inputName];
+ }
+
+ /**
+ * Set the keyboard’s input.
+ * @param {string} input the input value
+ * @param {string} inputName optional - the internal input to select
+ */
+ setInput = (input, inputName) => {
+ inputName = inputName || this.options.inputName;
+ this.input[inputName] = input;
+
+ /**
+ * Enforce syncInstanceInputs, if set
+ */
+ if(this.options.syncInstanceInputs)
+ this.syncInstanceInputs(this.input);
+ }
+
+ /**
+ * Replace the input object (`keyboard.input`)
+ * @param {object} inputObj The input object
+ */
+ replaceInput = (inputObj) => {
+ this.input = inputObj;
+ }
+
+ /**
+ * Set new option or modify existing ones after initialization.
+ * @param {object} option The option to set
+ */
+ setOptions = option => {
+ option = option || {};
+ this.options = Object.assign(this.options, option);
+ this.render();
+ }
+
+ /**
+ * Remove all keyboard rows and reset keyboard values.
+ * Used interally between re-renders.
+ */
+ clear = () => {
+ this.keyboardDOM.innerHTML = '';
+ this.keyboardDOM.className = this.keyboardDOMClass;
+ this.buttonElements = {};
+ }
+
+ /**
+ * 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) => {
+ if(!window['SimpleKeyboardInstances']){
+ console.warn(`SimpleKeyboardInstances is not defined. Dispatch cannot be called.`);
+ throw new Error("INSTANCES_VAR_ERROR");
+ }
+
+ return Object.keys(window['SimpleKeyboardInstances']).forEach((key) => {
+ callback(window['SimpleKeyboardInstances'][key], key);
+ })
+ }
+
+ /**
+ * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
+ * @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) => {
+ if(!className || !buttons)
+ return false;
+
+ buttons.split(" ").forEach(button => {
+ className.split(" ").forEach(classNameItem => {
+ if(!this.options.buttonTheme)
+ this.options.buttonTheme = [];
+
+ let classNameFound = false;
+
+ /**
+ * If class is already defined, we add button to class definition
+ */
+ this.options.buttonTheme.map(buttonTheme => {
+
+ if(buttonTheme.class.split(" ").includes(classNameItem)){
+ classNameFound = true;
+
+ let buttonThemeArray = buttonTheme.buttons.split(" ");
+ if(!buttonThemeArray.includes(button)){
+ classNameFound = true;
+ buttonThemeArray.push(button);
+ buttonTheme.buttons = buttonThemeArray.join(" ");
+ }
+ }
+ return buttonTheme;
+ });
+
+ /**
+ * If class is not defined, we create a new entry
+ */
+ if(!classNameFound){
+ this.options.buttonTheme.push({
+ class: classNameItem,
+ buttons: buttons
+ });
+ }
+
+ });
+ });
+
+ this.render();
+ }
+
+ /**
+ * Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.
+ * @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) => {
+ /**
+ * When called with empty parameters, remove all button themes
+ */
+ if(!buttons && !className){
+ this.options.buttonTheme = [];
+ this.render();
+ return false;
+ }
+
+ /**
+ * If buttons are passed and buttonTheme has items
+ */
+ if(buttons && Array.isArray(this.options.buttonTheme) && this.options.buttonTheme.length){
+ let buttonArray = buttons.split(" ");
+ buttonArray.forEach((button, key) => {
+ this.options.buttonTheme.map((buttonTheme, index) => {
+
+ /**
+ * If className is set, we affect the buttons only for that class
+ * Otherwise, we afect all classes
+ */
+ if(
+ (className && className.includes(buttonTheme.class)) ||
+ !className
+ ){
+ let filteredButtonArray = buttonTheme.buttons.split(" ").filter(item => item !== button);
+
+ /**
+ * If buttons left, return them, otherwise, remove button Theme
+ */
+ if(filteredButtonArray.length){
+ buttonTheme.buttons = filteredButtonArray.join(" ");
+ } else {
+ this.options.buttonTheme.splice(index, 1);
+ buttonTheme = null;
+ }
+
+ }
+
+ return buttonTheme;
+ });
+ });
+
+ this.render();
+ }
+ }
+
+ /**
+ * 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) => {
+ let output;
+
+ let buttonArr = this.buttonElements[button];
+ if(buttonArr){
+ if(buttonArr.length > 1){
+ output = buttonArr;
+ } else {
+ output = buttonArr[0];
+ }
+ }
+
+ return output;
+ }
+
+ /**
+ * Retrieves the current cursor position within a input or textarea (if any)
+ */
+ handleCaret = () => {
+ if(this.options.debug){
+ console.log("Caret handling started");
+ }
+
+ document.addEventListener("keyup", this.caretEventHandler);
+ document.addEventListener("mouseup", this.caretEventHandler);
+ document.addEventListener("touchend", this.caretEventHandler);
+ }
+
+ /**
+ * Called by {@link handleCaret} when an event that warrants a cursor position update is triggered
+ */
+ caretEventHandler = (event) => {
+ let targetTagName = event.target.tagName.toLowerCase();
+
+ if(
+ targetTagName === "textarea" ||
+ targetTagName === "input"
+ ){
+ /**
+ * Tracks current cursor position
+ * As keys are pressed, text will be added/removed at that position within the input.
+ */
+ this.caretPosition = event.target.selectionStart;
+
+ if(this.options.debug){
+ console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase());
+ }
+ }
+ }
+
+ /**
+ * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
+ */
+ onInit = () => {
+ if(this.options.debug){
+ console.log("Initialized");
+ }
+
+ /**
+ * Caret handling
+ */
+ this.handleCaret();
+
+ if(typeof this.options.onInit === "function")
+ this.options.onInit();
+ }
+
+ /**
+ * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
+ */
+ onRender = () => {
+ if(typeof this.options.onRender === "function")
+ this.options.onRender();
+ }
+
+ /**
+ * Renders rows and buttons as per options
+ */
+ render = () => {
+ /**
+ * Clear keyboard
+ */
+ this.clear();
+
+ let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
+ let layout = this.options.layout || KeyboardLayout.getDefaultLayout();
+
+ /**
+ * Account for buttonTheme, if set
+ */
+ let buttonThemesParsed = {};
+ if(Array.isArray(this.options.buttonTheme)){
+ this.options.buttonTheme.forEach(themeObj => {
+ if(themeObj.buttons && themeObj.class){
+ let themeButtons;
+
+ if(typeof themeObj.buttons === "string"){
+ themeButtons = themeObj.buttons.split(' ');
+ }
+
+ if(themeButtons){
+ themeButtons.forEach(themeButton => {
+ let themeParsed = buttonThemesParsed[themeButton];
+
+ // If the button has already been added
+ if(themeParsed){
+ // Making sure we don't add duplicate classes, even when buttonTheme has duplicates
+ if(!this.utilities.countInArray(themeParsed.split(" "), themeObj.class)){
+ buttonThemesParsed[themeButton] = `${themeParsed} ${themeObj.class}`;
+ }
+ } else {
+ buttonThemesParsed[themeButton] = themeObj.class;
+ }
+ });
+ }
+ } else {
+ console.warn(`buttonTheme row is missing the "buttons" or the "class". Please check the documentation.`)
+ }
+ });
+ }
+
+ /**
+ * Adding themeClass, layoutClass to keyboardDOM
+ */
+ this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass}`;
+
+ /**
+ * Iterating through each row
+ */
+ layout[this.options.layoutName].forEach((row, rIndex) => {
+ let rowArray = row.split(' ');
+
+ /**
+ * Creating empty row
+ */
+ var rowDOM = document.createElement('div');
+ rowDOM.className += "hg-row";
+
+ /**
+ * Iterating through each button in row
+ */
+ rowArray.forEach((button, bIndex) => {
+ let fctBtnClass = this.utilities.getButtonClass(button);
+ let buttonThemeClass = buttonThemesParsed[button];
+ let buttonDisplayName = this.utilities.getButtonDisplayName(button, this.options.display, this.options.mergeDisplay);
+
+ /**
+ * Creating button
+ */
+ var buttonDOM = document.createElement('div');
+ buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
+ buttonDOM.onclick = () => this.handleButtonClicked(button);
+
+ /**
+ * Adding identifier
+ */
+ buttonDOM.setAttribute("data-skBtn", button);
+
+ /**
+ * Adding unique id
+ * Since there's no limit on spawning same buttons, the unique id ensures you can style every button
+ */
+ let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
+ buttonDOM.setAttribute("data-skBtnUID", buttonUID);
+
+ /**
+ * Adding display label
+ */
+ buttonDOM.setAttribute("data-displayLabel", buttonDisplayName);
+
+ /**
+ * Adding button label to button
+ */
+ var buttonSpanDOM = document.createElement('span');
+ buttonSpanDOM.innerHTML = buttonDisplayName;
+ buttonDOM.appendChild(buttonSpanDOM);
+
+ /**
+ * Adding to buttonElements
+ */
+ if(!this.buttonElements[button])
+ this.buttonElements[button] = [];
+
+ this.buttonElements[button].push(buttonDOM);
+
+ /**
+ * Appending button to row
+ */
+ rowDOM.appendChild(buttonDOM);
+
+ });
+
+ /**
+ * Appending row to keyboard
+ */
+ this.keyboardDOM.appendChild(rowDOM);
+ });
+
+ /**
+ * Calling onRender
+ */
+ this.onRender();
+
+ if(!this.initialized){
+ /**
+ * Ensures that onInit is only called once per instantiation
+ */
+ this.initialized = true;
+
+ /**
+ * Calling onInit
+ */
+ this.onInit();
+ }
+ }
+}
+
+export default SimpleKeyboard;
+
+
+
src/lib/index.js
+
import SimpleKeyboard from './components/Keyboard';
+export default SimpleKeyboard;
+
+
+
src/lib/services/KeyboardLayout.js
+
/**
+ * Keyboard Layout Service
+ */
+class KeyboardLayout {
+
+ /**
+ * Get default simple-keyboard layout
+ * @return {object} The default layout (US-QWERTY)
+ */
+ static getDefaultLayout = () => {
+ return {
+ 'default': [
+ '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+ '{tab} q w e r t y u i o p [ ] \\',
+ '{lock} a s d f g h j k l ; \' {enter}',
+ '{shift} z x c v b n m , . / {shift}',
+ '.com @ {space}'
+ ],
+ 'shift': [
+ '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
+ '{tab} Q W E R T Y U I O P { } |',
+ '{lock} A S D F G H J K L : " {enter}',
+ '{shift} Z X C V B N M < > ? {shift}',
+ '.com @ {space}'
+ ]
+ }
+ }
+}
+
+export default KeyboardLayout;
+
+
src/lib/services/PhysicalKeyboard.js
+
/**
+ * Physical Keyboard Service
+ */
+class PhysicalKeyboard {
+ /**
+ * Creates an instance of the PhysicalKeyboard service
+ */
+ constructor(simpleKeyboardInstance){
+ /**
+ * @type {object} A simple-keyboard instance
+ */
+ this.simpleKeyboardInstance = simpleKeyboardInstance;
+
+ this.initKeyboardListener();
+ }
+
+ /**
+ * Initializes key event listeners
+ */
+ initKeyboardListener = () => {
+ // Adding button style on keydown
+ document.addEventListener("keydown", (event) => {
+ if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
+ let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+
+ this.simpleKeyboardInstance.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";
+ }
+ });
+ }
+ });
+
+ // Removing button style on keyup
+ document.addEventListener("keyup", (event) => {
+ if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
+ let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+
+ this.simpleKeyboardInstance.dispatch(instance => {
+ let buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement(`{${buttonPressed}}`);
+
+ if(buttonDOM){
+ buttonDOM.removeAttribute("style");
+ }
+ });
+ }
+ });
+ }
+
+ /**
+ * Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format
+ * @param {object} event The KeyboardEvent
+ */
+ getSimpleKeyboardLayoutKey = (event) => {
+ if(this.simpleKeyboardInstance.options.debug){
+ console.log(event);
+ }
+
+ let output;
+
+ if(
+ event.code.includes("Numpad") ||
+ event.code.includes("Shift") ||
+ event.code.includes("Space") ||
+ event.code.includes("Backspace") ||
+ event.code.includes("Control") ||
+ event.code.includes("Alt") ||
+ event.code.includes("Meta")
+ ){
+ output = event.code;
+ } else {
+ output = event.key;
+ }
+
+ /**
+ * If button is not uppercase, casting to lowercase
+ */
+ if (
+ output !== output.toUpperCase() ||
+ (event.code[0] === "F" && Number.isInteger(Number(event.code[1])) && event.code.length <= 3)
+ ) {
+ output = output.toLowerCase();
+ }
+
+ return output;
+ }
+}
+
+export default PhysicalKeyboard;
+
+
src/lib/services/Utilities.js
+
/**
+ * Utility Service
+ */
+class Utilities {
+ /**
+ * Creates an instance of the Utility service
+ */
+ constructor(simpleKeyboardInstance){
+ /**
+ * @type {object} A simple-keyboard instance
+ */
+ this.simpleKeyboardInstance = simpleKeyboardInstance;
+ }
+
+ /**
+ * Adds default classes to a given button
+ *
+ * @param {string} button The button's layout name
+ * @return {string} The classes to be added to the button
+ */
+ getButtonClass = button => {
+ let buttonTypeClass = (button.includes("{") && button.includes("}") && button !== '{//}') ? "functionBtn" : "standardBtn";
+ let buttonWithoutBraces = button.replace("{", "").replace("}", "");
+ let buttonNormalized = '';
+
+ if(buttonTypeClass !== "standardBtn")
+ buttonNormalized = ` hg-button-${buttonWithoutBraces}`;
+
+ return `hg-${buttonTypeClass}${buttonNormalized}`;
+ }
+
+ /**
+ * Default button display labels
+ */
+ getDefaultDiplay(){
+ return {
+ '{bksp}': 'backspace',
+ '{backspace}': 'backspace',
+ '{enter}': '< enter',
+ '{shift}': 'shift',
+ '{shiftleft}': 'shift',
+ '{shiftright}': 'shift',
+ '{alt}': 'alt',
+ '{s}': 'shift',
+ '{tab}': 'tab',
+ '{lock}': 'caps',
+ '{capslock}': 'caps',
+ '{accept}': 'Submit',
+ '{space}': ' ',
+ '{//}': ' ',
+ "{esc}": "esc",
+ "{escape}": "esc",
+ "{f1}": "f1",
+ "{f2}": "f2",
+ "{f3}": "f3",
+ "{f4}": "f4",
+ "{f5}": "f5",
+ "{f6}": "f6",
+ "{f7}": "f7",
+ "{f8}": "f8",
+ "{f9}": "f9",
+ "{f10}": "f10",
+ "{f11}": "f11",
+ "{f12}": "f12",
+ '{numpaddivide}': '/',
+ '{numlock}': 'lock',
+ "{arrowup}": "↑",
+ "{arrowleft}": "←",
+ "{arrowdown}": "↓",
+ "{arrowright}": "→",
+ "{prtscr}": "print",
+ "{scrolllock}": "scroll",
+ "{pause}": "pause",
+ "{insert}": "ins",
+ "{home}": "home",
+ "{pageup}": "up",
+ "{delete}": "del",
+ "{end}": "end",
+ "{pagedown}": "down",
+ "{numpadmultiply}": "*",
+ "{numpadsubtract}": "-",
+ "{numpadadd}": "+",
+ "{numpadenter}": "enter",
+ "{period}": ".",
+ "{numpaddecimal}": ".",
+ "{numpad0}": "0",
+ "{numpad1}": "1",
+ "{numpad2}": "2",
+ "{numpad3}": "3",
+ "{numpad4}": "4",
+ "{numpad5}": "5",
+ "{numpad6}": "6",
+ "{numpad7}": "7",
+ "{numpad8}": "8",
+ "{numpad9}": "9",
+ };
+ }
+ /**
+ * Returns the display (label) name for a given button
+ *
+ * @param {string} button The button's layout name
+ * @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) => {
+ if(mergeDisplay){
+ display = Object.assign({}, this.getDefaultDiplay(), display);
+ } else {
+ display = display || this.getDefaultDiplay();
+ }
+
+ return display[button] || button;
+ }
+
+
+ /**
+ * Returns the updated input resulting from clicking a given button
+ *
+ * @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
+ */
+ getUpdatedInput = (button, input, options, caretPos) => {
+
+ let output = input;
+
+ if((button === "{bksp}" || button === "{backspace}") && output.length > 0){
+ output = this.removeAt(output, caretPos);
+
+ } else if(button === "{space}")
+ output = this.addStringAt(output, " ", caretPos);
+
+ else if(button === "{tab}" && !(typeof options.tabCharOnTab === "boolean" && options.tabCharOnTab === false)){
+ output = this.addStringAt(output, "\t", caretPos);
+
+ } else if((button === "{enter}" || button === "{numpadenter}") && options.newLineOnEnter)
+ output = this.addStringAt(output, "\n", caretPos);
+
+ 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);
+
+ else if(button === "{numpadmultiply}")
+ output = this.addStringAt(output, '*', caretPos);
+ else if(button === "{numpadsubtract}")
+ output = this.addStringAt(output, '-', caretPos);
+
+ else if(button === "{numpadadd}")
+ output = this.addStringAt(output, '+', caretPos);
+
+ else if(button === "{numpaddecimal}")
+ output = this.addStringAt(output, '.', caretPos);
+
+ else if(button === "{" || button === "}")
+ output = this.addStringAt(output, button, caretPos);
+
+ else if(!button.includes("{") && !button.includes("}"))
+ output = this.addStringAt(output, button, caretPos);
+
+ return output;
+ }
+ /**
+ * Moves the cursor position by a given amount
+ *
+ * @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) => {
+ if(minus){
+ if(this.simpleKeyboardInstance.caretPosition > 0)
+ this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition - length
+ } else {
+ this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition + length;
+ }
+ }
+
+ /**
+ * Adds a string to the input at a given position
+ *
+ * @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
+ */
+ addStringAt(source, string, position){
+ let output;
+
+ if(this.simpleKeyboardInstance.options.debug){
+ console.log("Caret at:", position);
+ }
+
+ if(!position && position !== 0){
+ output = source + string;
+ } else {
+ output = [source.slice(0, position), string, source.slice(position)].join('');
+
+ /**
+ * Avoid caret position change when maxLength is set
+ */
+ if(!this.isMaxLengthReached()){
+ this.updateCaretPos(string.length);
+ }
+
+ }
+
+ return output;
+ }
+
+ /**
+ * Removes an amount of characters at a given position
+ *
+ * @param {string} source The source input
+ * @param {number} position The (cursor) position from where the characters should be removed
+ */
+ removeAt(source, position){
+ if(this.simpleKeyboardInstance.caretPosition === 0){
+ return source;
+ }
+
+ let output;
+ let prevTwoChars;
+ let emojiMatched;
+ let emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
+
+ /**
+ * Emojis are made out of two characters, so we must take a custom approach to trim them.
+ * For more info: https://mathiasbynens.be/notes/javascript-unicode
+ */
+ if(position && position >= 0){
+ prevTwoChars = source.substring(position - 2, position)
+ emojiMatched = prevTwoChars.match(emojiMatchedReg);
+
+ if(emojiMatched){
+ output = source.substr(0, (position - 2)) + source.substr(position);
+ this.updateCaretPos(2, true);
+ } else {
+ output = source.substr(0, (position - 1)) + source.substr(position);
+ this.updateCaretPos(1, true);
+ }
+ } else {
+ prevTwoChars = source.slice(-2);
+ emojiMatched = prevTwoChars.match(emojiMatchedReg);
+
+ if(emojiMatched){
+ output = source.slice(0, -2);
+ this.updateCaretPos(2, true);
+ } else {
+ output = source.slice(0, -1);
+ this.updateCaretPos(1, true);
+ }
+ }
+
+ return output;
+ }
+ /**
+ * 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){
+ let maxLength = options.maxLength;
+ let currentInput = inputObj[options.inputName];
+ let condition = currentInput.length === maxLength;
+
+
+ if(
+ /**
+ * If pressing this button won't add more characters
+ * We exit out of this limiter function
+ */
+ updatedInput.length <= currentInput.length
+ ){
+ return false;
+ }
+
+ if(Number.isInteger(maxLength)){
+ if(options.debug){
+ console.log("maxLength (num) reached:", condition);
+ }
+
+ if(condition){
+ /**
+ * @type {boolean} Boolean value that shows whether maxLength has been reached
+ */
+ this.maxLengthReached = true;
+ return true;
+ } else {
+ this.maxLengthReached = false;
+ return false;
+ }
+ }
+
+ if(typeof maxLength === "object"){
+ let condition = currentInput.length === maxLength[options.inputName];
+
+ if(options.debug){
+ console.log("maxLength (obj) reached:", condition);
+ }
+
+ if(condition){
+ this.maxLengthReached = true;
+ return true;
+ } else {
+ this.maxLengthReached = false;
+ return false;
+ }
+ }
+ }
+
+ /**
+ * Gets the current value of maxLengthReached
+ */
+ isMaxLengthReached = () => {
+ return Boolean(this.maxLengthReached);
+ }
+
+ /**
+ * Transforms an arbitrary string to camelCase
+ *
+ * @param {string} string The string to transform.
+ */
+ camelCase = (string) => {
+ return string.toLowerCase().trim().split(/[.\-_\s]/g).reduce((string, word) => string + word[0].toUpperCase() + word.slice(1));
+ };
+
+ /**
+ * Counts the number of duplicates in a given array
+ *
+ * @param {Array} array The haystack to search in
+ * @param {string} value The needle to search for
+ */
+ countInArray = (array, value) => {
+ return array.reduce((n, x) => n + (x === value), 0);
+ }
+
+}
+
+export default Utilities;
+
+
src/lib/tests/TestUtility.js
+
/**
+ * Test Utility Functions
+ */
+export default class TestUtility {
+ /**
+ * Set's a basic DOM structure to test in
+ */
+ setDOM = (divClass) => {
+ this.clear();
+ const div = document.createElement('div');
+ div.className += divClass || "simple-keyboard";
+ document.body.appendChild(div);
+ }
+
+ /**
+ * Clears DOM structure
+ */
+ clear = () => {
+ document.body.innerHTML = "";
+ }
+
+ /**
+ * Test if standard buttons respect maxLength and do input a value
+ */
+ testLayoutStdButtons = (keyboard) => {
+ let stdBtnCount = 0;
+ let fullInput = '';
+
+ this.iterateButtons((button) => {
+ let label = button.getAttribute("data-skbtn");
+
+ if(label.includes("{"))
+ return false;
+
+ // Click all standard buttons, respects maxLength
+ button.onclick();
+
+ // Recording fullInput, bypasses maxLength
+ fullInput = keyboard.utilities.getUpdatedInput(label, fullInput, keyboard.options, null);
+
+ stdBtnCount += label.length;
+ });
+
+ /**
+ * Check if maxLength is respected
+ */
+ if(
+ (
+ typeof keyboard.options.maxLength === "object" &&
+ keyboard.getInput().length !== keyboard.options.maxLength[keyboard.options.layoutName]
+ ) ||
+ (
+ typeof keyboard.options.maxLength !== "object" &&
+ keyboard.getInput().length !== keyboard.options.maxLength
+ )
+ )
+ throw new Error("MAX_LENGTH_ISSUE");
+ else
+ console.log("MAX_LENGTH PASSED:", keyboard.options.layoutName, keyboard.getInput().length, keyboard.options.maxLength);
+
+ /**
+ * Check if all standard buttons are inputting something
+ * (Regardless of maxLength)
+ */
+ if(stdBtnCount !== fullInput.length)
+ throw new Error("STANDARD_BUTTONS_ISSUE");
+ else
+ console.log("STANDARD_BUTTONS PASSED:", keyboard.options.layoutName, stdBtnCount, fullInput.length);
+ }
+
+ /**
+ * Test if function buttons are interactive (have an onclick)
+ */
+ testLayoutFctButtons = (callback) => {
+ let fctBtnCount = 0;
+ let fctBtnHasOnclickCount = 0;
+
+ this.iterateButtons((button) => {
+ let label = button.getAttribute("data-skbtn");
+
+ if(!label.includes("{") && !label.includes("}"))
+ return false;
+
+ fctBtnCount++;
+
+ if(button.onclick){
+ button.onclick();
+ fctBtnHasOnclickCount++;
+ }
+
+ callback(fctBtnCount, fctBtnHasOnclickCount);
+ });
+ }
+
+ /**
+ * Iterates on the keyboard buttons
+ */
+ iterateButtons = (callback, selector) => {
+ let rows = document.body.querySelector(selector || '.simple-keyboard').children;
+
+ Array.from(rows).forEach(row => {
+ Array.from(row.children).forEach((button) => {
+ callback(button);
+ });
+ });
+ }
+}
+
+
+
+ 
![](\"https://franciscohodge.com/project-pages/simple-keyboard/images/simplekeyboard-banner_B.png\")
![](\"https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-10172018.gif\")
