github/simple-keyboard
github/simple-keyboard
3
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2025-02-22 01:29:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adding PrettierPlugin to build process

Browse Source
This commit is contained in:
Francisco Hodge 2019-02-15 21:49:27 -05:00
parent 05976e0e7b
commit 70d2cca7ac
7 changed files with 412 additions and 361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
config/webpack.config.prod.js
View File

@ -11,9 +11,7 @@ const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser'); const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths'); const paths = require('./paths');
@ -23,7 +21,7 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt')
const typescriptFormatter = require('react-dev-utils/typescriptFormatter'); const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
const getPackageJson = require('./getPackageJson'); const getPackageJson = require('./getPackageJson');
var PrettierPlugin = require("prettier-webpack-plugin");
// Webpack uses `publicPath` to determine where the app is being served from. // Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path. // It requires a trailing slash, or the file assets will get an incorrect path.
@ -517,6 +515,7 @@ module.exports = {
to: paths.appBuild to: paths.appBuild
} }
]), ]),
new PrettierPlugin(),
// Generate a service worker script that will precache, and keep up to date, // Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build. // the HTML & assets that are part of the Webpack build.
/*new WorkboxWebpackPlugin.GenerateSW({ /*new WorkboxWebpackPlugin.GenerateSW({

24
src/lib/components/Keyboard.css
View File

@ -1,10 +1,12 @@
body, html { body,
html {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.simple-keyboard { .simple-keyboard {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
width: 100%; width: 100%;
user-select: none; user-select: none;
box-sizing: border-box; box-sizing: border-box;
@ -38,13 +40,13 @@ body, html {
* hg-theme-default theme * hg-theme-default theme
*/ */
.simple-keyboard.hg-theme-default { .simple-keyboard.hg-theme-default {
background-color: rgba(0,0,0,0.1); background-color: rgba(0, 0, 0, 0.1);
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
} }
.simple-keyboard.hg-theme-default .hg-button { .simple-keyboard.hg-theme-default .hg-button {
box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);
height: 40px; height: 40px;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
@ -55,18 +57,18 @@ body, html {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* When using option "useButtonTag" */ /* When using option "useButtonTag" */
.simple-keyboard button.hg-button { .simple-keyboard button.hg-button {
border-width: 0; border-width: 0;
outline: 0; outline: 0;
font-size: inherit; font-size: inherit;
} }
.simple-keyboard.hg-theme-default .hg-button:active { .simple-keyboard.hg-theme-default .hg-button:active {
background: #e4e4e4; background: #e4e4e4;
} }
.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button { .simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
width: 33.3%; width: 33.3%;
@ -107,4 +109,4 @@ body, html {
.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] { .simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
max-width: 60px; max-width: 60px;
} }

428
src/lib/components/Keyboard.js
View File

@ -1,9 +1,9 @@
import './Keyboard.css'; import "./Keyboard.css";
// Services // Services
import PhysicalKeyboard from '../services/PhysicalKeyboard'; import PhysicalKeyboard from "../services/PhysicalKeyboard";
import KeyboardLayout from '../services/KeyboardLayout'; import KeyboardLayout from "../services/KeyboardLayout";
import Utilities from '../services/Utilities'; import Utilities from "../services/Utilities";
/** /**
* Root class for simple-keyboard * Root class for simple-keyboard
@ -17,12 +17,12 @@ class SimpleKeyboard {
* Creates an instance of 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. * @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){ constructor(...params) {
let keyboardDOMQuery = typeof params[0] === "string" ? params[0] : ".simple-keyboard"; let keyboardDOMQuery =
typeof params[0] === "string" ? params[0] : ".simple-keyboard";
let options = typeof params[0] === "object" ? params[0] : params[1]; let options = typeof params[0] === "object" ? params[0] : params[1];
if(!options) if (!options) options = {};
options = {};
/** /**
* Initializing Utilities * Initializing Utilities
@ -66,12 +66,13 @@ class SimpleKeyboard {
this.options.layoutName = this.options.layoutName || "default"; this.options.layoutName = this.options.layoutName || "default";
this.options.theme = this.options.theme || "hg-theme-default"; this.options.theme = this.options.theme || "hg-theme-default";
this.options.inputName = this.options.inputName || "default"; this.options.inputName = this.options.inputName || "default";
this.options.preventMouseDownDefault = this.options.preventMouseDownDefault || false; this.options.preventMouseDownDefault =
this.options.preventMouseDownDefault || false;
/** /**
* @type {object} Classes identifying loaded plugins * @type {object} Classes identifying loaded plugins
*/ */
this.keyboardPluginClasses = ''; this.keyboardPluginClasses = "";
/** /**
* Bindings * Bindings
@ -105,21 +106,21 @@ class SimpleKeyboard {
* @example * @example
* // To get entered input * // To get entered input
* let input = keyboard.getInput(); * let input = keyboard.getInput();
* *
* // To clear entered input. * // To clear entered input.
* keyboard.clearInput(); * keyboard.clearInput();
* *
* @type {object} * @type {object}
* @property {object} default Default SimpleKeyboard internal input. * @property {object} default Default SimpleKeyboard internal input.
* @property {object} myInputName Example input that can be set through `options.inputName:"myInputName"`. * @property {object} myInputName Example input that can be set through `options.inputName:"myInputName"`.
*/ */
this.input = {}; this.input = {};
this.input[this.options.inputName] = ''; this.input[this.options.inputName] = "";
/** /**
* @type {string} DOM class of the keyboard wrapper, normally "simple-keyboard" by default. * @type {string} DOM class of the keyboard wrapper, normally "simple-keyboard" by default.
*/ */
this.keyboardDOMClass = keyboardDOMQuery.split('.').join(""); 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}"). * @type {object} Contains the DOM elements of every rendered button, the key being the button's layout name (e.g.: "{enter}").
@ -129,8 +130,7 @@ class SimpleKeyboard {
/** /**
* Rendering keyboard * Rendering keyboard
*/ */
if(this.keyboardDOM) if (this.keyboardDOM) this.render();
this.render();
else { else {
console.warn(`"${keyboardDOMQuery}" was not found in the DOM.`); console.warn(`"${keyboardDOMQuery}" was not found in the DOM.`);
throw new Error("KEYBOARD_DOM_ERROR"); throw new Error("KEYBOARD_DOM_ERROR");
@ -140,10 +140,12 @@ class SimpleKeyboard {
* Saving instance * Saving instance
* This enables multiple simple-keyboard support with easier management * This enables multiple simple-keyboard support with easier management
*/ */
if(!window['SimpleKeyboardInstances']) if (!window["SimpleKeyboardInstances"])
window['SimpleKeyboardInstances'] = {}; window["SimpleKeyboardInstances"] = {};
window['SimpleKeyboardInstances'][this.utilities.camelCase(this.keyboardDOMClass)] = this; window["SimpleKeyboardInstances"][
this.utilities.camelCase(this.keyboardDOMClass)
] = this;
/** /**
* Physical Keyboard support * Physical Keyboard support
@ -161,68 +163,72 @@ class SimpleKeyboard {
* Handles clicks made to keyboard buttons * Handles clicks made to keyboard buttons
* @param {string} button The button's layout name. * @param {string} button The button's layout name.
*/ */
handleButtonClicked(button){ handleButtonClicked(button) {
let debug = this.options.debug; let debug = this.options.debug;
/** /**
* Ignoring placeholder buttons * Ignoring placeholder buttons
*/ */
if(button === '{//}') if (button === "{//}") return false;
return false;
/** /**
* Calling onKeyPress * Calling onKeyPress
*/ */
if(typeof this.options.onKeyPress === "function") if (typeof this.options.onKeyPress === "function")
this.options.onKeyPress(button); this.options.onKeyPress(button);
if(!this.input[this.options.inputName]) if (!this.input[this.options.inputName])
this.input[this.options.inputName] = ''; this.input[this.options.inputName] = "";
let updatedInput = this.utilities.getUpdatedInput( let updatedInput = this.utilities.getUpdatedInput(
button, this.input[this.options.inputName], this.options, this.caretPosition button,
this.input[this.options.inputName],
this.options,
this.caretPosition
); );
if( if (
// If input will change as a result of this button press // If input will change as a result of this button press
this.input[this.options.inputName] !== updatedInput && this.input[this.options.inputName] !== updatedInput &&
// This pertains to the "inputPattern" option: // This pertains to the "inputPattern" option:
( // If inputPattern isn't set
// If inputPattern isn't set (!this.options.inputPattern ||
!this.options.inputPattern ||
// Or, if it is set and if the pattern is valid - we proceed. // Or, if it is set and if the pattern is valid - we proceed.
(this.options.inputPattern && this.inputPatternIsValid(updatedInput)) (this.options.inputPattern && this.inputPatternIsValid(updatedInput)))
) ) {
){
/** /**
* If maxLength and handleMaxLength yield true, halting * If maxLength and handleMaxLength yield true, halting
*/ */
if(this.options.maxLength && this.utilities.handleMaxLength(this.input, this.options, updatedInput)){ if (
this.options.maxLength &&
this.utilities.handleMaxLength(this.input, this.options, updatedInput)
) {
return false; return false;
} }
this.input[this.options.inputName] = this.utilities.getUpdatedInput( this.input[this.options.inputName] = this.utilities.getUpdatedInput(
button, this.input[this.options.inputName], this.options, this.caretPosition, true button,
this.input[this.options.inputName],
this.options,
this.caretPosition,
true
); );
if(debug) if (debug) console.log("Input changed:", this.input);
console.log('Input changed:', this.input);
/** /**
* Enforce syncInstanceInputs, if set * Enforce syncInstanceInputs, if set
*/ */
if(this.options.syncInstanceInputs) if (this.options.syncInstanceInputs) this.syncInstanceInputs(this.input);
this.syncInstanceInputs(this.input);
/** /**
* Calling onChange * Calling onChange
*/ */
if(typeof this.options.onChange === "function") if (typeof this.options.onChange === "function")
this.options.onChange(this.input[this.options.inputName]); this.options.onChange(this.input[this.options.inputName]);
} }
if(debug){ if (debug) {
console.log("Key pressed:", button); console.log("Key pressed:", button);
} }
} }
@ -231,33 +237,28 @@ class SimpleKeyboard {
* Handles button mousedown * Handles button mousedown
*/ */
/* istanbul ignore next */ /* istanbul ignore next */
handleButtonMouseDown(button, e){ handleButtonMouseDown(button, e) {
/** /**
* @type {boolean} Whether the mouse is being held onKeyPress * @type {boolean} Whether the mouse is being held onKeyPress
*/ */
this.isMouseHold = true; this.isMouseHold = true;
if(this.holdInteractionTimeout) if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
clearTimeout(this.holdInteractionTimeout);
if(this.holdTimeout) if (this.holdTimeout) clearTimeout(this.holdTimeout);
clearTimeout(this.holdTimeout);
/** /**
* @type {object} Time to wait until a key hold is detected * @type {object} Time to wait until a key hold is detected
*/ */
this.holdTimeout = setTimeout(() => { this.holdTimeout = setTimeout(() => {
if( if (
this.isMouseHold && this.isMouseHold &&
( ((!button.includes("{") && !button.includes("}")) ||
(!button.includes("{") && !button.includes("}")) ||
button === "{bksp}" || button === "{bksp}" ||
button === "{space}" || button === "{space}" ||
button === "{tab}" button === "{tab}")
) ) {
){ if (this.options.debug) console.log("Button held:", button);
if(this.options.debug)
console.log("Button held:", button);
this.handleButtonHold(button, e); this.handleButtonHold(button, e);
} }
@ -268,25 +269,23 @@ class SimpleKeyboard {
/** /**
* Handles button mouseup * Handles button mouseup
*/ */
handleButtonMouseUp(){ handleButtonMouseUp() {
this.isMouseHold = false; this.isMouseHold = false;
if(this.holdInteractionTimeout) if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
clearTimeout(this.holdInteractionTimeout);
} }
/** /**
* Handles button hold * Handles button hold
*/ */
/* istanbul ignore next */ /* istanbul ignore next */
handleButtonHold(button){ handleButtonHold(button) {
if(this.holdInteractionTimeout) if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
clearTimeout(this.holdInteractionTimeout);
/** /**
* @type {object} Timeout dictating the speed of key hold iterations * @type {object} Timeout dictating the speed of key hold iterations
*/ */
this.holdInteractionTimeout = setTimeout(() => { this.holdInteractionTimeout = setTimeout(() => {
if(this.isMouseHold){ if (this.isMouseHold) {
this.handleButtonClicked(button); this.handleButtonClicked(button);
this.handleButtonHold(button); this.handleButtonHold(button);
} else { } else {
@ -298,39 +297,37 @@ class SimpleKeyboard {
/** /**
* Send a command to all simple-keyboard instances (if you have several instances). * Send a command to all simple-keyboard instances (if you have several instances).
*/ */
syncInstanceInputs(){ syncInstanceInputs() {
this.dispatch((instance) => { this.dispatch(instance => {
instance.replaceInput(this.input); instance.replaceInput(this.input);
}); });
} }
/** /**
* Clear the keyboard’s input. * Clear the keyboard’s input.
* @param {string} [inputName] optional - the internal input to select * @param {string} [inputName] optional - the internal input to select
*/ */
clearInput(inputName){ clearInput(inputName) {
inputName = inputName || this.options.inputName; inputName = inputName || this.options.inputName;
this.input[inputName] = ''; this.input[inputName] = "";
/** /**
* Enforce syncInstanceInputs, if set * Enforce syncInstanceInputs, if set
*/ */
if(this.options.syncInstanceInputs) if (this.options.syncInstanceInputs) this.syncInstanceInputs(this.input);
this.syncInstanceInputs(this.input);
} }
/** /**
* Get the keyboard’s input (You can also get it from the onChange prop). * Get the keyboard’s input (You can also get it from the onChange prop).
* @param {string} [inputName] optional - the internal input to select * @param {string} [inputName] optional - the internal input to select
*/ */
getInput(inputName){ getInput(inputName) {
inputName = inputName || this.options.inputName; inputName = inputName || this.options.inputName;
/** /**
* Enforce syncInstanceInputs, if set * Enforce syncInstanceInputs, if set
*/ */
if(this.options.syncInstanceInputs) if (this.options.syncInstanceInputs) this.syncInstanceInputs(this.input);
this.syncInstanceInputs(this.input);
return this.input[this.options.inputName]; return this.input[this.options.inputName];
} }
@ -340,41 +337,40 @@ class SimpleKeyboard {
* @param {string} input the input value * @param {string} input the input value
* @param {string} inputName optional - the internal input to select * @param {string} inputName optional - the internal input to select
*/ */
setInput(input, inputName){ setInput(input, inputName) {
inputName = inputName || this.options.inputName; inputName = inputName || this.options.inputName;
this.input[inputName] = input; this.input[inputName] = input;
/** /**
* Enforce syncInstanceInputs, if set * Enforce syncInstanceInputs, if set
*/ */
if(this.options.syncInstanceInputs) if (this.options.syncInstanceInputs) this.syncInstanceInputs(this.input);
this.syncInstanceInputs(this.input);
} }
/** /**
* Replace the input object (`keyboard.input`) * Replace the input object (`keyboard.input`)
* @param {object} inputObj The input object * @param {object} inputObj The input object
*/ */
replaceInput(inputObj){ replaceInput(inputObj) {
this.input = inputObj; this.input = inputObj;
} }
/** /**
* Set new option or modify existing ones after initialization. * Set new option or modify existing ones after initialization.
* @param {object} option The option to set * @param {object} option The option to set
*/ */
setOptions = option => { setOptions = option => {
option = option || {}; option = option || {};
this.options = Object.assign(this.options, option); this.options = Object.assign(this.options, option);
this.render(); this.render();
} };
/** /**
* Remove all keyboard rows and reset keyboard values. * Remove all keyboard rows and reset keyboard values.
* Used interally between re-renders. * Used interally between re-renders.
*/ */
clear(){ clear() {
this.keyboardDOM.innerHTML = ''; this.keyboardDOM.innerHTML = "";
this.keyboardDOM.className = this.keyboardDOMClass; this.keyboardDOM.className = this.keyboardDOMClass;
this.buttonElements = {}; this.buttonElements = {};
} }
@ -383,15 +379,17 @@ class SimpleKeyboard {
* Send a command to all simple-keyboard instances at once (if you have multiple instances). * 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 * @param {function(instance: object, key: string)} callback Function to run on every instance
*/ */
dispatch(callback){ dispatch(callback) {
if(!window['SimpleKeyboardInstances']){ if (!window["SimpleKeyboardInstances"]) {
console.warn(`SimpleKeyboardInstances is not defined. Dispatch cannot be called.`); console.warn(
`SimpleKeyboardInstances is not defined. Dispatch cannot be called.`
);
throw new Error("INSTANCES_VAR_ERROR"); throw new Error("INSTANCES_VAR_ERROR");
} }
return Object.keys(window['SimpleKeyboardInstances']).forEach((key) => { return Object.keys(window["SimpleKeyboardInstances"]).forEach(key => {
callback(window['SimpleKeyboardInstances'][key], key); callback(window["SimpleKeyboardInstances"][key], key);
}) });
} }
/** /**
@ -399,27 +397,24 @@ class SimpleKeyboard {
* @param {string} buttons List of buttons to select (separated by a space). * @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). * @param {string} className Classes to give to the selected buttons (separated by space).
*/ */
addButtonTheme(buttons, className){ addButtonTheme(buttons, className) {
if(!className || !buttons) if (!className || !buttons) return false;
return false;
buttons.split(" ").forEach(button => { buttons.split(" ").forEach(button => {
className.split(" ").forEach(classNameItem => { className.split(" ").forEach(classNameItem => {
if(!this.options.buttonTheme) if (!this.options.buttonTheme) this.options.buttonTheme = [];
this.options.buttonTheme = [];
let classNameFound = false; let classNameFound = false;
/** /**
* If class is already defined, we add button to class definition * If class is already defined, we add button to class definition
*/ */
this.options.buttonTheme.map(buttonTheme => { this.options.buttonTheme.map(buttonTheme => {
if (buttonTheme.class.split(" ").includes(classNameItem)) {
if(buttonTheme.class.split(" ").includes(classNameItem)){
classNameFound = true; classNameFound = true;
let buttonThemeArray = buttonTheme.buttons.split(" "); let buttonThemeArray = buttonTheme.buttons.split(" ");
if(!buttonThemeArray.includes(button)){ if (!buttonThemeArray.includes(button)) {
classNameFound = true; classNameFound = true;
buttonThemeArray.push(button); buttonThemeArray.push(button);
buttonTheme.buttons = buttonThemeArray.join(" "); buttonTheme.buttons = buttonThemeArray.join(" ");
@ -431,13 +426,12 @@ class SimpleKeyboard {
/** /**
* If class is not defined, we create a new entry * If class is not defined, we create a new entry
*/ */
if(!classNameFound){ if (!classNameFound) {
this.options.buttonTheme.push({ this.options.buttonTheme.push({
class: classNameItem, class: classNameItem,
buttons: buttons buttons: buttons
}); });
} }
}); });
}); });
@ -449,11 +443,11 @@ class SimpleKeyboard {
* @param {string} buttons List of buttons to select (separated by a space). * @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). * @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 * When called with empty parameters, remove all button themes
*/ */
if(!buttons && !className){ if (!buttons && !className) {
this.options.buttonTheme = []; this.options.buttonTheme = [];
this.render(); this.render();
return false; return false;
@ -462,31 +456,35 @@ class SimpleKeyboard {
/** /**
* If buttons are passed and buttonTheme has items * If buttons are passed and buttonTheme has items
*/ */
if(buttons && Array.isArray(this.options.buttonTheme) && this.options.buttonTheme.length){ if (
buttons &&
Array.isArray(this.options.buttonTheme) &&
this.options.buttonTheme.length
) {
let buttonArray = buttons.split(" "); let buttonArray = buttons.split(" ");
buttonArray.forEach((button, key) => { buttonArray.forEach((button, key) => {
this.options.buttonTheme.map((buttonTheme, index) => { this.options.buttonTheme.map((buttonTheme, index) => {
/** /**
* If className is set, we affect the buttons only for that class * If className is set, we affect the buttons only for that class
* Otherwise, we afect all classes * Otherwise, we afect all classes
*/ */
if( if (
(className && className.includes(buttonTheme.class)) || (className && className.includes(buttonTheme.class)) ||
!className !className
){ ) {
let filteredButtonArray = buttonTheme.buttons.split(" ").filter(item => item !== button); let filteredButtonArray = buttonTheme.buttons
.split(" ")
.filter(item => item !== button);
/** /**
* If buttons left, return them, otherwise, remove button Theme * If buttons left, return them, otherwise, remove button Theme
*/ */
if(filteredButtonArray.length){ if (filteredButtonArray.length) {
buttonTheme.buttons = filteredButtonArray.join(" "); buttonTheme.buttons = filteredButtonArray.join(" ");
} else { } else {
this.options.buttonTheme.splice(index, 1); this.options.buttonTheme.splice(index, 1);
buttonTheme = null; buttonTheme = null;
} }
} }
return buttonTheme; return buttonTheme;
@ -501,12 +499,12 @@ 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. * 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 * @param {string} button The button layout name to select
*/ */
getButtonElement(button){ getButtonElement(button) {
let output; let output;
let buttonArr = this.buttonElements[button]; let buttonArr = this.buttonElements[button];
if(buttonArr){ if (buttonArr) {
if(buttonArr.length > 1){ if (buttonArr.length > 1) {
output = buttonArr; output = buttonArr;
} else { } else {
output = buttonArr[0]; output = buttonArr[0];
@ -520,24 +518,28 @@ class SimpleKeyboard {
* This handles the "inputPattern" option * This handles the "inputPattern" option
* by checking if the provided inputPattern passes * by checking if the provided inputPattern passes
*/ */
inputPatternIsValid(inputVal){ inputPatternIsValid(inputVal) {
let inputPatternRaw = this.options.inputPattern; let inputPatternRaw = this.options.inputPattern;
let inputPattern; let inputPattern;
/** /**
* Check if input pattern is global or targeted to individual inputs * Check if input pattern is global or targeted to individual inputs
*/ */
if(inputPatternRaw instanceof RegExp){ if (inputPatternRaw instanceof RegExp) {
inputPattern = inputPatternRaw; inputPattern = inputPatternRaw;
} else { } else {
inputPattern = inputPatternRaw[this.options.inputName]; inputPattern = inputPatternRaw[this.options.inputName];
} }
if(inputPattern && inputVal){ if (inputPattern && inputVal) {
let didInputMatch = inputPattern.test(inputVal); let didInputMatch = inputPattern.test(inputVal);
if(this.options.debug){ if (this.options.debug) {
console.log(`inputPattern ("${inputPattern}"): ${didInputMatch ? "passed" : "did not pass!"}`); console.log(
`inputPattern ("${inputPattern}"): ${
didInputMatch ? "passed" : "did not pass!"
}`
);
} }
return didInputMatch; return didInputMatch;
@ -552,59 +554,62 @@ class SimpleKeyboard {
/** /**
* Retrieves the current cursor position within a input or textarea (if any) * Retrieves the current cursor position within a input or textarea (if any)
*/ */
handleCaret(){ handleCaret() {
/** /**
* Only first instance should insall the caret handling events * Only first instance should insall the caret handling events
*/ */
this.caretPosition = null; this.caretPosition = null;
let simpleKeyboardInstances = window['SimpleKeyboardInstances']; let simpleKeyboardInstances = window["SimpleKeyboardInstances"];
if( if (
( (simpleKeyboardInstances &&
simpleKeyboardInstances && Object.keys(simpleKeyboardInstances)[0] ===
Object.keys(simpleKeyboardInstances)[0] === this.utilities.camelCase(this.keyboardDOMClass) this.utilities.camelCase(this.keyboardDOMClass)) ||
) ||
!simpleKeyboardInstances !simpleKeyboardInstances
){ ) {
if(this.options.debug){ if (this.options.debug) {
console.log(`Caret handling started (${this.keyboardDOMClass})`) console.log(`Caret handling started (${this.keyboardDOMClass})`);
} }
document.addEventListener("keyup", this.caretEventHandler); document.addEventListener("keyup", this.caretEventHandler);
document.addEventListener("mouseup", this.caretEventHandler); document.addEventListener("mouseup", this.caretEventHandler);
document.addEventListener("touchend", this.caretEventHandler); document.addEventListener("touchend", this.caretEventHandler);
} }
} }
/** /**
* Called by {@link handleCaret} when an event that warrants a cursor position update is triggered * Called by {@link handleCaret} when an event that warrants a cursor position update is triggered
*/ */
caretEventHandler(event){ caretEventHandler(event) {
let targetTagName; let targetTagName;
if(event.target.tagName){ if (event.target.tagName) {
targetTagName = event.target.tagName.toLowerCase(); targetTagName = event.target.tagName.toLowerCase();
} }
this.dispatch(instance => { this.dispatch(instance => {
if(instance.isMouseHold){ if (instance.isMouseHold) {
instance.isMouseHold = false; instance.isMouseHold = false;
} }
if( if (
(targetTagName === "textarea" || (targetTagName === "textarea" || targetTagName === "input") &&
targetTagName === "input") && !instance.options.disableCaretPositioning
!instance.options.disableCaretPositioning ) {
){
/** /**
* Tracks current cursor position * Tracks current cursor position
* As keys are pressed, text will be added/removed at that position within the input. * As keys are pressed, text will be added/removed at that position within the input.
*/ */
instance.caretPosition = event.target.selectionStart; instance.caretPosition = event.target.selectionStart;
if(instance.options.debug){ if (instance.options.debug) {
console.log("Caret at: ", event.target.selectionStart, event.target.tagName.toLowerCase(), `(${instance.keyboardDOMClass})`); console.log(
} "Caret at: ",
} else if(instance.options.disableCaretPositioning){ event.target.selectionStart,
event.target.tagName.toLowerCase(),
`(${instance.keyboardDOMClass})`
);
}
} else if (instance.options.disableCaretPositioning) {
/** /**
* If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated. * If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.
*/ */
@ -616,9 +621,9 @@ class SimpleKeyboard {
/** /**
* Executes the callback function once simple-keyboard is rendered for the first time (on initialization). * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
*/ */
onInit(){ onInit() {
if(this.options.debug){ if (this.options.debug) {
console.log(`${this.keyboardDOMClass} Initialized`) console.log(`${this.keyboardDOMClass} Initialized`);
} }
/** /**
@ -626,23 +631,21 @@ class SimpleKeyboard {
*/ */
this.handleCaret(); this.handleCaret();
if(typeof this.options.onInit === "function") if (typeof this.options.onInit === "function") this.options.onInit();
this.options.onInit();
} }
/** /**
* Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts). * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
*/ */
onRender(){ onRender() {
if(typeof this.options.onRender === "function") if (typeof this.options.onRender === "function") this.options.onRender();
this.options.onRender();
} }
/** /**
* Executes the callback function once all modules have been loaded * Executes the callback function once all modules have been loaded
*/ */
onModulesLoaded(){ onModulesLoaded() {
if(typeof this.options.onModulesLoaded === "function") if (typeof this.options.onModulesLoaded === "function")
this.options.onModulesLoaded(); this.options.onModulesLoaded();
} }
@ -650,30 +653,33 @@ class SimpleKeyboard {
* Register module * Register module
*/ */
registerModule = (name, initCallback) => { registerModule = (name, initCallback) => {
if(!this.modules[name]) if (!this.modules[name]) this.modules[name] = {};
this.modules[name] = {};
initCallback(this.modules[name]); initCallback(this.modules[name]);
} };
/** /**
* Load modules * Load modules
*/ */
loadModules(){ loadModules() {
if(Array.isArray(this.options.modules)){ if (Array.isArray(this.options.modules)) {
this.options.modules.forEach(Module => { this.options.modules.forEach(Module => {
let module = new Module(); let module = new Module();
/* istanbul ignore next */ /* istanbul ignore next */
if(module.constructor.name && module.constructor.name !== "Function"){ if (module.constructor.name && module.constructor.name !== "Function") {
let classStr = `module-${this.utilities.camelCase(module.constructor.name)}`; let classStr = `module-${this.utilities.camelCase(
this.keyboardPluginClasses = this.keyboardPluginClasses + ` ${classStr}`; module.constructor.name
)}`;
this.keyboardPluginClasses =
this.keyboardPluginClasses + ` ${classStr}`;
} }
module.init(this); module.init(this);
}); });
this.keyboardPluginClasses = this.keyboardPluginClasses + " modules-loaded"; this.keyboardPluginClasses =
this.keyboardPluginClasses + " modules-loaded";
this.render(); this.render();
this.onModulesLoaded(); this.onModulesLoaded();
@ -684,23 +690,22 @@ class SimpleKeyboard {
* Get module prop * Get module prop
*/ */
getModuleProp = (name, prop) => { getModuleProp = (name, prop) => {
if(!this.modules[name]) if (!this.modules[name]) return false;
return false;
return this.modules[name][prop]; return this.modules[name][prop];
} };
/** /**
* getModulesList * getModulesList
*/ */
getModulesList = () => { getModulesList = () => {
return Object.keys(this.modules); return Object.keys(this.modules);
} };
/** /**
* Renders rows and buttons as per options * Renders rows and buttons as per options
*/ */
render(){ render() {
/** /**
* Clear keyboard * Clear keyboard
*/ */
@ -708,30 +713,37 @@ class SimpleKeyboard {
let layoutClass = `hg-layout-${this.options.layoutName}`; let layoutClass = `hg-layout-${this.options.layoutName}`;
let layout = this.options.layout || KeyboardLayout.getDefaultLayout(); let layout = this.options.layout || KeyboardLayout.getDefaultLayout();
let useTouchEvents = this.options.useTouchEvents || false let useTouchEvents = this.options.useTouchEvents || false;
/** /**
* Account for buttonTheme, if set * Account for buttonTheme, if set
*/ */
let buttonThemesParsed = {}; let buttonThemesParsed = {};
if(Array.isArray(this.options.buttonTheme)){ if (Array.isArray(this.options.buttonTheme)) {
this.options.buttonTheme.forEach(themeObj => { this.options.buttonTheme.forEach(themeObj => {
if(themeObj.buttons && themeObj.class){ if (themeObj.buttons && themeObj.class) {
let themeButtons; let themeButtons;
if(typeof themeObj.buttons === "string"){ if (typeof themeObj.buttons === "string") {
themeButtons = themeObj.buttons.split(" "); themeButtons = themeObj.buttons.split(" ");
} }
if(themeButtons){ if (themeButtons) {
themeButtons.forEach(themeButton => { themeButtons.forEach(themeButton => {
let themeParsed = buttonThemesParsed[themeButton]; let themeParsed = buttonThemesParsed[themeButton];
// If the button has already been added // If the button has already been added
if(themeParsed){ if (themeParsed) {
// Making sure we don't add duplicate classes, even when buttonTheme has duplicates // Making sure we don't add duplicate classes, even when buttonTheme has duplicates
if(!this.utilities.countInArray(themeParsed.split(" "), themeObj.class)){ if (
buttonThemesParsed[themeButton] = `${themeParsed} ${themeObj.class}`; !this.utilities.countInArray(
themeParsed.split(" "),
themeObj.class
)
) {
buttonThemesParsed[themeButton] = `${themeParsed} ${
themeObj.class
}`;
} }
} else { } else {
buttonThemesParsed[themeButton] = themeObj.class; buttonThemesParsed[themeButton] = themeObj.class;
@ -739,7 +751,9 @@ class SimpleKeyboard {
}); });
} }
} else { } else {
console.warn(`buttonTheme row is missing the "buttons" or the "class". Please check the documentation.`) console.warn(
`buttonTheme row is missing the "buttons" or the "class". Please check the documentation.`
);
} }
}); });
} }
@ -747,7 +761,9 @@ class SimpleKeyboard {
/** /**
* Adding themeClass, layoutClass to keyboardDOM * Adding themeClass, layoutClass to keyboardDOM
*/ */
this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${this.keyboardPluginClasses}`; this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${
this.keyboardPluginClasses
}`;
/** /**
* Iterating through each row * Iterating through each row
@ -767,33 +783,39 @@ class SimpleKeyboard {
rowArray.forEach((button, bIndex) => { rowArray.forEach((button, bIndex) => {
let fctBtnClass = this.utilities.getButtonClass(button); let fctBtnClass = this.utilities.getButtonClass(button);
let buttonThemeClass = buttonThemesParsed[button]; let buttonThemeClass = buttonThemesParsed[button];
let buttonDisplayName = this.utilities.getButtonDisplayName(button, this.options.display, this.options.mergeDisplay); let buttonDisplayName = this.utilities.getButtonDisplayName(
button,
this.options.display,
this.options.mergeDisplay
);
/** /**
* Creating button * Creating button
*/ */
let buttonType = this.options.useButtonTag ? "button" : "div"; let buttonType = this.options.useButtonTag ? "button" : "div";
let buttonDOM = document.createElement(buttonType); let buttonDOM = document.createElement(buttonType);
buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`; buttonDOM.className += `hg-button ${fctBtnClass}${
buttonThemeClass ? " " + buttonThemeClass : ""
}`;
if (useTouchEvents) { if (useTouchEvents) {
buttonDOM.ontouchstart = (e) => { buttonDOM.ontouchstart = e => {
this.handleButtonClicked(button); this.handleButtonClicked(button);
this.handleButtonMouseDown(button, e); this.handleButtonMouseDown(button, e);
} };
buttonDOM.ontouchend = e => this.handleButtonMouseUp(); buttonDOM.ontouchend = e => this.handleButtonMouseUp();
buttonDOM.ontouchcancel = e => this.handleButtonMouseUp(); buttonDOM.ontouchcancel = e => this.handleButtonMouseUp();
} else { } else {
buttonDOM.onclick = () => { buttonDOM.onclick = () => {
this.isMouseHold = false; this.isMouseHold = false;
this.handleButtonClicked(button); this.handleButtonClicked(button);
} };
buttonDOM.onmousedown = (e) => { buttonDOM.onmousedown = e => {
if (this.options.preventMouseDownDefault) e.preventDefault(); if (this.options.preventMouseDownDefault) e.preventDefault();
this.handleButtonMouseDown(button, e); this.handleButtonMouseDown(button, e);
} };
} }
/** /**
* Adding identifier * Adding identifier
*/ */
@ -814,15 +836,14 @@ class SimpleKeyboard {
/** /**
* Adding button label to button * Adding button label to button
*/ */
let buttonSpanDOM = document.createElement('span'); let buttonSpanDOM = document.createElement("span");
buttonSpanDOM.innerHTML = buttonDisplayName; buttonSpanDOM.innerHTML = buttonDisplayName;
buttonDOM.appendChild(buttonSpanDOM); buttonDOM.appendChild(buttonSpanDOM);
/** /**
* Adding to buttonElements * Adding to buttonElements
*/ */
if(!this.buttonElements[button]) if (!this.buttonElements[button]) this.buttonElements[button] = [];
this.buttonElements[button] = [];
this.buttonElements[button].push(buttonDOM); this.buttonElements[button].push(buttonDOM);
@ -830,7 +851,6 @@ class SimpleKeyboard {
* Appending button to row * Appending button to row
*/ */
rowDOM.appendChild(buttonDOM); rowDOM.appendChild(buttonDOM);
}); });
/** /**
@ -844,7 +864,7 @@ class SimpleKeyboard {
*/ */
this.onRender(); this.onRender();
if(!this.initialized){ if (!this.initialized) {
/** /**
* Ensures that onInit is only called once per instantiation * Ensures that onInit is only called once per instantiation
*/ */

2
src/lib/index.js
View File

@ -1,2 +1,2 @@
import SimpleKeyboard from './components/Keyboard'; import SimpleKeyboard from "./components/Keyboard";
export default SimpleKeyboard; export default SimpleKeyboard;

28
src/lib/services/KeyboardLayout.js
View File

@ -6,24 +6,24 @@ class KeyboardLayout {
* Get default simple-keyboard layout * Get default simple-keyboard layout
* @return {object} The default layout (US-QWERTY) * @return {object} The default layout (US-QWERTY)
*/ */
static getDefaultLayout(){ static getDefaultLayout() {
return { return {
'default': [ default: [
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}', "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
'{tab} q w e r t y u i o p [ ] \\', "{tab} q w e r t y u i o p [ ] \\",
'{lock} a s d f g h j k l ; \' {enter}', "{lock} a s d f g h j k l ; ' {enter}",
'{shift} z x c v b n m , . / {shift}', "{shift} z x c v b n m , . / {shift}",
'.com @ {space}' ".com @ {space}"
], ],
'shift': [ shift: [
'~ ! @ # $ % ^ & * ( ) _ + {bksp}', "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
'{tab} Q W E R T Y U I O P { } |', "{tab} Q W E R T Y U I O P { } |",
'{lock} A S D F G H J K L : " {enter}', '{lock} A S D F G H J K L : " {enter}',
'{shift} Z X C V B N M < > ? {shift}', "{shift} Z X C V B N M < > ? {shift}",
'.com @ {space}' ".com @ {space}"
] ]
} };
} }
} }
export default KeyboardLayout; export default KeyboardLayout;

48
src/lib/services/PhysicalKeyboard.js
View File

@ -5,7 +5,7 @@ class PhysicalKeyboard {
/** /**
* Creates an instance of the PhysicalKeyboard service * Creates an instance of the PhysicalKeyboard service
*/ */
constructor(simpleKeyboardInstance){ constructor(simpleKeyboardInstance) {
/** /**
* @type {object} A simple-keyboard instance * @type {object} A simple-keyboard instance
*/ */
@ -15,7 +15,9 @@ class PhysicalKeyboard {
* Bindings * Bindings
*/ */
this.initKeyboardListener = this.initKeyboardListener.bind(this); this.initKeyboardListener = this.initKeyboardListener.bind(this);
this.getSimpleKeyboardLayoutKey = this.getSimpleKeyboardLayoutKey.bind(this); this.getSimpleKeyboardLayoutKey = this.getSimpleKeyboardLayoutKey.bind(
this
);
/** /**
* Initialize key listeners * Initialize key listeners
@ -26,32 +28,40 @@ class PhysicalKeyboard {
/** /**
* Initializes key event listeners * Initializes key event listeners
*/ */
initKeyboardListener(){ initKeyboardListener() {
// Adding button style on keydown // Adding button style on keydown
document.addEventListener("keydown", (event) => { document.addEventListener("keydown", event => {
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){ if (this.simpleKeyboardInstance.options.physicalKeyboardHighlight) {
let buttonPressed = this.getSimpleKeyboardLayoutKey(event); let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
this.simpleKeyboardInstance.dispatch(instance => { this.simpleKeyboardInstance.dispatch(instance => {
let buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement(`{${buttonPressed}}`); let buttonDOM =
instance.getButtonElement(buttonPressed) ||
instance.getButtonElement(`{${buttonPressed}}`);
if(buttonDOM){ if (buttonDOM) {
buttonDOM.style.backgroundColor = this.simpleKeyboardInstance.options.physicalKeyboardHighlightBgColor || "#9ab4d0"; buttonDOM.style.backgroundColor =
buttonDOM.style.color = this.simpleKeyboardInstance.options.physicalKeyboardHighlightTextColor || "white"; this.simpleKeyboardInstance.options
.physicalKeyboardHighlightBgColor || "#9ab4d0";
buttonDOM.style.color =
this.simpleKeyboardInstance.options
.physicalKeyboardHighlightTextColor || "white";
} }
}); });
} }
}); });
// Removing button style on keyup // Removing button style on keyup
document.addEventListener("keyup", (event) => { document.addEventListener("keyup", event => {
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){ if (this.simpleKeyboardInstance.options.physicalKeyboardHighlight) {
let buttonPressed = this.getSimpleKeyboardLayoutKey(event); let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
this.simpleKeyboardInstance.dispatch(instance => { this.simpleKeyboardInstance.dispatch(instance => {
let buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement(`{${buttonPressed}}`); let buttonDOM =
instance.getButtonElement(buttonPressed) ||
instance.getButtonElement(`{${buttonPressed}}`);
if(buttonDOM && buttonDOM.removeAttribute){ if (buttonDOM && buttonDOM.removeAttribute) {
buttonDOM.removeAttribute("style"); buttonDOM.removeAttribute("style");
} }
}); });
@ -63,10 +73,10 @@ class PhysicalKeyboard {
* Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format * Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format
* @param {object} event The KeyboardEvent * @param {object} event The KeyboardEvent
*/ */
getSimpleKeyboardLayoutKey(event){ getSimpleKeyboardLayoutKey(event) {
let output; let output;
if( if (
event.code.includes("Numpad") || event.code.includes("Numpad") ||
event.code.includes("Shift") || event.code.includes("Shift") ||
event.code.includes("Space") || event.code.includes("Space") ||
@ -74,7 +84,7 @@ class PhysicalKeyboard {
event.code.includes("Control") || event.code.includes("Control") ||
event.code.includes("Alt") || event.code.includes("Alt") ||
event.code.includes("Meta") event.code.includes("Meta")
){ ) {
output = event.code; output = event.code;
} else { } else {
output = event.key; output = event.key;
@ -85,7 +95,9 @@ class PhysicalKeyboard {
*/ */
if ( if (
output !== output.toUpperCase() || output !== output.toUpperCase() ||
(event.code[0] === "F" && Number.isInteger(Number(event.code[1])) && event.code.length <= 3) (event.code[0] === "F" &&
Number.isInteger(Number(event.code[1])) &&
event.code.length <= 3)
) { ) {
output = output.toLowerCase(); output = output.toLowerCase();
} }
@ -94,4 +106,4 @@ class PhysicalKeyboard {
} }
} }
export default PhysicalKeyboard; export default PhysicalKeyboard;

238
src/lib/services/Utilities.js
View File

@ -5,7 +5,7 @@ class Utilities {
/** /**
* Creates an instance of the Utility service * Creates an instance of the Utility service
*/ */
constructor(simpleKeyboardInstance){ constructor(simpleKeyboardInstance) {
/** /**
* @type {object} A simple-keyboard instance * @type {object} A simple-keyboard instance
*/ */
@ -26,16 +26,19 @@ class Utilities {
/** /**
* Adds default classes to a given button * Adds default classes to a given button
* *
* @param {string} button The button's layout name * @param {string} button The button's layout name
* @return {string} The classes to be added to the button * @return {string} The classes to be added to the button
*/ */
getButtonClass(button){ getButtonClass(button) {
let buttonTypeClass = (button.includes("{") && button.includes("}") && button !== '{//}') ? "functionBtn" : "standardBtn"; let buttonTypeClass =
button.includes("{") && button.includes("}") && button !== "{//}"
? "functionBtn"
: "standardBtn";
let buttonWithoutBraces = button.replace("{", "").replace("}", ""); let buttonWithoutBraces = button.replace("{", "").replace("}", "");
let buttonNormalized = ''; let buttonNormalized = "";
if(buttonTypeClass !== "standardBtn") if (buttonTypeClass !== "standardBtn")
buttonNormalized = ` hg-button-${buttonWithoutBraces}`; buttonNormalized = ` hg-button-${buttonWithoutBraces}`;
return `hg-${buttonTypeClass}${buttonNormalized}`; return `hg-${buttonTypeClass}${buttonNormalized}`;
@ -44,22 +47,22 @@ class Utilities {
/** /**
* Default button display labels * Default button display labels
*/ */
getDefaultDiplay(){ getDefaultDiplay() {
return { return {
'{bksp}': 'backspace', "{bksp}": "backspace",
'{backspace}': 'backspace', "{backspace}": "backspace",
'{enter}': '< enter', "{enter}": "< enter",
'{shift}': 'shift', "{shift}": "shift",
'{shiftleft}': 'shift', "{shiftleft}": "shift",
'{shiftright}': 'shift', "{shiftright}": "shift",
'{alt}': 'alt', "{alt}": "alt",
'{s}': 'shift', "{s}": "shift",
'{tab}': 'tab', "{tab}": "tab",
'{lock}': 'caps', "{lock}": "caps",
'{capslock}': 'caps', "{capslock}": "caps",
'{accept}': 'Submit', "{accept}": "Submit",
'{space}': ' ', "{space}": " ",
'{//}': ' ', "{//}": " ",
"{esc}": "esc", "{esc}": "esc",
"{escape}": "esc", "{escape}": "esc",
"{f1}": "f1", "{f1}": "f1",
@ -74,8 +77,8 @@ class Utilities {
"{f10}": "f10", "{f10}": "f10",
"{f11}": "f11", "{f11}": "f11",
"{f12}": "f12", "{f12}": "f12",
'{numpaddivide}': '/', "{numpaddivide}": "/",
'{numlock}': 'lock', "{numlock}": "lock",
"{arrowup}": "↑", "{arrowup}": "↑",
"{arrowleft}": "←", "{arrowleft}": "←",
"{arrowdown}": "↓", "{arrowdown}": "↓",
@ -104,18 +107,18 @@ class Utilities {
"{numpad6}": "6", "{numpad6}": "6",
"{numpad7}": "7", "{numpad7}": "7",
"{numpad8}": "8", "{numpad8}": "8",
"{numpad9}": "9", "{numpad9}": "9"
}; };
} }
/** /**
* Returns the display (label) name for a given button * Returns the display (label) name for a given button
* *
* @param {string} button The button's layout name * @param {string} button The button's layout name
* @param {object} display The provided display option * @param {object} display The provided display option
* @param {boolean} mergeDisplay Whether the provided param value should be merged with the default one. * @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){ if (mergeDisplay) {
display = Object.assign({}, this.getDefaultDiplay(), display); display = Object.assign({}, this.getDefaultDiplay(), display);
} else { } else {
display = display || this.getDefaultDiplay(); display = display || this.getDefaultDiplay();
@ -124,54 +127,61 @@ class Utilities {
return display[button] || button; return display[button] || button;
} }
/** /**
* Returns the updated input resulting from clicking a given button * Returns the updated input resulting from clicking a given button
* *
* @param {string} button The button's layout name * @param {string} button The button's layout name
* @param {string} input The input string * @param {string} input The input string
* @param {object} options The simple-keyboard options object * @param {object} options The simple-keyboard options object
* @param {number} caretPos The cursor's current position * @param {number} caretPos The cursor's current position
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor * @param {boolean} moveCaret Whether to update simple-keyboard's cursor
*/ */
getUpdatedInput(button, input, options, caretPos, moveCaret){ getUpdatedInput(button, input, options, caretPos, moveCaret) {
let output = input; let output = input;
if((button === "{bksp}" || button === "{backspace}") && output.length > 0){ if (
(button === "{bksp}" || button === "{backspace}") &&
output.length > 0
) {
output = this.removeAt(output, caretPos, moveCaret); output = this.removeAt(output, caretPos, moveCaret);
} else if (button === "{space}")
} else if(button === "{space}")
output = this.addStringAt(output, " ", caretPos, moveCaret); output = this.addStringAt(output, " ", caretPos, moveCaret);
else if (
else if(button === "{tab}" && !(typeof options.tabCharOnTab === "boolean" && options.tabCharOnTab === false)){ button === "{tab}" &&
!(
typeof options.tabCharOnTab === "boolean" &&
options.tabCharOnTab === false
)
) {
output = this.addStringAt(output, "\t", caretPos, moveCaret); output = this.addStringAt(output, "\t", caretPos, moveCaret);
} else if (
} else if((button === "{enter}" || button === "{numpadenter}") && options.newLineOnEnter) (button === "{enter}" || button === "{numpadenter}") &&
options.newLineOnEnter
)
output = this.addStringAt(output, "\n", caretPos, moveCaret); output = this.addStringAt(output, "\n", caretPos, moveCaret);
else if (
else if(button.includes("numpad") && Number.isInteger(Number(button[button.length - 2]))){ button.includes("numpad") &&
output = this.addStringAt(output, button[button.length - 2], caretPos, moveCaret); Number.isInteger(Number(button[button.length - 2]))
} ) {
else if(button === "{numpaddivide}") output = this.addStringAt(
output = this.addStringAt(output, '/', caretPos, moveCaret); output,
button[button.length - 2],
else if(button === "{numpadmultiply}") caretPos,
output = this.addStringAt(output, '*', caretPos, moveCaret); moveCaret
);
else if(button === "{numpadsubtract}") } else if (button === "{numpaddivide}")
output = this.addStringAt(output, '-', caretPos, moveCaret); output = this.addStringAt(output, "/", caretPos, moveCaret);
else if (button === "{numpadmultiply}")
else if(button === "{numpadadd}") output = this.addStringAt(output, "*", caretPos, moveCaret);
output = this.addStringAt(output, '+', caretPos, moveCaret); else if (button === "{numpadsubtract}")
output = this.addStringAt(output, "-", caretPos, moveCaret);
else if(button === "{numpaddecimal}") else if (button === "{numpadadd}")
output = this.addStringAt(output, '.', caretPos, moveCaret); output = this.addStringAt(output, "+", caretPos, moveCaret);
else if (button === "{numpaddecimal}")
else if(button === "{" || button === "}") output = this.addStringAt(output, ".", caretPos, moveCaret);
else if (button === "{" || button === "}")
output = this.addStringAt(output, button, caretPos, moveCaret); output = this.addStringAt(output, button, caretPos, moveCaret);
else if (!button.includes("{") && !button.includes("}"))
else if(!button.includes("{") && !button.includes("}"))
output = this.addStringAt(output, button, caretPos, moveCaret); output = this.addStringAt(output, button, caretPos, moveCaret);
return output; return output;
@ -179,14 +189,18 @@ class Utilities {
/** /**
* Moves the cursor position by a given amount * Moves the cursor position by a given amount
* *
* @param {number} length Represents by how many characters the input should be moved * @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. * @param {boolean} minus Whether the cursor should be moved to the left or not.
*/ */
updateCaretPos(length, minus){ updateCaretPos(length, minus) {
let newCaretPos = this.updateCaretPosAction(this.simpleKeyboardInstance, length, minus); let newCaretPos = this.updateCaretPosAction(
this.simpleKeyboardInstance,
length,
minus
);
if(this.simpleKeyboardInstance.options.syncInstanceInputs){ if (this.simpleKeyboardInstance.options.syncInstanceInputs) {
this.simpleKeyboardInstance.dispatch(instance => { this.simpleKeyboardInstance.dispatch(instance => {
instance.caretPosition = newCaretPos; instance.caretPosition = newCaretPos;
}); });
@ -195,21 +209,25 @@ class Utilities {
/** /**
* Action method of updateCaretPos * Action method of updateCaretPos
* *
* @param {object} instance The instance whose position should be updated * @param {object} instance The instance whose position should be updated
* @param {number} length Represents by how many characters the input should be moved * @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. * @param {boolean} minus Whether the cursor should be moved to the left or not.
*/ */
updateCaretPosAction(instance, length, minus){ updateCaretPosAction(instance, length, minus) {
if(minus){ if (minus) {
if(instance.caretPosition > 0) if (instance.caretPosition > 0)
instance.caretPosition = instance.caretPosition - length; instance.caretPosition = instance.caretPosition - length;
} else { } else {
instance.caretPosition = instance.caretPosition + length; instance.caretPosition = instance.caretPosition + length;
} }
if(this.simpleKeyboardInstance.options.debug){ if (this.simpleKeyboardInstance.options.debug) {
console.log("Caret at:", instance.caretPosition, `(${instance.keyboardDOMClass})`); console.log(
"Caret at:",
instance.caretPosition,
`(${instance.keyboardDOMClass})`
);
} }
return instance.caretPosition; return instance.caretPosition;
@ -217,27 +235,28 @@ class Utilities {
/** /**
* Adds a string to the input at a given position * Adds a string to the input at a given position
* *
* @param {string} source The source input * @param {string} source The source input
* @param {string} string The string to add * @param {string} string The string to add
* @param {number} position The (cursor) position where the string should be added * @param {number} position The (cursor) position where the string should be added
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor * @param {boolean} moveCaret Whether to update simple-keyboard's cursor
*/ */
addStringAt(source, string, position, moveCaret){ addStringAt(source, string, position, moveCaret) {
let output; let output;
if(!position && position !== 0){ if (!position && position !== 0) {
output = source + string; output = source + string;
} else { } else {
output = [source.slice(0, position), string, source.slice(position)].join(''); output = [source.slice(0, position), string, source.slice(position)].join(
""
);
/** /**
* Avoid caret position change when maxLength is set * Avoid caret position change when maxLength is set
*/ */
if(!this.isMaxLengthReached()){ if (!this.isMaxLengthReached()) {
if(moveCaret) this.updateCaretPos(string.length); if (moveCaret) this.updateCaretPos(string.length);
} }
} }
return output; return output;
@ -245,13 +264,13 @@ class Utilities {
/** /**
* Removes an amount of characters at a given position * Removes an amount of characters at a given position
* *
* @param {string} source The source input * @param {string} source The source input
* @param {number} position The (cursor) position from where the characters should be removed * @param {number} position The (cursor) position from where the characters should be removed
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor * @param {boolean} moveCaret Whether to update simple-keyboard's cursor
*/ */
removeAt(source, position, moveCaret){ removeAt(source, position, moveCaret) {
if(this.simpleKeyboardInstance.caretPosition === 0){ if (this.simpleKeyboardInstance.caretPosition === 0) {
return source; return source;
} }
@ -264,27 +283,27 @@ class Utilities {
* Emojis are made out of two characters, so we must take a custom approach to trim them. * 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 * For more info: https://mathiasbynens.be/notes/javascript-unicode
*/ */
if(position && position >= 0){ if (position && position >= 0) {
prevTwoChars = source.substring(position - 2, position) prevTwoChars = source.substring(position - 2, position);
emojiMatched = prevTwoChars.match(emojiMatchedReg); emojiMatched = prevTwoChars.match(emojiMatchedReg);
if(emojiMatched){ if (emojiMatched) {
output = source.substr(0, (position - 2)) + source.substr(position); output = source.substr(0, position - 2) + source.substr(position);
if(moveCaret) this.updateCaretPos(2, true); if (moveCaret) this.updateCaretPos(2, true);
} else { } else {
output = source.substr(0, (position - 1)) + source.substr(position); output = source.substr(0, position - 1) + source.substr(position);
if(moveCaret) this.updateCaretPos(1, true); if (moveCaret) this.updateCaretPos(1, true);
} }
} else { } else {
prevTwoChars = source.slice(-2); prevTwoChars = source.slice(-2);
emojiMatched = prevTwoChars.match(emojiMatchedReg); emojiMatched = prevTwoChars.match(emojiMatchedReg);
if(emojiMatched){ if (emojiMatched) {
output = source.slice(0, -2); output = source.slice(0, -2);
if(moveCaret) this.updateCaretPos(2, true); if (moveCaret) this.updateCaretPos(2, true);
} else { } else {
output = source.slice(0, -1); output = source.slice(0, -1);
if(moveCaret) this.updateCaretPos(1, true); if (moveCaret) this.updateCaretPos(1, true);
} }
} }
@ -292,32 +311,32 @@ class Utilities {
} }
/** /**
* Determines whether the maxLength has been reached. This function is called when the maxLength option it set. * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
* *
* @param {object} inputObj * @param {object} inputObj
* @param {object} options * @param {object} options
* @param {string} updatedInput * @param {string} updatedInput
*/ */
handleMaxLength(inputObj, options, updatedInput){ handleMaxLength(inputObj, options, updatedInput) {
let maxLength = options.maxLength; let maxLength = options.maxLength;
let currentInput = inputObj[options.inputName]; let currentInput = inputObj[options.inputName];
let condition = currentInput.length === maxLength; let condition = currentInput.length === maxLength;
if( if (
/** /**
* If pressing this button won't add more characters * If pressing this button won't add more characters
* We exit out of this limiter function * We exit out of this limiter function
*/ */
updatedInput.length <= currentInput.length updatedInput.length <= currentInput.length
){ ) {
return false; return false;
} }
if(Number.isInteger(maxLength)){ if (Number.isInteger(maxLength)) {
if(options.debug){ if (options.debug) {
console.log("maxLength (num) reached:", condition); console.log("maxLength (num) reached:", condition);
} }
if(condition){ if (condition) {
/** /**
* @type {boolean} Boolean value that shows whether maxLength has been reached * @type {boolean} Boolean value that shows whether maxLength has been reached
*/ */
@ -329,14 +348,14 @@ class Utilities {
} }
} }
if(typeof maxLength === "object"){ if (typeof maxLength === "object") {
let condition = currentInput.length === maxLength[options.inputName]; let condition = currentInput.length === maxLength[options.inputName];
if(options.debug){ if (options.debug) {
console.log("maxLength (obj) reached:", condition); console.log("maxLength (obj) reached:", condition);
} }
if(condition){ if (condition) {
this.maxLengthReached = true; this.maxLengthReached = true;
return true; return true;
} else { } else {
@ -349,33 +368,32 @@ class Utilities {
/** /**
* Gets the current value of maxLengthReached * Gets the current value of maxLengthReached
*/ */
isMaxLengthReached(){ isMaxLengthReached() {
return Boolean(this.maxLengthReached); return Boolean(this.maxLengthReached);
} }
/** /**
* Transforms an arbitrary string to camelCase * Transforms an arbitrary string to camelCase
* *
* @param {string} string The string to transform. * @param {string} string The string to transform.
*/ */
camelCase(string){ camelCase(string) {
return string return string
.toLowerCase() .toLowerCase()
.trim() .trim()
.split(/[.\-_\s]/g) .split(/[.\-_\s]/g)
.reduce( .reduce((string, word) =>
(string, word) => word.length ? string + word[0].toUpperCase() + word.slice(1) : string
word.length ? string + word[0].toUpperCase() + word.slice(1) : string
); );
}; }
/** /**
* Counts the number of duplicates in a given array * Counts the number of duplicates in a given array
* *
* @param {Array} array The haystack to search in * @param {Array} array The haystack to search in
* @param {string} value The needle to search for * @param {string} value The needle to search for
*/ */
countInArray(array, value){ countInArray(array, value) {
return array.reduce((n, x) => n + (x === value), 0); return array.reduce((n, x) => n + (x === value), 0);
} }
} }