mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2025-03-01 06:43:02 +08:00
1999 lines
58 KiB
TypeScript
1999 lines
58 KiB
TypeScript
import "./css/Keyboard.css";
|
||
|
||
// Services
|
||
import { getDefaultLayout } from "../services/KeyboardLayout";
|
||
import PhysicalKeyboard from "../services/PhysicalKeyboard";
|
||
import Utilities from "../services/Utilities";
|
||
import {
|
||
KeyboardOptions,
|
||
KeyboardInput,
|
||
KeyboardButtonElements,
|
||
KeyboardHandlerEvent,
|
||
KeyboardElement,
|
||
} from "../interfaces";
|
||
import CandidateBox from "./CandidateBox";
|
||
|
||
/**
|
||
* Root class for simple-keyboard.
|
||
* This class:
|
||
* - Parses the options
|
||
* - Renders the rows and buttons
|
||
* - Handles button functionality
|
||
*/
|
||
class SimpleKeyboard {
|
||
input!: KeyboardInput;
|
||
options!: KeyboardOptions;
|
||
utilities: any;
|
||
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";
|
||
activeInputElement: HTMLInputElement | HTMLTextAreaElement | null = null;
|
||
|
||
/**
|
||
* Creates an instance of SimpleKeyboard
|
||
* @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
|
||
*/
|
||
constructor(
|
||
selectorOrOptions?: string | HTMLDivElement | KeyboardOptions,
|
||
keyboardOptions?: KeyboardOptions
|
||
) {
|
||
if (typeof window === "undefined") return;
|
||
|
||
const {
|
||
keyboardDOMClass,
|
||
keyboardDOM,
|
||
options = {},
|
||
} = this.handleParams(selectorOrOptions, keyboardOptions);
|
||
|
||
/**
|
||
* Initializing Utilities
|
||
*/
|
||
this.utilities = new Utilities({
|
||
getOptions: this.getOptions,
|
||
getCaretPosition: this.getCaretPosition,
|
||
getCaretPositionEnd: this.getCaretPositionEnd,
|
||
dispatch: this.dispatch,
|
||
});
|
||
|
||
/**
|
||
* Caret position
|
||
*/
|
||
this.caretPosition = null;
|
||
|
||
/**
|
||
* Caret position end
|
||
*/
|
||
this.caretPositionEnd = null;
|
||
|
||
/**
|
||
* Processing options
|
||
*/
|
||
this.keyboardDOM = keyboardDOM;
|
||
|
||
/**
|
||
* @type {object}
|
||
* @property {object} layout Modify the keyboard layout.
|
||
* @property {string} layoutName Specifies which layout should be used.
|
||
* @property {object} display Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: “backspace”).
|
||
* @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.
|
||
* @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
|
||
* @property {array} buttonTheme A prop to add your own css classes to one or several buttons.
|
||
* @property {array} buttonAttributes A prop to add your own attributes to one or several buttons.
|
||
* @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
|
||
* @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\n) or not.
|
||
* @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\t) or not.
|
||
* @property {string} inputName Allows you to use a single simple-keyboard instance for several inputs.
|
||
* @property {number} maxLength Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
|
||
* @property {object} maxLength Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
|
||
* @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.
|
||
* @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.
|
||
* @property {boolean} physicalKeyboardHighlightPress Presses keys highlighted by physicalKeyboardHighlight
|
||
* @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.
|
||
* @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.
|
||
* @property {boolean} physicalKeyboardHighlightPressUseClick Whether physicalKeyboardHighlightPress should use clicks to trigger buttons.
|
||
* @property {boolean} physicalKeyboardHighlightPressUsePointerEvents Whether physicalKeyboardHighlightPress should use pointer events to trigger buttons.
|
||
* @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.
|
||
* @property {boolean} preventMouseUpDefault Calling preventDefault for the mouseup events.
|
||
* @property {boolean} stopMouseDownPropagation Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
|
||
* @property {boolean} stopMouseUpPropagation Stops pointer up events on simple-keyboard buttons from bubbling to parent elements.
|
||
* @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).
|
||
* @property {function(input: string):string} onChange Executes the callback function on input change. Returns the current input’s string.
|
||
* @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
|
||
* @property {function} onInit Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
|
||
* @property {function(inputs: object):object} onChangeAll Executes the callback function on input change. Returns the input object with all defined inputs.
|
||
* @property {boolean} useButtonTag Render buttons as a button element instead of a div element.
|
||
* @property {boolean} disableCaretPositioning A prop to ensure characters are always be added/removed at the end of the string.
|
||
* @property {object} inputPattern Restrains input(s) change to the defined regular expression pattern.
|
||
* @property {boolean} useTouchEvents Instructs simple-keyboard to use touch events instead of click events.
|
||
* @property {boolean} autoUseTouchEvents Enable useTouchEvents automatically when touch device is detected.
|
||
* @property {boolean} useMouseEvents Opt out of PointerEvents handling, falling back to the prior mouse event logic.
|
||
* @property {function} destroy Clears keyboard listeners and DOM elements.
|
||
* @property {boolean} disableButtonHold Disable button hold action.
|
||
* @property {boolean} rtl Adds unicode right-to-left control characters to input return values.
|
||
* @property {function} onKeyReleased Executes the callback function on key release.
|
||
* @property {array} modules Module classes to be loaded by simple-keyboard.
|
||
* @property {boolean} enableLayoutCandidates Enable input method editor candidate list support.
|
||
* @property {object} excludeFromLayout Buttons to exclude from layout
|
||
* @property {number} layoutCandidatesPageSize Determines size of layout candidate list
|
||
* @property {boolean} layoutCandidatesCaseSensitiveMatch Determines whether layout candidate match should be case sensitive.
|
||
*/
|
||
this.options = {
|
||
layoutName: "default",
|
||
theme: "hg-theme-default",
|
||
inputName: "default",
|
||
preventMouseDownDefault: false,
|
||
enableLayoutCandidates: true,
|
||
excludeFromLayout: {},
|
||
...options,
|
||
};
|
||
|
||
/**
|
||
* @type {object} Classes identifying loaded plugins
|
||
*/
|
||
this.keyboardPluginClasses = "";
|
||
|
||
/**
|
||
* Bindings
|
||
*/
|
||
Utilities.bindMethods(SimpleKeyboard, this);
|
||
|
||
/**
|
||
* simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable `keyboard.input`).
|
||
* This removes any dependency to input DOM elements. You can type and directly display the value in a div element, for example.
|
||
* @example
|
||
* // To get entered input
|
||
* const input = keyboard.getInput();
|
||
*
|
||
* // To clear entered input.
|
||
* keyboard.clearInput();
|
||
*
|
||
* @type {object}
|
||
* @property {object} default Default SimpleKeyboard internal input.
|
||
* @property {object} myInputName Example input that can be set through `options.inputName:"myInputName"`.
|
||
*/
|
||
const { inputName = this.defaultName } = this.options;
|
||
this.input = {};
|
||
this.input[inputName] = "";
|
||
|
||
/**
|
||
* @type {string} DOM class of the keyboard wrapper, normally "simple-keyboard" by default.
|
||
*/
|
||
this.keyboardDOMClass = keyboardDOMClass;
|
||
|
||
/**
|
||
* @type {object} Contains the DOM elements of every rendered button, the key being the button's layout name (e.g.: "{enter}").
|
||
*/
|
||
this.buttonElements = {};
|
||
|
||
/**
|
||
* Simple-keyboard Instances
|
||
* This enables multiple simple-keyboard support with easier management
|
||
*/
|
||
if (!window["SimpleKeyboardInstances"])
|
||
window["SimpleKeyboardInstances"] = {};
|
||
|
||
this.currentInstanceName = this.utilities.camelCase(this.keyboardDOMClass);
|
||
window["SimpleKeyboardInstances"][this.currentInstanceName] = this;
|
||
|
||
/**
|
||
* Instance vars
|
||
*/
|
||
this.allKeyboardInstances = window["SimpleKeyboardInstances"];
|
||
this.keyboardInstanceNames = Object.keys(window["SimpleKeyboardInstances"]);
|
||
this.isFirstKeyboardInstance =
|
||
this.keyboardInstanceNames[0] === this.currentInstanceName;
|
||
|
||
/**
|
||
* Physical Keyboard support
|
||
*/
|
||
this.physicalKeyboard = new PhysicalKeyboard({
|
||
dispatch: this.dispatch,
|
||
getOptions: this.getOptions,
|
||
});
|
||
|
||
/**
|
||
* Initializing CandidateBox
|
||
*/
|
||
this.candidateBox = this.options.enableLayoutCandidates
|
||
? new CandidateBox({
|
||
utilities: this.utilities,
|
||
})
|
||
: null;
|
||
|
||
/**
|
||
* Rendering keyboard
|
||
*/
|
||
if (this.keyboardDOM) this.render();
|
||
else {
|
||
console.warn(`".${keyboardDOMClass}" was not found in the DOM.`);
|
||
throw new Error("KEYBOARD_DOM_ERROR");
|
||
}
|
||
|
||
/**
|
||
* Modules
|
||
*/
|
||
this.modules = {};
|
||
this.loadModules();
|
||
}
|
||
|
||
/**
|
||
* parseParams
|
||
*/
|
||
handleParams = (
|
||
selectorOrOptions?: string | HTMLDivElement | KeyboardOptions,
|
||
keyboardOptions?: KeyboardOptions
|
||
): {
|
||
keyboardDOMClass: string;
|
||
keyboardDOM: KeyboardElement;
|
||
options: Partial<KeyboardOptions | undefined>;
|
||
} => {
|
||
let keyboardDOMClass;
|
||
let keyboardDOM;
|
||
let options;
|
||
|
||
/**
|
||
* If first parameter is a string:
|
||
* Consider it as an element's class
|
||
*/
|
||
if (typeof selectorOrOptions === "string") {
|
||
keyboardDOMClass = selectorOrOptions.split(".").join("");
|
||
keyboardDOM = document.querySelector(
|
||
`.${keyboardDOMClass}`
|
||
) as KeyboardElement;
|
||
options = keyboardOptions;
|
||
|
||
/**
|
||
* If first parameter is an KeyboardElement
|
||
* Consider it as the keyboard DOM element
|
||
*/
|
||
} else if (selectorOrOptions instanceof HTMLDivElement) {
|
||
/**
|
||
* This element must have a class, otherwise throw
|
||
*/
|
||
if (!selectorOrOptions.className) {
|
||
console.warn("Any DOM element passed as parameter must have a class.");
|
||
throw new Error("KEYBOARD_DOM_CLASS_ERROR");
|
||
}
|
||
|
||
keyboardDOMClass = selectorOrOptions.className.split(" ")[0];
|
||
keyboardDOM = selectorOrOptions;
|
||
options = keyboardOptions;
|
||
|
||
/**
|
||
* Otherwise, search for .simple-keyboard DOM element
|
||
*/
|
||
} else {
|
||
keyboardDOMClass = "simple-keyboard";
|
||
keyboardDOM = document.querySelector(
|
||
`.${keyboardDOMClass}`
|
||
) as KeyboardElement;
|
||
options = selectorOrOptions;
|
||
}
|
||
|
||
return {
|
||
keyboardDOMClass,
|
||
keyboardDOM,
|
||
options,
|
||
};
|
||
};
|
||
|
||
/**
|
||
* Getters
|
||
*/
|
||
getOptions = (): KeyboardOptions => this.options;
|
||
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 | null, endPosition = position): void {
|
||
this.caretPosition = position;
|
||
this.caretPositionEnd = endPosition;
|
||
}
|
||
|
||
/**
|
||
* Retrieve the candidates for a given input
|
||
* @param input The input string to check
|
||
*/
|
||
getInputCandidates(
|
||
input: string
|
||
): { candidateKey: string; candidateValue: string } | Record<string, never> {
|
||
const {
|
||
layoutCandidates: layoutCandidatesObj,
|
||
layoutCandidatesCaseSensitiveMatch,
|
||
} = this.options;
|
||
|
||
if (!layoutCandidatesObj || typeof layoutCandidatesObj !== "object") {
|
||
return {};
|
||
}
|
||
|
||
const layoutCandidates = Object.keys(layoutCandidatesObj).filter(
|
||
(layoutCandidate: string) => {
|
||
const inputSubstr =
|
||
input.substring(0, this.getCaretPositionEnd() || 0) || input;
|
||
const regexp = new RegExp(
|
||
`${this.utilities.escapeRegex(layoutCandidate)}$`,
|
||
layoutCandidatesCaseSensitiveMatch ? "g" : "gi"
|
||
);
|
||
const matches = [...inputSubstr.matchAll(regexp)];
|
||
return !!matches.length;
|
||
}
|
||
);
|
||
|
||
if (layoutCandidates.length > 1) {
|
||
const candidateKey = layoutCandidates.sort(
|
||
(a, b) => b.length - a.length
|
||
)[0];
|
||
return {
|
||
candidateKey,
|
||
candidateValue: layoutCandidatesObj[candidateKey],
|
||
};
|
||
} else if (layoutCandidates.length) {
|
||
const candidateKey = layoutCandidates[0];
|
||
return {
|
||
candidateKey,
|
||
candidateValue: layoutCandidatesObj[candidateKey],
|
||
};
|
||
} else {
|
||
return {};
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Shows a suggestion box with a list of candidate words
|
||
* @param candidates The chosen candidates string as defined in the layoutCandidates option
|
||
* @param targetElement The element next to which the candidates box will be shown
|
||
*/
|
||
showCandidatesBox(
|
||
candidateKey: string,
|
||
candidateValue: string,
|
||
targetElement: KeyboardElement
|
||
): void {
|
||
if (this.candidateBox) {
|
||
this.candidateBox.show({
|
||
candidateValue,
|
||
targetElement,
|
||
onSelect: (selectedCandidate: string, e: MouseEvent) => {
|
||
const { layoutCandidatesCaseSensitiveMatch } = this.options;
|
||
|
||
/**
|
||
* Making sure that our suggestions are not composed characters
|
||
*/
|
||
const normalizedCandidate = selectedCandidate.normalize("NFD");
|
||
const currentInput = this.getInput(this.options.inputName, true);
|
||
const initialCaretPosition = this.getCaretPositionEnd() || 0;
|
||
const inputSubstr =
|
||
currentInput.substring(0, initialCaretPosition || 0) ||
|
||
currentInput;
|
||
|
||
const regexp = new RegExp(
|
||
`${this.utilities.escapeRegex(candidateKey)}$`,
|
||
layoutCandidatesCaseSensitiveMatch ? "g" : "gi"
|
||
);
|
||
const newInputSubstr = inputSubstr.replace(
|
||
regexp,
|
||
normalizedCandidate
|
||
);
|
||
const newInput = currentInput.replace(inputSubstr, newInputSubstr);
|
||
|
||
const caretPositionDiff = newInputSubstr.length - inputSubstr.length;
|
||
let newCaretPosition =
|
||
(initialCaretPosition || currentInput.length) + caretPositionDiff;
|
||
|
||
if (newCaretPosition < 0) newCaretPosition = 0;
|
||
|
||
this.setInput(newInput, this.options.inputName, true);
|
||
this.setCaretPosition(newCaretPosition);
|
||
|
||
if (typeof this.options.onChange === "function")
|
||
this.options.onChange(
|
||
this.getInput(this.options.inputName, true),
|
||
e
|
||
);
|
||
|
||
/**
|
||
* Calling onChangeAll
|
||
*/
|
||
if (typeof this.options.onChangeAll === "function")
|
||
this.options.onChangeAll(this.getAllInputs(), e);
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Handles clicks made to keyboard buttons
|
||
* @param {string} button The button's layout name.
|
||
*/
|
||
handleButtonClicked(button: string, e?: KeyboardHandlerEvent): void {
|
||
const { inputName = this.defaultName, debug } = this.options;
|
||
/**
|
||
* Ignoring placeholder buttons
|
||
*/
|
||
if (button === "{//}") return;
|
||
|
||
/**
|
||
* Creating inputName if it doesn't exist
|
||
*/
|
||
if (!this.input[inputName]) this.input[inputName] = "";
|
||
|
||
/**
|
||
* Calculating new input
|
||
*/
|
||
const updatedInput = this.utilities.getUpdatedInput(
|
||
button,
|
||
this.input[inputName],
|
||
this.caretPosition,
|
||
this.caretPositionEnd
|
||
);
|
||
|
||
/**
|
||
* EDGE CASE: Check for whole input selection changes that will yield same updatedInput
|
||
*/
|
||
if (this.utilities.isStandardButton(button) && this.activeInputElement) {
|
||
const isEntireInputSelection =
|
||
this.input[inputName] &&
|
||
this.input[inputName] === updatedInput &&
|
||
this.caretPosition === 0 &&
|
||
this.caretPositionEnd === updatedInput.length;
|
||
|
||
if (isEntireInputSelection) {
|
||
this.setInput("", this.options.inputName, true);
|
||
this.setCaretPosition(0);
|
||
this.activeInputElement.value = "";
|
||
this.activeInputElement.setSelectionRange(0, 0);
|
||
this.handleButtonClicked(button, e);
|
||
return;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Calling onKeyPress
|
||
*/
|
||
if (typeof this.options.onKeyPress === "function")
|
||
this.options.onKeyPress(button, e);
|
||
|
||
if (
|
||
// If input will change as a result of this button press
|
||
this.input[inputName] !== updatedInput &&
|
||
// This pertains to the "inputPattern" option:
|
||
// If inputPattern isn't set
|
||
(!this.options.inputPattern ||
|
||
// Or, if it is set and if the pattern is valid - we proceed.
|
||
(this.options.inputPattern && this.inputPatternIsValid(updatedInput)))
|
||
) {
|
||
/**
|
||
* If maxLength and handleMaxLength yield true, halting
|
||
*/
|
||
if (
|
||
this.options.maxLength &&
|
||
this.utilities.handleMaxLength(this.input, updatedInput)
|
||
) {
|
||
return;
|
||
}
|
||
|
||
/**
|
||
* Updating input
|
||
*/
|
||
const newInputValue = this.utilities.getUpdatedInput(
|
||
button,
|
||
this.input[inputName],
|
||
this.caretPosition,
|
||
this.caretPositionEnd,
|
||
true
|
||
);
|
||
|
||
this.setInput(newInputValue, this.options.inputName, true);
|
||
|
||
if (debug) console.log("Input changed:", this.getAllInputs());
|
||
|
||
if (this.options.debug) {
|
||
console.log(
|
||
"Caret at: ",
|
||
this.getCaretPosition(),
|
||
this.getCaretPositionEnd(),
|
||
`(${this.keyboardDOMClass})`
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Enforce syncInstanceInputs, if set
|
||
*/
|
||
if (this.options.syncInstanceInputs) this.syncInstanceInputs();
|
||
|
||
/**
|
||
* Calling onChange
|
||
*/
|
||
if (typeof this.options.onChange === "function")
|
||
this.options.onChange(this.getInput(this.options.inputName, true), e);
|
||
|
||
/**
|
||
* Calling onChangeAll
|
||
*/
|
||
if (typeof this.options.onChangeAll === "function")
|
||
this.options.onChangeAll(this.getAllInputs(), e);
|
||
|
||
/**
|
||
* Check if this new input has candidates (suggested words)
|
||
*/
|
||
if (e?.target && this.options.enableLayoutCandidates) {
|
||
const { candidateKey, candidateValue } =
|
||
this.getInputCandidates(updatedInput);
|
||
|
||
if (candidateKey && candidateValue) {
|
||
this.showCandidatesBox(
|
||
candidateKey,
|
||
candidateValue,
|
||
this.keyboardDOM
|
||
);
|
||
} else {
|
||
this.candidateBox?.destroy();
|
||
}
|
||
}
|
||
}
|
||
|
||
if (debug) {
|
||
console.log("Key pressed:", button);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Get mouse hold state
|
||
*/
|
||
getMouseHold() {
|
||
return this.isMouseHold;
|
||
}
|
||
|
||
/**
|
||
* Mark mouse hold state as set
|
||
*/
|
||
setMouseHold(value: boolean) {
|
||
if (this.options.syncInstanceInputs) {
|
||
this.dispatch((instance: SimpleKeyboard) => {
|
||
instance.isMouseHold = value;
|
||
});
|
||
} else {
|
||
this.isMouseHold = value;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Handles button mousedown
|
||
*/
|
||
/* istanbul ignore next */
|
||
handleButtonMouseDown(button: string, e: KeyboardHandlerEvent): void {
|
||
if (e) {
|
||
/**
|
||
* Handle event options
|
||
*/
|
||
if (this.options.preventMouseDownDefault) e.preventDefault();
|
||
if (this.options.stopMouseDownPropagation) e.stopPropagation();
|
||
|
||
/**
|
||
* Add active class
|
||
*/
|
||
e.target.classList.add(this.activeButtonClass);
|
||
}
|
||
|
||
if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
|
||
if (this.holdTimeout) clearTimeout(this.holdTimeout);
|
||
|
||
/**
|
||
* @type {boolean} Whether the mouse is being held onKeyPress
|
||
*/
|
||
this.setMouseHold(true);
|
||
|
||
/**
|
||
* @type {object} Time to wait until a key hold is detected
|
||
*/
|
||
if (!this.options.disableButtonHold) {
|
||
this.holdTimeout = window.setTimeout(() => {
|
||
if (
|
||
(this.getMouseHold() &&
|
||
// TODO: This needs to be configurable through options
|
||
((!button.includes("{") && !button.includes("}")) ||
|
||
button === "{delete}" ||
|
||
button === "{backspace}" ||
|
||
button === "{bksp}" ||
|
||
button === "{space}" ||
|
||
button === "{tab}")) ||
|
||
button === "{arrowright}" ||
|
||
button === "{arrowleft}" ||
|
||
button === "{arrowup}" ||
|
||
button === "{arrowdown}"
|
||
) {
|
||
if (this.options.debug) console.log("Button held:", button);
|
||
|
||
this.handleButtonHold(button);
|
||
}
|
||
clearTimeout(this.holdTimeout);
|
||
}, 500);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Handles button mouseup
|
||
*/
|
||
handleButtonMouseUp(button?: string, e?: KeyboardHandlerEvent): void {
|
||
if (e) {
|
||
/**
|
||
* Handle event options
|
||
*/
|
||
if (this.options.preventMouseUpDefault && e.preventDefault)
|
||
e.preventDefault();
|
||
if (this.options.stopMouseUpPropagation && e.stopPropagation)
|
||
e.stopPropagation();
|
||
|
||
/* istanbul ignore next */
|
||
const isKeyboard =
|
||
e.target === this.keyboardDOM ||
|
||
(e.target && this.keyboardDOM.contains(e.target)) ||
|
||
(this.candidateBox &&
|
||
this.candidateBox.candidateBoxElement &&
|
||
(e.target === this.candidateBox.candidateBoxElement ||
|
||
(e.target &&
|
||
this.candidateBox.candidateBoxElement.contains(e.target))));
|
||
|
||
/**
|
||
* On click outside, remove candidateBox
|
||
*/
|
||
if (!isKeyboard && this.candidateBox) {
|
||
this.candidateBox.destroy();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Remove active class
|
||
*/
|
||
this.recurseButtons((buttonElement: Element) => {
|
||
buttonElement.classList.remove(this.activeButtonClass);
|
||
});
|
||
|
||
this.setMouseHold(false);
|
||
if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
|
||
|
||
/**
|
||
* Calling onKeyReleased
|
||
*/
|
||
if (button && typeof this.options.onKeyReleased === "function")
|
||
this.options.onKeyReleased(button);
|
||
}
|
||
|
||
/**
|
||
* Handles container mousedown
|
||
*/
|
||
handleKeyboardContainerMouseDown(e: KeyboardHandlerEvent): void {
|
||
/**
|
||
* Handle event options
|
||
*/
|
||
if (this.options.preventMouseDownDefault) e.preventDefault();
|
||
}
|
||
|
||
/**
|
||
* Handles button hold
|
||
*/
|
||
/* istanbul ignore next */
|
||
handleButtonHold(button: string): void {
|
||
if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
|
||
|
||
/**
|
||
* @type {object} Timeout dictating the speed of key hold iterations
|
||
*/
|
||
this.holdInteractionTimeout = window.setTimeout(() => {
|
||
if (this.getMouseHold()) {
|
||
this.handleButtonClicked(button);
|
||
this.handleButtonHold(button);
|
||
} else {
|
||
clearTimeout(this.holdInteractionTimeout);
|
||
}
|
||
}, 100);
|
||
}
|
||
|
||
/**
|
||
* Send a command to all simple-keyboard instances (if you have several instances).
|
||
*/
|
||
syncInstanceInputs(): void {
|
||
this.dispatch((instance: SimpleKeyboard) => {
|
||
instance.replaceInput(this.input);
|
||
instance.setCaretPosition(this.caretPosition, this.caretPositionEnd);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Clear the keyboard’s input.
|
||
* @param {string} [inputName] optional - the internal input to select
|
||
*/
|
||
clearInput(
|
||
inputName: string = this.options.inputName || this.defaultName
|
||
): void {
|
||
this.input[inputName] = "";
|
||
|
||
/**
|
||
* Reset caretPosition
|
||
*/
|
||
this.setCaretPosition(0);
|
||
|
||
/**
|
||
* Enforce syncInstanceInputs, if set
|
||
*/
|
||
if (this.options.syncInstanceInputs) this.syncInstanceInputs();
|
||
}
|
||
|
||
/**
|
||
* 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: string = this.options.inputName || this.defaultName,
|
||
skipSync = false
|
||
): string {
|
||
/**
|
||
* Enforce syncInstanceInputs, if set
|
||
*/
|
||
if (this.options.syncInstanceInputs && !skipSync) this.syncInstanceInputs();
|
||
|
||
if (this.options.rtl) {
|
||
// Remove existing control chars
|
||
const inputWithoutRTLControl = this.input[inputName]
|
||
.replace("\u202B", "")
|
||
.replace("\u202C", "");
|
||
|
||
return "\u202B" + inputWithoutRTLControl + "\u202C";
|
||
} else {
|
||
return this.input[inputName];
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Get all simple-keyboard inputs
|
||
*/
|
||
getAllInputs(): KeyboardInput {
|
||
const output = {};
|
||
const inputNames = Object.keys(this.input);
|
||
|
||
inputNames.forEach((inputName) => {
|
||
output[inputName] = this.getInput(inputName, true);
|
||
});
|
||
|
||
return output;
|
||
}
|
||
|
||
/**
|
||
* Set the keyboard’s input.
|
||
* @param {string} input the input value
|
||
* @param {string} inputName optional - the internal input to select
|
||
*/
|
||
setInput(
|
||
input: string,
|
||
inputName: string = this.options.inputName || this.defaultName,
|
||
skipSync?: boolean
|
||
): void {
|
||
this.input[inputName] = input;
|
||
|
||
/**
|
||
* Enforce syncInstanceInputs, if set
|
||
*/
|
||
if (!skipSync && this.options.syncInstanceInputs) this.syncInstanceInputs();
|
||
}
|
||
|
||
/**
|
||
* Replace the input object (`keyboard.input`)
|
||
* @param {object} inputObj The input object
|
||
*/
|
||
replaceInput(inputObj: KeyboardInput): void {
|
||
this.input = inputObj;
|
||
}
|
||
|
||
/**
|
||
* Set new option or modify existing ones after initialization.
|
||
* @param {object} options The options to set
|
||
*/
|
||
setOptions(options = {}): void {
|
||
const changedOptions = this.changedOptions(options);
|
||
this.options = Object.assign(this.options, options);
|
||
|
||
if (changedOptions.length) {
|
||
if (this.options.debug) {
|
||
console.log("changedOptions", changedOptions);
|
||
}
|
||
|
||
/**
|
||
* Some option changes require adjustments before re-render
|
||
*/
|
||
this.onSetOptions(changedOptions);
|
||
|
||
/**
|
||
* Rendering
|
||
*/
|
||
this.render();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Detecting changes to non-function options
|
||
* This allows us to ascertain whether a button re-render is needed
|
||
*/
|
||
changedOptions(newOptions: Partial<KeyboardOptions>): string[] {
|
||
return Object.keys(newOptions).filter(
|
||
(optionName) =>
|
||
JSON.stringify(newOptions[optionName]) !==
|
||
JSON.stringify(this.options[optionName])
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Executing actions depending on changed options
|
||
* @param {object} options The options to set
|
||
*/
|
||
onSetOptions(changedOptions: string[] = []): void {
|
||
/**
|
||
* Changed: layoutName
|
||
*/
|
||
if (changedOptions.includes("layoutName")) {
|
||
/**
|
||
* Reset candidateBox
|
||
*/
|
||
if (this.candidateBox) {
|
||
this.candidateBox.destroy();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Changed: layoutCandidatesPageSize, layoutCandidates
|
||
*/
|
||
if (
|
||
changedOptions.includes("layoutCandidatesPageSize") ||
|
||
changedOptions.includes("layoutCandidates")
|
||
) {
|
||
/**
|
||
* Reset and recreate candidateBox
|
||
*/
|
||
if (this.candidateBox) {
|
||
this.candidateBox.destroy();
|
||
this.candidateBox = new CandidateBox({
|
||
utilities: this.utilities,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Remove all keyboard rows and reset keyboard values.
|
||
* Used internally between re-renders.
|
||
*/
|
||
resetRows(): void {
|
||
if (this.keyboardRowsDOM) {
|
||
this.keyboardRowsDOM.remove();
|
||
}
|
||
|
||
this.keyboardDOM.className = this.keyboardDOMClass;
|
||
this.keyboardDOM.setAttribute("data-skInstance", this.currentInstanceName);
|
||
this.buttonElements = {};
|
||
}
|
||
|
||
/**
|
||
* Send a command to all simple-keyboard instances at once (if you have multiple instances).
|
||
* @param {function(instance: object, key: string)} callback Function to run on every instance
|
||
*/
|
||
// eslint-disable-next-line no-unused-vars
|
||
dispatch(callback: (instance: SimpleKeyboard, key?: string) => void): void {
|
||
if (!window["SimpleKeyboardInstances"]) {
|
||
console.warn(
|
||
`SimpleKeyboardInstances is not defined. Dispatch cannot be called.`
|
||
);
|
||
throw new Error("INSTANCES_VAR_ERROR");
|
||
}
|
||
|
||
return Object.keys(window["SimpleKeyboardInstances"]).forEach((key) => {
|
||
callback(window["SimpleKeyboardInstances"][key], key);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
|
||
* @param {string} buttons List of buttons to select (separated by a space).
|
||
* @param {string} className Classes to give to the selected buttons (separated by space).
|
||
*/
|
||
addButtonTheme(buttons: string, className: string): void {
|
||
if (!className || !buttons) return;
|
||
|
||
buttons.split(" ").forEach((button) => {
|
||
className.split(" ").forEach((classNameItem) => {
|
||
if (!this.options.buttonTheme) this.options.buttonTheme = [];
|
||
|
||
let classNameFound = false;
|
||
|
||
/**
|
||
* If class is already defined, we add button to class definition
|
||
*/
|
||
this.options.buttonTheme.map((buttonTheme) => {
|
||
if (buttonTheme?.class.split(" ").includes(classNameItem)) {
|
||
classNameFound = true;
|
||
|
||
const buttonThemeArray = buttonTheme.buttons.split(" ");
|
||
if (!buttonThemeArray.includes(button)) {
|
||
classNameFound = true;
|
||
buttonThemeArray.push(button);
|
||
buttonTheme.buttons = buttonThemeArray.join(" ");
|
||
}
|
||
}
|
||
return buttonTheme;
|
||
});
|
||
|
||
/**
|
||
* If class is not defined, we create a new entry
|
||
*/
|
||
if (!classNameFound) {
|
||
this.options.buttonTheme.push({
|
||
class: classNameItem,
|
||
buttons: buttons,
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
this.render();
|
||
}
|
||
|
||
/**
|
||
* Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.
|
||
* @param {string} buttons List of buttons to select (separated by a space).
|
||
* @param {string} className Classes to give to the selected buttons (separated by space).
|
||
*/
|
||
removeButtonTheme(buttons: string, className: string): void {
|
||
/**
|
||
* When called with empty parameters, remove all button themes
|
||
*/
|
||
if (!buttons && !className) {
|
||
this.options.buttonTheme = [];
|
||
this.render();
|
||
return;
|
||
}
|
||
|
||
/**
|
||
* If buttons are passed and buttonTheme has items
|
||
*/
|
||
if (
|
||
buttons &&
|
||
Array.isArray(this.options.buttonTheme) &&
|
||
this.options.buttonTheme.length
|
||
) {
|
||
const buttonArray = buttons.split(" ");
|
||
buttonArray.forEach((button) => {
|
||
this.options?.buttonTheme?.map((buttonTheme, index) => {
|
||
/**
|
||
* If className is set, we affect the buttons only for that class
|
||
* Otherwise, we afect all classes
|
||
*/
|
||
if (
|
||
(buttonTheme &&
|
||
className &&
|
||
className.includes(buttonTheme.class)) ||
|
||
!className
|
||
) {
|
||
const filteredButtonArray = buttonTheme?.buttons
|
||
.split(" ")
|
||
.filter((item) => item !== button);
|
||
|
||
/**
|
||
* If buttons left, return them, otherwise, remove button Theme
|
||
*/
|
||
if (buttonTheme && filteredButtonArray?.length) {
|
||
buttonTheme.buttons = filteredButtonArray.join(" ");
|
||
} else {
|
||
this.options.buttonTheme?.splice(index, 1);
|
||
buttonTheme = null;
|
||
}
|
||
}
|
||
|
||
return buttonTheme;
|
||
});
|
||
});
|
||
|
||
this.render();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
|
||
* @param {string} button The button layout name to select
|
||
*/
|
||
getButtonElement(
|
||
button: string
|
||
): KeyboardElement | KeyboardElement[] | undefined {
|
||
let output;
|
||
|
||
const buttonArr = this.buttonElements[button];
|
||
if (buttonArr) {
|
||
if (buttonArr.length > 1) {
|
||
output = buttonArr;
|
||
} else {
|
||
output = buttonArr[0];
|
||
}
|
||
}
|
||
|
||
return output;
|
||
}
|
||
|
||
/**
|
||
* This handles the "inputPattern" option
|
||
* by checking if the provided inputPattern passes
|
||
*/
|
||
inputPatternIsValid(inputVal: string): boolean {
|
||
const inputPatternRaw = this.options.inputPattern;
|
||
let inputPattern;
|
||
|
||
/**
|
||
* Check if input pattern is global or targeted to individual inputs
|
||
*/
|
||
if (inputPatternRaw instanceof RegExp) {
|
||
inputPattern = inputPatternRaw;
|
||
} else {
|
||
inputPattern =
|
||
inputPatternRaw[this.options.inputName || this.defaultName];
|
||
}
|
||
|
||
if (inputPattern && inputVal) {
|
||
const didInputMatch = inputPattern.test(inputVal);
|
||
|
||
if (this.options.debug) {
|
||
console.log(
|
||
`inputPattern ("${inputPattern}"): ${
|
||
didInputMatch ? "passed" : "did not pass!"
|
||
}`
|
||
);
|
||
}
|
||
|
||
return didInputMatch;
|
||
} else {
|
||
/**
|
||
* inputPattern doesn't seem to be set for the current input, or input is empty. Pass.
|
||
*/
|
||
return true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Handles simple-keyboard event listeners
|
||
*/
|
||
setEventListeners(): void {
|
||
/**
|
||
* Only first instance should set the event listeners
|
||
*/
|
||
if (this.isFirstKeyboardInstance || !this.allKeyboardInstances) {
|
||
if (this.options.debug) {
|
||
console.log(`Caret handling started (${this.keyboardDOMClass})`);
|
||
}
|
||
|
||
/**
|
||
* Event Listeners
|
||
*/
|
||
document.addEventListener("keyup", this.handleKeyUp);
|
||
document.addEventListener("keydown", this.handleKeyDown);
|
||
document.addEventListener("mouseup", this.handleMouseUp);
|
||
document.addEventListener("touchend", this.handleTouchEnd);
|
||
document.addEventListener("select", this.handleSelect);
|
||
document.addEventListener("selectionchange", this.handleSelectionChange);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Event Handler: KeyUp
|
||
*/
|
||
handleKeyUp(event: KeyboardHandlerEvent): void {
|
||
this.caretEventHandler(event);
|
||
|
||
if (this.options.physicalKeyboardHighlight) {
|
||
this.physicalKeyboard.handleHighlightKeyUp(event);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Event Handler: KeyDown
|
||
*/
|
||
handleKeyDown(event: KeyboardHandlerEvent): void {
|
||
if (this.options.physicalKeyboardHighlight) {
|
||
this.physicalKeyboard.handleHighlightKeyDown(event);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Event Handler: MouseUp
|
||
*/
|
||
handleMouseUp(event: KeyboardHandlerEvent): void {
|
||
this.caretEventHandler(event);
|
||
}
|
||
|
||
/**
|
||
* Event Handler: TouchEnd
|
||
*/
|
||
/* istanbul ignore next */
|
||
handleTouchEnd(event: KeyboardHandlerEvent): void {
|
||
this.caretEventHandler(event);
|
||
}
|
||
|
||
/**
|
||
* Event Handler: Select
|
||
*/
|
||
/* istanbul ignore next */
|
||
handleSelect(event: KeyboardHandlerEvent): void {
|
||
this.caretEventHandler(event);
|
||
}
|
||
|
||
/**
|
||
* Event Handler: SelectionChange
|
||
*/
|
||
/* istanbul ignore next */
|
||
handleSelectionChange(event: KeyboardHandlerEvent): void {
|
||
this.caretEventHandler(event);
|
||
}
|
||
|
||
/**
|
||
* Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
|
||
*/
|
||
caretEventHandler(event: KeyboardHandlerEvent): void {
|
||
let targetTagName: string;
|
||
if (event.target.tagName) {
|
||
targetTagName = event.target.tagName.toLowerCase();
|
||
}
|
||
|
||
this.dispatch((instance) => {
|
||
let isKeyboard =
|
||
event.target === instance.keyboardDOM ||
|
||
(event.target && instance.keyboardDOM.contains(event.target));
|
||
|
||
/**
|
||
* If syncInstanceInputs option is enabled, make isKeyboard match any instance
|
||
* not just the current one
|
||
*/
|
||
if (this.options.syncInstanceInputs && Array.isArray(event.path)) {
|
||
isKeyboard = event.path.some((item: HTMLElement) =>
|
||
item?.hasAttribute?.("data-skInstance")
|
||
);
|
||
}
|
||
|
||
if (
|
||
(targetTagName === "textarea" ||
|
||
(targetTagName === "input" &&
|
||
["text", "search", "url", "tel", "password"].includes(
|
||
event.target.type
|
||
))) &&
|
||
!instance.options.disableCaretPositioning
|
||
) {
|
||
/**
|
||
* Tracks current cursor position
|
||
* As keys are pressed, text will be added/removed at that position within the input.
|
||
*/
|
||
instance.setCaretPosition(
|
||
event.target.selectionStart,
|
||
event.target.selectionEnd
|
||
);
|
||
|
||
/**
|
||
* Tracking current input in order to handle caret positioning edge cases
|
||
*/
|
||
this.activeInputElement = event.target;
|
||
|
||
if (instance.options.debug) {
|
||
console.log(
|
||
"Caret at: ",
|
||
instance.getCaretPosition(),
|
||
instance.getCaretPositionEnd(),
|
||
event && event.target.tagName.toLowerCase(),
|
||
`(${instance.keyboardDOMClass})`
|
||
);
|
||
}
|
||
} else if (
|
||
(instance.options.disableCaretPositioning || !isKeyboard) &&
|
||
event?.type !== "selectionchange"
|
||
) {
|
||
/**
|
||
* If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.
|
||
*/
|
||
instance.setCaretPosition(null);
|
||
|
||
/**
|
||
* Resetting activeInputElement
|
||
*/
|
||
this.activeInputElement = null;
|
||
|
||
if (instance.options.debug) {
|
||
console.log(
|
||
`Caret position reset due to "${event?.type}" event`,
|
||
event
|
||
);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Execute an operation on each button
|
||
*/
|
||
recurseButtons(fn: any): void {
|
||
if (!fn) return;
|
||
|
||
Object.keys(this.buttonElements).forEach((buttonName) =>
|
||
this.buttonElements[buttonName].forEach(fn)
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Destroy keyboard listeners and DOM elements
|
||
*/
|
||
destroy(): void {
|
||
if (this.options.debug)
|
||
console.log(
|
||
`Destroying simple-keyboard instance: ${this.currentInstanceName}`
|
||
);
|
||
|
||
/**
|
||
* Remove document listeners
|
||
*/
|
||
document.removeEventListener("keyup", this.handleKeyUp);
|
||
document.removeEventListener("keydown", this.handleKeyDown);
|
||
document.removeEventListener("mouseup", this.handleMouseUp);
|
||
document.removeEventListener("touchend", this.handleTouchEnd);
|
||
document.removeEventListener("select", this.handleSelect);
|
||
document.removeEventListener("selectionchange", this.handleSelectionChange);
|
||
document.onpointerup = null;
|
||
document.ontouchend = null;
|
||
document.ontouchcancel = null;
|
||
document.onmouseup = null;
|
||
|
||
/**
|
||
* Remove buttons
|
||
*/
|
||
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;
|
||
}
|
||
};
|
||
|
||
this.recurseButtons(deleteButton);
|
||
|
||
/**
|
||
* Remove wrapper events
|
||
*/
|
||
this.keyboardDOM.onpointerdown = null;
|
||
this.keyboardDOM.ontouchstart = null;
|
||
this.keyboardDOM.onmousedown = null;
|
||
|
||
/**
|
||
* Clearing keyboard rows
|
||
*/
|
||
this.resetRows();
|
||
|
||
/**
|
||
* Candidate box
|
||
*/
|
||
if (this.candidateBox) {
|
||
this.candidateBox.destroy();
|
||
this.candidateBox = null;
|
||
}
|
||
|
||
/**
|
||
* Clearing activeInputElement
|
||
*/
|
||
this.activeInputElement = null;
|
||
|
||
/**
|
||
* Removing instance attribute
|
||
*/
|
||
this.keyboardDOM.removeAttribute("data-skInstance");
|
||
|
||
/**
|
||
* Clearing keyboardDOM
|
||
*/
|
||
this.keyboardDOM.innerHTML = "";
|
||
|
||
/**
|
||
* Remove instance
|
||
*/
|
||
window["SimpleKeyboardInstances"][this.currentInstanceName] = null;
|
||
delete window["SimpleKeyboardInstances"][this.currentInstanceName];
|
||
|
||
/**
|
||
* Reset initialized flag
|
||
*/
|
||
this.initialized = false;
|
||
}
|
||
|
||
/**
|
||
* Process buttonTheme option
|
||
*/
|
||
getButtonThemeClasses(button: string): string[] {
|
||
const buttonTheme = this.options.buttonTheme;
|
||
let buttonClasses: string[] = [];
|
||
|
||
if (Array.isArray(buttonTheme)) {
|
||
buttonTheme.forEach((themeObj) => {
|
||
if (
|
||
themeObj &&
|
||
themeObj.class &&
|
||
typeof themeObj.class === "string" &&
|
||
themeObj.buttons &&
|
||
typeof themeObj.buttons === "string"
|
||
) {
|
||
const themeObjClasses = themeObj.class.split(" ");
|
||
const themeObjButtons = themeObj.buttons.split(" ");
|
||
|
||
if (themeObjButtons.includes(button)) {
|
||
buttonClasses = [...buttonClasses, ...themeObjClasses];
|
||
}
|
||
} else {
|
||
console.warn(
|
||
`Incorrect "buttonTheme". Please check the documentation.`,
|
||
themeObj
|
||
);
|
||
}
|
||
});
|
||
}
|
||
|
||
return buttonClasses;
|
||
}
|
||
|
||
/**
|
||
* Process buttonAttributes option
|
||
*/
|
||
setDOMButtonAttributes(button: string, callback: any): void {
|
||
const buttonAttributes = this.options.buttonAttributes;
|
||
|
||
if (Array.isArray(buttonAttributes)) {
|
||
buttonAttributes.forEach((attrObj) => {
|
||
if (
|
||
attrObj.attribute &&
|
||
typeof attrObj.attribute === "string" &&
|
||
attrObj.value &&
|
||
typeof attrObj.value === "string" &&
|
||
attrObj.buttons &&
|
||
typeof attrObj.buttons === "string"
|
||
) {
|
||
const attrObjButtons = attrObj.buttons.split(" ");
|
||
|
||
if (attrObjButtons.includes(button)) {
|
||
callback(attrObj.attribute, attrObj.value);
|
||
}
|
||
} else {
|
||
console.warn(
|
||
`Incorrect "buttonAttributes". Please check the documentation.`,
|
||
attrObj
|
||
);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
onTouchDeviceDetected() {
|
||
/**
|
||
* Processing autoTouchEvents
|
||
*/
|
||
this.processAutoTouchEvents();
|
||
|
||
/**
|
||
* Disabling contextual window on touch devices
|
||
*/
|
||
this.disableContextualWindow();
|
||
}
|
||
|
||
/**
|
||
* Disabling contextual window for hg-button
|
||
*/
|
||
/* istanbul ignore next */
|
||
disableContextualWindow() {
|
||
window.oncontextmenu = (event: KeyboardHandlerEvent) => {
|
||
if (event.target.classList.contains("hg-button")) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
return false;
|
||
}
|
||
};
|
||
}
|
||
|
||
/**
|
||
* Process autoTouchEvents option
|
||
*/
|
||
processAutoTouchEvents() {
|
||
if (this.options.autoUseTouchEvents) {
|
||
this.options.useTouchEvents = true;
|
||
|
||
if (this.options.debug) {
|
||
console.log(
|
||
`autoUseTouchEvents: Touch device detected, useTouchEvents enabled.`
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
|
||
*/
|
||
onInit() {
|
||
if (this.options.debug) {
|
||
console.log(`${this.keyboardDOMClass} Initialized`);
|
||
}
|
||
|
||
/**
|
||
* setEventListeners
|
||
*/
|
||
this.setEventListeners();
|
||
|
||
if (typeof this.options.onInit === "function") this.options.onInit(this);
|
||
}
|
||
|
||
/**
|
||
* Executes the callback function before a simple-keyboard render.
|
||
*/
|
||
beforeFirstRender() {
|
||
/**
|
||
* Performing actions when touch device detected
|
||
*/
|
||
if (this.utilities.isTouchDevice()) {
|
||
this.onTouchDeviceDetected();
|
||
}
|
||
|
||
if (typeof this.options.beforeFirstRender === "function")
|
||
this.options.beforeFirstRender(this);
|
||
|
||
/**
|
||
* Notify about PointerEvents usage
|
||
*/
|
||
if (
|
||
this.isFirstKeyboardInstance &&
|
||
this.utilities.pointerEventsSupported() &&
|
||
!this.options.useTouchEvents &&
|
||
!this.options.useMouseEvents
|
||
) {
|
||
if (this.options.debug) {
|
||
console.log("Using PointerEvents as it is supported by this browser");
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Notify about touch events usage
|
||
*/
|
||
if (this.options.useTouchEvents) {
|
||
if (this.options.debug) {
|
||
console.log(
|
||
"useTouchEvents has been enabled. Only touch events will be used."
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Executes the callback function before a simple-keyboard render.
|
||
*/
|
||
beforeRender() {
|
||
if (typeof this.options.beforeRender === "function")
|
||
this.options.beforeRender(this);
|
||
}
|
||
|
||
/**
|
||
* Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
|
||
*/
|
||
onRender() {
|
||
if (typeof this.options.onRender === "function")
|
||
this.options.onRender(this);
|
||
}
|
||
|
||
/**
|
||
* Executes the callback function once all modules have been loaded
|
||
*/
|
||
onModulesLoaded() {
|
||
if (typeof this.options.onModulesLoaded === "function")
|
||
this.options.onModulesLoaded(this);
|
||
}
|
||
|
||
/**
|
||
* Register module
|
||
*/
|
||
registerModule = (name: string, initCallback: any) => {
|
||
if (!this.modules[name]) this.modules[name] = {};
|
||
|
||
initCallback(this.modules[name]);
|
||
};
|
||
|
||
/**
|
||
* Load modules
|
||
*/
|
||
loadModules() {
|
||
if (Array.isArray(this.options.modules)) {
|
||
this.options.modules.forEach((KeyboardModule) => {
|
||
const keyboardModule = new KeyboardModule(this);
|
||
keyboardModule.init && keyboardModule.init(this);
|
||
});
|
||
|
||
this.keyboardPluginClasses = "modules-loaded";
|
||
|
||
this.render();
|
||
this.onModulesLoaded();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Get module prop
|
||
*/
|
||
getModuleProp(name: string, prop: string) {
|
||
if (!this.modules[name]) return false;
|
||
|
||
return this.modules[name][prop];
|
||
}
|
||
|
||
/**
|
||
* getModulesList
|
||
*/
|
||
getModulesList() {
|
||
return Object.keys(this.modules);
|
||
}
|
||
|
||
/**
|
||
* Parse Row DOM containers
|
||
*/
|
||
parseRowDOMContainers(
|
||
rowDOM: HTMLDivElement,
|
||
rowIndex: number,
|
||
containerStartIndexes: number[],
|
||
containerEndIndexes: number[]
|
||
) {
|
||
const rowDOMArray = Array.from(rowDOM.children);
|
||
let removedElements = 0;
|
||
|
||
if (rowDOMArray.length) {
|
||
containerStartIndexes.forEach((startIndex, arrIndex) => {
|
||
const endIndex = containerEndIndexes[arrIndex];
|
||
|
||
/**
|
||
* If there exists a respective end index
|
||
* if end index comes after start index
|
||
*/
|
||
if (!endIndex || !(endIndex > startIndex)) {
|
||
return false;
|
||
}
|
||
|
||
/**
|
||
* Updated startIndex, endIndex
|
||
* This is since the removal of buttons to place a single button container
|
||
* results in a modified array size
|
||
*/
|
||
const updated_startIndex = startIndex - removedElements;
|
||
const updated_endIndex = endIndex - removedElements;
|
||
|
||
/**
|
||
* Create button container
|
||
*/
|
||
const containerDOM = document.createElement("div");
|
||
containerDOM.className += "hg-button-container";
|
||
const containerUID = `${this.options.layoutName}-r${rowIndex}c${arrIndex}`;
|
||
containerDOM.setAttribute("data-skUID", containerUID);
|
||
|
||
/**
|
||
* Taking elements due to be inserted into container
|
||
*/
|
||
const containedElements = rowDOMArray.splice(
|
||
updated_startIndex,
|
||
updated_endIndex - updated_startIndex + 1
|
||
);
|
||
removedElements = updated_endIndex - updated_startIndex;
|
||
|
||
/**
|
||
* Inserting elements to container
|
||
*/
|
||
containedElements.forEach((element) =>
|
||
containerDOM.appendChild(element)
|
||
);
|
||
|
||
/**
|
||
* Adding container at correct position within rowDOMArray
|
||
*/
|
||
rowDOMArray.splice(updated_startIndex, 0, containerDOM);
|
||
|
||
/**
|
||
* Clearing old rowDOM children structure
|
||
*/
|
||
rowDOM.innerHTML = "";
|
||
|
||
/**
|
||
* Appending rowDOM new children list
|
||
*/
|
||
rowDOMArray.forEach((element) => rowDOM.appendChild(element));
|
||
|
||
if (this.options.debug) {
|
||
console.log(
|
||
"rowDOMContainer",
|
||
containedElements,
|
||
updated_startIndex,
|
||
updated_endIndex,
|
||
removedElements + 1
|
||
);
|
||
}
|
||
});
|
||
}
|
||
|
||
return rowDOM;
|
||
}
|
||
|
||
/**
|
||
* getKeyboardClassString
|
||
*/
|
||
getKeyboardClassString = (...baseDOMClasses: any[]) => {
|
||
const keyboardClasses = [this.keyboardDOMClass, ...baseDOMClasses].filter(
|
||
(DOMClass) => !!DOMClass
|
||
);
|
||
|
||
return keyboardClasses.join(" ");
|
||
};
|
||
|
||
/**
|
||
* Renders rows and buttons as per options
|
||
*/
|
||
render() {
|
||
/**
|
||
* Clear keyboard
|
||
*/
|
||
this.resetRows();
|
||
|
||
/**
|
||
* Calling beforeFirstRender
|
||
*/
|
||
if (!this.initialized) {
|
||
this.beforeFirstRender();
|
||
}
|
||
|
||
/**
|
||
* Calling beforeRender
|
||
*/
|
||
this.beforeRender();
|
||
|
||
const layoutClass = `hg-layout-${this.options.layoutName}`;
|
||
const layout = this.options.layout || getDefaultLayout();
|
||
const useTouchEvents = this.options.useTouchEvents || false;
|
||
const useTouchEventsClass = useTouchEvents ? "hg-touch-events" : "";
|
||
const useMouseEvents = this.options.useMouseEvents || false;
|
||
const disableRowButtonContainers = this.options.disableRowButtonContainers;
|
||
|
||
/**
|
||
* Adding themeClass, layoutClass to keyboardDOM
|
||
*/
|
||
this.keyboardDOM.className = this.getKeyboardClassString(
|
||
this.options.theme,
|
||
layoutClass,
|
||
this.keyboardPluginClasses,
|
||
useTouchEventsClass
|
||
);
|
||
|
||
/**
|
||
* Adding keyboard identifier
|
||
*/
|
||
this.keyboardDOM.setAttribute("data-skInstance", this.currentInstanceName);
|
||
|
||
/**
|
||
* Create row wrapper
|
||
*/
|
||
this.keyboardRowsDOM = document.createElement("div");
|
||
this.keyboardRowsDOM.className = "hg-rows";
|
||
|
||
/**
|
||
* Iterating through each row
|
||
*/
|
||
layout[this.options.layoutName || this.defaultName].forEach(
|
||
(row, rIndex) => {
|
||
let rowArray = row.split(" ");
|
||
|
||
/**
|
||
* Enforce excludeFromLayout
|
||
*/
|
||
if (
|
||
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) => {
|
||
/**
|
||
* 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;
|
||
|
||
/**
|
||
* Save container start index, if applicable
|
||
*/
|
||
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
|
||
) {
|
||
/**
|
||
* Handle PointerEvents
|
||
*/
|
||
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 {
|
||
/**
|
||
* Fallback for browsers not supporting PointerEvents
|
||
*/
|
||
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.setMouseHold(false);
|
||
/**
|
||
* Fire button handler in onclick for compatibility reasons
|
||
* This fires handler before onKeyReleased, therefore when that option is set we will fire the handler
|
||
* in onmousedown instead
|
||
*/
|
||
if (typeof this.options.onKeyReleased !== "function") {
|
||
this.handleButtonClicked(button, e);
|
||
}
|
||
};
|
||
buttonDOM.onmousedown = (e: KeyboardHandlerEvent) => {
|
||
/**
|
||
* Fire button handler for onKeyReleased use-case
|
||
*/
|
||
if (
|
||
typeof this.options.onKeyReleased === "function" &&
|
||
!this.isMouseHold
|
||
) {
|
||
this.handleButtonClicked(button, e);
|
||
}
|
||
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);
|
||
});
|
||
|
||
/**
|
||
* Parse containers in row
|
||
*/
|
||
rowDOM = this.parseRowDOMContainers(
|
||
rowDOM,
|
||
rIndex,
|
||
containerStartIndexes,
|
||
containerEndIndexes
|
||
);
|
||
|
||
/**
|
||
* Appending row to hg-rows
|
||
*/
|
||
this.keyboardRowsDOM.appendChild(rowDOM);
|
||
}
|
||
);
|
||
|
||
/**
|
||
* Appending row to keyboard
|
||
*/
|
||
this.keyboardDOM.appendChild(this.keyboardRowsDOM);
|
||
|
||
/**
|
||
* Calling onRender
|
||
*/
|
||
this.onRender();
|
||
|
||
if (!this.initialized) {
|
||
/**
|
||
* Ensures that onInit and beforeFirstRender are only called once per instantiation
|
||
*/
|
||
this.initialized = true;
|
||
|
||
/**
|
||
* Handling parent events
|
||
*/
|
||
/* istanbul ignore next */
|
||
if (
|
||
this.utilities.pointerEventsSupported() &&
|
||
!useTouchEvents &&
|
||
!useMouseEvents
|
||
) {
|
||
document.onpointerup = (e: KeyboardHandlerEvent) =>
|
||
this.handleButtonMouseUp(undefined, e);
|
||
this.keyboardDOM.onpointerdown = (e: KeyboardHandlerEvent) =>
|
||
this.handleKeyboardContainerMouseDown(e);
|
||
} else if (useTouchEvents) {
|
||
/**
|
||
* Handling ontouchend, ontouchcancel
|
||
*/
|
||
document.ontouchend = (e: KeyboardHandlerEvent) =>
|
||
this.handleButtonMouseUp(undefined, e);
|
||
document.ontouchcancel = (e: KeyboardHandlerEvent) =>
|
||
this.handleButtonMouseUp(undefined, e);
|
||
|
||
this.keyboardDOM.ontouchstart = (e: KeyboardHandlerEvent) =>
|
||
this.handleKeyboardContainerMouseDown(e);
|
||
} else if (!useTouchEvents) {
|
||
/**
|
||
* Handling mouseup
|
||
*/
|
||
document.onmouseup = (e: KeyboardHandlerEvent) =>
|
||
this.handleButtonMouseUp(undefined, e);
|
||
this.keyboardDOM.onmousedown = (e: KeyboardHandlerEvent) =>
|
||
this.handleKeyboardContainerMouseDown(e);
|
||
}
|
||
|
||
/**
|
||
* Calling onInit
|
||
*/
|
||
this.onInit();
|
||
}
|
||
}
|
||
}
|
||
|
||
export default SimpleKeyboard;
|