mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2025-01-31 18:49:47 +08:00
Set typescript to strict mode. Fixes #961
This commit is contained in:
parent
42ce937f3e
commit
0d1faf61c2
@ -9,7 +9,7 @@ import {
|
||||
|
||||
class CandidateBox {
|
||||
utilities: Utilities;
|
||||
candidateBoxElement: HTMLDivElement;
|
||||
candidateBoxElement!: HTMLDivElement;
|
||||
pageIndex = 0;
|
||||
pageSize;
|
||||
|
||||
|
@ -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,7 +639,9 @@ class SimpleKeyboard {
|
||||
* Clear the keyboard’s input.
|
||||
* @param {string} [inputName] optional - the internal input to select
|
||||
*/
|
||||
clearInput(inputName = this.options.inputName): void {
|
||||
clearInput(
|
||||
inputName: string = this.options.inputName || this.defaultName
|
||||
): void {
|
||||
this.input[inputName] = "";
|
||||
|
||||
/**
|
||||
@ -657,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
|
||||
*/
|
||||
@ -696,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;
|
||||
@ -850,7 +855,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(" ");
|
||||
@ -903,26 +908,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;
|
||||
}
|
||||
}
|
||||
@ -939,7 +946,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];
|
||||
@ -968,7 +977,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) {
|
||||
@ -1146,26 +1156,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 +1222,7 @@ class SimpleKeyboard {
|
||||
if (Array.isArray(buttonTheme)) {
|
||||
buttonTheme.forEach((themeObj) => {
|
||||
if (
|
||||
themeObj &&
|
||||
themeObj.class &&
|
||||
typeof themeObj.class === "string" &&
|
||||
themeObj.buttons &&
|
||||
@ -1574,211 +1584,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 +1824,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 +1832,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 +1843,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);
|
||||
}
|
||||
|
@ -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
|
||||
@ -243,10 +243,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) {
|
||||
@ -362,7 +364,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 +395,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 +454,7 @@ class Utilities {
|
||||
* @param {string} str The string to transform.
|
||||
*/
|
||||
camelCase(str: string): string {
|
||||
if (!str) return;
|
||||
if (!str) return "";
|
||||
|
||||
return str
|
||||
.toLowerCase()
|
||||
|
@ -11,7 +11,8 @@
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"lib": ["es2020", "dom"],
|
||||
"moduleResolution": "node",
|
||||
"downlevelIteration": true
|
||||
"downlevelIteration": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["src/lib"],
|
||||
"exclude": ["src/lib/**/tests"],
|
||||
|
Loading…
Reference in New Issue
Block a user