mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2026-07-14 00:00:06 +08:00
Compare commits
@@ -17,8 +17,6 @@ jobs:
|
||||
- name: npm install, build, and test
|
||||
run: |
|
||||
npm install
|
||||
npm run start -- --testMode
|
||||
npm run demo
|
||||
npm run coverage
|
||||
env:
|
||||
CI: true
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<p>
|
||||
<a href="https://simple-keyboard.com/demo">
|
||||
<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://i.imgur.com/Po6659n.gif">
|
||||
<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://i.imgur.com/PrpbdIu.png">
|
||||
</a>
|
||||
|
||||
<a href="https://www.npmjs.com/package/simple-keyboard">
|
||||
@@ -14,10 +14,6 @@
|
||||
<a href="https://github.com/hodgef/simple-keyboard/actions">
|
||||
<img alt="Publish Status" src="https://github.com/hodgef/simple-keyboard/workflows/Publish/badge.svg?color=green" />
|
||||
</a>
|
||||
|
||||
<a href="https://bundlephobia.com/result?p=simple-keyboard">
|
||||
<img src="https://badgen.net/bundlephobia/minzip/simple-keyboard/?color=green" alt="install size">
|
||||
</a>
|
||||
|
||||
<a href="https://david-dm.org/hodgef/simple-keyboard">
|
||||
<img src="https://badgen.net/david/dep/hodgef/simple-keyboard" alt="coverage">
|
||||
@@ -30,17 +26,17 @@
|
||||
|
||||
<blockquote>Virtual Keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.</blockquote>
|
||||
|
||||
## Demo 🚀
|
||||
## 🚀 Demo
|
||||
|
||||
[Demo Showcase (Vanilla, Angular, React, Vue)](https://simple-keyboard.com/demo)
|
||||
|
||||
## Installation & Usage 📦
|
||||
## 📦 Installation & Usage
|
||||
|
||||
You can use simple-keyboard as a `<script>` tag from a CDN, or install it from npm.
|
||||
|
||||
Check out the [Getting Started](https://simple-keyboard.com/getting-started) docs to begin.
|
||||
|
||||
## Documentation 📖
|
||||
## 📖 Documentation
|
||||
|
||||
Check out the [simple-keyboard documentation](https://simple-keyboard.com/documentation) site.
|
||||
|
||||
@@ -63,7 +59,7 @@ Feel free to browse the [Questions & Answers (FAQ)](https://simple-keyboard.com/
|
||||
|
||||
<a href="https://discordapp.com/invite/SJexsCG" title="Join our Discord chat" target="_blank"><img src="https://discordapp.com/api/guilds/498978399801573396/widget.png?style=banner2" align="center"></a>
|
||||
|
||||
## Modules ✳️
|
||||
## ✳️ Modules
|
||||
|
||||
You can extend simple-keyboard's functionality with [modules](https://hodgef.com/simple-keyboard/modules/). Such as:
|
||||
|
||||
@@ -74,7 +70,7 @@ You can extend simple-keyboard's functionality with [modules](https://hodgef.com
|
||||
|
||||
Want to create your own module? Check out the [Modules page](https://hodgef.com/simple-keyboard/modules/) for instructions.
|
||||
|
||||
## Compatibility 🎯
|
||||
## 🎯 Compatibility
|
||||
|
||||
- Internet Explorer 11
|
||||
- Edge (Spartan) 16+
|
||||
@@ -84,7 +80,7 @@ Want to create your own module? Check out the [Modules page](https://hodgef.com/
|
||||
- Firefox 57+
|
||||
- iOS 9+
|
||||
|
||||
## Contributing ✅
|
||||
## ✅ Contributing
|
||||
|
||||
PRs and issues are always welcome. Feel free to submit any issues you have at:
|
||||
[https://github.com/hodgef/simple-keyboard/issues](https://github.com/hodgef/simple-keyboard/issues)
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
/*!
|
||||
*
|
||||
* simple-keyboard v3.0.0
|
||||
* simple-keyboard v3.1.0
|
||||
* https://github.com/hodgef/simple-keyboard
|
||||
*
|
||||
* Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
|
||||
|
||||
+2
-2
File diff suppressed because one or more lines are too long
Vendored
+10
-9
@@ -13,8 +13,8 @@ declare class SimpleKeyboard {
|
||||
input: KeyboardInput;
|
||||
options: KeyboardOptions;
|
||||
utilities: any;
|
||||
caretPosition: number;
|
||||
caretPositionEnd: number;
|
||||
caretPosition: number | null;
|
||||
caretPositionEnd: number | null;
|
||||
keyboardDOM: KeyboardElement;
|
||||
keyboardPluginClasses: string;
|
||||
keyboardDOMClass: string;
|
||||
@@ -34,8 +34,9 @@ declare class SimpleKeyboard {
|
||||
holdTimeout: number;
|
||||
isMouseHold: boolean;
|
||||
initialized: boolean;
|
||||
candidateBox: CandidateBox;
|
||||
candidateBox: CandidateBox | null;
|
||||
keyboardRowsDOM: KeyboardElement;
|
||||
defaultName: string;
|
||||
/**
|
||||
* 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.
|
||||
@@ -47,20 +48,20 @@ declare class SimpleKeyboard {
|
||||
handleParams: (params: KeyboardParams) => {
|
||||
keyboardDOMClass: string;
|
||||
keyboardDOM: KeyboardElement;
|
||||
options: Partial<KeyboardOptions>;
|
||||
options: Partial<KeyboardOptions | undefined>;
|
||||
};
|
||||
/**
|
||||
* Getters
|
||||
*/
|
||||
getOptions: () => KeyboardOptions;
|
||||
getCaretPosition: () => number;
|
||||
getCaretPositionEnd: () => number;
|
||||
getCaretPosition: () => number | null;
|
||||
getCaretPositionEnd: () => number | null;
|
||||
/**
|
||||
* Changes the internal caret position
|
||||
* @param {number} position The caret's start position
|
||||
* @param {number} positionEnd The caret's end position
|
||||
*/
|
||||
setCaretPosition(position: number, endPosition?: number): void;
|
||||
setCaretPosition(position: number | null, endPosition?: number | null): void;
|
||||
/**
|
||||
* Retrieve the candidates for a given input
|
||||
* @param input The input string to check
|
||||
@@ -104,7 +105,7 @@ declare class SimpleKeyboard {
|
||||
* Clear the keyboard’s input.
|
||||
* @param {string} [inputName] optional - the internal input to select
|
||||
*/
|
||||
clearInput(inputName: string): void;
|
||||
clearInput(inputName?: string): void;
|
||||
/**
|
||||
* Get the keyboard’s input (You can also get it from the onChange prop).
|
||||
* @param {string} [inputName] optional - the internal input to select
|
||||
@@ -166,7 +167,7 @@ declare class SimpleKeyboard {
|
||||
* Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
|
||||
* @param {string} button The button layout name to select
|
||||
*/
|
||||
getButtonElement(button: string): KeyboardElement | KeyboardElement[];
|
||||
getButtonElement(button: string): KeyboardElement | KeyboardElement[] | undefined;
|
||||
/**
|
||||
* This handles the "inputPattern" option
|
||||
* by checking if the provided inputPattern passes
|
||||
|
||||
Vendored
+9
-7
@@ -3,10 +3,10 @@ import Utilities from "./services/Utilities";
|
||||
export interface KeyboardLayoutObject {
|
||||
[key: string]: string[];
|
||||
}
|
||||
export interface KeyboardButtonTheme {
|
||||
export declare type KeyboardButtonTheme = {
|
||||
class: string;
|
||||
buttons: string;
|
||||
}
|
||||
} | null;
|
||||
export interface KeyboardButtonAttributes {
|
||||
attribute: string;
|
||||
value: string;
|
||||
@@ -32,16 +32,18 @@ export declare type CandidateBoxRenderParams = {
|
||||
onItemSelected: (selectedCandidate: string) => void;
|
||||
};
|
||||
export declare type KeyboardElement = HTMLDivElement | HTMLButtonElement;
|
||||
export declare type KeyboardHandlerEvent = PointerEvent & TouchEvent & KeyboardEvent & {
|
||||
target: HTMLDivElement & HTMLInputElement;
|
||||
};
|
||||
export declare type KeyboardHandlerEvent = any;
|
||||
export interface KeyboardButtonElements {
|
||||
[key: string]: KeyboardElement[];
|
||||
}
|
||||
export interface UtilitiesParams {
|
||||
getOptions: () => KeyboardOptions;
|
||||
getCaretPosition: () => number;
|
||||
getCaretPositionEnd: () => number;
|
||||
getCaretPosition: () => number | null;
|
||||
getCaretPositionEnd: () => number | null;
|
||||
dispatch: any;
|
||||
}
|
||||
export interface PhysicalKeyboardParams {
|
||||
getOptions: () => KeyboardOptions;
|
||||
dispatch: any;
|
||||
}
|
||||
export interface KeyboardOptions {
|
||||
|
||||
+2
-2
@@ -1,4 +1,4 @@
|
||||
import { KeyboardOptions, UtilitiesParams } from "../interfaces";
|
||||
import { KeyboardOptions, PhysicalKeyboardParams } from "../interfaces";
|
||||
/**
|
||||
* Physical Keyboard Service
|
||||
*/
|
||||
@@ -8,7 +8,7 @@ declare class PhysicalKeyboard {
|
||||
/**
|
||||
* Creates an instance of the PhysicalKeyboard service
|
||||
*/
|
||||
constructor({ dispatch, getOptions }: Partial<UtilitiesParams>);
|
||||
constructor({ dispatch, getOptions }: PhysicalKeyboardParams);
|
||||
handleHighlightKeyDown(event: KeyboardEvent): void;
|
||||
handleHighlightKeyUp(event: KeyboardEvent): void;
|
||||
/**
|
||||
|
||||
Vendored
+13
-5
@@ -5,8 +5,8 @@ import { KeyboardOptions, UtilitiesParams } from "../interfaces";
|
||||
*/
|
||||
declare class Utilities {
|
||||
getOptions: () => KeyboardOptions;
|
||||
getCaretPosition: () => number;
|
||||
getCaretPositionEnd: () => number;
|
||||
getCaretPosition: () => number | null;
|
||||
getCaretPositionEnd: () => number | null;
|
||||
dispatch: any;
|
||||
maxLengthReached: boolean;
|
||||
/**
|
||||
@@ -72,6 +72,7 @@ declare class Utilities {
|
||||
"{home}": string;
|
||||
"{pageup}": string;
|
||||
"{delete}": string;
|
||||
"{forwarddelete}": string;
|
||||
"{end}": string;
|
||||
"{pagedown}": string;
|
||||
"{numpadmultiply}": string;
|
||||
@@ -122,7 +123,7 @@ declare class Utilities {
|
||||
* @param {number} length Represents by how many characters the input should be moved
|
||||
* @param {boolean} minus Whether the cursor should be moved to the left or not.
|
||||
*/
|
||||
updateCaretPosAction(length: number, minus?: boolean): number;
|
||||
updateCaretPosAction(length: number, minus?: boolean): number | null;
|
||||
/**
|
||||
* Adds a string to the input at a given position
|
||||
*
|
||||
@@ -133,20 +134,27 @@ declare class Utilities {
|
||||
*/
|
||||
addStringAt(source: string, str: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
|
||||
/**
|
||||
* Removes an amount of characters at a given position
|
||||
* Removes an amount of characters before a given position
|
||||
*
|
||||
* @param {string} source The source input
|
||||
* @param {number} position The (cursor) position from where the characters should be removed
|
||||
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor
|
||||
*/
|
||||
removeAt(source: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
|
||||
/**
|
||||
* Removes an amount of characters after a given position
|
||||
*
|
||||
* @param {string} source The source input
|
||||
* @param {number} position The (cursor) position from where the characters should be removed
|
||||
*/
|
||||
removeForwardsAt(source: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
|
||||
/**
|
||||
* Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
|
||||
*
|
||||
* @param {object} inputObj
|
||||
* @param {string} updatedInput
|
||||
*/
|
||||
handleMaxLength(inputObj: KeyboardInput, updatedInput: string): boolean;
|
||||
handleMaxLength(inputObj: KeyboardInput, updatedInput: string): boolean | undefined;
|
||||
/**
|
||||
* Gets the current value of maxLengthReached
|
||||
*/
|
||||
|
||||
Generated
+1151
-570
File diff suppressed because it is too large
Load Diff
+19
-19
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-keyboard",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.0",
|
||||
"description": "On-screen Javascript Virtual Keyboard",
|
||||
"main": "build/index.js",
|
||||
"types": "build/types/index.d.ts",
|
||||
@@ -39,38 +39,38 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.13.0",
|
||||
"@babel/core": "^7.13.8",
|
||||
"@babel/cli": "^7.13.16",
|
||||
"@babel/core": "^7.14.2",
|
||||
"@babel/plugin-proposal-class-properties": "^7.13.0",
|
||||
"@babel/plugin-transform-typescript": "^7.13.0",
|
||||
"@babel/polyfill": "^7.12.1",
|
||||
"@babel/preset-env": "^7.13.9",
|
||||
"@types/jest": "^26.0.20",
|
||||
"@typescript-eslint/eslint-plugin": "^4.16.1",
|
||||
"@typescript-eslint/parser": "^4.16.1",
|
||||
"@babel/preset-env": "^7.14.2",
|
||||
"@types/jest": "^26.0.23",
|
||||
"@typescript-eslint/eslint-plugin": "^4.23.0",
|
||||
"@typescript-eslint/parser": "^4.23.0",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-loader": "^8.2.2",
|
||||
"babel-preset-minify": "^0.5.0",
|
||||
"core-js": "^3.9.1",
|
||||
"css-loader": "^5.1.1",
|
||||
"eslint": "^7.21.0",
|
||||
"core-js": "^3.12.1",
|
||||
"css-loader": "^5.2.4",
|
||||
"eslint": "^7.26.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^5.3.0",
|
||||
"html-webpack-plugin": "^5.3.1",
|
||||
"jest": "^26.6.3",
|
||||
"mini-css-extract-plugin": "^1.3.9",
|
||||
"mini-css-extract-plugin": "^1.6.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.4",
|
||||
"postcss": "^8.2.8",
|
||||
"postcss": "^8.2.15",
|
||||
"postcss-loader": "^5.2.0",
|
||||
"prettier": "^2.2.1",
|
||||
"prettier": "^2.3.0",
|
||||
"prettier-webpack-plugin": "^1.2.0",
|
||||
"style-loader": "^2.0.0",
|
||||
"terser-webpack-plugin": "^5.1.1",
|
||||
"typescript": "^4.2.3",
|
||||
"terser-webpack-plugin": "^5.1.2",
|
||||
"typescript": "^4.2.4",
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack": "^5.24.3",
|
||||
"webpack-cli": "^4.5.0",
|
||||
"webpack-dev-server": "4.0.0-beta.0"
|
||||
"webpack": "^5.37.0",
|
||||
"webpack-cli": "^4.7.0",
|
||||
"webpack-dev-server": "4.0.0-beta.3"
|
||||
},
|
||||
"jest": {
|
||||
"roots": [
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
|
||||
class CandidateBox {
|
||||
utilities: Utilities;
|
||||
candidateBoxElement: HTMLDivElement;
|
||||
candidateBoxElement!: HTMLDivElement;
|
||||
pageIndex = 0;
|
||||
pageSize;
|
||||
|
||||
|
||||
+273
-261
@@ -22,28 +22,29 @@ import CandidateBox from "./CandidateBox";
|
||||
* - Handles button functionality
|
||||
*/
|
||||
class SimpleKeyboard {
|
||||
input: KeyboardInput;
|
||||
options: KeyboardOptions;
|
||||
input!: KeyboardInput;
|
||||
options!: KeyboardOptions;
|
||||
utilities: any;
|
||||
caretPosition: number;
|
||||
caretPositionEnd: number;
|
||||
keyboardDOM: KeyboardElement;
|
||||
keyboardPluginClasses: string;
|
||||
keyboardDOMClass: string;
|
||||
buttonElements: KeyboardButtonElements;
|
||||
currentInstanceName: string;
|
||||
allKeyboardInstances: { [key: string]: SimpleKeyboard };
|
||||
keyboardInstanceNames: string[];
|
||||
isFirstKeyboardInstance: boolean;
|
||||
physicalKeyboard: PhysicalKeyboard;
|
||||
modules: { [key: string]: any };
|
||||
activeButtonClass: string;
|
||||
holdInteractionTimeout: number;
|
||||
holdTimeout: number;
|
||||
isMouseHold: boolean;
|
||||
initialized: boolean;
|
||||
candidateBox: CandidateBox;
|
||||
keyboardRowsDOM: KeyboardElement;
|
||||
caretPosition!: number | null;
|
||||
caretPositionEnd!: number | null;
|
||||
keyboardDOM!: KeyboardElement;
|
||||
keyboardPluginClasses!: string;
|
||||
keyboardDOMClass!: string;
|
||||
buttonElements!: KeyboardButtonElements;
|
||||
currentInstanceName!: string;
|
||||
allKeyboardInstances!: { [key: string]: SimpleKeyboard };
|
||||
keyboardInstanceNames!: string[];
|
||||
isFirstKeyboardInstance!: boolean;
|
||||
physicalKeyboard!: PhysicalKeyboard;
|
||||
modules!: { [key: string]: any };
|
||||
activeButtonClass!: string;
|
||||
holdInteractionTimeout!: number;
|
||||
holdTimeout!: number;
|
||||
isMouseHold!: boolean;
|
||||
initialized!: boolean;
|
||||
candidateBox!: CandidateBox | null;
|
||||
keyboardRowsDOM!: KeyboardElement;
|
||||
defaultName = "default";
|
||||
|
||||
/**
|
||||
* Creates an instance of SimpleKeyboard
|
||||
@@ -159,8 +160,9 @@ class SimpleKeyboard {
|
||||
* @property {object} default Default SimpleKeyboard internal input.
|
||||
* @property {object} myInputName Example input that can be set through `options.inputName:"myInputName"`.
|
||||
*/
|
||||
const { inputName = this.defaultName } = this.options;
|
||||
this.input = {};
|
||||
this.input[this.options.inputName] = "";
|
||||
this.input[inputName] = "";
|
||||
|
||||
/**
|
||||
* @type {string} DOM class of the keyboard wrapper, normally "simple-keyboard" by default.
|
||||
@@ -231,7 +233,7 @@ class SimpleKeyboard {
|
||||
): {
|
||||
keyboardDOMClass: string;
|
||||
keyboardDOM: KeyboardElement;
|
||||
options: Partial<KeyboardOptions>;
|
||||
options: Partial<KeyboardOptions | undefined>;
|
||||
} => {
|
||||
let keyboardDOMClass;
|
||||
let keyboardDOM;
|
||||
@@ -287,15 +289,15 @@ class SimpleKeyboard {
|
||||
* Getters
|
||||
*/
|
||||
getOptions = (): KeyboardOptions => this.options;
|
||||
getCaretPosition = (): number => this.caretPosition;
|
||||
getCaretPositionEnd = (): number => this.caretPositionEnd;
|
||||
getCaretPosition = (): number | null => this.caretPosition;
|
||||
getCaretPositionEnd = (): number | null => this.caretPositionEnd;
|
||||
|
||||
/**
|
||||
* Changes the internal caret position
|
||||
* @param {number} position The caret's start position
|
||||
* @param {number} positionEnd The caret's end position
|
||||
*/
|
||||
setCaretPosition(position: number, endPosition = position): void {
|
||||
setCaretPosition(position: number | null, endPosition = position): void {
|
||||
this.caretPosition = position;
|
||||
this.caretPositionEnd = endPosition;
|
||||
}
|
||||
@@ -379,8 +381,7 @@ class SimpleKeyboard {
|
||||
* @param {string} button The button's layout name.
|
||||
*/
|
||||
handleButtonClicked(button: string, e?: KeyboardHandlerEvent): void {
|
||||
const debug = this.options.debug;
|
||||
|
||||
const { inputName = this.defaultName, debug } = this.options;
|
||||
/**
|
||||
* Ignoring placeholder buttons
|
||||
*/
|
||||
@@ -389,15 +390,14 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Creating inputName if it doesn't exist
|
||||
*/
|
||||
if (!this.input[this.options.inputName])
|
||||
this.input[this.options.inputName] = "";
|
||||
if (!this.input[inputName]) this.input[inputName] = "";
|
||||
|
||||
/**
|
||||
* Calculating new input
|
||||
*/
|
||||
const updatedInput = this.utilities.getUpdatedInput(
|
||||
button,
|
||||
this.input[this.options.inputName],
|
||||
this.input[inputName],
|
||||
this.caretPosition,
|
||||
this.caretPositionEnd
|
||||
);
|
||||
@@ -410,7 +410,7 @@ class SimpleKeyboard {
|
||||
|
||||
if (
|
||||
// If input will change as a result of this button press
|
||||
this.input[this.options.inputName] !== updatedInput &&
|
||||
this.input[inputName] !== updatedInput &&
|
||||
// This pertains to the "inputPattern" option:
|
||||
// If inputPattern isn't set
|
||||
(!this.options.inputPattern ||
|
||||
@@ -432,7 +432,7 @@ class SimpleKeyboard {
|
||||
*/
|
||||
const newInputValue = this.utilities.getUpdatedInput(
|
||||
button,
|
||||
this.input[this.options.inputName],
|
||||
this.input[inputName],
|
||||
this.caretPosition,
|
||||
this.caretPositionEnd,
|
||||
true
|
||||
@@ -483,7 +483,7 @@ class SimpleKeyboard {
|
||||
this.keyboardDOM
|
||||
);
|
||||
} else {
|
||||
this.candidateBox.destroy();
|
||||
this.candidateBox?.destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -639,8 +639,9 @@ class SimpleKeyboard {
|
||||
* Clear the keyboard’s input.
|
||||
* @param {string} [inputName] optional - the internal input to select
|
||||
*/
|
||||
clearInput(inputName: string): void {
|
||||
inputName = inputName || this.options.inputName;
|
||||
clearInput(
|
||||
inputName: string = this.options.inputName || this.defaultName
|
||||
): void {
|
||||
this.input[inputName] = "";
|
||||
|
||||
/**
|
||||
@@ -658,7 +659,10 @@ class SimpleKeyboard {
|
||||
* Get the keyboard’s input (You can also get it from the onChange prop).
|
||||
* @param {string} [inputName] optional - the internal input to select
|
||||
*/
|
||||
getInput(inputName = this.options.inputName, skipSync = false): string {
|
||||
getInput(
|
||||
inputName: string = this.options.inputName || this.defaultName,
|
||||
skipSync = false
|
||||
): string {
|
||||
/**
|
||||
* Enforce syncInstanceInputs, if set
|
||||
*/
|
||||
@@ -697,7 +701,7 @@ class SimpleKeyboard {
|
||||
*/
|
||||
setInput(
|
||||
input: string,
|
||||
inputName = this.options.inputName,
|
||||
inputName: string = this.options.inputName || this.defaultName,
|
||||
skipSync?: boolean
|
||||
): void {
|
||||
this.input[inputName] = input;
|
||||
@@ -758,19 +762,6 @@ class SimpleKeyboard {
|
||||
* @param {object} options The options to set
|
||||
*/
|
||||
onSetOptions(changedOptions: string[] = []): void {
|
||||
/**
|
||||
* Changed: inputName
|
||||
*/
|
||||
if (changedOptions.includes("inputName")) {
|
||||
/**
|
||||
* inputName changed. This requires a caretPosition reset
|
||||
*/
|
||||
if (this.options.debug) {
|
||||
console.log("inputName changed. caretPosition reset.");
|
||||
}
|
||||
this.setCaretPosition(null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Changed: layoutName
|
||||
*/
|
||||
@@ -851,7 +842,7 @@ class SimpleKeyboard {
|
||||
* If class is already defined, we add button to class definition
|
||||
*/
|
||||
this.options.buttonTheme.map((buttonTheme) => {
|
||||
if (buttonTheme.class.split(" ").includes(classNameItem)) {
|
||||
if (buttonTheme?.class.split(" ").includes(classNameItem)) {
|
||||
classNameFound = true;
|
||||
|
||||
const buttonThemeArray = buttonTheme.buttons.split(" ");
|
||||
@@ -904,26 +895,28 @@ class SimpleKeyboard {
|
||||
) {
|
||||
const buttonArray = buttons.split(" ");
|
||||
buttonArray.forEach((button) => {
|
||||
this.options.buttonTheme.map((buttonTheme, index) => {
|
||||
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)) ||
|
||||
(buttonTheme &&
|
||||
className &&
|
||||
className.includes(buttonTheme.class)) ||
|
||||
!className
|
||||
) {
|
||||
const filteredButtonArray = buttonTheme.buttons
|
||||
const filteredButtonArray = buttonTheme?.buttons
|
||||
.split(" ")
|
||||
.filter((item) => item !== button);
|
||||
|
||||
/**
|
||||
* If buttons left, return them, otherwise, remove button Theme
|
||||
*/
|
||||
if (filteredButtonArray.length) {
|
||||
if (buttonTheme && filteredButtonArray?.length) {
|
||||
buttonTheme.buttons = filteredButtonArray.join(" ");
|
||||
} else {
|
||||
this.options.buttonTheme.splice(index, 1);
|
||||
this.options.buttonTheme?.splice(index, 1);
|
||||
buttonTheme = null;
|
||||
}
|
||||
}
|
||||
@@ -940,7 +933,9 @@ class SimpleKeyboard {
|
||||
* Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
|
||||
* @param {string} button The button layout name to select
|
||||
*/
|
||||
getButtonElement(button: string): KeyboardElement | KeyboardElement[] {
|
||||
getButtonElement(
|
||||
button: string
|
||||
): KeyboardElement | KeyboardElement[] | undefined {
|
||||
let output;
|
||||
|
||||
const buttonArr = this.buttonElements[button];
|
||||
@@ -969,7 +964,8 @@ class SimpleKeyboard {
|
||||
if (inputPatternRaw instanceof RegExp) {
|
||||
inputPattern = inputPatternRaw;
|
||||
} else {
|
||||
inputPattern = inputPatternRaw[this.options.inputName];
|
||||
inputPattern =
|
||||
inputPatternRaw[this.options.inputName || this.defaultName];
|
||||
}
|
||||
|
||||
if (inputPattern && inputVal) {
|
||||
@@ -1077,10 +1073,11 @@ class SimpleKeyboard {
|
||||
}
|
||||
|
||||
if (
|
||||
(targetTagName === "textarea" || targetTagName === "input") &&
|
||||
["text", "search", "url", "tel", "password"].includes(
|
||||
event.target.type
|
||||
) &&
|
||||
(targetTagName === "textarea" ||
|
||||
(targetTagName === "input" &&
|
||||
["text", "search", "url", "tel", "password"].includes(
|
||||
event.target.type
|
||||
))) &&
|
||||
!instance.options.disableCaretPositioning
|
||||
) {
|
||||
/**
|
||||
@@ -1106,6 +1103,13 @@ class SimpleKeyboard {
|
||||
* If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.
|
||||
*/
|
||||
instance.setCaretPosition(null);
|
||||
|
||||
if (instance.options.debug) {
|
||||
console.log(
|
||||
`Caret position reset due to "${event?.type}" event`,
|
||||
event
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1146,26 +1150,25 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Remove buttons
|
||||
*/
|
||||
let deleteButton = (buttonElement: KeyboardElement) => {
|
||||
buttonElement.onpointerdown = null;
|
||||
buttonElement.onpointerup = null;
|
||||
buttonElement.onpointercancel = null;
|
||||
buttonElement.ontouchstart = null;
|
||||
buttonElement.ontouchend = null;
|
||||
buttonElement.ontouchcancel = null;
|
||||
buttonElement.onclick = null;
|
||||
buttonElement.onmousedown = null;
|
||||
buttonElement.onmouseup = null;
|
||||
const deleteButton = (buttonElement: KeyboardElement | null) => {
|
||||
if (buttonElement) {
|
||||
buttonElement.onpointerdown = null;
|
||||
buttonElement.onpointerup = null;
|
||||
buttonElement.onpointercancel = null;
|
||||
buttonElement.ontouchstart = null;
|
||||
buttonElement.ontouchend = null;
|
||||
buttonElement.ontouchcancel = null;
|
||||
buttonElement.onclick = null;
|
||||
buttonElement.onmousedown = null;
|
||||
buttonElement.onmouseup = null;
|
||||
|
||||
buttonElement.remove();
|
||||
buttonElement = null;
|
||||
buttonElement.remove();
|
||||
buttonElement = null;
|
||||
}
|
||||
};
|
||||
|
||||
this.recurseButtons(deleteButton);
|
||||
|
||||
this.recurseButtons = null;
|
||||
deleteButton = null;
|
||||
|
||||
/**
|
||||
* Remove wrapper events
|
||||
*/
|
||||
@@ -1213,6 +1216,7 @@ class SimpleKeyboard {
|
||||
if (Array.isArray(buttonTheme)) {
|
||||
buttonTheme.forEach((themeObj) => {
|
||||
if (
|
||||
themeObj &&
|
||||
themeObj.class &&
|
||||
typeof themeObj.class === "string" &&
|
||||
themeObj.buttons &&
|
||||
@@ -1336,7 +1340,7 @@ class SimpleKeyboard {
|
||||
}
|
||||
|
||||
if (typeof this.options.beforeFirstRender === "function")
|
||||
this.options.beforeFirstRender();
|
||||
this.options.beforeFirstRender(this);
|
||||
|
||||
/**
|
||||
* Notify about PointerEvents usage
|
||||
@@ -1369,7 +1373,7 @@ class SimpleKeyboard {
|
||||
*/
|
||||
beforeRender() {
|
||||
if (typeof this.options.beforeRender === "function")
|
||||
this.options.beforeRender();
|
||||
this.options.beforeRender(this);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1574,211 +1578,219 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Iterating through each row
|
||||
*/
|
||||
layout[this.options.layoutName].forEach((row, rIndex) => {
|
||||
let rowArray = row.split(" ");
|
||||
|
||||
/**
|
||||
* Enforce excludeFromLayout
|
||||
*/
|
||||
if (this.options.excludeFromLayout[this.options.layoutName]) {
|
||||
rowArray = rowArray.filter(
|
||||
(buttonName) =>
|
||||
!this.options.excludeFromLayout[this.options.layoutName].includes(
|
||||
buttonName
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creating empty row
|
||||
*/
|
||||
let rowDOM = document.createElement("div");
|
||||
rowDOM.className += "hg-row";
|
||||
|
||||
/**
|
||||
* Tracking container indicators in rows
|
||||
*/
|
||||
const containerStartIndexes: number[] = [];
|
||||
const containerEndIndexes: number[] = [];
|
||||
|
||||
/**
|
||||
* Iterating through each button in row
|
||||
*/
|
||||
rowArray.forEach((button, bIndex) => {
|
||||
/**
|
||||
* Check if button has a container indicator
|
||||
*/
|
||||
const buttonHasContainerStart =
|
||||
!disableRowButtonContainers &&
|
||||
typeof button === "string" &&
|
||||
button.length > 1 &&
|
||||
button.indexOf("[") === 0;
|
||||
|
||||
const buttonHasContainerEnd =
|
||||
!disableRowButtonContainers &&
|
||||
typeof button === "string" &&
|
||||
button.length > 1 &&
|
||||
button.indexOf("]") === button.length - 1;
|
||||
layout[this.options.layoutName || this.defaultName].forEach(
|
||||
(row, rIndex) => {
|
||||
let rowArray = row.split(" ");
|
||||
|
||||
/**
|
||||
* Save container start index, if applicable
|
||||
* Enforce excludeFromLayout
|
||||
*/
|
||||
if (buttonHasContainerStart) {
|
||||
containerStartIndexes.push(bIndex);
|
||||
|
||||
/**
|
||||
* Removing indicator
|
||||
*/
|
||||
button = button.replace(/\[/g, "");
|
||||
}
|
||||
|
||||
if (buttonHasContainerEnd) {
|
||||
containerEndIndexes.push(bIndex);
|
||||
|
||||
/**
|
||||
* Removing indicator
|
||||
*/
|
||||
button = button.replace(/\]/g, "");
|
||||
}
|
||||
|
||||
/**
|
||||
* Processing button options
|
||||
*/
|
||||
const fctBtnClass = this.utilities.getButtonClass(button);
|
||||
const buttonDisplayName = this.utilities.getButtonDisplayName(
|
||||
button,
|
||||
this.options.display,
|
||||
this.options.mergeDisplay
|
||||
);
|
||||
|
||||
/**
|
||||
* Creating button
|
||||
*/
|
||||
const buttonType = this.options.useButtonTag ? "button" : "div";
|
||||
const buttonDOM = document.createElement(buttonType);
|
||||
buttonDOM.className += `hg-button ${fctBtnClass}`;
|
||||
|
||||
/**
|
||||
* Adding buttonTheme
|
||||
*/
|
||||
buttonDOM.classList.add(...this.getButtonThemeClasses(button));
|
||||
|
||||
/**
|
||||
* Adding buttonAttributes
|
||||
*/
|
||||
this.setDOMButtonAttributes(
|
||||
button,
|
||||
(attribute: string, value: string) => {
|
||||
buttonDOM.setAttribute(attribute, value);
|
||||
}
|
||||
);
|
||||
|
||||
this.activeButtonClass = "hg-activeButton";
|
||||
|
||||
/**
|
||||
* Handle button click event
|
||||
*/
|
||||
/* istanbul ignore next */
|
||||
if (
|
||||
this.utilities.pointerEventsSupported() &&
|
||||
!useTouchEvents &&
|
||||
!useMouseEvents
|
||||
this.options.excludeFromLayout &&
|
||||
this.options.excludeFromLayout[
|
||||
this.options.layoutName || this.defaultName
|
||||
]
|
||||
) {
|
||||
rowArray = rowArray.filter(
|
||||
(buttonName) =>
|
||||
this.options.excludeFromLayout &&
|
||||
!this.options.excludeFromLayout[
|
||||
this.options.layoutName || this.defaultName
|
||||
].includes(buttonName)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creating empty row
|
||||
*/
|
||||
let rowDOM = document.createElement("div");
|
||||
rowDOM.className += "hg-row";
|
||||
|
||||
/**
|
||||
* Tracking container indicators in rows
|
||||
*/
|
||||
const containerStartIndexes: number[] = [];
|
||||
const containerEndIndexes: number[] = [];
|
||||
|
||||
/**
|
||||
* Iterating through each button in row
|
||||
*/
|
||||
rowArray.forEach((button, bIndex) => {
|
||||
/**
|
||||
* Handle PointerEvents
|
||||
* Check if button has a container indicator
|
||||
*/
|
||||
buttonDOM.onpointerdown = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonClicked(button, e);
|
||||
this.handleButtonMouseDown(button, e);
|
||||
};
|
||||
buttonDOM.onpointerup = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonMouseUp(button, e);
|
||||
};
|
||||
buttonDOM.onpointercancel = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonMouseUp(button, e);
|
||||
};
|
||||
} else {
|
||||
const buttonHasContainerStart =
|
||||
!disableRowButtonContainers &&
|
||||
typeof button === "string" &&
|
||||
button.length > 1 &&
|
||||
button.indexOf("[") === 0;
|
||||
|
||||
const buttonHasContainerEnd =
|
||||
!disableRowButtonContainers &&
|
||||
typeof button === "string" &&
|
||||
button.length > 1 &&
|
||||
button.indexOf("]") === button.length - 1;
|
||||
|
||||
/**
|
||||
* Fallback for browsers not supporting PointerEvents
|
||||
* Save container start index, if applicable
|
||||
*/
|
||||
if (useTouchEvents) {
|
||||
if (buttonHasContainerStart) {
|
||||
containerStartIndexes.push(bIndex);
|
||||
|
||||
/**
|
||||
* Handle touch events
|
||||
* Removing indicator
|
||||
*/
|
||||
buttonDOM.ontouchstart = (e: KeyboardHandlerEvent) => {
|
||||
button = button.replace(/\[/g, "");
|
||||
}
|
||||
|
||||
if (buttonHasContainerEnd) {
|
||||
containerEndIndexes.push(bIndex);
|
||||
|
||||
/**
|
||||
* Removing indicator
|
||||
*/
|
||||
button = button.replace(/\]/g, "");
|
||||
}
|
||||
|
||||
/**
|
||||
* Processing button options
|
||||
*/
|
||||
const fctBtnClass = this.utilities.getButtonClass(button);
|
||||
const buttonDisplayName = this.utilities.getButtonDisplayName(
|
||||
button,
|
||||
this.options.display,
|
||||
this.options.mergeDisplay
|
||||
);
|
||||
|
||||
/**
|
||||
* Creating button
|
||||
*/
|
||||
const buttonType = this.options.useButtonTag ? "button" : "div";
|
||||
const buttonDOM = document.createElement(buttonType);
|
||||
buttonDOM.className += `hg-button ${fctBtnClass}`;
|
||||
|
||||
/**
|
||||
* Adding buttonTheme
|
||||
*/
|
||||
buttonDOM.classList.add(...this.getButtonThemeClasses(button));
|
||||
|
||||
/**
|
||||
* Adding buttonAttributes
|
||||
*/
|
||||
this.setDOMButtonAttributes(
|
||||
button,
|
||||
(attribute: string, value: string) => {
|
||||
buttonDOM.setAttribute(attribute, value);
|
||||
}
|
||||
);
|
||||
|
||||
this.activeButtonClass = "hg-activeButton";
|
||||
|
||||
/**
|
||||
* Handle button click event
|
||||
*/
|
||||
/* istanbul ignore next */
|
||||
if (
|
||||
this.utilities.pointerEventsSupported() &&
|
||||
!useTouchEvents &&
|
||||
!useMouseEvents
|
||||
) {
|
||||
/**
|
||||
* Handle PointerEvents
|
||||
*/
|
||||
buttonDOM.onpointerdown = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonClicked(button, e);
|
||||
this.handleButtonMouseDown(button, e);
|
||||
};
|
||||
buttonDOM.ontouchend = (e: KeyboardHandlerEvent) => {
|
||||
buttonDOM.onpointerup = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonMouseUp(button, e);
|
||||
};
|
||||
buttonDOM.ontouchcancel = (e: KeyboardHandlerEvent) => {
|
||||
buttonDOM.onpointercancel = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonMouseUp(button, e);
|
||||
};
|
||||
} else {
|
||||
/**
|
||||
* Handle mouse events
|
||||
* Fallback for browsers not supporting PointerEvents
|
||||
*/
|
||||
buttonDOM.onclick = (e: KeyboardHandlerEvent) => {
|
||||
this.isMouseHold = false;
|
||||
this.handleButtonClicked(button, e);
|
||||
};
|
||||
buttonDOM.onmousedown = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonMouseDown(button, e);
|
||||
};
|
||||
buttonDOM.onmouseup = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonMouseUp(button, e);
|
||||
};
|
||||
if (useTouchEvents) {
|
||||
/**
|
||||
* Handle touch events
|
||||
*/
|
||||
buttonDOM.ontouchstart = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonClicked(button, e);
|
||||
this.handleButtonMouseDown(button, e);
|
||||
};
|
||||
buttonDOM.ontouchend = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonMouseUp(button, e);
|
||||
};
|
||||
buttonDOM.ontouchcancel = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonMouseUp(button, e);
|
||||
};
|
||||
} else {
|
||||
/**
|
||||
* Handle mouse events
|
||||
*/
|
||||
buttonDOM.onclick = (e: KeyboardHandlerEvent) => {
|
||||
this.isMouseHold = false;
|
||||
this.handleButtonClicked(button, e);
|
||||
};
|
||||
buttonDOM.onmousedown = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonMouseDown(button, e);
|
||||
};
|
||||
buttonDOM.onmouseup = (e: KeyboardHandlerEvent) => {
|
||||
this.handleButtonMouseUp(button, e);
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
const buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
|
||||
buttonDOM.setAttribute("data-skBtnUID", buttonUID);
|
||||
|
||||
/**
|
||||
* Adding button label to button
|
||||
*/
|
||||
const 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);
|
||||
});
|
||||
|
||||
/**
|
||||
* Adding identifier
|
||||
* Parse containers in row
|
||||
*/
|
||||
buttonDOM.setAttribute("data-skBtn", button);
|
||||
rowDOM = this.parseRowDOMContainers(
|
||||
rowDOM,
|
||||
rIndex,
|
||||
containerStartIndexes,
|
||||
containerEndIndexes
|
||||
);
|
||||
|
||||
/**
|
||||
* Adding unique id
|
||||
* Since there's no limit on spawning same buttons, the unique id ensures you can style every button
|
||||
* Appending row to hg-rows
|
||||
*/
|
||||
const buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
|
||||
buttonDOM.setAttribute("data-skBtnUID", buttonUID);
|
||||
|
||||
/**
|
||||
* Adding button label to button
|
||||
*/
|
||||
const 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);
|
||||
});
|
||||
|
||||
/**
|
||||
* Parse containers in row
|
||||
*/
|
||||
rowDOM = this.parseRowDOMContainers(
|
||||
rowDOM,
|
||||
rIndex,
|
||||
containerStartIndexes,
|
||||
containerEndIndexes
|
||||
);
|
||||
|
||||
/**
|
||||
* Appending row to hg-rows
|
||||
*/
|
||||
this.keyboardRowsDOM.appendChild(rowDOM);
|
||||
});
|
||||
this.keyboardRowsDOM.appendChild(rowDOM);
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Appending row to keyboard
|
||||
@@ -1806,7 +1818,7 @@ class SimpleKeyboard {
|
||||
!useMouseEvents
|
||||
) {
|
||||
document.onpointerup = (e: KeyboardHandlerEvent) =>
|
||||
this.handleButtonMouseUp(null, e);
|
||||
this.handleButtonMouseUp(undefined, e);
|
||||
this.keyboardDOM.onpointerdown = (e: KeyboardHandlerEvent) =>
|
||||
this.handleKeyboardContainerMouseDown(e);
|
||||
} else if (useTouchEvents) {
|
||||
@@ -1814,9 +1826,9 @@ class SimpleKeyboard {
|
||||
* Handling ontouchend, ontouchcancel
|
||||
*/
|
||||
document.ontouchend = (e: KeyboardHandlerEvent) =>
|
||||
this.handleButtonMouseUp(null, e);
|
||||
this.handleButtonMouseUp(undefined, e);
|
||||
document.ontouchcancel = (e: KeyboardHandlerEvent) =>
|
||||
this.handleButtonMouseUp(null, e);
|
||||
this.handleButtonMouseUp(undefined, e);
|
||||
|
||||
this.keyboardDOM.ontouchstart = (e: KeyboardHandlerEvent) =>
|
||||
this.handleKeyboardContainerMouseDown(e);
|
||||
@@ -1825,7 +1837,7 @@ class SimpleKeyboard {
|
||||
* Handling mouseup
|
||||
*/
|
||||
document.onmouseup = (e: KeyboardHandlerEvent) =>
|
||||
this.handleButtonMouseUp(null, e);
|
||||
this.handleButtonMouseUp(undefined, e);
|
||||
this.keyboardDOM.onmousedown = (e: KeyboardHandlerEvent) =>
|
||||
this.handleKeyboardContainerMouseDown(e);
|
||||
}
|
||||
|
||||
@@ -1138,27 +1138,6 @@ it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () =
|
||||
expect(containers.length).toBe(0);
|
||||
});
|
||||
|
||||
it('Keyboard inputName change will trigget caretPosition reset', () => {
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
keyboard.setCaretPosition(0);
|
||||
|
||||
keyboard.getButtonElement("q").onpointerdown();
|
||||
keyboard.getButtonElement("1").onpointerdown();
|
||||
|
||||
expect(keyboard.getCaretPosition()).toBe(2);
|
||||
|
||||
keyboard.setOptions({
|
||||
inputName: "myInput"
|
||||
});
|
||||
|
||||
keyboard.getButtonElement("q").onpointerdown();
|
||||
keyboard.getButtonElement("1").onpointerdown();
|
||||
keyboard.getButtonElement("b").onpointerdown();
|
||||
|
||||
expect(keyboard.getCaretPosition()).toBe(null);
|
||||
});
|
||||
|
||||
it('Keyboard destroy will work', () => {
|
||||
const keyboard = new Keyboard();
|
||||
keyboard.destroy();
|
||||
|
||||
+10
-5
@@ -6,10 +6,10 @@ export interface KeyboardLayoutObject {
|
||||
[key: string]: string[];
|
||||
}
|
||||
|
||||
export interface KeyboardButtonTheme {
|
||||
export type KeyboardButtonTheme = {
|
||||
class: string;
|
||||
buttons: string;
|
||||
}
|
||||
} | null;
|
||||
|
||||
export interface KeyboardButtonAttributes {
|
||||
attribute: string;
|
||||
@@ -44,7 +44,7 @@ export type CandidateBoxRenderParams = {
|
||||
}
|
||||
|
||||
export type KeyboardElement = HTMLDivElement | HTMLButtonElement;
|
||||
export type KeyboardHandlerEvent = PointerEvent & TouchEvent & KeyboardEvent & { target: HTMLDivElement & HTMLInputElement };
|
||||
export type KeyboardHandlerEvent = any;
|
||||
|
||||
export interface KeyboardButtonElements {
|
||||
[key: string]: KeyboardElement[]
|
||||
@@ -52,8 +52,13 @@ export interface KeyboardButtonElements {
|
||||
|
||||
export interface UtilitiesParams {
|
||||
getOptions: () => KeyboardOptions;
|
||||
getCaretPosition: () => number;
|
||||
getCaretPositionEnd: () => number;
|
||||
getCaretPosition: () => number | null;
|
||||
getCaretPositionEnd: () => number | null;
|
||||
dispatch: any;
|
||||
}
|
||||
|
||||
export interface PhysicalKeyboardParams {
|
||||
getOptions: () => KeyboardOptions;
|
||||
dispatch: any;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { KeyboardOptions, UtilitiesParams } from "../interfaces";
|
||||
import { KeyboardOptions, PhysicalKeyboardParams } from "../interfaces";
|
||||
import Utilities from "../services/Utilities";
|
||||
|
||||
/**
|
||||
@@ -11,7 +11,7 @@ class PhysicalKeyboard {
|
||||
/**
|
||||
* Creates an instance of the PhysicalKeyboard service
|
||||
*/
|
||||
constructor({ dispatch, getOptions }: Partial<UtilitiesParams>) {
|
||||
constructor({ dispatch, getOptions }: PhysicalKeyboardParams) {
|
||||
/**
|
||||
* @type {object} A simple-keyboard instance
|
||||
*/
|
||||
|
||||
@@ -6,10 +6,10 @@ import { KeyboardOptions, UtilitiesParams } from "../interfaces";
|
||||
*/
|
||||
class Utilities {
|
||||
getOptions: () => KeyboardOptions;
|
||||
getCaretPosition: () => number;
|
||||
getCaretPositionEnd: () => number;
|
||||
getCaretPosition: () => number | null;
|
||||
getCaretPositionEnd: () => number | null;
|
||||
dispatch: any;
|
||||
maxLengthReached: boolean;
|
||||
maxLengthReached!: boolean;
|
||||
|
||||
/**
|
||||
* Creates an instance of the Utility service
|
||||
@@ -106,6 +106,7 @@ class Utilities {
|
||||
"{home}": "home",
|
||||
"{pageup}": "up",
|
||||
"{delete}": "del",
|
||||
"{forwarddelete}": "del",
|
||||
"{end}": "end",
|
||||
"{pagedown}": "down",
|
||||
"{numpadmultiply}": "*",
|
||||
@@ -177,6 +178,11 @@ class Utilities {
|
||||
output.length > 0
|
||||
) {
|
||||
output = this.removeAt(output, ...commonParams);
|
||||
} else if (
|
||||
(button === "{delete}" || button === "{forwarddelete}") &&
|
||||
output.length > 0
|
||||
) {
|
||||
output = this.removeForwardsAt(output, ...commonParams);
|
||||
} else if (button === "{space}")
|
||||
output = this.addStringAt(output, " ", ...commonParams);
|
||||
else if (
|
||||
@@ -243,10 +249,12 @@ class Utilities {
|
||||
const options = this.getOptions();
|
||||
let caretPosition = this.getCaretPosition();
|
||||
|
||||
if (minus) {
|
||||
if (caretPosition > 0) caretPosition = caretPosition - length;
|
||||
} else {
|
||||
caretPosition = caretPosition + length;
|
||||
if (caretPosition != null) {
|
||||
if (minus) {
|
||||
if (caretPosition > 0) caretPosition = caretPosition - length;
|
||||
} else {
|
||||
caretPosition = caretPosition + length;
|
||||
}
|
||||
}
|
||||
|
||||
if (options.debug) {
|
||||
@@ -292,7 +300,7 @@ class Utilities {
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes an amount of characters at a given position
|
||||
* Removes an amount of characters before a given position
|
||||
*
|
||||
* @param {string} source The source input
|
||||
* @param {number} position The (cursor) position from where the characters should be removed
|
||||
@@ -353,6 +361,65 @@ class Utilities {
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes an amount of characters after a given position
|
||||
*
|
||||
* @param {string} source The source input
|
||||
* @param {number} position The (cursor) position from where the characters should be removed
|
||||
*/
|
||||
removeForwardsAt(
|
||||
source: string,
|
||||
position = source.length,
|
||||
positionEnd = source.length,
|
||||
moveCaret = false
|
||||
) {
|
||||
if (position === 0 && positionEnd === 0) {
|
||||
return source;
|
||||
}
|
||||
|
||||
let output;
|
||||
|
||||
if (position === positionEnd) {
|
||||
let nextTwoChars;
|
||||
let emojiMatched;
|
||||
const 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) {
|
||||
nextTwoChars = source.substring(position, position + 2);
|
||||
emojiMatched = nextTwoChars.match(emojiMatchedReg);
|
||||
|
||||
if (emojiMatched) {
|
||||
output = source.substr(0, position) + source.substr(position + 2);
|
||||
} else {
|
||||
output = source.substr(0, position) + source.substr(position + 1);
|
||||
}
|
||||
} else {
|
||||
nextTwoChars = source.slice(2);
|
||||
emojiMatched = nextTwoChars.match(emojiMatchedReg);
|
||||
|
||||
if (emojiMatched) {
|
||||
output = source.slice(0, 2);
|
||||
} else {
|
||||
output = source.slice(0, 1);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
output = source.slice(0, position) + source.slice(positionEnd);
|
||||
if (moveCaret) {
|
||||
this.dispatch((instance: any) => {
|
||||
instance.setCaretPosition(position);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
|
||||
*
|
||||
@@ -362,7 +429,7 @@ class Utilities {
|
||||
handleMaxLength(inputObj: KeyboardInput, updatedInput: string) {
|
||||
const options = this.getOptions();
|
||||
const maxLength = options.maxLength;
|
||||
const currentInput = inputObj[options.inputName];
|
||||
const currentInput = inputObj[options.inputName || "default"];
|
||||
const condition = updatedInput.length - 1 >= maxLength;
|
||||
|
||||
if (
|
||||
@@ -393,7 +460,8 @@ class Utilities {
|
||||
}
|
||||
|
||||
if (typeof maxLength === "object") {
|
||||
const condition = updatedInput.length - 1 >= maxLength[options.inputName];
|
||||
const condition =
|
||||
updatedInput.length - 1 >= maxLength[options.inputName || "default"];
|
||||
|
||||
if (options.debug) {
|
||||
console.log("maxLength (obj) reached:", condition);
|
||||
@@ -451,7 +519,7 @@ class Utilities {
|
||||
* @param {string} str The string to transform.
|
||||
*/
|
||||
camelCase(str: string): string {
|
||||
if (!str) return;
|
||||
if (!str) return "";
|
||||
|
||||
return str
|
||||
.toLowerCase()
|
||||
|
||||
@@ -34,6 +34,16 @@ it('Keyboard {bksp} button will work', () => {
|
||||
expect(output).toBe("tes");
|
||||
});
|
||||
|
||||
it('Keyboard {delete} button will work', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
const output = keyboard.utilities.getUpdatedInput("{delete}", "test", 1);
|
||||
|
||||
expect(output).toBe("tst");
|
||||
});
|
||||
|
||||
it('Keyboard {space} button will work', () => {
|
||||
setDOM();
|
||||
|
||||
|
||||
+2
-1
@@ -11,7 +11,8 @@
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"lib": ["es2020", "dom"],
|
||||
"moduleResolution": "node",
|
||||
"downlevelIteration": true
|
||||
"downlevelIteration": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["src/lib"],
|
||||
"exclude": ["src/lib/**/tests"],
|
||||
|
||||
@@ -27,6 +27,7 @@ const banner = `
|
||||
module.exports = {
|
||||
mode: "production",
|
||||
entry: './src/lib/index.ts',
|
||||
target: 'es5',
|
||||
output: {
|
||||
filename: 'index.js',
|
||||
path: path.resolve(__dirname, 'build'),
|
||||
|
||||
Reference in New Issue
Block a user