github/simple-keyboard
4
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2026-04-30 00:00:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

2.30.0 - Updated boilerplate, added selection handling - per #637

Browse Source
This commit is contained in:
Francisco Hodge
2020-08-07 17:52:12 -04:00
parent e0ca526419
commit 07743c9ff8
34 changed files with 5080 additions and 9031 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/@types/index.d.ts
Vendored
+23
View File
@@ -213,6 +213,29 @@ declare module 'simple-keyboard' {
*/
caretPosition?: number;
/**
* caretPositionEnd
*/
caretPositionEnd?: number;
/**
* Changes the internal caret position
* @param {number} position The caret's start position
* @param {number} positionEnd The caret's end position
*/
setCaretPosition(position: number, positionEnd?: number): void;
/**
* Retrieves the internal caret position
*/
getCaretPosition(): number;
/**
* Retrieves the internal end caret position
*/
getCaretPositionEnd(): number;
/**
* 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).
src/lib/components/Keyboard.js
+153 -84
View File
@@ -27,7 +27,9 @@ class SimpleKeyboard {
*/
this.utilities = new Utilities({
getOptions: this.getOptions,
setCaretPosition: this.setCaretPosition,
getCaretPosition: this.getCaretPosition,
getCaretPositionEnd: this.getCaretPositionEnd,
dispatch: this.dispatch
});
@@ -36,6 +38,11 @@ class SimpleKeyboard {
*/
this.caretPosition = null;
/**
* Caret position end
*/
this.caretPositionEnd = null;
/**
* Processing options
*/
@@ -219,6 +226,15 @@ class SimpleKeyboard {
*/
getOptions = () => this.options;
getCaretPosition = () => this.caretPosition;
getCaretPositionEnd = () => this.caretPositionEnd;
/**
* Setters
*/
setCaretPosition = (position, endPosition) => {
this.caretPosition = position;
this.caretPositionEnd = endPosition || position;
};
/**
* Handles clicks made to keyboard buttons
@@ -244,7 +260,8 @@ class SimpleKeyboard {
const updatedInput = this.utilities.getUpdatedInput(
button,
this.input[this.options.inputName],
this.caretPosition
this.caretPosition,
this.caretPositionEnd
);
if (
@@ -270,11 +287,21 @@ class SimpleKeyboard {
button,
this.input[this.options.inputName],
this.caretPosition,
this.caretPositionEnd,
true
);
if (debug) console.log("Input changed:", this.input);
if (this.options.debug) {
console.log(
"Caret at: ",
this.getCaretPosition(),
this.getCaretPositionEnd(),
`(${this.keyboardDOMClass})`
);
}
/**
* Enforce syncInstanceInputs, if set
*/
@@ -314,15 +341,14 @@ class SimpleKeyboard {
*/
if (e) 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.isMouseHold = true;
if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
if (this.holdTimeout) clearTimeout(this.holdTimeout);
/**
* @type {object} Time to wait until a key hold is detected
*/
@@ -355,15 +381,18 @@ class SimpleKeyboard {
* Handles button mouseup
*/
handleButtonMouseUp(button) {
/**
* Remove active class
*/
this.recurseButtons(buttonElement => {
buttonElement.classList.remove(this.activeButtonClass);
});
this.dispatch(instance => {
/**
* Remove active class
*/
instance.recurseButtons(buttonElement => {
buttonElement.classList.remove(this.activeButtonClass);
});
this.isMouseHold = false;
if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
instance.isMouseHold = false;
if (instance.holdInteractionTimeout)
clearTimeout(instance.holdInteractionTimeout);
});
/**
* Calling onKeyReleased
@@ -408,7 +437,7 @@ class SimpleKeyboard {
syncInstanceInputs() {
this.dispatch(instance => {
instance.replaceInput(this.input);
instance.caretPosition = this.caretPosition;
instance.setCaretPosition(this.caretPosition, this.caretPositionEnd);
});
}
@@ -423,7 +452,7 @@ class SimpleKeyboard {
/**
* Reset caretPosition
*/
this.caretPosition = 0;
this.setCaretPosition(0);
/**
* Enforce syncInstanceInputs, if set
@@ -519,7 +548,7 @@ class SimpleKeyboard {
console.log("inputName changed. caretPosition reset.");
}
this.caretPosition = null;
this.setCaretPosition(null);
}
}
@@ -713,6 +742,8 @@ class SimpleKeyboard {
* Handles simple-keyboard event listeners
*/
setEventListeners() {
const { useTouchEvents, useMouseEvents } = this.options;
/**
* Only first instance should set the event listeners
*/
@@ -724,10 +755,42 @@ class SimpleKeyboard {
/**
* Event Listeners
*/
document.addEventListener("keyup", this.handleKeyUp);
document.addEventListener("keydown", this.handleKeyDown);
document.addEventListener("mouseup", this.handleMouseUp);
document.addEventListener("touchend", this.handleTouchEnd);
document.onkeyup = this.handleKeyUp;
document.onkeydown = this.handleKeyDown;
/**
* Pointer events
*/
if (
this.utilities.pointerEventsSupported() &&
!useTouchEvents &&
!useMouseEvents
) {
document.onpointerdown = this.handlePointerDown;
document.onpointerup = this.handlePointerUp;
document.onpointercancel = this.handlePointerUp;
this.keyboardDOM.onpointerdown = this.handleKeyboardContainerMouseDown;
/**
* Touch events
*/
} else if (useTouchEvents) {
document.ontouchstart = this.handlePointerDown;
document.ontouchend = this.handlePointerUp;
document.ontouchcancel = this.handlePointerUp;
this.keyboardDOM.ontouchstart = this.handleKeyboardContainerMouseDown;
/**
* Mouse events
*/
} else if (!useTouchEvents) {
document.onmousedown = this.handlePointerDown;
document.onmouseup = this.handlePointerUp;
this.keyboardDOM.onmousedown = this.handleKeyboardContainerMouseDown;
}
}
}
@@ -752,16 +815,17 @@ class SimpleKeyboard {
}
/**
* Event Handler: MouseUp
* Event Handler: PointerDown
*/
handleMouseUp(event) {
handlePointerDown(event) {
this.caretEventHandler(event);
}
/**
* Event Handler: TouchEnd
* Event Handler: PointerUp
*/
handleTouchEnd(event) {
handlePointerUp(event) {
this.handleButtonMouseUp();
this.caretEventHandler(event);
}
@@ -769,39 +833,48 @@ class SimpleKeyboard {
* Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
*/
caretEventHandler(event) {
if (this.options.disableCaretPositioning) {
this.setCaretPosition(null);
return;
}
let targetTagName;
if (event.target.tagName) {
targetTagName = event.target.tagName.toLowerCase();
}
/* istanbul ignore next */
this.dispatch(instance => {
if (instance.isMouseHold) {
instance.isMouseHold = false;
}
const isKeyboard =
event.target === instance.keyboardDOM ||
(event.target && instance.keyboardDOM.contains(event.target));
if (
(targetTagName === "textarea" || targetTagName === "input") &&
!instance.options.disableCaretPositioning
) {
// if (!this.isMouseHold) {
// instance.isMouseHold = false;
// }
if (targetTagName === "textarea" || targetTagName === "input") {
/**
* Tracks current cursor position
* As keys are pressed, text will be added/removed at that position within the input.
*/
instance.caretPosition = event.target.selectionStart;
instance.setCaretPosition(
event.target.selectionStart,
event.target.selectionEnd
);
if (instance.options.debug) {
console.log(
"Caret at: ",
event.target.selectionStart,
event.target.tagName.toLowerCase(),
instance.getCaretPosition(),
instance.getCaretPositionEnd(),
event && event.target.tagName.toLowerCase(),
`(${instance.keyboardDOMClass})`
);
}
} else if (instance.options.disableCaretPositioning) {
/**
* If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.
*/
instance.caretPosition = null;
} else if (!isKeyboard) {
instance.setCaretPosition(null);
}
});
}
@@ -826,18 +899,6 @@ class SimpleKeyboard {
`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.onpointerup = null;
document.ontouchend = null;
document.ontouchcancel = null;
document.onmouseup = null;
/**
* Remove buttons
*/
@@ -857,8 +918,6 @@ class SimpleKeyboard {
};
this.recurseButtons(deleteButton);
this.recurseButtons = null;
deleteButton = null;
/**
@@ -873,12 +932,53 @@ class SimpleKeyboard {
*/
this.clear();
/**
* Remove timouts
*/
/* istanbul ignore next */
if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
/* istanbul ignore next */
if (this.holdTimeout) clearTimeout(this.holdTimeout);
/**
* Remove instance
*/
window["SimpleKeyboardInstances"][this.currentInstanceName] = null;
delete window["SimpleKeyboardInstances"][this.currentInstanceName];
/**
* Removing document listeners if there are no more instances
*/
if (!Object.keys(window["SimpleKeyboardInstances"]).length) {
/**
* Remove document listeners
*/
document.onkeydown = null;
document.onkeyup = null;
document.onpointerdown = null;
document.onpointerup = null;
document.onmousedown = null;
document.onmouseup = null;
document.ontouchstart = null;
document.ontouchend = null;
document.ontouchcancel = null;
if (this.options.debug) {
console.log(
"Destroy: No instances remaining. Document listeners removed",
window["SimpleKeyboardInstances"]
);
}
} else {
console.log(
"Destroy: Instances remaining! Document listeners not removed",
window["SimpleKeyboardInstances"]
);
}
/**
* Reset initialized flag
*/
@@ -1392,7 +1492,6 @@ class SimpleKeyboard {
* Handle mouse events
*/
buttonDOM.onclick = () => {
this.isMouseHold = false;
this.handleButtonClicked(button);
};
buttonDOM.onmousedown = e => {
@@ -1463,36 +1562,6 @@ class SimpleKeyboard {
*/
this.initialized = true;
/**
* Handling parent events
*/
/* istanbul ignore next */
if (
this.utilities.pointerEventsSupported() &&
!useTouchEvents &&
!useMouseEvents
) {
document.onpointerup = () => this.handleButtonMouseUp();
this.keyboardDOM.onpointerdown = e =>
this.handleKeyboardContainerMouseDown(e);
} else if (useTouchEvents) {
/**
* Handling ontouchend, ontouchcancel
*/
document.ontouchend = () => this.handleButtonMouseUp();
document.ontouchcancel = () => this.handleButtonMouseUp();
this.keyboardDOM.ontouchstart = e =>
this.handleKeyboardContainerMouseDown(e);
} else if (!useTouchEvents) {
/**
* Handling mouseup
*/
document.onmouseup = () => this.handleButtonMouseUp();
this.keyboardDOM.onmousedown = e =>
this.handleKeyboardContainerMouseDown(e);
}
/**
* Calling onInit
*/
src/lib/components/tests/Keyboard.test.js
+182 -149
View File
@@ -1,7 +1,5 @@
import Keyboard from '../Keyboard';
import TestUtility from '../../../utils/TestUtility';
const testUtil = new TestUtility();
import { setDOM, clearDOM, testLayoutStdButtons, iterateButtons, triggerDocumentPointerUp, triggerDocumentPointerDown } from '../../../utils/TestUtility';
it('Keyboard will not render without target element', () => {
try {
@@ -14,7 +12,7 @@ it('Keyboard will not render without target element', () => {
it('Keyboard will run without options', () => {
// Prepare target DOM element
testUtil.setDOM();
setDOM();
// No options
new Keyboard();
@@ -22,21 +20,21 @@ it('Keyboard will run without options', () => {
it('Keyboard will run with empty options', () => {
// Prepare target DOM element
testUtil.setDOM();
setDOM();
// No options
new Keyboard({});
});
it('Keyboard will run with custom DOM target', () => {
testUtil.setDOM("myTestDiv");
setDOM("myTestDiv");
new Keyboard(".myTestDiv");
expect(document.body.querySelector(".myTestDiv")).toBeDefined();
});
it('Keyboard will run with debug option set', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
debug: true
@@ -48,7 +46,7 @@ it('Keyboard will run with debug option set', () => {
it('Keyboard will use touch events', () => {
let touched = false
testUtil.clear()
clearDOM();
document.body.innerHTML = `
<div class="keyboard"></div>
@@ -72,19 +70,19 @@ it('Keyboard will use touch events', () => {
})
it('Keyboard standard buttons will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
maxLength: {
"default": 10
}
});
testUtil.testLayoutStdButtons(keyboard);
testLayoutStdButtons(keyboard);
});
it('Keyboard shift buttons will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
keyboard.setOptions({
@@ -92,18 +90,18 @@ it('Keyboard shift buttons will work', () => {
maxLength: 42
});
testUtil.testLayoutStdButtons(keyboard);
testLayoutStdButtons(keyboard);
});
it('Keyboard setOptions will work without a param', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
keyboard.setOptions();
});
it('Keyboard empty buttons wont do anything as expected', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
layout: {
@@ -118,7 +116,7 @@ it('Keyboard empty buttons wont do anything as expected', () => {
});
it('Keyboard onKeyPress will work', () => {
testUtil.setDOM();
setDOM();
let pressed = false;
@@ -135,13 +133,13 @@ it('Keyboard onKeyPress will work', () => {
});
it('Keyboard standard function buttons will not change input', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
useButtonTag: true
});
testUtil.iterateButtons((button) => {
iterateButtons((button) => {
if(button.getAttribute("data-skbtn") === "{shift}"){
button.onclick();
}
@@ -151,7 +149,7 @@ it('Keyboard standard function buttons will not change input', () => {
});
it('Keyboard syncInstanceInputs will work', () => {
testUtil.clear();
clearDOM();
document.body.innerHTML = `
<div class="keyboard1"></div>
@@ -180,7 +178,7 @@ it('Keyboard syncInstanceInputs will work', () => {
keyboard1.getButtonElement("5").onclick();
keyboard1.getButtonElement("6").onclick();
keyboard1.caretPosition = 1;
keyboard1.setCaretPosition(1);
keyboard1.getButtonElement("2").onclick();
keyboard1.getButtonElement("3").onclick();
@@ -191,7 +189,7 @@ it('Keyboard syncInstanceInputs will work', () => {
});
it('Keyboard onChange will work', () => {
testUtil.setDOM();
setDOM();
let output = false;
@@ -208,7 +206,7 @@ it('Keyboard onChange will work', () => {
});
it('Keyboard onChangeAll will work', () => {
testUtil.setDOM();
setDOM();
let output;
@@ -225,7 +223,7 @@ it('Keyboard onChangeAll will work', () => {
});
it('Keyboard clearInput will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -242,7 +240,7 @@ it('Keyboard clearInput will work', () => {
});
it('Keyboard clearInput will work with syncInstanceInputs', () => {
testUtil.clear();
clearDOM();
document.body.innerHTML = `
<div class="keyboard1"></div>
@@ -269,7 +267,7 @@ it('Keyboard clearInput will work with syncInstanceInputs', () => {
});
it('Keyboard setInput will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -279,7 +277,7 @@ it('Keyboard setInput will work', () => {
});
it('Keyboard setInput will work with syncInstanceInputs', () => {
testUtil.clear();
clearDOM();
document.body.innerHTML = `
<div class="keyboard1"></div>
@@ -299,7 +297,7 @@ it('Keyboard setInput will work with syncInstanceInputs', () => {
});
it('Keyboard dispatch will work', () => {
testUtil.setDOM();
setDOM();
document.body.innerHTML = `
<div class="keyboard1"></div>
@@ -324,7 +322,7 @@ it('Keyboard dispatch will work', () => {
});
it('Keyboard dispatch will not work without SimpleKeyboardInstances', () => {
testUtil.setDOM();
setDOM();
document.body.innerHTML = `
<div class="keyboard1"></div>
@@ -355,7 +353,7 @@ it('Keyboard dispatch will not work without SimpleKeyboardInstances', () => {
});
it('Keyboard addButtonTheme will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
keyboard.addButtonTheme("q", "test");
@@ -364,7 +362,7 @@ it('Keyboard addButtonTheme will work', () => {
});
it('Keyboard addButtonTheme will not work without params', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
const returnVal = keyboard.addButtonTheme();
@@ -373,7 +371,7 @@ it('Keyboard addButtonTheme will not work without params', () => {
});
it('Keyboard addButtonTheme will amend a buttonTheme', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
buttonTheme: [
@@ -390,7 +388,7 @@ it('Keyboard addButtonTheme will amend a buttonTheme', () => {
});
it('Keyboard addButtonTheme will create a buttonTheme', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
buttonTheme: [
@@ -407,7 +405,7 @@ it('Keyboard addButtonTheme will create a buttonTheme', () => {
});
it('Keyboard addButtonTheme will ignore a repeated buttonTheme', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
buttonTheme: [
@@ -424,7 +422,7 @@ it('Keyboard addButtonTheme will ignore a repeated buttonTheme', () => {
});
it('Keyboard addButtonTheme will amend a buttonTheme', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
buttonTheme: [
@@ -442,7 +440,7 @@ it('Keyboard addButtonTheme will amend a buttonTheme', () => {
it('Keyboard removeButtonTheme without params will remove all button themes', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
buttonTheme: [
@@ -460,7 +458,7 @@ it('Keyboard removeButtonTheme without params will remove all button themes', ()
it('Keyboard removeButtonTheme will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
buttonTheme: [
@@ -477,7 +475,7 @@ it('Keyboard removeButtonTheme will work', () => {
});
it('Keyboard removeButtonTheme will work wihtout a class', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
buttonTheme: [
@@ -494,7 +492,7 @@ it('Keyboard removeButtonTheme will work wihtout a class', () => {
});
it('Keyboard removeButtonTheme will do nothing without a button param', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
buttonTheme: [
@@ -511,7 +509,7 @@ it('Keyboard removeButtonTheme will do nothing without a button param', () => {
});
it('Keyboard removeButtonTheme does nothing if req button doesnt have a buttonTheme', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
buttonTheme: [
@@ -528,7 +526,7 @@ it('Keyboard removeButtonTheme does nothing if req button doesnt have a buttonTh
});
it('Keyboard removeButtonTheme does nothing if buttonTheme class does not exist', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
buttonTheme: [
@@ -545,7 +543,7 @@ it('Keyboard removeButtonTheme does nothing if buttonTheme class does not exist'
});
it('Keyboard removeButtonTheme does nothing if buttonTheme doesnt have the requested buttons', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
buttonTheme: [
@@ -562,7 +560,7 @@ it('Keyboard removeButtonTheme does nothing if buttonTheme doesnt have the reque
});
it('Keyboard getButtonElement will not return anything if empty match', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
layout: {
@@ -577,7 +575,7 @@ it('Keyboard getButtonElement will not return anything if empty match', () => {
});
it('Keyboard getButtonElement will return multiple matched buttons', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -585,60 +583,54 @@ it('Keyboard getButtonElement will return multiple matched buttons', () => {
});
it('Keyboard will receive physical keyboard events', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
debug: true,
physicalKeyboardHighlight: true
});
document.dispatchEvent(new KeyboardEvent('keyup', {
document.onkeyup({
charCode: 0,
code: "KeyF",
key: "f",
which: 70,
target: {
tagName: "input"
}
}));
target: document.createElement('input')
});
});
it('Keyboard caretEventHandler will detect input, textarea focus', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
const myInput = document.createElement('input');
keyboard.caretEventHandler({
charCode: 0,
code: "KeyF",
key: "f",
which: 70,
target: {
tagName: "input",
selectionStart: 3
}
target: myInput
});
expect(keyboard.caretPosition).toBe(3);
expect(keyboard.getCaretPosition()).toBe(0);
});
it('Keyboard caretEventHandler will not set caretPosition on disableCaretPositioning', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
const myInput = document.createElement('input');
keyboard.caretEventHandler({
charCode: 0,
code: "KeyF",
key: "f",
which: 70,
target: {
tagName: "input",
selectionStart: 3
}
target: myInput
});
expect(keyboard.caretPosition).toBe(3);
expect(keyboard.getCaretPosition()).toBe(0);
keyboard.setOptions({
disableCaretPositioning: true
@@ -649,17 +641,14 @@ it('Keyboard caretEventHandler will not set caretPosition on disableCaretPositio
code: "KeyF",
key: "f",
which: 70,
target: {
tagName: "input",
selectionStart: 3
}
target: myInput
});
expect(keyboard.caretPosition).toBeFalsy();
expect(keyboard.getCaretPosition()).toBe(null);
});
it('Keyboard caretEventHandler ignore positioning if input, textarea is blur', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -670,38 +659,39 @@ it('Keyboard caretEventHandler ignore positioning if input, textarea is blur', (
code: "KeyF",
key: "f",
which: 70,
target: {
tagName: "div",
selectionStart: 4
}
target: document.createElement('div')
});
expect(keyboard.caretPosition).toBeFalsy();
expect(keyboard.getCaretPosition()).toBeFalsy();
});
it('Keyboard caretEventHandler will work with debug', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
debug: true
});
keyboard.input.default = "hello";
keyboard.setCaretPosition(2)
expect(keyboard.getCaretPosition()).toBe(2);
const myInput = document.createElement('input');
keyboard.caretEventHandler({
charCode: 0,
code: "KeyF",
key: "f",
which: 70,
target: {
tagName: "input",
selectionStart: 3
}
target: myInput
});
expect(keyboard.caretPosition).toBe(3);
expect(keyboard.getCaretPosition()).toBe(0);
});
it('Keyboard onInit will work', () => {
testUtil.setDOM();
setDOM();
let passed = false;
@@ -715,7 +705,7 @@ it('Keyboard onInit will work', () => {
});
it('Keyboard onRender will work', () => {
testUtil.setDOM();
setDOM();
let passed = false;
@@ -729,7 +719,7 @@ it('Keyboard onRender will work', () => {
});
it('Keyboard buttonTheme that is invalid will be ignored and not throw', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
buttonTheme: [
@@ -742,7 +732,7 @@ it('Keyboard buttonTheme that is invalid will be ignored and not throw', () => {
});
it('Keyboard buttonTheme buttons that are invalid will be ignored and not throw', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
buttonTheme: [
@@ -755,7 +745,7 @@ it('Keyboard buttonTheme buttons that are invalid will be ignored and not throw'
});
it('Keyboard buttonTheme will be ignored if buttons param not a string', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
buttonTheme: [
@@ -770,7 +760,7 @@ it('Keyboard buttonTheme will be ignored if buttons param not a string', () => {
});
it('Keyboard buttonTheme will be ignored if already added', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
buttonTheme: [
@@ -799,7 +789,7 @@ it('Keyboard buttonTheme will be ignored if already added', () => {
});
it('Keyboard can set a module', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -814,7 +804,7 @@ it('Keyboard can set a module', () => {
});
it('Keyboard registerModule will return current module tree', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -834,7 +824,7 @@ it('Keyboard registerModule will return current module tree', () => {
});
it('Keyboard can set a module by amending the modules tree', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -855,7 +845,7 @@ it('Keyboard can set a module by amending the modules tree', () => {
});
it('Keyboard will not retrieve an option for an inexistent module', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -863,7 +853,7 @@ it('Keyboard will not retrieve an option for an inexistent module', () => {
});
it('Keyboard will get a list of modules', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -878,7 +868,7 @@ it('Keyboard will get a list of modules', () => {
});
it('Keyboard loadModules will load a simple module', () => {
testUtil.setDOM();
setDOM();
class myClass {
init = (module) => {
@@ -894,48 +884,48 @@ it('Keyboard loadModules will load a simple module', () => {
});
it('Keyboard handleButtonMouseUp will set isMouseHold to false', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
keyboard.isMouseHold = true;
document.onmouseup();
document.onmouseup({
target: document.body
});
expect(keyboard.isMouseHold).toBeFalsy();
});
it('Keyboard handleButtonMouseUp clear holdInteractionTimeout', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
keyboard.isMouseHold = true;
keyboard.holdInteractionTimeout = setTimeout(() => {}, 10000);
document.onmouseup();
document.onmouseup({
target: document.body
});
});
it('Keyboard handleButtonMouseDown will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
const keyboard = new Keyboard({ useMouseEvents: true });
keyboard.handleButtonMouseDown("q", {
target: keyboard.getButtonElement("q"),
preventDefault: () => {},
stopPropagation: () => {}
console.log(keyboard.getButtonElement("q"))
keyboard.getButtonElement("q").onclick();
document.onmouseup({
target: document.body
});
var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent('mousedown', true, true);
keyboard.getButtonElement("q").dispatchEvent(clickEvent);
document.onmouseup();
});
it('Keyboard handleButtonMouseDown will work with preventMouseDownDefault', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -947,15 +937,15 @@ it('Keyboard handleButtonMouseDown will work with preventMouseDownDefault', () =
stopPropagation: () => {}
});
var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent('mousedown', true, true);
keyboard.getButtonElement("q").dispatchEvent(clickEvent);
document.onmouseup();
keyboard.getButtonElement("q").onclick();
document.onmouseup({
target: document.body
});
});
it('Keyboard onModulesLoaded will work', () => {
testUtil.setDOM();
setDOM();
class myClass {
init = (module) => {
@@ -978,7 +968,7 @@ it('Keyboard onModulesLoaded will work', () => {
});
it('Keyboard inputPattern will work globally', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
inputPattern: /^\d+$/,
@@ -995,7 +985,7 @@ it('Keyboard inputPattern will work globally', () => {
});
it('Keyboard inputPattern will work by input name', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
debug: true,
@@ -1022,7 +1012,7 @@ it('Keyboard inputPattern will work by input name', () => {
});
it('Keyboard processAutoTouchEvents will work', () => {
testUtil.setDOM();
setDOM();
navigator.maxTouchPoints = true;
@@ -1034,7 +1024,7 @@ it('Keyboard processAutoTouchEvents will work', () => {
});
it('Keyboard processAutoTouchEvents will work with debugging enabled', () => {
testUtil.setDOM();
setDOM();
navigator.maxTouchPoints = true;
@@ -1047,7 +1037,7 @@ it('Keyboard processAutoTouchEvents will work with debugging enabled', () => {
});
it('Keyboard beforeFirstRender method will work', () => {
testUtil.setDOM();
setDOM();
let timesCalled = 0;
@@ -1068,7 +1058,7 @@ it('Keyboard beforeFirstRender method will work', () => {
});
it('Keyboard beforeFirstRender will show PointerEvents warning', () => {
testUtil.setDOM();
setDOM();
let timesCalled = 0;
@@ -1085,7 +1075,7 @@ it('Keyboard beforeFirstRender will show PointerEvents warning', () => {
});
it('Keyboard beforeRender method will work', () => {
testUtil.setDOM();
setDOM();
let timesCalled = 0;
@@ -1106,7 +1096,7 @@ it('Keyboard beforeRender method will work', () => {
});
it('Keyboard parseRowDOMContainers will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
layout: {
@@ -1139,7 +1129,7 @@ it('Keyboard parseRowDOMContainers will work', () => {
});
it('Keyboard parseRowDOMContainers will ignore empty rows', () => {
testUtil.setDOM();
setDOM();
let failed = false;
@@ -1157,7 +1147,7 @@ it('Keyboard parseRowDOMContainers will ignore empty rows', () => {
it('Keyboard parseRowDOMContainers will ignore missing endIndex or endIndex before startIndex', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
layout: {
@@ -1174,7 +1164,7 @@ it('Keyboard parseRowDOMContainers will ignore missing endIndex or endIndex befo
});
it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
disableRowButtonContainers: true,
@@ -1202,16 +1192,16 @@ it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () =
});
it('Keyboard inputName change will trigget caretPosition reset', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
keyboard.caretPosition = 0;
keyboard.setCaretPosition(0);
keyboard.getButtonElement("q").onpointerdown();
keyboard.getButtonElement("1").onpointerdown();
expect(keyboard.caretPosition).toBe(2);
expect(keyboard.getCaretPosition()).toBe(2);
keyboard.setOptions({
inputName: "myInput"
@@ -1221,19 +1211,34 @@ it('Keyboard inputName change will trigget caretPosition reset', () => {
keyboard.getButtonElement("1").onpointerdown();
keyboard.getButtonElement("b").onpointerdown();
expect(keyboard.caretPosition).toBe(null);
expect(keyboard.getCaretPosition()).toBe(null);
});
it('Keyboard destroy will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
keyboard.destroy();
expect(keyboard.keyboardDOM.innerHTML).toBe("");
expect(document.onkeydown).toBe(null);
expect(document.onkeyup).toBe(null);
expect(document.onpointerdown).toBe(null);
expect(document.onpointerup).toBe(null);
expect(document.onmousedown).toBe(null);
expect(document.onmouseup).toBe(null);
expect(document.ontouchstart).toBe(null);
expect(document.ontouchend).toBe(null);
expect(document.ontouchcancel).toBe(null);
expect(keyboard.initialized).toBe(false);
});
it('Keyboard destroy will work with debug option', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({ debug: true });
keyboard.destroy();
@@ -1241,7 +1246,7 @@ it('Keyboard destroy will work with debug option', () => {
});
it('Keyboard disableButtonHold will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
disableButtonHold: true
@@ -1251,39 +1256,33 @@ it('Keyboard disableButtonHold will work', () => {
});
it('Keyboard caretEventHandler will be triggered on mouseup and ontouchend', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
disableCaretPositioning: true
});
keyboard.caretPosition = 6;
keyboard.setCaretPosition(6);
document.dispatchEvent(new MouseEvent('mouseup', {
target: {
tagName: "input"
}
}));
expect(keyboard.getCaretPosition()).toBe(6);
expect(keyboard.caretPosition).toBe(null);
const event = {
target: document.body
};
triggerDocumentPointerUp(event);
expect(keyboard.getCaretPosition()).toBe(null);
keyboard.setOptions({
disableCaretPositioning: false
})
keyboard.caretPosition = 10;
document.dispatchEvent(new TouchEvent('touchend', {
target: {
tagName: "input"
}
}));
expect(keyboard.caretPosition).toBe(10);
keyboard.setCaretPosition(10);
});
it('Keyboard onKeyReleased will work', () => {
testUtil.setDOM();
setDOM();
let pressed = false;
let firedTimes = 0;
@@ -1307,7 +1306,7 @@ it('Keyboard onKeyReleased will work', () => {
});
it('Keyboard buttonAttribute will work', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
buttonAttributes: [
@@ -1321,7 +1320,7 @@ it('Keyboard buttonAttribute will work', () => {
});
it('Keyboard buttonAttribute will warn about invalid entries', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
buttonAttributes: [
@@ -1334,7 +1333,7 @@ it('Keyboard buttonAttribute will warn about invalid entries', () => {
});
it('Keyboard recurseButtons will not work without a valid param', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
expect(keyboard.recurseButtons()).toBe(false);
});
@@ -1360,4 +1359,38 @@ it('Keyboard will work with a DOM element param with class', () => {
} catch (e) {
expect(true).toBe(false);
}
});
it('Keyboard handleKeyboardContainerMouseDown will work', () => {
setDOM();
const keyboard = new Keyboard();
keyboard.keyboardDOM.onpointerdown();
});
it('Keyboard handleKeyboardContainerMouseDown will respect preventMouseDownDefault', () => {
setDOM();
let works = false;
const keyboard = new Keyboard({ preventMouseDownDefault: true });
keyboard.keyboardDOM.onpointerdown({ preventDefault: () => {
works = true
}});
expect(works).toBe(true);
});
it('Keyboard handlePointerDown will work', () => {
setDOM();
const keyboard = new Keyboard();
keyboard.setCaretPosition(3);
expect(keyboard.getCaretPosition()).toBe(3);
triggerDocumentPointerDown({
target: document.body
})
expect(keyboard.getCaretPosition()).toBe(null);
});
src/lib/services/PhysicalKeyboard.js
+2 -2
View File
@@ -31,9 +31,9 @@ class PhysicalKeyboard {
if (buttonDOM) {
buttonDOM.style.backgroundColor =
options.physicalKeyboardHighlightBgColor || "#9ab4d0";
options.physicalKeyboardHighlightBgColor || "#dadce4";
buttonDOM.style.color =
options.physicalKeyboardHighlightTextColor || "white";
options.physicalKeyboardHighlightTextColor || "black";
}
});
}
src/lib/services/Utilities.js
+102 -56
View File
@@ -5,9 +5,17 @@ class Utilities {
/**
* Creates an instance of the Utility service
*/
constructor({ getOptions, getCaretPosition, dispatch }) {
constructor({
getOptions,
setCaretPosition,
getCaretPosition,
getCaretPositionEnd,
dispatch
}) {
this.getOptions = getOptions;
this.getCaretPosition = getCaretPosition;
this.getCaretPositionEnd = getCaretPositionEnd;
this.setCaretPosition = setCaretPosition;
this.dispatch = dispatch;
/**
@@ -125,19 +133,28 @@ class Utilities {
* @param {string} button The button's layout name
* @param {string} input The input string
* @param {number} caretPos The cursor's current position
* @param {number} caretPosEnd The cursor's current end position
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor
*/
getUpdatedInput(button, input, caretPos, moveCaret) {
getUpdatedInput(
button,
input,
caretPos,
caretPosEnd = caretPos,
moveCaret = false
) {
const options = this.getOptions();
const commonParams = [caretPos, caretPosEnd, moveCaret];
let output = input;
if (
(button === "{bksp}" || button === "{backspace}") &&
output.length > 0
) {
output = this.removeAt(output, caretPos, moveCaret);
output = this.removeAt(output, ...commonParams);
} else if (button === "{space}")
output = this.addStringAt(output, " ", caretPos, moveCaret);
output = this.addStringAt(output, " ", ...commonParams);
else if (
button === "{tab}" &&
!(
@@ -145,12 +162,12 @@ class Utilities {
options.tabCharOnTab === false
)
) {
output = this.addStringAt(output, "\t", caretPos, moveCaret);
output = this.addStringAt(output, "\t", ...commonParams);
} else if (
(button === "{enter}" || button === "{numpadenter}") &&
options.newLineOnEnter
)
output = this.addStringAt(output, "\n", caretPos, moveCaret);
output = this.addStringAt(output, "\n", ...commonParams);
else if (
button.includes("numpad") &&
Number.isInteger(Number(button[button.length - 2]))
@@ -158,23 +175,22 @@ class Utilities {
output = this.addStringAt(
output,
button[button.length - 2],
caretPos,
moveCaret
...commonParams
);
} else if (button === "{numpaddivide}")
output = this.addStringAt(output, "/", caretPos, moveCaret);
output = this.addStringAt(output, "/", ...commonParams);
else if (button === "{numpadmultiply}")
output = this.addStringAt(output, "*", caretPos, moveCaret);
output = this.addStringAt(output, "*", ...commonParams);
else if (button === "{numpadsubtract}")
output = this.addStringAt(output, "-", caretPos, moveCaret);
output = this.addStringAt(output, "-", ...commonParams);
else if (button === "{numpadadd}")
output = this.addStringAt(output, "+", caretPos, moveCaret);
output = this.addStringAt(output, "+", ...commonParams);
else if (button === "{numpaddecimal}")
output = this.addStringAt(output, ".", caretPos, moveCaret);
output = this.addStringAt(output, ".", ...commonParams);
else if (button === "{" || button === "}")
output = this.addStringAt(output, button, caretPos, moveCaret);
output = this.addStringAt(output, button, ...commonParams);
else if (!button.includes("{") && !button.includes("}"))
output = this.addStringAt(output, button, caretPos, moveCaret);
output = this.addStringAt(output, button, ...commonParams);
return output;
}
@@ -187,10 +203,15 @@ class Utilities {
*/
updateCaretPos(length, minus) {
const newCaretPos = this.updateCaretPosAction(length, minus);
const { syncInstanceInputs } = this.getOptions();
this.dispatch(instance => {
instance.caretPosition = newCaretPos;
});
if (syncInstanceInputs) {
this.dispatch(instance => {
instance.setCaretPosition(newCaretPos);
});
} else {
this.setCaretPosition(newCaretPos);
}
}
/**
@@ -220,17 +241,23 @@ class Utilities {
* Adds a string to the input at a given position
*
* @param {string} source The source input
* @param {string} string The string to add
* @param {string} str The string to add
* @param {number} position The (cursor) position where the string should be added
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor
*/
addStringAt(source, string, position, moveCaret) {
addStringAt(
source,
str,
position = source.length,
positionEnd = source.length,
moveCaret = false
) {
let output;
if (!position && position !== 0) {
output = source + string;
output = source + str;
} else {
output = [source.slice(0, position), string, source.slice(position)].join(
output = [source.slice(0, position), str, source.slice(positionEnd)].join(
""
);
@@ -238,7 +265,7 @@ class Utilities {
* Avoid caret position change when maxLength is set
*/
if (!this.isMaxLengthReached()) {
if (moveCaret) this.updateCaretPos(string.length);
if (moveCaret) this.updateCaretPos(str.length);
}
}
@@ -252,43 +279,62 @@ class Utilities {
* @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, position, moveCaret) {
const caretPosition = this.getCaretPosition();
removeAt(
source,
position = source.length,
positionEnd = source.length,
moveCaret = false
) {
const { syncInstanceInputs } = this.getOptions();
if (caretPosition === 0) {
if (position === 0 && positionEnd === 0) {
return source;
}
let output;
let prevTwoChars;
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) {
prevTwoChars = source.substring(position - 2, position);
emojiMatched = prevTwoChars.match(emojiMatchedReg);
if (position === positionEnd) {
let prevTwoChars;
let emojiMatched;
const emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
if (emojiMatched) {
output = source.substr(0, position - 2) + source.substr(position);
if (moveCaret) this.updateCaretPos(2, true);
/**
* Emojis are made out of two characters, so we must take a custom approach to trim them.
* For more info: https://mathiasbynens.be/notes/javascript-unicode
*/
if (position && position >= 0) {
prevTwoChars = source.substring(position - 2, position);
emojiMatched = prevTwoChars.match(emojiMatchedReg);
if (emojiMatched) {
output = source.substr(0, position - 2) + source.substr(position);
if (moveCaret) this.updateCaretPos(2, true);
} else {
output = source.substr(0, position - 1) + source.substr(position);
if (moveCaret) this.updateCaretPos(1, true);
}
} else {
output = source.substr(0, position - 1) + source.substr(position);
if (moveCaret) this.updateCaretPos(1, true);
prevTwoChars = source.slice(-2);
emojiMatched = prevTwoChars.match(emojiMatchedReg);
if (emojiMatched) {
output = source.slice(0, -2);
if (moveCaret) this.updateCaretPos(2, true);
} else {
output = source.slice(0, -1);
if (moveCaret) this.updateCaretPos(1, true);
}
}
} else {
prevTwoChars = source.slice(-2);
emojiMatched = prevTwoChars.match(emojiMatchedReg);
if (emojiMatched) {
output = source.slice(0, -2);
if (moveCaret) this.updateCaretPos(2, true);
} else {
output = source.slice(0, -1);
if (moveCaret) this.updateCaretPos(1, true);
output = source.slice(0, position) + source.slice(positionEnd);
if (moveCaret) {
if (syncInstanceInputs) {
this.dispatch(instance => {
instance.setCaretPosition(position);
});
} else {
this.setCaretPosition(position);
}
}
}
@@ -389,17 +435,17 @@ class Utilities {
/**
* Transforms an arbitrary string to camelCase
*
* @param {string} string The string to transform.
* @param {string} str The string to transform.
*/
camelCase(string) {
if (!string) return false;
camelCase(str) {
if (!str) return false;
return string
return str
.toLowerCase()
.trim()
.split(/[.\-_\s]/g)
.reduce((string, word) =>
word.length ? string + word[0].toUpperCase() + word.slice(1) : string
.reduce((str, word) =>
word.length ? str + word[0].toUpperCase() + word.slice(1) : str
);
}
}
src/lib/services/tests/PhysicalKeyboard.test.js
+8 -10
View File
@@ -1,10 +1,8 @@
import Keyboard from '../../components/Keyboard';
import TestUtility from '../../../utils/TestUtility';
const testUtil = new TestUtility();
import { setDOM } from '../../../utils/TestUtility';
it('PhysicalKeyboard keydown will be handled with physicalKeyboardHighlight', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
physicalKeyboardHighlight: true
@@ -20,7 +18,7 @@ it('PhysicalKeyboard keydown will be handled with physicalKeyboardHighlight', ()
});
it('PhysicalKeyboard keydown will be handled without physicalKeyboardHighlight', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
physicalKeyboardHighlight: false
@@ -36,7 +34,7 @@ it('PhysicalKeyboard keydown will be handled without physicalKeyboardHighlight',
});
it('PhysicalKeyboard keydown will not style non-existent buttons', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
physicalKeyboardHighlight: true
@@ -52,7 +50,7 @@ it('PhysicalKeyboard keydown will not style non-existent buttons', () => {
});
it('PhysicalKeyboard keyup will be handled with physicalKeyboardHighlight', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
physicalKeyboardHighlight: true
@@ -68,7 +66,7 @@ it('PhysicalKeyboard keyup will be handled with physicalKeyboardHighlight', () =
});
it('PhysicalKeyboard keyup will be handle special buttons', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
physicalKeyboardHighlight: true
@@ -84,7 +82,7 @@ it('PhysicalKeyboard keyup will be handle special buttons', () => {
});
it('PhysicalKeyboard keyup will not style non-existent buttons', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
physicalKeyboardHighlight: true,
@@ -101,7 +99,7 @@ it('PhysicalKeyboard keyup will not style non-existent buttons', () => {
});
it('PhysicalKeyboard will work with F1-F12 keys', () => {
testUtil.setDOM();
setDOM();
new Keyboard({
physicalKeyboardHighlight: true,
src/lib/services/tests/Utilities.test.js
+158 -64
View File
@@ -1,10 +1,8 @@
import Keyboard from '../../components/Keyboard';
import TestUtility from '../../../utils/TestUtility';
const testUtil = new TestUtility();
import { setDOM, clearDOM, testLayoutFctButtons } from '../../../utils/TestUtility';
it('Keyboard mergeDisplay will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
mergeDisplay: true,
@@ -17,17 +15,17 @@ it('Keyboard mergeDisplay will work', () => {
});
it('Keyboard function buttons will work', () => {
testUtil.setDOM();
setDOM();
new Keyboard();
testUtil.testLayoutFctButtons((fctBtnCount, fctBtnHasOnclickCount) => {
testLayoutFctButtons((fctBtnCount, fctBtnHasOnclickCount) => {
expect(fctBtnCount).toBe(fctBtnHasOnclickCount);
});
});
it('Keyboard {bksp} button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -37,7 +35,7 @@ it('Keyboard {bksp} button will work', () => {
});
it('Keyboard {space} button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -47,7 +45,7 @@ it('Keyboard {space} button will work', () => {
});
it('Keyboard {tab} button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -57,7 +55,7 @@ it('Keyboard {tab} button will work', () => {
});
it('Keyboard {tab} button will work with tabCharOnTab:false', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
tabCharOnTab: false
@@ -69,7 +67,7 @@ it('Keyboard {tab} button will work with tabCharOnTab:false', () => {
});
it('Keyboard {enter} button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -79,7 +77,7 @@ it('Keyboard {enter} button will work', () => {
});
it('Keyboard {enter} button will work with newLineOnEnter:true', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
newLineOnEnter: true
@@ -91,7 +89,7 @@ it('Keyboard {enter} button will work with newLineOnEnter:true', () => {
});
it('Keyboard {numpadX} buttons will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -102,7 +100,7 @@ it('Keyboard {numpadX} buttons will work', () => {
});
it('Keyboard {numpaddivide} button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -112,7 +110,7 @@ it('Keyboard {numpaddivide} button will work', () => {
});
it('Keyboard {numpadmultiply} button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -122,7 +120,7 @@ it('Keyboard {numpadmultiply} button will work', () => {
});
it('Keyboard {numpadsubtract} button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -132,7 +130,7 @@ it('Keyboard {numpadsubtract} button will work', () => {
});
it('Keyboard {numpadadd} button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -142,7 +140,7 @@ it('Keyboard {numpadadd} button will work', () => {
});
it('Keyboard {numpadadd} button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -152,7 +150,7 @@ it('Keyboard {numpadadd} button will work', () => {
});
it('Keyboard {numpaddecimal} button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -162,7 +160,7 @@ it('Keyboard {numpaddecimal} button will work', () => {
});
it('Keyboard custom function buttons will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
layout: {
@@ -179,7 +177,7 @@ it('Keyboard custom function buttons will work', () => {
});
it('Keyboard "{" button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -189,7 +187,7 @@ it('Keyboard "{" button will work', () => {
});
it('Keyboard "}" button will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -199,7 +197,7 @@ it('Keyboard "}" button will work', () => {
});
it('Keyboard standard button will affect input', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
@@ -211,42 +209,42 @@ it('Keyboard standard button will affect input', () => {
});
it('Keyboard updateCaretPos will work with minus', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
syncInstanceInputs: true
});
keyboard.caretPosition = 5;
keyboard.setCaretPosition(5);
keyboard.utilities.updateCaretPos(2, true);
expect(keyboard.caretPosition).toBe(3);
});
it('Keyboard updateCaretPos will work with minus', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
keyboard.caretPosition = 5;
keyboard.setCaretPosition(5);
keyboard.utilities.updateCaretPos(2, true);
expect(keyboard.caretPosition).toBe(3);
});
it('Keyboard updateCaretPos will work with plus', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
keyboard.caretPosition = 5;
keyboard.setCaretPosition(5);
keyboard.utilities.updateCaretPos(2);
expect(keyboard.caretPosition).toBe(7);
});
it('Keyboard addStringAt will work with debug', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
debug: true
@@ -258,14 +256,14 @@ it('Keyboard addStringAt will work with debug', () => {
});
it('Keyboard addStringAt will work with position', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
debug: true
});
keyboard.setInput("test");
keyboard.caretPosition = 4;
keyboard.setCaretPosition(5);
keyboard.getButtonElement("q").onclick();
@@ -273,7 +271,7 @@ it('Keyboard addStringAt will work with position', () => {
});
it('Keyboard addStringAt will respect maxLength', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
debug: true,
@@ -281,16 +279,17 @@ it('Keyboard addStringAt will respect maxLength', () => {
});
keyboard.setInput("test");
keyboard.caretPosition = 4;
keyboard.setCaretPosition(4);
keyboard.utilities.handleMaxLength(keyboard.input, "testq")
keyboard.utilities.addStringAt("test", "q", 4);
keyboard.utilities.addStringAt("test", "q", 4, 4);
expect(keyboard.caretPosition).toBe(4);
});
it('Keyboard handleMaxLength will exit out on same updatedInput', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
debug: true
@@ -304,7 +303,7 @@ it('Keyboard handleMaxLength will exit out on same updatedInput', () => {
});
it('Keyboard handleMaxLength will work with object maxLength', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
maxLength: {
@@ -320,7 +319,7 @@ it('Keyboard handleMaxLength will work with object maxLength', () => {
});
it('Keyboard handleMaxLength will work with object maxLength and debug', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
maxLength: {
@@ -337,7 +336,7 @@ it('Keyboard handleMaxLength will work with object maxLength and debug', () => {
});
it('Keyboard handleMaxLength will return false if obj maxLength not reached', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
maxLength: {
@@ -354,7 +353,7 @@ it('Keyboard handleMaxLength will return false if obj maxLength not reached', ()
it('Keyboard handleMaxLength will work without debug', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
maxLength: 4
@@ -369,7 +368,7 @@ it('Keyboard handleMaxLength will work without debug', () => {
it('Keyboard handleMaxLength will work with numeric maxLength', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
maxLength: 3
@@ -383,7 +382,7 @@ it('Keyboard handleMaxLength will work with numeric maxLength', () => {
});
it('Keyboard handleMaxLength wont work with non numeric or object maxLength', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
maxLength: "wrong"
@@ -397,7 +396,7 @@ it('Keyboard handleMaxLength wont work with non numeric or object maxLength', ()
});
it('Keyboard handleMaxLength wont work with non numeric or object maxLength (with debug)', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
maxLength: "wrong",
@@ -412,7 +411,7 @@ it('Keyboard handleMaxLength wont work with non numeric or object maxLength (wit
});
it('Keyboard isMaxLengthReached will work', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
maxLength: 5
@@ -424,70 +423,165 @@ it('Keyboard isMaxLengthReached will work', () => {
});
it('Keyboard removeAt will exit out on caretPosition:0', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
keyboard.setInput("test");
keyboard.caretPosition = 0;
keyboard.setCaretPosition(0);
keyboard.utilities.removeAt(keyboard.getInput(), 0);
expect(keyboard.getInput()).toBe("test");
keyboard.setInput("test");
keyboard.caretPosition = 5;
keyboard.utilities.removeAt(keyboard.getInput(), 0, true);
expect(keyboard.caretPosition).toBe(4);
keyboard.setCaretPosition(5);
keyboard.utilities.removeAt(keyboard.getInput(), 0, 0, true);
expect(keyboard.caretPosition).toBe(5);
});
it('Keyboard removeAt will remove multi-byte unicodes with caretPos>0', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
keyboard.caretPosition = 6;
let output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6);
keyboard.setCaretPosition(6);
let output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6, 6);
expect(output).toBe("test");
keyboard.caretPosition = 6;
output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6, true);
keyboard.setCaretPosition(6);
output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6, 6, true);
expect(keyboard.caretPosition).toBe(4);
});
it('Keyboard removeAt will not remove multi-byte unicodes with caretPos:0', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
let output = keyboard.utilities.removeAt("\uD83D\uDE00");
expect(output).toBeFalsy();
output = keyboard.utilities.removeAt("\uD83D\uDE00", 0, true);
expect(output).toBeFalsy();
output = keyboard.utilities.removeAt("\uD83D\uDE00", 0, 0, true);
expect(output).toBe("\uD83D\uDE00");
});
it('Keyboard removeAt will propagate caretPosition', () => {
clearDOM();
document.body.innerHTML = `
<div class="simple-keyboard"></div>
<div class="keyboard2"></div>
`;
const keyboard = new Keyboard({ useMouseEvents: true });
const keyboard2 = new Keyboard('.keyboard2');
keyboard.input.default = "hello";
keyboard2.input.default = "world"
keyboard.setCaretPosition(1);
expect(keyboard.getCaretPosition()).toBe(1);
expect(keyboard.getCaretPositionEnd()).toBe(1);
keyboard.setCaretPosition(1, 3);
expect(keyboard.getCaretPosition()).toBe(1);
expect(keyboard.getCaretPositionEnd()).toBe(3);
keyboard.getButtonElement('{bksp}').onclick();
expect(keyboard.getCaretPosition()).toBe(1);
expect(keyboard2.getCaretPosition()).toBe(null);
expect(keyboard.getInput()).toBe('hlo');
expect(keyboard.getCaretPositionEnd()).toBe(1);
expect(keyboard2.getCaretPositionEnd()).toBe(null);
});
it('Keyboard removeAt will propagate caretPosition in a syncInstanceInputs setting', () => {
clearDOM();
document.body.innerHTML = `
<div class="simple-keyboard"></div>
<div class="keyboard2"></div>
`;
const keyboard = new Keyboard({ useMouseEvents: true, syncInstanceInputs: true });
const keyboard2 = new Keyboard('.keyboard2');
keyboard.input.default = "hello"
keyboard.setCaretPosition(1);
expect(keyboard.getCaretPosition()).toBe(1);
expect(keyboard.getCaretPositionEnd()).toBe(1);
keyboard.setCaretPosition(1, 3);
expect(keyboard.getCaretPosition()).toBe(1);
expect(keyboard.getCaretPositionEnd()).toBe(3);
keyboard.getButtonElement('{bksp}').onclick();
expect(keyboard.getCaretPosition()).toBe(1);
expect(keyboard2.getCaretPosition()).toBe(1);
expect(keyboard.getInput()).toBe('hlo');
expect(keyboard.getCaretPositionEnd()).toBe(1);
expect(keyboard2.getCaretPositionEnd()).toBe(1);
});
it('Keyboard removeAt will remove regular strings', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard({
debug: true
});
keyboard.caretPosition = 6;
let output = keyboard.utilities.removeAt("testie", 6);
keyboard.setCaretPosition(6);
let output = keyboard.utilities.removeAt("testie", 6, 6);
expect(output).toBe("testi");
keyboard.caretPosition = 6;
output = keyboard.utilities.removeAt("testie", 6, true);
keyboard.setCaretPosition(6);
output = keyboard.utilities.removeAt("testie", 6, 6, true);
expect(keyboard.caretPosition).toBe(5);
});
it('Keyboard removeAt will work with unset or start caretPosition', () => {
setDOM();
const keyboard = new Keyboard({
debug: true
});
let output = keyboard.utilities.removeAt("test");
expect(output).toBe("tes");
output = keyboard.utilities.removeAt("test", null, null);
expect(output).toBe("tes");
output = keyboard.utilities.removeAt("😀", null, null);
expect(output).toBe("");
/**
* Will also work with moveCaret
*/
keyboard.setCaretPosition(3);
output = keyboard.utilities.removeAt("test", null, null, true);
expect(output).toBe("tes");
expect(keyboard.getCaretPosition()).toBe(2);
keyboard.setCaretPosition(2);
output = keyboard.utilities.removeAt("😀", null, null, true);
expect(output).toBe("");
expect(keyboard.getCaretPosition()).toBe(0);
});
it('Keyboard will work with custom (and weird) class', () => {
testUtil.setDOM("my--weird--class");
setDOM("my--weird--class");
const keyboard = new Keyboard(".my--weird--class");
expect(keyboard.keyboardDOMClass).toBe("my--weird--class");
});
it('Keyboard camelCase will work with empty strings', () => {
testUtil.setDOM();
setDOM();
const keyboard = new Keyboard();
expect(keyboard.utilities.camelCase()).toBeFalsy();
});